@@ -123,28 +127,28 @@ template.innerHTML = `
@@ -160,6 +164,621 @@ template.innerHTML = `
`;
+/**
+ * Whether a value is `null` or `undefined`.
+ * @param {any} val
+ * @returns {boolean}
+ */
+const isNullish = (val) => {
+ return val === null || val === undefined;
+};
+/**
+ * @class Slider
+ */
+class Slider {
+ /**
+ * @param {external:jQuery} bar
+ * @param {module:jPicker.SliderOptions} options
+ */
+ constructor (bar, options) {
+ const that = this;
+ /**
+ * Fire events on the supplied `context`
+ * @param {module:jPicker.JPickerInit} context
+ * @returns {void}
+ */
+ function fireChangeEvents (context) {
+ changeEvents.forEach((changeEvent) => {
+ changeEvent.call(that, that, context);
+ });
+ }
+
+ /**
+ * Bind the mousedown to the bar not the arrow for quick snapping to the clicked location.
+ * @param {external:jQuery.Event} e
+ * @returns {void}
+ */
+ function mouseDown (e) {
+ const off = bar.offset();
+ offset = {l: off.left | 0, t: off.top | 0};
+ clearTimeout(timeout);
+ // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
+ timeout = setTimeout(function () {
+ setValuesFromMousePosition.call(that, e);
+ }, 0);
+ // Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
+ $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
+ e.preventDefault(); // don't try to select anything or drag the image to the desktop
+ }
+ /**
+ * Set the values as the mouse moves.
+ * @param {external:jQuery.Event} e
+ * @returns {false}
+ */
+ function mouseMove (e) {
+ clearTimeout(timeout);
+ timeout = setTimeout(function () {
+ setValuesFromMousePosition.call(that, e);
+ }, 0);
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
+ }
+ /**
+ * Unbind the document events - they aren't needed when not dragging.
+ * @param {external:jQuery.Event} e
+ * @returns {false}
+ */
+ function mouseUp (e) {
+ $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
+ }
+
+ /**
+ * Calculate mouse position and set value within the current range.
+ * @param {Event} e
+ * @returns {void}
+ */
+ function setValuesFromMousePosition (e) {
+ const barW = bar.w, // local copies for YUI compressor
+ barH = bar.h;
+ let locX = e.pageX - offset.l,
+ locY = e.pageY - offset.t;
+ // keep the arrow within the bounds of the bar
+ if (locX < 0) locX = 0;
+ else if (locX > barW) locX = barW;
+ if (locY < 0) locY = 0;
+ else if (locY > barH) locY = barH;
+ val.call(that, 'xy', {
+ x: ((locX / barW) * rangeX) + minX,
+ y: ((locY / barH) * rangeY) + minY
+ });
+ }
+ /**
+ *
+ * @returns {void}
+ */
+ function draw () {
+ const
+ barW = bar.w,
+ barH = bar.h,
+ arrowW = arrow.w,
+ arrowH = arrow.h;
+ let arrowOffsetX = 0,
+ arrowOffsetY = 0;
+ setTimeout(function () {
+ if (rangeX > 0) { // range is greater than zero
+ // constrain to bounds
+ arrowOffsetX = (x === maxX) ? barW : (((x / rangeX) * barW) | 0);
+ }
+ if (rangeY > 0) { // range is greater than zero
+ // constrain to bounds
+ arrowOffsetY = (y === maxY) ? barH : ((y / rangeY) * barH) | 0;
+ }
+ // if arrow width is greater than bar width, center arrow and prevent horizontal dragging
+ if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
+ else arrowOffsetX -= arrowW >> 1;
+ // if arrow height is greater than bar height, center arrow and prevent vertical dragging
+ if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
+ else arrowOffsetY -= arrowH >> 1;
+ // set the arrow position based on these offsets
+ arrow.css({left: arrowOffsetX + 'px', top: arrowOffsetY + 'px'});
+ });
+ }
+
+ /**
+ * Get or set a value.
+ * @param {?("xy"|"x"|"y")} name
+ * @param {module:math.XYObject} value
+ * @param {module:jPicker.Slider} context
+ * @returns {module:math.XYObject|Float|void}
+ */
+ function val (name, value, context) {
+ const set = value !== undefined;
+ if (!set) {
+ if (isNullish(name)) name = 'xy';
+ switch (name.toLowerCase()) {
+ case 'x': return x;
+ case 'y': return y;
+ case 'xy':
+ default: return {x, y};
+ }
+ }
+ if (!isNullish(context) && context === that) return undefined;
+ let changed = false;
+
+ let newX, newY;
+ if (isNullish(name)) name = 'xy';
+ switch (name.toLowerCase()) {
+ case 'x':
+ newX = (value && ((value.x && value.x | 0) || value | 0)) || 0;
+ break;
+ case 'y':
+ newY = (value && ((value.y && value.y | 0) || value | 0)) || 0;
+ break;
+ case 'xy':
+ default:
+ newX = (value && value.x && value.x | 0) || 0;
+ newY = (value && value.y && value.y | 0) || 0;
+ break;
+ }
+ if (!isNullish(newX)) {
+ if (newX < minX) newX = minX;
+ else if (newX > maxX) newX = maxX;
+ if (x !== newX) {
+ x = newX;
+ changed = true;
+ }
+ }
+ if (!isNullish(newY)) {
+ if (newY < minY) newY = minY;
+ else if (newY > maxY) newY = maxY;
+ if (y !== newY) {
+ y = newY;
+ changed = true;
+ }
+ }
+ changed && fireChangeEvents.call(that, context || that);
+ return undefined;
+ }
+
+ /**
+ * @typedef {PlainObject} module:jPicker.MinMaxRangeX
+ * @property {Float} minX
+ * @property {Float} maxX
+ * @property {Float} rangeX
+ */
+ /**
+ * @typedef {PlainObject} module:jPicker.MinMaxRangeY
+ * @property {Float} minY
+ * @property {Float} maxY
+ * @property {Float} rangeY
+ */
+ /**
+ * @typedef {module:jPicker.MinMaxRangeY|module:jPicker.MinMaxRangeX} module:jPicker.MinMaxRangeXY
+ */
+
+ /**
+ *
+ * @param {"minx"|"maxx"|"rangex"|"miny"|"maxy"|"rangey"|"all"} name
+ * @param {module:jPicker.MinMaxRangeXY} value
+ * @returns {module:jPicker.MinMaxRangeXY|module:jPicker.MinMaxRangeX|module:jPicker.MinMaxRangeY|void}
+ */
+ function range (name, value) {
+ const set = value !== undefined;
+ if (!set) {
+ if (isNullish(name)) name = 'all';
+ switch (name.toLowerCase()) {
+ case 'minx': return minX;
+ case 'maxx': return maxX;
+ case 'rangex': return {minX, maxX, rangeX};
+ case 'miny': return minY;
+ case 'maxy': return maxY;
+ case 'rangey': return {minY, maxY, rangeY};
+ case 'all':
+ default: return {minX, maxX, rangeX, minY, maxY, rangeY};
+ }
+ }
+ let // changed = false,
+ newMinX,
+ newMaxX,
+ newMinY,
+ newMaxY;
+ if (isNullish(name)) name = 'all';
+ switch (name.toLowerCase()) {
+ case 'minx':
+ newMinX = (value && ((value.minX && value.minX | 0) || value | 0)) || 0;
+ break;
+ case 'maxx':
+ newMaxX = (value && ((value.maxX && value.maxX | 0) || value | 0)) || 0;
+ break;
+ case 'rangex':
+ newMinX = (value && value.minX && value.minX | 0) || 0;
+ newMaxX = (value && value.maxX && value.maxX | 0) || 0;
+ break;
+ case 'miny':
+ newMinY = (value && ((value.minY && value.minY | 0) || value | 0)) || 0;
+ break;
+ case 'maxy':
+ newMaxY = (value && ((value.maxY && value.maxY | 0) || value | 0)) || 0;
+ break;
+ case 'rangey':
+ newMinY = (value && value.minY && value.minY | 0) || 0;
+ newMaxY = (value && value.maxY && value.maxY | 0) || 0;
+ break;
+ case 'all':
+ default:
+ newMinX = (value && value.minX && value.minX | 0) || 0;
+ newMaxX = (value && value.maxX && value.maxX | 0) || 0;
+ newMinY = (value && value.minY && value.minY | 0) || 0;
+ newMaxY = (value && value.maxY && value.maxY | 0) || 0;
+ break;
+ }
+
+ if (!isNullish(newMinX) && minX !== newMinX) {
+ minX = newMinX;
+ rangeX = maxX - minX;
+ }
+ if (!isNullish(newMaxX) && maxX !== newMaxX) {
+ maxX = newMaxX;
+ rangeX = maxX - minX;
+ }
+ if (!isNullish(newMinY) && minY !== newMinY) {
+ minY = newMinY;
+ rangeY = maxY - minY;
+ }
+ if (!isNullish(newMaxY) && maxY !== newMaxY) {
+ maxY = newMaxY;
+ rangeY = maxY - minY;
+ }
+ return undefined;
+ }
+ /**
+ * @param {GenericCallback} callback
+ * @returns {void}
+ */
+ function bind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks
+ if (typeof callback === 'function') changeEvents.push(callback);
+ }
+ /**
+ * @param {GenericCallback} callback
+ * @returns {void}
+ */
+ function unbind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks
+ if (typeof callback !== 'function') return;
+ let i;
+ while ((i = changeEvents.includes(callback))) changeEvents.splice(i, 1);
+ }
+ /**
+ *
+ * @returns {void}
+ */
+ function destroy () {
+ // unbind all possible events and null objects
+ $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
+ bar.unbind('mousedown', mouseDown);
+ bar = null;
+ arrow = null;
+ changeEvents = null;
+ }
+ let offset,
+ timeout,
+ x = 0,
+ y = 0,
+ minX = 0,
+ maxX = 100,
+ rangeX = 100,
+ minY = 0,
+ maxY = 100,
+ rangeY = 100,
+ arrow = bar.querySelector('img'), // bar.find('img:first'), // the arrow image to drag
+ changeEvents = [];
+ $.extend(
+ true,
+ // public properties, methods, and event bindings - these we need
+ // to access from other controls
+ that,
+ {
+ val,
+ range,
+ bind,
+ unbind,
+ destroy
+ }
+ );
+ // initialize this control
+ arrow.src = options.arrow && options.arrow.image;
+ arrow.w = (options.arrow && options.arrow.width) || arrow.width();
+ arrow.h = (options.arrow && options.arrow.height) || arrow.height();
+ bar.w = (options.map && options.map.width) || bar.width();
+ bar.h = (options.map && options.map.height) || bar.height();
+ // bind mousedown event
+ // bar.bind('mousedown', mouseDown);
+ bind.call(that, draw);
+ }
+}
+
+/**
+ * Controls for all the input elements for the typing in color values.
+ */
+class ColorValuePicker {
+ /**
+ * @param {external:jQuery} picker
+ * @param {external:jQuery.jPicker.Color} color
+ * @param {external:jQuery.fn.$.fn.jPicker} bindedHex
+ * @param {Float} alphaPrecision
+ */
+ constructor (picker, color, bindedHex, alphaPrecision) {
+ const that = this; // private properties and methods
+ const inputs = picker.find('td.Text input');
+ // input box key down - use arrows to alter color
+ /**
+ *
+ * @param {Event} e
+ * @returns {Event|false|void}
+ */
+ function keyDown (e) {
+ if (e.target.value === '' && e.target !== hex.get(0) && ((!isNullish(bindedHex) && e.target !== bindedHex.get(0)) || isNullish(bindedHex))) return undefined;
+ if (!validateKey(e)) return e;
+ switch (e.target) {
+ case red.get(0):
+ switch (e.keyCode) {
+ case 38:
+ red.val(setValueInRange.call(that, (red.val() << 0) + 1, 0, 255));
+ color.val('r', red.val(), e.target);
+ return false;
+ case 40:
+ red.val(setValueInRange.call(that, (red.val() << 0) - 1, 0, 255));
+ color.val('r', red.val(), e.target);
+ return false;
+ }
+ break;
+ case green.get(0):
+ switch (e.keyCode) {
+ case 38:
+ green.val(setValueInRange.call(that, (green.val() << 0) + 1, 0, 255));
+ color.val('g', green.val(), e.target);
+ return false;
+ case 40:
+ green.val(setValueInRange.call(that, (green.val() << 0) - 1, 0, 255));
+ color.val('g', green.val(), e.target);
+ return false;
+ }
+ break;
+ case blue.get(0):
+ switch (e.keyCode) {
+ case 38:
+ blue.val(setValueInRange.call(that, (blue.val() << 0) + 1, 0, 255));
+ color.val('b', blue.val(), e.target);
+ return false;
+ case 40:
+ blue.val(setValueInRange.call(that, (blue.val() << 0) - 1, 0, 255));
+ color.val('b', blue.val(), e.target);
+ return false;
+ }
+ break;
+ case alpha && alpha.get(0):
+ switch (e.keyCode) {
+ case 38:
+ alpha.val(setValueInRange.call(that, Number.parseFloat(alpha.val()) + 1, 0, 100));
+ color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target);
+ return false;
+ case 40:
+ alpha.val(setValueInRange.call(that, Number.parseFloat(alpha.val()) - 1, 0, 100));
+ color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target);
+ return false;
+ }
+ break;
+ case hue.get(0):
+ switch (e.keyCode) {
+ case 38:
+ hue.val(setValueInRange.call(that, (hue.val() << 0) + 1, 0, 360));
+ color.val('h', hue.val(), e.target);
+ return false;
+ case 40:
+ hue.val(setValueInRange.call(that, (hue.val() << 0) - 1, 0, 360));
+ color.val('h', hue.val(), e.target);
+ return false;
+ }
+ break;
+ case saturation.get(0):
+ switch (e.keyCode) {
+ case 38:
+ saturation.val(setValueInRange.call(that, (saturation.val() << 0) + 1, 0, 100));
+ color.val('s', saturation.val(), e.target);
+ return false;
+ case 40:
+ saturation.val(setValueInRange.call(that, (saturation.val() << 0) - 1, 0, 100));
+ color.val('s', saturation.val(), e.target);
+ return false;
+ }
+ break;
+ case value.get(0):
+ switch (e.keyCode) {
+ case 38:
+ value.val(setValueInRange.call(that, (value.val() << 0) + 1, 0, 100));
+ color.val('v', value.val(), e.target);
+ return false;
+ case 40:
+ value.val(setValueInRange.call(that, (value.val() << 0) - 1, 0, 100));
+ color.val('v', value.val(), e.target);
+ return false;
+ }
+ break;
+ }
+ return undefined;
+ }
+ // input box key up - validate value and set color
+ /**
+ * @param {Event} e
+ * @returns {Event|void}
+ * @todo Why is this returning an event?
+ */
+ function keyUp (e) {
+ if (e.target.value === '' && e.target !== hex.get(0) &&
+ ((!isNullish(bindedHex) && e.target !== bindedHex.get(0)) ||
+ isNullish(bindedHex))) return undefined;
+ if (!validateKey(e)) return e;
+ switch (e.target) {
+ case red.get(0):
+ red.val(setValueInRange.call(that, red.val(), 0, 255));
+ color.val('r', red.val(), e.target);
+ break;
+ case green.get(0):
+ green.val(setValueInRange.call(that, green.val(), 0, 255));
+ color.val('g', green.val(), e.target);
+ break;
+ case blue.get(0):
+ blue.val(setValueInRange.call(that, blue.val(), 0, 255));
+ color.val('b', blue.val(), e.target);
+ break;
+ case alpha && alpha.get(0):
+ alpha.val(setValueInRange.call(that, alpha.val(), 0, 100));
+ color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target);
+ break;
+ case hue.get(0):
+ hue.val(setValueInRange.call(that, hue.val(), 0, 360));
+ color.val('h', hue.val(), e.target);
+ break;
+ case saturation.get(0):
+ saturation.val(setValueInRange.call(that, saturation.val(), 0, 100));
+ color.val('s', saturation.val(), e.target);
+ break;
+ case value.get(0):
+ value.val(setValueInRange.call(that, value.val(), 0, 100));
+ color.val('v', value.val(), e.target);
+ break;
+ case hex.get(0):
+ hex.val(hex.val().replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6));
+ bindedHex && bindedHex.val(hex.val());
+ color.val('hex', hex.val() !== '' ? hex.val() : null, e.target);
+ break;
+ case bindedHex && bindedHex.get(0):
+ bindedHex.val(bindedHex.val().replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6));
+ hex.val(bindedHex.val());
+ color.val('hex', bindedHex.val() !== '' ? bindedHex.val() : null, e.target);
+ break;
+ case ahex && ahex.get(0):
+ ahex.val(ahex.val().replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 2));
+ color.val('a', !isNullish(ahex.val()) ? Number.parseInt(ahex.val(), 16) : null, e.target);
+ break;
+ }
+ return undefined;
+ }
+ // input box blur - reset to original if value empty
+ /**
+ * @param {Event} e
+ * @returns {void}
+ */
+ function blur (e) {
+ if (!isNullish(color.val())) {
+ switch (e.target) {
+ case red.get(0): red.val(color.val('r')); break;
+ case green.get(0): green.val(color.val('g')); break;
+ case blue.get(0): blue.val(color.val('b')); break;
+ case alpha && alpha.get(0): alpha.val(toFixedNumeric((color.val('a') * 100) / 255, alphaPrecision)); break;
+ case hue.get(0): hue.val(color.val('h')); break;
+ case saturation.get(0): saturation.val(color.val('s')); break;
+ case value.get(0): value.val(color.val('v')); break;
+ case hex.get(0):
+ case bindedHex && bindedHex.get(0):
+ hex.val(color.val('hex'));
+ bindedHex && bindedHex.val(color.val('hex'));
+ break;
+ case ahex && ahex.get(0): ahex.val(color.val('ahex').substring(6)); break;
+ }
+ }
+ }
+ /**
+ * @param {Event} e
+ * @returns {boolean}
+ */
+ function validateKey (e) {
+ switch (e.keyCode) {
+ case 9:
+ case 16:
+ case 29:
+ case 37:
+ case 39:
+ return false;
+ case 'c'.charCodeAt():
+ case 'v'.charCodeAt():
+ if (e.ctrlKey) return false;
+ }
+ return true;
+ }
+
+ /**
+ * Constrain value within range.
+ * @param {Float|string} value
+ * @param {Float} min
+ * @param {Float} max
+ * @returns {Float|string} Returns a number or numeric string
+ */
+ function setValueInRange (value, min, max) {
+ if (value === '' || isNaN(value)) return min;
+ if (value > max) return max;
+ if (value < min) return min;
+ return value;
+ }
+ /**
+ * @param {external:jQuery} ui
+ * @param {Element} context
+ * @returns {void}
+ */
+ function colorChanged (ui, context) {
+ const all = ui.val('all');
+ if (context !== red.get(0)) red.val(!isNullish(all) ? all.r : '');
+ if (context !== green.get(0)) green.val(!isNullish(all) ? all.g : '');
+ if (context !== blue.get(0)) blue.val(!isNullish(all) ? all.b : '');
+ if (alpha && context !== alpha.get(0)) alpha.val(!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : '');
+ if (context !== hue.get(0)) hue.val(!isNullish(all) ? all.h : '');
+ if (context !== saturation.get(0)) saturation.val(!isNullish(all) ? all.s : '');
+ if (context !== value.get(0)) value.val(!isNullish(all) ? all.v : '');
+ if (context !== hex.get(0) && ((bindedHex && context !== bindedHex.get(0)) || !bindedHex)) hex.val(!isNullish(all) ? all.hex : '');
+ if (bindedHex && context !== bindedHex.get(0) && context !== hex.get(0)) bindedHex.val(!isNullish(all) ? all.hex : '');
+ if (ahex && context !== ahex.get(0)) ahex.val(!isNullish(all) ? all.ahex.substring(6) : '');
+ }
+ /**
+ * Unbind all events and null objects.
+ * @returns {void}
+ */
+ function destroy () {
+ red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur);
+ red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
+ color.unbind(colorChanged);
+ red = null;
+ green = null;
+ blue = null;
+ alpha = null;
+ hue = null;
+ saturation = null;
+ value = null;
+ hex = null;
+ ahex = null;
+ }
+ let
+ red = inputs.eq(3),
+ green = inputs.eq(4),
+ blue = inputs.eq(5),
+ alpha = inputs.length > 7 ? inputs.eq(6) : null,
+ hue = inputs.eq(0),
+ saturation = inputs.eq(1),
+ value = inputs.eq(2),
+ hex = inputs.eq(inputs.length > 7 ? 7 : 6),
+ ahex = inputs.length > 7 ? inputs.eq(8) : null;
+ $.extend(true, that, {
+ // public properties and methods
+ destroy
+ });
+ red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
+ red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
+ color.bind(colorChanged);
+ }
+}
+
/**
* @class SeColorPicker
*/
@@ -180,6 +799,1070 @@ export class SeColorPicker extends HTMLElement {
this.$color_picker = this._shadowRoot.getElementById('color_picker');
this.$tabs = this._shadowRoot.querySelectorAll('.se-tabs');
}
+ /**
+ * @function initPicker
+ * @returns {void}
+ */
+ initPicker () {
+ const that = this;
+ this.currentTab = 'solidColor';
+ this.SLIDERW = '145px';
+ this.MAX = 256;
+ this.MARGINX = 0;
+ this.MARGINY = 0;
+ this.ns = {
+ svg: 'http://www.w3.org/2000/svg',
+ xlink: 'http://www.w3.org/1999/xlink'
+ };
+ this.isGecko = navigator.userAgent.includes('Gecko/');
+ // paintbox init
+ this.paintBox = new PaintBox(this.$block, this.type);
+ // -------------------------------------------------------------
+
+ this.jPicker = {
+ Color: function (init) { // eslint-disable-line object-shorthand
+ 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, 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) { // eslint-disable-line promise/prefer-await-to-callbacks
+ if (typeof callback === 'function') changeEvents.push(callback);
+ }
+ /**
+ * @param {GenericCallback} callback
+ * @returns {void}
+ */
+ function unbind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks
+ 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, g, b, a, h, s, v, changeEvents = [];
+
+ $.extend(true, 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', g = '00', b = '00', 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, g = rgb.g / 255, b = rgb.b / 255, hsv = {h: 0, s: 0, v: 0};
+ let min = 0, 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,
+ f = h - i,
+ p = v * (1 - s),
+ q = v * (1 - (s * f)),
+ 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;
+ }
+ },
+ default: {
+ window: {
+ title: null,
+ effects: {
+ type: 'slide',
+ speed: {
+ show: 'slow',
+ hide: 'fast'
+ }
+ },
+ position: {
+ x: 'screenCenter',
+ y: 'top'
+ },
+ expandable: false,
+ liveUpdate: true,
+ alphaSupport: false,
+ alphaPrecision: 0,
+ updateInputColor: true
+ },
+ color: {
+ mode: 'h',
+ active: '', // new Color({ahex: '#ffcc00ff'}),
+ quickList: [
+ /* new Color({h: 360, s: 33, v: 100}),
+ new Color({h: 360, s: 66, v: 100}),
+ new Color({h: 360, s: 100, v: 100}),
+ new Color({h: 360, s: 100, v: 75}),
+ new Color({h: 360, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 100}),
+ new Color({h: 30, s: 33, v: 100}),
+ new Color({h: 30, s: 66, v: 100}),
+ new Color({h: 30, s: 100, v: 100}),
+ new Color({h: 30, s: 100, v: 75}),
+ new Color({h: 30, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 90}),
+ new Color({h: 60, s: 33, v: 100}),
+ new Color({h: 60, s: 66, v: 100}),
+ new Color({h: 60, s: 100, v: 100}),
+ new Color({h: 60, s: 100, v: 75}),
+ new Color({h: 60, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 80}),
+ new Color({h: 90, s: 33, v: 100}),
+ new Color({h: 90, s: 66, v: 100}),
+ new Color({h: 90, s: 100, v: 100}),
+ new Color({h: 90, s: 100, v: 75}),
+ new Color({h: 90, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 70}),
+ new Color({h: 120, s: 33, v: 100}),
+ new Color({h: 120, s: 66, v: 100}),
+ new Color({h: 120, s: 100, v: 100}),
+ new Color({h: 120, s: 100, v: 75}),
+ new Color({h: 120, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 60}),
+ new Color({h: 150, s: 33, v: 100}),
+ new Color({h: 150, s: 66, v: 100}),
+ new Color({h: 150, s: 100, v: 100}),
+ new Color({h: 150, s: 100, v: 75}),
+ new Color({h: 150, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 50}),
+ new Color({h: 180, s: 33, v: 100}),
+ new Color({h: 180, s: 66, v: 100}),
+ new Color({h: 180, s: 100, v: 100}),
+ new Color({h: 180, s: 100, v: 75}),
+ new Color({h: 180, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 40}),
+ new Color({h: 210, s: 33, v: 100}),
+ new Color({h: 210, s: 66, v: 100}),
+ new Color({h: 210, s: 100, v: 100}),
+ new Color({h: 210, s: 100, v: 75}),
+ new Color({h: 210, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 30}),
+ new Color({h: 240, s: 33, v: 100}),
+ new Color({h: 240, s: 66, v: 100}),
+ new Color({h: 240, s: 100, v: 100}),
+ new Color({h: 240, s: 100, v: 75}),
+ new Color({h: 240, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 20}),
+ new Color({h: 270, s: 33, v: 100}),
+ new Color({h: 270, s: 66, v: 100}),
+ new Color({h: 270, s: 100, v: 100}),
+ new Color({h: 270, s: 100, v: 75}),
+ new Color({h: 270, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 10}),
+ new Color({h: 300, s: 33, v: 100}),
+ new Color({h: 300, s: 66, v: 100}),
+ new Color({h: 300, s: 100, v: 100}),
+ new Color({h: 300, s: 100, v: 75}),
+ new Color({h: 300, s: 100, v: 50}),
+ new Color({h: 180, s: 0, v: 0}),
+ new Color({h: 330, s: 33, v: 100}),
+ new Color({h: 330, s: 66, v: 100}),
+ new Color({h: 330, s: 100, v: 100}),
+ new Color({h: 330, s: 100, v: 75}),
+ new Color({h: 330, s: 100, v: 50}),
+ new Color() */
+ ]
+ },
+ images: {
+ clientPath: './components/jgraduate/images/',
+ colorMap: {
+ width: 256,
+ height: 256,
+ arrow: {
+ file: 'mappoint.gif',
+ width: 15,
+ height: 15
+ }
+ },
+ colorBar: {
+ width: 20,
+ height: 256,
+ arrow: {
+ file: 'rangearrows.gif',
+ width: 20,
+ height: 7
+ }
+ },
+ picker: {
+ file: 'picker.gif',
+ width: 25,
+ height: 24
+ }
+ },
+ localization: {
+ text: {
+ title: 'Drag Markers To Pick A Color',
+ newColor: 'new',
+ currentColor: 'current',
+ ok: 'OK',
+ cancel: 'Cancel'
+ },
+ tooltips: {
+ colors: {
+ newColor: 'New Color - Press “OK” To Commit',
+ currentColor: 'Click To Revert To Original Color'
+ },
+ buttons: {
+ ok: 'Commit To This Color Selection',
+ cancel: 'Cancel And Revert To Original Color'
+ },
+ hue: {
+ radio: 'Set To “Hue” Color Mode',
+ textbox: 'Enter A “Hue” Value (0-360°)'
+ },
+ saturation: {
+ radio: 'Set To “Saturation” Color Mode',
+ textbox: 'Enter A “Saturation” Value (0-100%)'
+ },
+ value: {
+ radio: 'Set To “Value” Color Mode',
+ textbox: 'Enter A “Value” Value (0-100%)'
+ },
+ red: {
+ radio: 'Set To “Red” Color Mode',
+ textbox: 'Enter A “Red” Value (0-255)'
+ },
+ green: {
+ radio: 'Set To “Green” Color Mode',
+ textbox: 'Enter A “Green” Value (0-255)'
+ },
+ blue: {
+ radio: 'Set To “Blue” Color Mode',
+ textbox: 'Enter A “Blue” Value (0-255)'
+ },
+ alpha: {
+ radio: 'Set To “Alpha” Color Mode',
+ textbox: 'Enter A “Alpha” Value (0-100)'
+ },
+ hex: {
+ textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
+ alpha: 'Enter A “Alpha” Value (#00-#ff)'
+ }
+ }
+ }
+ }
+ };
+ const isLessThanIE7 = Number.parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters;
+ const settings = this.jPicker.default;
+ const win = settings.window;
+ const {Color, ColorMethods} = this.jPicker;
+ const {images, localization, color} = settings; // local copies for YUI compressor
+ const colorObj = {
+ active: (typeof settings.color.active).toString().toLowerCase() === 'string'
+ ? new Color({ahex: !win.alphaSupport && settings.color.active
+ ? settings.color.active.substring(0, 6) + 'ff'
+ : settings.color.active
+ })
+ : new Color({ahex: !win.alphaSupport &&
+ settings.color.active.val('ahex')
+ ? settings.color.active.val('ahex').substring(0, 6) + 'ff'
+ : settings.color.active.val('ahex')
+ }),
+ current: (typeof settings.color.active).toString().toLowerCase() === 'string'
+ ? new Color({ahex: !win.alphaSupport && settings.color.active
+ ? settings.color.active.substring(0, 6) + 'ff'
+ : settings.color.active})
+ : new Color({ahex: !win.alphaSupport &&
+ settings.color.active.val('ahex')
+ ? settings.color.active.val('ahex').substring(0, 6) + 'ff'
+ : settings.color.active.val('ahex')
+ }),
+ quickList: settings.color.quickList
+ };
+
+ /* if (typeof commitCallback !== 'function') {
+ commitCallback = null;
+ }
+ if (typeof liveCallback !== 'function') {
+ liveCallback = null;
+ }
+ if (typeof cancelCallback !== 'function') {
+ cancelCallback = null;
+ } */
+
+ /**
+ * @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);
+ }
+
+ /**
+ * 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;
+ }
+ }
+
+ /**
+ * @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.attr('pngSrc', src);
+ img.style.cssText = `backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'`;
+ /* img.css({backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'}); */
+ } else {
+ console.log("came -->", src);
+ img.style.backgroundImage = `url('${src}')`;
+ // img.css({backgroundImage: 'url(\'' + src + '\')'});
+ }
+ }
+
+
+ const all = null;
+ let elementStartX = null, // Used to record the starting css positions for dragging the control
+ elementStartY = null,
+ pageStartX = null, // Used to record the mousedown coordinates for dragging the control
+ pageStartY = null,
+ colorMapDiv = null,
+ colorBarDiv = null,
+ colorMapL1 = null, // different layers of colorMap and colorBar
+ colorMapL2 = null,
+ colorMapL3 = null,
+ colorBarL1 = null,
+ colorBarL2 = null,
+ colorBarL3 = null,
+ colorBarL4 = null,
+ colorBarL5 = null,
+ colorBarL6 = null,
+ colorMap = null, // color maps
+ colorBar = null,
+ colorPicker = null,
+ activePreview = null, // color boxes above the radio buttons
+ currentPreview = null,
+ okButton = null,
+ cancelButton = null,
+ grid = null, // preset colors grid
+ iconColor = null, // iconColor for popup icon
+ iconAlpha = null, // iconAlpha for popup icon
+ iconImage = null, // iconImage popup icon
+ moveBar = null; // drag bar
+ const controlHtml = `
- 
+ 
+
-
+
+
-
+
+
-
+
+
+ ${localization.text.title}+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+ |
+
+ ${localization.text.newColor}
+
+
+
+
+ ${localization.text.currentColor}
+ |
+
+
+
+ + |
+ |
| + + | ++ ° + | +|||
| + + | ++ % + | +|||
|
+
+ + + |
+
+ %
+ + + |
+ |||
| + + | ++ + | +|||
| + + | ++ + | +|||
| + + | ++ + | +|||
| + ${win.alphaSupport ? `` : ' '} + | ++ ${win.alphaSupport ? ` %` : ' '} + | +|||
| + + ${win.alphaSupport ? ` | ` : ' '} +||||