svgedit
Version:
Powerful SVG-Editor for your browser
1,396 lines (1,371 loc) • 80.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: components/jgraduate/jQuery.jPicker.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: components/jgraduate/jQuery.jPicker.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>/* globals svgEditor */
/**
* @file jPicker (Adapted from version 1.1.6)
*
* jQuery Plugin for Photoshop style color picker
*
* @module jPicker
* @copyright (c) 2010 Christopher T. Tillman
* Digital Magic Productions, Inc. ({@link http://www.digitalmagicpro.com/})
* FREE to use, alter, copy, sell, and especially ENHANCE
* @license MIT
*
* Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
*
* John Dyers' website: {@link http://johndyer.name}
* Color Picker page: {@link http://johndyer.name/photoshop-like-javascript-color-picker/}
*/
/* eslint-disable max-len */
import ColorValuePicker from './ColorValuePicker.js'
import Slider from './Slider.js'
import { findPos, mergeDeep } from '@svgedit/svgcanvas/common/util.js'
/**
* @external Math
*/
/**
* @memberof external:Math
* @param {Float} value
* @param {Float} precision
* @returns {Float}
*/
function toFixedNumeric (value, precision) {
if (precision === undefined) precision = 0
return Math.round(value * (10 ** precision)) / (10 ** precision)
}
/**
* Whether a value is `null` or `undefined`.
* @param {any} val
* @returns {boolean}
*/
const isNullish = (val) => {
return val === null || val === undefined
}
/**
* @function module:jPicker.jPicker
* @param {external:jQuery} $ The jQuery object, {@link external:jQuery.fn.$.fn.jPicker}, {@link external:jQuery.fn.$.fn.jPicker.defaults})
* @returns {external:jQuery}
*/
// const jPicker = function ($) {
/**
* @typedef {PlainObject} module:jPicker.SliderOptions
* @property {external:jQuery|PlainObject} arrow
* @property {string} arrow.image Not in use?
* @property {Float} arrow.width
* @property {Float} arrow.height
* @property {PlainObject} map
* @property {Float} map.width
* @property {Float} map.height
*/
/**
* @typedef {PlainObject} module:jPicker.JPickerInit
* @property {Integer} [a]
* @property {Integer} [b]
* @property {Integer} [g]
* @property {Integer} [h]
* @property {Integer} [r]
* @property {Integer} [s]
* @property {Integer} [v]
* @property {string} [hex]
* @property {string} [ahex]
*/
/**
* @namespace {PlainObject} jPicker
* @memberof external:jQuery
*/
export const jPicker = /** @lends external:jQuery.jPicker */ {
/**
* Array holding references to each active instance of the jPicker control.
* @type {external:jQuery.fn.$.fn.jPicker[]}
*/
List: [],
/**
* Color object - we will be able to assign by any color space type or
* retrieve any color space info.
* We want this public so we can optionally assign new color objects to
* initial values using inputs other than a string hex value (also supported)
* Note: JSDoc didn't document when expressed here as an ES6 Class.
* @namespace
* @class
* @memberof external:jQuery.jPicker
* @param {module:jPicker.JPickerInit} init
* @returns {external:jQuery.jPicker.Color}
*/
Color: function (init) {
const that = this
/**
*
* @param {module:jPicker.Slider} context
* @returns {void}
*/
function fireChangeEvents (context) {
for (let i = 0; i < changeEvents.length; i++) changeEvents[i].call(that, that, context)
}
/**
* @param {string|"ahex"|"hex"|"all"|""|null|void} name String composed of letters "r", "g", "b", "a", "h", "s", and/or "v"
* @param {module:jPicker.RGBA|module:jPicker.JPickerInit|string} [value]
* @param {external:jQuery.jPicker.Color} context
* @returns {module:jPicker.JPickerInit|string|null|void}
*/
function val (name, value, context) {
// Kind of ugly
const set = Boolean(value)
if (set && value.ahex === '') value.ahex = '00000000'
if (!set) {
let ret
if (isNullish(name) || name === '') name = 'all'
if (isNullish(r)) return null
switch (name.toLowerCase()) {
case 'ahex': return ColorMethods.rgbaToHex({ r, g, b, a })
case 'hex': return val('ahex').substring(0, 6)
case 'all': return {
r,
g,
b,
a,
h,
s,
v,
hex: val.call(that, 'hex'),
ahex: val.call(that, 'ahex')
}
default: {
ret = {}
const nameLength = name.length;
[...name].forEach((ch) => {
switch (ch) {
case 'r':
if (nameLength === 1) ret = r
else ret.r = r
break
case 'g':
if (nameLength === 1) ret = g
else ret.g = g
break
case 'b':
if (nameLength === 1) ret = b
else ret.b = b
break
case 'a':
if (nameLength === 1) ret = a
else ret.a = a
break
case 'h':
if (nameLength === 1) ret = h
else ret.h = h
break
case 's':
if (nameLength === 1) ret = s
else ret.s = s
break
case 'v':
if (nameLength === 1) ret = v
else ret.v = v
break
}
})
}
}
return typeof ret === 'object' && !Object.keys(ret).length
? val.call(that, 'all')
: ret
}
if (!isNullish(context) && context === that) return undefined
if (isNullish(name)) name = ''
let changed = false
if (isNullish(value)) {
if (!isNullish(r)) {
r = null
changed = true
}
if (!isNullish(g)) {
g = null
changed = true
}
if (!isNullish(b)) {
b = null
changed = true
}
if (!isNullish(a)) {
a = null
changed = true
}
if (!isNullish(h)) {
h = null
changed = true
}
if (!isNullish(s)) {
s = null
changed = true
}
if (!isNullish(v)) {
v = null
changed = true
}
changed && fireChangeEvents.call(that, context || that)
return undefined
}
switch (name.toLowerCase()) {
case 'ahex':
case 'hex': {
const ret = ColorMethods.hexToRgba((value && (value.ahex || value.hex)) || value || 'none')
val.call(that, 'rgba', {
r: ret.r,
g: ret.g,
b: ret.b,
a: name === 'ahex'
? ret.a
: !isNullish(a)
? a
: 255
}, context)
break
} default: {
if (value && (!isNullish(value.ahex) || !isNullish(value.hex))) {
val.call(that, 'ahex', value.ahex || value.hex || '00000000', context)
return undefined
}
const newV = {}
let rgb = false; let hsv = false
if (value.r !== undefined && !name.includes('r')) name += 'r'
if (value.g !== undefined && !name.includes('g')) name += 'g'
if (value.b !== undefined && !name.includes('b')) name += 'b'
if (value.a !== undefined && !name.includes('a')) name += 'a'
if (value.h !== undefined && !name.includes('h')) name += 'h'
if (value.s !== undefined && !name.includes('s')) name += 's'
if (value.v !== undefined && !name.includes('v')) name += 'v';
[...name].forEach((ch) => {
switch (ch) {
case 'r':
if (hsv) return
rgb = true
newV.r = (value.r && value.r | 0) || (value | 0) || 0
if (newV.r < 0) newV.r = 0
else if (newV.r > 255) newV.r = 255
if (r !== newV.r) {
({ r } = newV)
changed = true
}
break
case 'g':
if (hsv) return
rgb = true
newV.g = (value && value.g && value.g | 0) || (value && value | 0) || 0
if (newV.g < 0) newV.g = 0
else if (newV.g > 255) newV.g = 255
if (g !== newV.g) {
({ g } = newV)
changed = true
}
break
case 'b':
if (hsv) return
rgb = true
newV.b = (value && value.b && value.b | 0) || (value && value | 0) || 0
if (newV.b < 0) newV.b = 0
else if (newV.b > 255) newV.b = 255
if (b !== newV.b) {
({ b } = newV)
changed = true
}
break
case 'a':
newV.a = value && !isNullish(value.a) ? value.a | 0 : value | 0
if (newV.a < 0) newV.a = 0
else if (newV.a > 255) newV.a = 255
if (a !== newV.a) {
({ a } = newV)
changed = true
}
break
case 'h':
if (rgb) return
hsv = true
newV.h = (value && value.h && value.h | 0) || (value && value | 0) || 0
if (newV.h < 0) newV.h = 0
else if (newV.h > 360) newV.h = 360
if (h !== newV.h) {
({ h } = newV)
changed = true
}
break
case 's':
if (rgb) return
hsv = true
newV.s = !isNullish(value.s) ? value.s | 0 : value | 0
if (newV.s < 0) newV.s = 0
else if (newV.s > 100) newV.s = 100
if (s !== newV.s) {
({ s } = newV)
changed = true
}
break
case 'v':
if (rgb) return
hsv = true
newV.v = !isNullish(value.v) ? value.v | 0 : value | 0
if (newV.v < 0) newV.v = 0
else if (newV.v > 100) newV.v = 100
if (v !== newV.v) {
({ v } = newV)
changed = true
}
break
}
})
if (changed) {
if (rgb) {
r = r || 0
g = g || 0
b = b || 0
const ret = ColorMethods.rgbToHsv({ r, g, b });
({ h, s, v } = ret)
} else if (hsv) {
h = h || 0
s = !isNullish(s) ? s : 100
v = !isNullish(v) ? v : 100
const ret = ColorMethods.hsvToRgb({ h, s, v });
({ r, g, b } = ret)
}
a = !isNullish(a) ? a : 255
fireChangeEvents.call(that, context || that)
}
break
}
}
return undefined
}
/**
* @param {GenericCallback} callback
* @returns {void}
*/
function bind (callback) {
if (typeof callback === 'function') changeEvents.push(callback)
}
/**
* @param {GenericCallback} callback
* @returns {void}
*/
function unbind (callback) {
if (typeof callback !== 'function') return
let i
while ((i = changeEvents.includes(callback))) {
changeEvents.splice(i, 1)
}
}
/**
* Unset `changeEvents`
* @returns {void}
*/
function destroy () {
changeEvents = null
}
let r; let g; let b; let a; let h; let s; let v; let changeEvents = []
Object.assign(that, {
// public properties and methods
val,
bind,
unbind,
destroy
})
if (init) {
if (!isNullish(init.ahex)) {
val('ahex', init)
} else if (!isNullish(init.hex)) {
val(
(!isNullish(init.a) ? 'a' : '') + 'hex',
!isNullish(init.a)
? { ahex: init.hex + ColorMethods.intToHex(init.a) }
: init
)
} else if (!isNullish(init.r) && !isNullish(init.g) && !isNullish(init.b)) {
val('rgb' + (!isNullish(init.a) ? 'a' : ''), init)
} else if (!isNullish(init.h) && !isNullish(init.s) && !isNullish(init.v)) {
val('hsv' + (!isNullish(init.a) ? 'a' : ''), init)
}
}
},
/**
* Color conversion methods - make public to give use to external scripts.
* @namespace
*/
ColorMethods: {
/**
* @typedef {PlainObject} module:jPicker.RGBA
* @property {Integer} r
* @property {Integer} g
* @property {Integer} b
* @property {Integer} a
*/
/**
* @typedef {PlainObject} module:jPicker.RGB
* @property {Integer} r
* @property {Integer} g
* @property {Integer} b
*/
/**
* @param {string} hex
* @returns {module:jPicker.RGBA}
*/
hexToRgba (hex) {
if (hex === '' || hex === 'none') return { r: null, g: null, b: null, a: null }
hex = this.validateHex(hex)
let r = '00'; let g = '00'; let b = '00'; let a = '255'
if (hex.length === 6) hex += 'ff'
if (hex.length > 6) {
r = hex.substring(0, 2)
g = hex.substring(2, 4)
b = hex.substring(4, 6)
a = hex.substring(6, hex.length)
} else {
if (hex.length > 4) {
r = hex.substring(4, hex.length)
hex = hex.substring(0, 4)
}
if (hex.length > 2) {
g = hex.substring(2, hex.length)
hex = hex.substring(0, 2)
}
if (hex.length > 0) b = hex.substring(0, hex.length)
}
return {
r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a)
}
},
/**
* @param {string} hex
* @returns {string}
*/
validateHex (hex) {
// if (typeof hex === 'object') return '';
hex = hex.toLowerCase().replace(/[^a-f\d]/g, '')
if (hex.length > 8) hex = hex.substring(0, 8)
return hex
},
/**
* @param {module:jPicker.RGBA} rgba
* @returns {string}
*/
rgbaToHex (rgba) {
return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a)
},
/**
* @param {Integer} dec
* @returns {string}
*/
intToHex (dec) {
let result = (dec | 0).toString(16)
if (result.length === 1) result = ('0' + result)
return result.toLowerCase()
},
/**
* @param {string} hex
* @returns {Integer}
*/
hexToInt (hex) {
return Number.parseInt(hex, 16)
},
/**
* @typedef {PlainObject} module:jPicker.HSV
* @property {Integer} h
* @property {Integer} s
* @property {Integer} v
*/
/**
* @param {module:jPicker.RGB} rgb
* @returns {module:jPicker.HSV}
*/
rgbToHsv (rgb) {
const r = rgb.r / 255; const g = rgb.g / 255; const b = rgb.b / 255; const hsv = { h: 0, s: 0, v: 0 }
let min = 0; let max = 0
if (r >= g && r >= b) {
max = r
min = g > b ? b : g
} else if (g >= b && g >= r) {
max = g
min = r > b ? b : r
} else {
max = b
min = g > r ? r : g
}
hsv.v = max
hsv.s = max ? (max - min) / max : 0
let delta
if (!hsv.s) hsv.h = 0
else {
delta = max - min
if (r === max) hsv.h = (g - b) / delta
else if (g === max) hsv.h = 2 + (b - r) / delta
else hsv.h = 4 + (r - g) / delta
hsv.h = Number.parseInt(hsv.h * 60)
if (hsv.h < 0) hsv.h += 360
}
hsv.s = (hsv.s * 100) | 0
hsv.v = (hsv.v * 100) | 0
return hsv
},
/**
* @param {module:jPicker.HSV} hsv
* @returns {module:jPicker.RGB}
*/
hsvToRgb (hsv) {
const rgb = { r: 0, g: 0, b: 0, a: 100 }
let { h, s, v } = hsv
if (s === 0) {
if (v === 0) rgb.r = rgb.g = rgb.b = 0
else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0
} else {
if (h === 360) h = 0
h /= 60
s /= 100
v /= 100
const i = h | 0
const f = h - i
const p = v * (1 - s)
const q = v * (1 - (s * f))
const t = v * (1 - (s * (1 - f)))
switch (i) {
case 0:
rgb.r = v
rgb.g = t
rgb.b = p
break
case 1:
rgb.r = q
rgb.g = v
rgb.b = p
break
case 2:
rgb.r = p
rgb.g = v
rgb.b = t
break
case 3:
rgb.r = p
rgb.g = q
rgb.b = v
break
case 4:
rgb.r = t
rgb.g = p
rgb.b = v
break
case 5:
rgb.r = v
rgb.g = p
rgb.b = q
break
}
rgb.r = (rgb.r * 255) | 0
rgb.g = (rgb.g * 255) | 0
rgb.b = (rgb.b * 255) | 0
}
return rgb
}
}
}
const { Color, List, ColorMethods } = jPicker // local copies for YUI compressor
/**
* @function external:jQuery.fn.jPicker
* @see {@link external:jQuery.fn.$.fn.jPicker}
*/
/**
* Will be bound to active {@link jQuery.jPicker.Color}.
* @callback module:jPicker.LiveCallback
* @param {external:jQuery} ui
* @param {Element} context
* @returns {void}
*/
/**
* @callback module:jPicker.CommitCallback
* @param {external:jQuery.jPicker.Color} activeColor
* @param {external:jQuery} okButton
* @returns {void} Return value not used.
*/
/**
* @callback module:jPicker.CancelCallback
* @param {external:jQuery.jPicker.Color} activeColor
* @param {external:jQuery} cancelButton
* @returns {void} Return value not used.
*/
/**
* While it would seem this should specify the name `jPicker` for JSDoc, that doesn't
* get us treated as a function as well as a namespace (even with `@function name`),
* so we use an approach to add a redundant `$.fn.` in the name.
* @namespace
* @memberof external:jQuery.fn
* @param {any} elem
* @param {external:jQuery.fn.jPickerOptions} options
* @param {module:jPicker.CommitCallback} [commitCallback]
* @param {module:jPicker.LiveCallback} [liveCallback]
* @param {module:jPicker.CancelCallback} [cancelCallback]
* @returns {void}
*/
export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback, i18next) {
let sets = mergeDeep({}, jPickerDefaults) // local copies for YUI compressor
sets = mergeDeep(sets, options)
const that = elem
const settings = sets
if (that.nodeName.toLowerCase() === 'input') { // Add color picker icon if binding to an input element and bind the events to the input
Object.assign(settings, {
window: {
bindToInput: true,
expandable: true,
input: that
}
})
if (that.value === '') {
settings.color.active = new Color({ hex: null })
settings.color.current = new Color({ hex: null })
} else if (ColorMethods.validateHex(that.value)) {
settings.color.active = new Color({ hex: that.value, a: settings.color.active.val('a') })
settings.color.current = new Color({ hex: that.value, a: settings.color.active.val('a') })
}
}
if (settings.window.expandable) {
const content = document.createElement('span')
content.classList.add('jPicker')
content.innerHTML = `<span class="Icon" id="jq-ae-Icon">
<span class="Color" id="jq-ae-Color">&nbsp;</span>
<span class="Alpha" id="jq-ae-Alpha">&nbsp;</span>
<span class="Image" id="jq-ae-Image" title="${i18next.t('config.open_color_picker')}">&nbsp;</span>
<span class="Container" id="Container">&nbsp;</span>
</span>`
that.insertAdjacentElement('afterend', content)
} else {
settings.window.liveUpdate = false // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
}
const isLessThanIE7 = Number.parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters // needed to run the AlphaImageLoader function for IE6
// set color mode and update visuals for the new color mode
/**
*
* @param {"h"|"s"|"v"|"r"|"g"|"b"|"a"} colorMode
* @throws {Error} Invalid mode
* @returns {void}
*/
function setColorMode (colorMode) {
const { active } = color // local copies for YUI compressor
// {clientPath} = images,
const hex = active.val('hex')
let rgbMap; let rgbBar
settings.color.mode = colorMode
switch (colorMode) {
case 'h':
setTimeout(function () {
setBG.call(that, colorMapDiv, 'transparent')
setImgLoc.call(that, colorMapL1, 0)
setAlpha.call(that, colorMapL1, 100)
setImgLoc.call(that, colorMapL2, 260)
setAlpha.call(that, colorMapL2, 100)
setBG.call(that, colorBarDiv, 'transparent')
setImgLoc.call(that, colorBarL1, 0)
setAlpha.call(that, colorBarL1, 100)
setImgLoc.call(that, colorBarL2, 260)
setAlpha.call(that, colorBarL2, 100)
setImgLoc.call(that, colorBarL3, 260)
setAlpha.call(that, colorBarL3, 100)
setImgLoc.call(that, colorBarL4, 260)
setAlpha.call(that, colorBarL4, 100)
setImgLoc.call(that, colorBarL6, 260)
setAlpha.call(that, colorBarL6, 100)
}, 0)
colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 })
colorBar.range('rangeY', { minY: 0, maxY: 360 })
if (isNullish(active.val('ahex'))) break
colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap)
colorBar.val('y', 360 - active.val('h'), colorBar)
break
case 's':
setTimeout(function () {
setBG.call(that, colorMapDiv, 'transparent')
setImgLoc.call(that, colorMapL1, -260)
setImgLoc.call(that, colorMapL2, -520)
setImgLoc.call(that, colorBarL1, -260)
setImgLoc.call(that, colorBarL2, -520)
setImgLoc.call(that, colorBarL6, 260)
setAlpha.call(that, colorBarL6, 100)
}, 0)
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 })
colorBar.range('rangeY', { minY: 0, maxY: 100 })
if (isNullish(active.val('ahex'))) break
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap)
colorBar.val('y', 100 - active.val('s'), colorBar)
break
case 'v':
setTimeout(function () {
setBG.call(that, colorMapDiv, '000000')
setImgLoc.call(that, colorMapL1, -780)
setImgLoc.call(that, colorMapL2, 260)
setBG.call(that, colorBarDiv, hex)
setImgLoc.call(that, colorBarL1, -520)
setImgLoc.call(that, colorBarL2, 260)
setAlpha.call(that, colorBarL2, 100)
setImgLoc.call(that, colorBarL6, 260)
setAlpha.call(that, colorBarL6, 100)
}, 0)
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 })
colorBar.range('rangeY', { minY: 0, maxY: 100 })
if (isNullish(active.val('ahex'))) break
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap)
colorBar.val('y', 100 - active.val('v'), colorBar)
break
case 'r':
rgbMap = -1040
rgbBar = -780
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 })
colorBar.range('rangeY', { minY: 0, maxY: 255 })
if (isNullish(active.val('ahex'))) break
colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap)
colorBar.val('y', 255 - active.val('r'), colorBar)
break
case 'g':
rgbMap = -1560
rgbBar = -1820
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 })
colorBar.range('rangeY', { minY: 0, maxY: 255 })
if (isNullish(active.val('ahex'))) break
colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap)
colorBar.val('y', 255 - active.val('g'), colorBar)
break
case 'b':
rgbMap = -2080
rgbBar = -2860
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 })
colorBar.range('rangeY', { minY: 0, maxY: 255 })
if (isNullish(active.val('ahex'))) break
colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap)
colorBar.val('y', 255 - active.val('b'), colorBar)
break
case 'a':
setTimeout(function () {
setBG.call(that, colorMapDiv, 'transparent')
setImgLoc.call(that, colorMapL1, -260)
setImgLoc.call(that, colorMapL2, -520)
setImgLoc.call(that, colorBarL1, 260)
setImgLoc.call(that, colorBarL2, 260)
setAlpha.call(that, colorBarL2, 100)
setImgLoc.call(that, colorBarL6, 0)
setAlpha.call(that, colorBarL6, 100)
}, 0)
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 })
colorBar.range('rangeY', { minY: 0, maxY: 255 })
if (isNullish(active.val('ahex'))) break
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap)
colorBar.val('y', 255 - active.val('a'), colorBar)
break
default:
throw new Error('Invalid Mode')
}
switch (colorMode) {
case 'h':
break
case 's':
case 'v':
case 'a':
setTimeout(function () {
setAlpha.call(that, colorMapL1, 100)
setAlpha.call(that, colorBarL1, 100)
setImgLoc.call(that, colorBarL3, 260)
setAlpha.call(that, colorBarL3, 100)
setImgLoc.call(that, colorBarL4, 260)
setAlpha.call(that, colorBarL4, 100)
}, 0)
break
case 'r':
case 'g':
case 'b':
setTimeout(function () {
setBG.call(that, colorMapDiv, 'transparent')
setBG.call(that, colorBarDiv, 'transparent')
setAlpha.call(that, colorBarL1, 100)
setAlpha.call(that, colorMapL1, 100)
setImgLoc.call(that, colorMapL1, rgbMap)
setImgLoc.call(that, colorMapL2, rgbMap - 260)
setImgLoc.call(that, colorBarL1, rgbBar - 780)
setImgLoc.call(that, colorBarL2, rgbBar - 520)
setImgLoc.call(that, colorBarL3, rgbBar)
setImgLoc.call(that, colorBarL4, rgbBar - 260)
setImgLoc.call(that, colorBarL6, 260)
setAlpha.call(that, colorBarL6, 100)
}, 0)
break
}
if (isNullish(active.val('ahex'))) return
activeColorChanged.call(that, active)
}
/**
* Update color when user changes text values.
* @param {external:jQuery} ui
* @param {?module:jPicker.Slider} context
* @returns {void}
*/
function activeColorChanged (ui, context) {
if (isNullish(context) || (context !== colorBar && context !== colorMap)) positionMapAndBarArrows.call(that, ui, context)
setTimeout(function () {
updatePreview.call(that, ui)
updateMapVisuals.call(that, ui)
updateBarVisuals.call(that, ui)
}, 0)
}
/**
* User has dragged the ColorMap pointer.
* @param {external:jQuery} ui
* @param {?module:jPicker.Slider} context
* @returns {void}
*/
function mapValueChanged (ui, context) {
const { active } = color
if (context !== colorMap && isNullish(active.val())) return
const xy = ui.val('all')
switch (settings.color.mode) {
case 'h':
active.val('sv', { s: xy.x, v: 100 - xy.y }, context)
break
case 's':
case 'a':
active.val('hv', { h: xy.x, v: 100 - xy.y }, context)
break
case 'v':
active.val('hs', { h: xy.x, s: 100 - xy.y }, context)
break
case 'r':
active.val('gb', { g: 255 - xy.y, b: xy.x }, context)
break
case 'g':
active.val('rb', { r: 255 - xy.y, b: xy.x }, context)
break
case 'b':
active.val('rg', { r: xy.x, g: 255 - xy.y }, context)
break
}
}
/**
* User has dragged the ColorBar slider.
* @param {external:jQuery} ui
* @param {?module:jPicker.Slider} context
* @returns {void}
*/
function colorBarValueChanged (ui, context) {
const { active } = color
if (context !== colorBar && isNullish(active.val())) return
switch (settings.color.mode) {
case 'h':
active.val('h', { h: 360 - ui.val('y') }, context)
break
case 's':
active.val('s', { s: 100 - ui.val('y') }, context)
break
case 'v':
active.val('v', { v: 100 - ui.val('y') }, context)
break
case 'r':
active.val('r', { r: 255 - ui.val('y') }, context)
break
case 'g':
active.val('g', { g: 255 - ui.val('y') }, context)
break
case 'b':
active.val('b', { b: 255 - ui.val('y') }, context)
break
case 'a':
active.val('a', 255 - ui.val('y'), context)
break
}
}
/**
* Position map and bar arrows to match current color.
* @param {external:jQuery} ui
* @param {?module:jPicker.Slider} context
* @returns {void}
*/
function positionMapAndBarArrows (ui, context) {
if (context !== colorMap) {
switch (settings.color.mode) {
case 'h': {
const sv = ui.val('sv')
colorMap.val('xy', { x: !isNullish(sv) ? sv.s : 100, y: 100 - (!isNullish(sv) ? sv.v : 100) }, context)
break
} case 's':
// Fall through
case 'a': {
const hv = ui.val('hv')
colorMap.val('xy', { x: (hv && hv.h) || 0, y: 100 - (!isNullish(hv) ? hv.v : 100) }, context)
break
} case 'v': {
const hs = ui.val('hs')
colorMap.val('xy', { x: (hs && hs.h) || 0, y: 100 - (!isNullish(hs) ? hs.s : 100) }, context)
break
} case 'r': {
const bg = ui.val('bg')
colorMap.val('xy', { x: (bg && bg.b) || 0, y: 255 - ((bg && bg.g) || 0) }, context)
break
} case 'g': {
const br = ui.val('br')
colorMap.val('xy', { x: (br && br.b) || 0, y: 255 - ((br && br.r) || 0) }, context)
break
} case 'b': {
const rg = ui.val('rg')
colorMap.val('xy', { x: (rg && rg.r) || 0, y: 255 - ((rg && rg.g) || 0) }, context)
break
}
}
}
if (context !== colorBar) {
switch (settings.color.mode) {
case 'h':
colorBar.val('y', 360 - (ui.val('h') || 0), context)
break
case 's': {
const s = ui.val('s')
colorBar.val('y', 100 - (!isNullish(s) ? s : 100), context)
break
} case 'v': {
const v = ui.val('v')
colorBar.val('y', 100 - (!isNullish(v) ? v : 100), context)
break
} case 'r':
colorBar.val('y', 255 - (ui.val('r') || 0), context)
break
case 'g':
colorBar.val('y', 255 - (ui.val('g') || 0), context)
break
case 'b':
colorBar.val('y', 255 - (ui.val('b') || 0), context)
break
case 'a': {
const a = ui.val('a')
colorBar.val('y', 255 - (!isNullish(a) ? a : 255), context)
break
}
}
}
}
/**
* @param {external:jQuery} ui
* @returns {void}
*/
function updatePreview (ui) {
try {
const all = ui.val('all')
activePreview.style.backgroundColor = (all && '#' + all.hex) || 'transparent'
setAlpha.call(that, activePreview, (all && toFixedNumeric((all.a * 100) / 255, 4)) || 0)
} catch (e) { /* empty fn */ }
}
/**
* @param {external:jQuery} ui
* @returns {void}
*/
function updateMapVisuals (ui) {
switch (settings.color.mode) {
case 'h':
setBG.call(that, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex'))
break
case 's':
case 'a': {
const s = ui.val('s')
setAlpha.call(that, colorMapL2, 100 - (!isNullish(s) ? s : 100))
break
} case 'v': {
const v = ui.val('v')
setAlpha.call(that, colorMapL1, !isNullish(v) ? v : 100)
break
} case 'r':
setAlpha.call(that, colorMapL2, toFixedNumeric((ui.val('r') || 0) / 255 * 100, 4))
break
case 'g':
setAlpha.call(that, colorMapL2, toFixedNumeric((ui.val('g') || 0) / 255 * 100, 4))
break
case 'b':
setAlpha.call(that, colorMapL2, toFixedNumeric((ui.val('b') || 0) / 255 * 100))
break
}
const a = ui.val('a')
setAlpha.call(that, colorMapL3, toFixedNumeric(((255 - (a || 0)) * 100) / 255, 4))
}
/**
* @param {external:jQuery} ui
* @returns {void}
*/
function updateBarVisuals (ui) {
switch (settings.color.mode) {
case 'h': {
const a = ui.val('a')
setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - (a || 0)) * 100) / 255, 4))
break
} case 's': {
const hva = ui.val('hva')
const saturatedColor = new Color({ h: (hva && hva.h) || 0, s: 100, v: !isNullish(hva) ? hva.v : 100 })
setBG.call(that, colorBarDiv, saturatedColor.val('hex'))
setAlpha.call(that, colorBarL2, 100 - (!isNullish(hva) ? hva.v : 100))
setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((hva && hva.a) || 0)) * 100) / 255, 4))
break
} case 'v': {
const hsa = ui.val('hsa')
const valueColor = new Color({ h: (hsa && hsa.h) || 0, s: !isNullish(hsa) ? hsa.s : 100, v: 100 })
setBG.call(that, colorBarDiv, valueColor.val('hex'))
setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((hsa && hsa.a) || 0)) * 100) / 255, 4))
break
} case 'r':
case 'g':
case 'b': {
const rgba = ui.val('rgba')
let hValue = 0; let vValue = 0
if (settings.color.mode === 'r') {
hValue = (rgba && rgba.b) || 0
vValue = (rgba && rgba.g) || 0
} else if (settings.color.mode === 'g') {
hValue = (rgba && rgba.b) || 0
vValue = (rgba && rgba.r) || 0
} else if (settings.color.mode === 'b') {
hValue = (rgba && rgba.r) || 0
vValue = (rgba && rgba.g) || 0
}
const middle = vValue > hValue ? hValue : vValue
setAlpha.call(that, colorBarL2, hValue > vValue ? toFixedNumeric(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0)
setAlpha.call(that, colorBarL3, vValue > hValue ? toFixedNumeric(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0)
setAlpha.call(that, colorBarL4, toFixedNumeric((middle / 255) * 100, 4))
setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((rgba && rgba.a) || 0)) * 100) / 255, 4))
break
} case 'a': {
const a = ui.val('a')
setBG.call(that, colorBarDiv, ui.val('hex') || '000000')
setAlpha.call(that, colorBarL5, !isNullish(a) ? 0 : 100)
setAlpha.call(that, colorBarL6, !isNullish(a) ? 100 : 0)
break
}
}
}
/**
* @param {external:jQuery} el
* @param {string} [c="transparent"]
* @returns {void}
*/
function setBG (el, c) {
el.style.backgroundColor = (c && c.length === 6 && '#' + c) || 'transparent'
}
/**
* @param {external:jQuery} img
* @param {string} src The image source
* @returns {void}
*/
function setImg (img, src) {
if (isLessThanIE7 && (src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png'))) {
img.setAttribute('pngSrc', src)
img.style.backgroundImage = 'none'
img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'
} else img.style.backgroundImage = 'url(\'' + src + '\')'
}
/**
* @param {external:jQuery} img
* @param {Float} y
* @returns {void}
*/
function setImgLoc (img, y) {
img.style.top = y + 'px'
}
/**
* @param {external:jQuery} obj
* @param {Float} alpha
* @returns {void}
*/
function setAlpha (obj, alpha) {
obj.style.visibility = (alpha > 0) ? 'visible' : 'hidden'
if (alpha > 0 && alpha < 100) {
if (isLessThanIE7) {
const src = obj.getAttribute('pngSrc')
if (!isNullish(src) && (
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
)) {
obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
'\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'
} else obj.style.opacity = toFixedNumeric(alpha / 100, 4)
} else obj.style.opacity = toFixedNumeric(alpha / 100, 4)
} else if (alpha === 0 || alpha === 100) {
if (isLessThanIE7) {
const src = obj.getAttribute('pngSrc')
if (!isNullish(src) && (
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
)) {
obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
'\', sizingMethod=\'scale\')'
} else obj.style.opacity = ''
} else obj.style.opacity = ''
}
}
/**
* Revert color to original color when opened.
* @returns {void}
*/
function revertColor () {
color.active.val('ahex', color.current.val('ahex'))
}
/**
* Commit the color changes.
* @returns {void}
*/
function commitColor () {
color.current.val('ahex', color.active.val('ahex'))
}
/**
* @param {Event} e
* @returns {void}
*/
function radioClicked (e) {
const rChecks = that.querySelectorAll('input[type="radio"]:checked')
for (const rCheck of rChecks) {
if (rCheck.value !== e.target.value) {
rCheck.checked = false
}
}
setColorMode.call(that, e.target.value)
}
/**
*
* @returns {void}
*/
function currentClicked () {
revertColor.call(that)
}
/**
*
* @returns {void}
*/
function cancelClicked () {
revertColor.call(that)
settings.window.expandable && hide.call(that)
typeof cancelCallback === 'function' && cancelCallback.call(that, color.active, cancelButton)
}
/**
*
* @returns {void}
*/
function okClicked () {
commitColor.call(that)
settings.window.expandable && hide.call(that)
typeof commitCallback === 'function' && commitCallback.call(that, color.active, okButton)
}
/**
*
* @returns {void}
*/
function iconImageClicked () {
show.call(that)
}
/**
* @param {external:jQuery} ui
* @returns {void}
*/
function currentColorChanged (ui) {
const hex = ui.val('hex')
currentPreview.style.backgroundColor = (hex && '#' + hex) || 'transparent'
setAlpha.call(that, currentPreview, toFixedNumeric(((ui.val('a') || 0) * 100) / 255, 4))
}
/**
* @param {external:jQuery} ui
* @returns {void}
*/
function expandableColorChanged (ui) {
const hex = ui.val('hex')
const va = ui.val('va')
iconColor.style.backgroundColor = (hex && '#' + hex) || 'transparent'
setAlpha.call(that, iconAlpha, toFixedNumeric(((255 - ((va && va.a) || 0)) * 100) / 255, 4))
if (settings.window.bindToInput && settings.window.updateInputColor) {
settings.window.input.style.backgroundColor = (hex && '#' + hex) || 'transparent'
settings.window.input.style.color = isNullish(va) || va.v > 75 ? '#000000' : '#ffffff'
}
}
/**
* @param {Event} e
* @returns {void}
*/
function moveBarMouseDown (e) {
elementStartX = Number.parseInt(container.style.left)
elementStartY = Number.parseInt(container.style.top)
pageStartX = e.pageX
pageStartY = e.pageY
// bind events to document to move window - we will unbind these on mouseup
document.addEventListener('mousemove', documentMouseMove)
document.addEventListener('mouseup', documentMouseUp)
e.preventDefault() // prevent attempted dragging of the column
}
/**
* @param {Event} e
* @returns {false}
*/
function documentMouseMove (e) {
container.style.left = elementStartX - (pageStartX - e.pageX) + 'px'
container.style.top = elementStartY - (pageStartY - e.pageY) + 'px'
if (settings.window.expandable) {
const prev = container.previousElementSibling
prev.style.left = container.style.left
prev.style.top = container.style.top
}
e.stopPropagation()
e.preventDefault()
return false
}
/**
* @param {Event} e
* @returns {false}
*/
function documentMouseUp (e) {
document.removeEventListener('mousemove', documentMouseMove)
document.removeEventListener('mouseup', documentMouseUp)
e.stopPropagation()
e.preventDefault()
return false
}
/**
* @param {Event} e
* @returns {false}
*/
function quickPickClicked (e) {
e.preventDefault()
e.stopPropagation()
color.active.val('ahex', e.target.getAttribute('title') || null, e.target)
return false
}
/**
*
* @returns {void}
*/
function show () {
color.current.val('ahex', color.active.val('ahex'))
/**
*
* @returns {void}
*/
function attachIFrame () {
if (!settings.window.expandable) return
const table = container.querySelector('#jPicker-table')
container.insertAdjacentElement('beforebegin', document.createElement('iframe'))
const pELem = container.previousElementSibling
pELem.style.width = parseFloat(getComputedStyle(table, null).width.replace('px', ''))
pELem.style.height = parseFloat(getComputedStyle(container, null).height.replace('px', ''))
pELem.style.opacity = 0
pELem.style.position = 'absolute'
pELem.style.left = getComputedStyle(container, null).getPropertyValue('left')
pELem.style.top = getComputedStyle(container, null).getPropertyValue('top')
}
if (settings.window.expandable) {
container.style.zIndex = 20
}
container.style.display = 'block'
attachIFrame()
/* switch (settings.window.effects.type) {
case 'fade':
container.fadeIn(settings.window.effects.speed.show, attachIFrame);
break;
case 'slide':
container.slideDown(settings.window.effects.speed.show, attachIFrame);
break;
case 'show':
default:
container.show(settings.window.effects.speed.show, attachIFrame);
break;
} */
}
/**
*
* @returns {void}
*/
function hide () {
/**
*
* @returns {void}
*/
function removeIFrame () {
if (settings.window.expandable) container.style.zIndex = 10
if (!settings.window.expandable) return
container.prev().remove()
}
container.style.display = 'none'
removeIFrame()
/* switch (settings.window.effects.type) {
case 'fade':
container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
break;
case 'slide':
container.slideUp(settings.window.effects.speed.hide, removeIFrame);
break;
case 'show':
default:
container.hide(settings.window.effects.speed.hide, removeIFrame);
break;
} */
}
/**
*
* @returns {void}
*/
function initialize () {
const nexts = that.nextElementSibling
const win = settings.window
const popup = win.expandable ? nexts.querySelector('#Container') : null
container = win.expandable ? document.createElement('div') : that
container.classList.add('jPicker')
container.classList.add('Container')
if (win.expandable) container.style.display = 'none'
container.onselectstart = function (e) {
if (e.target.nodeName.toLowerCase() !== 'input') return false
return true
}
// inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
// this control really is tabular data, so I believe it is the right move
const all = color.active.val('all')
if (win.alphaPrecision < 0) win.alphaPrecision = 0
else if (win.alphaPrecision > 2) win.alphaPrecision = 2
// Check if table with id 'fill_color' OR 'stroke_color' already exists, then remove it to avoid duplicate
const tableIds = ['fill_color', 'stroke_color']
tableIds.forEach((id) => {
const currTable = document.querySelector('se-colorpicker#' + id).shadowRoot.querySelector('table')
if (currTable) { currTable.remove() }
})
const controlHtml = `<table class="jPicker" id="jPicker-table" cellpadding="0" cellspacing="0">
<tbody>
${win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : ''}
<tr>
<td rowspan="9"><h2 class="Title">${win.title || 'config.jpicker_title'}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1">&nbsp;</span><span class="Map2" id="MMap2">&nbsp;</span><span class="Map3" id="MMap3">&nbsp;</span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td>
<td rowspan="9"><div class="Bar" id="Bar"><span class="Map1" id="Map1">&nbsp;</span><span class="Map2" id="Map2">&nbsp;</span><span class="Map3" id="Map3">&nbsp;</span><span class="Map4" id="Map4">&nbsp;</span><span class="Map5" id="Map5">&nbsp;</span><span class="Map6" id="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td>
<td colspan="2" class="Preview" id="Preview">${i18next.t('config.jpicker_new_color')}<div id="preview-div"><span class="Active" id="Active" title="${i18next.t('config.jpicker_tooltip_colors_new_color')}">&nbsp;</span><span class="Current" id="Current" title="${i18next.t('config.jpicker_tooltip_colors_current_color')}">&nbsp;</span></div>${i18next.t('config.jpicker_current_color')}</td>
<td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="${i18next.t('common.ok')}" title="${i18next.t('config.jpicker_tooltip_buttons_ok')}"/><input type="button" class="Cancel" id="Cancel" value="${i18next.t('common.cancel')}" title="${i18next.t('config.jpicker_tooltip_buttons_cancel')}"/><hr/><div class="Grid" id="Grid"></div></td>
</tr>
<tr class="Hue">
<td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_hue_radio')}"><input type="radio" value="h"${settings.color.mode === 'h' ? ' checked="checked"' : ''}/>H:</label></td>
<td class="Text"><input type="text" maxlength="3" value="${all ? all.h : ''}" title="${i18next.t('config.jpicker_tooltip_hue_textbox')}"/>&nbsp;&deg;</td>
</tr>
<tr class="Saturation">
<td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_saturation_radio')}"><input type="radio" value="s"${settings.color.mode === 's' ? ' checked="checked"' : ''}/>S:</label></td>
<td class="Text"><input type="text" maxlength="3" value="${all ? all.s : ''}" title="${i18next.t('config.jpicker_tooltip_saturation_textbox')}"/>&nbsp;%</td>
</tr>
<tr class="Value">
<td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_value_radio')}"><input type="radio" value="v"${settings.color.mode === 'v' ? ' checked="checked"' : ''}/>V:</label><br/><br/></td>
<td class="Text"><input type="text" maxlength="3" value="${all ? all.v : ''}" title="${i18next.t('config.jpicker_tooltip_value_textbox')}"/>&nbsp;%<br/><br/></td>
</tr>
<tr class="Red">
<td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_red_radio')}"><input type="radio" value="r"${settings.color.mode === 'r' ? ' checked="checked"' : ''}/>R:</label></td>
<td class="Text"><input type="text" maxlength="3" value="${all ? all.r : ''}" title="${i18next.t('config.jpicker_tooltip_red_textbox')}"/></td>
</tr>
<tr class="Green">
<td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_green_radio')}"><input type="radio" value="g"${settings.color.mode === 'g' ? ' checked="checked"' : ''}/>G:</label></td>
<td class="Text"><input type="text" maxlength="3" value="${all ? all.g : ''}" title="${i18next.t('config.jpicker_tooltip_green_textbox')}"/></td>
</tr>
<tr class="Blue">
<td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_blue_radio')}"><input type=