github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#46 jquery plugin convert to pure javascript

Browse Source
This commit is contained in:
Agriya Dev5
2021-02-02 21:04:25 +05:30
parent ca5e885f6b
commit 599be1db35
9 changed files with 3330 additions and 3644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/editor/components/PaintBox.js
View File

@@ -1,4 +1,5 @@
/* globals $ */ /* globals $ */
import {jGraduate} from './jgraduate/jQuery.jGraduate.js';
/** /**
* *
*/ */
@@ -77,7 +78,7 @@ class PaintBox {
} else { } else {
opts.solidColor = 'none'; opts.solidColor = 'none';
} }
return new $.jGraduate.Paint(opts); return new jGraduate.Paint(opts);
} }
/** /**

2
src/editor/components/index.js
View File

@@ -10,4 +10,4 @@ import './seMenuItem.js';
import './seList.js'; import './seList.js';
import './seListItem.js'; import './seListItem.js';
import './seColorPicker.js'; import './seColorPicker.js';
import './seColorGraduatePicker.js'; // import './seColorGraduatePicker.js';

303
src/editor/components/jgraduate/ColorValuePicker.js Normal file
View File

@@ -0,0 +1,303 @@
/* globals $ */
/* eslint-disable max-len */
/* eslint-disable unicorn/prefer-math-trunc */
/* eslint-disable no-bitwise */
/**
* @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;
};
/**
* Controls for all the input elements for the typing in color values.
*/
export default 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);
}
}

245
src/editor/components/jgraduate/jQuery.jGraduate.js
View File

@@ -1,4 +1,3 @@
/* eslint-disable unicorn/prefer-dom-node-append */
/** /**
* @file jGraduate 0.4 * @file jGraduate 0.4
* *
@@ -17,6 +16,9 @@
* @example $.jGraduate.Paint({radialGradient: o, a: 7}); // creates a radial gradient paint with opacity=0.07 * @example $.jGraduate.Paint({radialGradient: o, a: 7}); // creates a radial gradient paint with opacity=0.07
* @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception? * @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception?
*/ */
/* globals $ */
import Paint from './paint.js';
import {jPickerDefaults, jPickerMethod} from './jQuery.jPicker.js';
/** /**
* @todo JFH: This jQuery plugin was adapted to work within a Web Component. * @todo JFH: This jQuery plugin was adapted to work within a Web Component.
@@ -56,122 +58,34 @@ if (!window.console) {
* @param {external:jQuery} $ The jQuery instance to wrap * @param {external:jQuery} $ The jQuery instance to wrap
* @returns {external:jQuery} * @returns {external:jQuery}
*/ */
export default function jQueryPluginJGraduate ($) { // export default function jQueryPluginJGraduate ($) {
/** /* eslint-disable jsdoc/require-property */
* @typedef {PlainObject} module:jGraduate.jGraduatePaintOptions /**
* @property {Float} [alpha] * @namespace {PlainObject} jGraduate
* @property {module:jGraduate~Paint} [copy] Copy paint object * @memberof external:jQuery
* @property {SVGLinearGradientElement} [linearGradient] */
* @property {SVGRadialGradientElement} [radialGradient] export const jGraduate = /** @lends external:jQuery.jGraduate */ {
* @property {string} [solidColor]
*/
/**
* @memberof module:jGraduate~
*/
class Paint {
/**
* @param {module:jGraduate.jGraduatePaintOptions} [opt]
*/
constructor (opt) {
const options = opt || {};
this.alpha = isNaN(options.alpha) ? 100 : options.alpha;
// copy paint object
if (options.copy) {
/**
* @name module:jGraduate~Paint#type
* @type {"none"|"solidColor"|"linearGradient"|"radialGradient"}
*/
this.type = options.copy.type;
/**
* Represents opacity (0-100).
* @name module:jGraduate~Paint#alpha
* @type {Float}
*/
this.alpha = options.copy.alpha;
/**
* Represents #RRGGBB hex of color.
* @name module:jGraduate~Paint#solidColor
* @type {string}
*/
this.solidColor = null;
/**
* @name module:jGraduate~Paint#linearGradient
* @type {SVGLinearGradientElement}
*/
this.linearGradient = null;
/**
* @name module:jGraduate~Paint#radialGradient
* @type {SVGRadialGradientElement}
*/
this.radialGradient = null;
switch (this.type) {
case 'none':
break;
case 'solidColor':
this.solidColor = options.copy.solidColor;
break;
case 'linearGradient':
this.linearGradient = options.copy.linearGradient.cloneNode(true);
break;
case 'radialGradient':
this.radialGradient = options.copy.radialGradient.cloneNode(true);
break;
}
// create linear gradient paint
} else if (options.linearGradient) {
this.type = 'linearGradient';
this.solidColor = null;
this.radialGradient = null;
this.linearGradient = options.linearGradient.cloneNode(true);
// create linear gradient paint
} else if (options.radialGradient) {
this.type = 'radialGradient';
this.solidColor = null;
this.linearGradient = null;
this.radialGradient = options.radialGradient.cloneNode(true);
// create solid color paint
} else if (options.solidColor) {
this.type = 'solidColor';
this.solidColor = options.solidColor;
// create empty paint
} else {
this.type = 'none';
this.solidColor = null;
this.linearGradient = null;
this.radialGradient = null;
}
}
}
/* eslint-disable jsdoc/require-property */
/**
* @namespace {PlainObject} jGraduate
* @memberof external:jQuery
*/
$.jGraduate = /** @lends external:jQuery.jGraduate */ {
/* eslint-enable jsdoc/require-property */ /* eslint-enable jsdoc/require-property */
/** /**
* @class external:jQuery.jGraduate.Paint * @class external:jQuery.jGraduate.Paint
* @see module:jGraduate~Paint * @see module:jGraduate~Paint
*/ */
Paint Paint
}; };
// JSDoc doesn't show this as belonging to our `module:jGraduate.Options` type, // JSDoc doesn't show this as belonging to our `module:jGraduate.Options` type,
// so we use `@see` // so we use `@see`
/** /**
* @namespace {module:jGraduate.Options} jGraduateDefaults * @namespace {module:jGraduate.Options} jGraduateDefaults
* @memberof external:jQuery.fn * @memberof external:jQuery.fn
*/ */
$.fn.jGraduateDefaults = /** @lends external:jQuery.fn.jGraduateDefaults */ { export const jGraduateDefaults = /** @lends external:jQuery.fn.jGraduateDefaults */ {
/** /**
* Creates an object with a 'none' color. * Creates an object with a 'none' color.
* @type {external:jQuery.jGraduate.Paint} * @type {external:jQuery.jGraduate.Paint}
* @see module:jGraduate.Options * @see module:jGraduate.Options
*/ */
paint: new $.jGraduate.Paint(), paint: new jGraduate.Paint(),
/** /**
* @namespace * @namespace
*/ */
@@ -197,19 +111,19 @@ export default function jQueryPluginJGraduate ($) {
* @see module:jGraduate.Options * @see module:jGraduate.Options
*/ */
newstop: 'inverse' // same, inverse, black, white newstop: 'inverse' // same, inverse, black, white
}; };
const isGecko = navigator.userAgent.includes('Gecko/'); const isGecko = navigator.userAgent.includes('Gecko/');
/** /**
* @typedef {PlainObject<string, string>} module:jGraduate.Attrs * @typedef {PlainObject<string, string>} module:jGraduate.Attrs
*/ */
/** /**
* @param {SVGElement} elem * @param {SVGElement} elem
* @param {module:jGraduate.Attrs} attrs * @param {module:jGraduate.Attrs} attrs
* @returns {void} * @returns {void}
*/ */
function setAttrs (elem, attrs) { function setAttrs (elem, attrs) {
if (isGecko) { if (isGecko) {
Object.entries(attrs).forEach(([aname, val]) => { Object.entries(attrs).forEach(([aname, val]) => {
elem.setAttribute(aname, val); elem.setAttribute(aname, val);
@@ -224,59 +138,59 @@ export default function jQueryPluginJGraduate ($) {
} }
}); });
} }
} }
/** /**
* @param {string} name * @param {string} name
* @param {module:jGraduate.Attrs} attrs * @param {module:jGraduate.Attrs} attrs
* @param {Element} newparent * @param {Element} newparent
* @returns {SVGElement} * @returns {SVGElement}
*/ */
function mkElem (name, attrs, newparent) { function mkElem (name, attrs, newparent) {
const elem = document.createElementNS(ns.svg, name); const elem = document.createElementNS(ns.svg, name);
setAttrs(elem, attrs); setAttrs(elem, attrs);
if (newparent) { if (newparent) {
newparent.append(elem); newparent.append(elem);
} }
return elem; return elem;
} }
/** /**
* @typedef {PlainObject} module:jGraduate.ColorOpac Object may have one or both values * @typedef {PlainObject} module:jGraduate.ColorOpac Object may have one or both values
* @property {string} [color] #Hex color * @property {string} [color] #Hex color
* @property {Float} [opac] 0-1 * @property {Float} [opac] 0-1
*/ */
/** /**
* @typedef {PlainObject} module:jGraduate.Options * @typedef {PlainObject} module:jGraduate.Options
* @property {module:jGraduate~Paint} [paint] A Paint object object describing the paint to display initially; defaults to a new instance without options (defaults to opaque white) * @property {module:jGraduate~Paint} [paint] A Paint object object describing the paint to display initially; defaults to a new instance without options (defaults to opaque white)
* @property {external:Window} [window] * @property {external:Window} [window]
* @property {string} [window.pickerTitle="Drag markers to pick a paint"] * @property {string} [window.pickerTitle="Drag markers to pick a paint"]
* @property {PlainObject} [images] * @property {PlainObject} [images]
* @property {string} [images.clientPath="images/"] * @property {string} [images.clientPath="images/"]
* @property {"same"|"inverse"|"black"|"white"|module:jGraduate.ColorOpac} [newstop="inverse"] * @property {"same"|"inverse"|"black"|"white"|module:jGraduate.ColorOpac} [newstop="inverse"]
*/ */
/** /**
* @callback external:jQuery.fn.jGraduate.OkCallback * @callback external:jQuery.fn.jGraduate.OkCallback
* @param {external:jQuery.jGraduate.Paint} paint * @param {external:jQuery.jGraduate.Paint} paint
* @returns {void} * @returns {void}
*/ */
/** /**
* @callback external:jQuery.fn.jGraduate.CancelCallback * @callback external:jQuery.fn.jGraduate.CancelCallback
* @returns {void} * @returns {void}
*/ */
/** /**
* @function external:jQuery.fn.jGraduate * @function external:jQuery.fn.jGraduate
* @param {module:jGraduate.Options} [options] * @param {module:jGraduate.Options} [options]
* @param {external:jQuery.fn.jGraduate.OkCallback} [okCallback] Called with a Paint object when Ok is pressed * @param {external:jQuery.fn.jGraduate.OkCallback} [okCallback] Called with a Paint object when Ok is pressed
* @param {external:jQuery.fn.jGraduate.CancelCallback} [cancelCallback] Called with no arguments when Cancel is pressed * @param {external:jQuery.fn.jGraduate.CancelCallback} [cancelCallback] Called with no arguments when Cancel is pressed
* @returns {external:jQuery} * @returns {external:jQuery}
*/ */
$.fn.jGraduate = function (options, okCallback, cancelCallback) { export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
return this.each(function () { return elem.each(function () {
const $this = $(this), const $this = $(this),
$settings = $.extend(true, {}, $.fn.jGraduateDefaults, options || {}), $settings = $.extend(true, {}, jGraduateDefaults, options || {}),
id = $this.attr('id'), id = $this.attr('id'),
idref = '#' + $this.attr('id') + ' '; idref = '#' + $this.attr('id') + ' ';
// JFH !!!!! // JFH !!!!!
@@ -315,7 +229,7 @@ export default function jQueryPluginJGraduate ($) {
// public properties, methods, and callbacks // public properties, methods, and callbacks
{ {
// make a copy of the incoming paint // make a copy of the incoming paint
paint: new $.jGraduate.Paint({copy: $settings.paint}), paint: new jGraduate.Paint({copy: $settings.paint}),
okCallback: typeof okCallback === 'function' ? okCallback : null, okCallback: typeof okCallback === 'function' ? okCallback : null,
cancelCallback: typeof cancelCallback === 'function' ? cancelCallback : null cancelCallback: typeof cancelCallback === 'function' ? cancelCallback : null
} }
@@ -326,7 +240,7 @@ export default function jQueryPluginJGraduate ($) {
const $win = $(window); const $win = $(window);
if ($this.paint.type === 'none') { if ($this.paint.type === 'none') {
$this.paint = new $.jGraduate.Paint({solidColor: 'ffffff'}); $this.paint = new jGraduate.Paint({solidColor: 'ffffff'});
} }
$this.addClass('jGraduate_Picker'); $this.addClass('jGraduate_Picker');
@@ -690,7 +604,7 @@ export default function jQueryPluginJGraduate ($) {
let thisAlpha = (Number.parseFloat(stopOpacity) * 255).toString(16); let thisAlpha = (Number.parseFloat(stopOpacity) * 255).toString(16);
while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; } while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }
colr = stopColor.substr(1) + thisAlpha; colr = stopColor.substr(1) + thisAlpha;
$wc('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({ jPickerMethod($wc('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}), {
window: {title: 'Pick the start color and opacity for the gradient'}, window: {title: 'Pick the start color and opacity for the gradient'},
images: {clientPath: $settings.images.clientPath}, images: {clientPath: $settings.images.clientPath},
color: {active: colr, alphaSupport: true} color: {active: colr, alphaSupport: true}
@@ -1238,11 +1152,11 @@ export default function jQueryPluginJGraduate ($) {
} }
// This should be done somewhere else, probably // This should be done somewhere else, probably
$.extend($.fn.jPicker.defaults.window, { $.extend(jPickerDefaults.window, {
alphaSupport: true, effects: {type: 'show', speed: 0} alphaSupport: true, effects: {type: 'show', speed: 0}
}); });
colPicker.jPicker( jPickerMethod(colPicker,
{ {
window: {title: $settings.window.pickerTitle}, window: {title: $settings.window.pickerTitle},
images: {clientPath: $settings.images.clientPath}, images: {clientPath: $settings.images.clientPath},
@@ -1321,6 +1235,7 @@ export default function jQueryPluginJGraduate ($) {
tab.addClass('jGraduate_tab_current').click(); tab.addClass('jGraduate_tab_current').click();
}, 10); }, 10);
}); });
};
return $;
} }
// return $;
// }

919
src/editor/components/jgraduate/jQuery.jPicker.js
View File

@@ -1,4 +1,7 @@
/* eslint-disable no-bitwise, max-len, unicorn/prefer-math-trunc, unicorn/prefer-ternary */ /* eslint-disable jsdoc/require-file-overview */
import ColorValuePicker from './ColorValuePicker.js';
import Slider from './Slider.js';
/* globals $ */
/** /**
* @file jPicker (Adapted from version 1.1.6) * @file jPicker (Adapted from version 1.1.6)
* *
@@ -44,649 +47,37 @@ const isNullish = (val) => {
* @param {external:jQuery} $ The jQuery object, {@link external:jQuery.fn.$.fn.jPicker}, {@link external:jQuery.fn.$.fn.jPicker.defaults}) * @param {external:jQuery} $ The jQuery object, {@link external:jQuery.fn.$.fn.jPicker}, {@link external:jQuery.fn.$.fn.jPicker.defaults})
* @returns {external:jQuery} * @returns {external:jQuery}
*/ */
const jPicker = function ($) { // const jPicker = function ($) {
/** /**
* @typedef {PlainObject} module:jPicker.SliderOptions * @typedef {PlainObject} module:jPicker.SliderOptions
* @property {external:jQuery|PlainObject} arrow * @property {external:jQuery|PlainObject} arrow
* @property {string} arrow.image Not in use? * @property {string} arrow.image Not in use?
* @property {Float} arrow.width * @property {Float} arrow.width
* @property {Float} arrow.height * @property {Float} arrow.height
* @property {PlainObject} map * @property {PlainObject} map
* @property {Float} map.width * @property {Float} map.width
* @property {Float} map.height * @property {Float} map.height
*/ */
/** /**
* Encapsulate slider functionality for the ColorMap and ColorBar - * @typedef {PlainObject} module:jPicker.JPickerInit
* could be useful to use a jQuery UI draggable for this with certain extensions. * @property {Integer} [a]
* @memberof module:jPicker * @property {Integer} [b]
*/ * @property {Integer} [g]
class Slider { * @property {Integer} [h]
/** * @property {Integer} [r]
* @param {external:jQuery} bar * @property {Integer} [s]
* @param {module:jPicker.SliderOptions} options * @property {Integer} [v]
*/ * @property {string} [hex]
constructor (bar, options) { * @property {string} [ahex]
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);
});
}
/** /* eslint-disable jsdoc/require-property */
* Bind the mousedown to the bar not the arrow for quick snapping to the clicked location. /**
* @param {external:jQuery.Event} e * @namespace {PlainObject} jPicker
* @returns {void} * @memberof external:jQuery
*/ */
function mouseDown (e) { export const jPicker = /** @lends external:jQuery.jPicker */ {
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
if (x === maxX) arrowOffsetX = barW;
else arrowOffsetX = ((x / rangeX) * barW) | 0;
}
if (rangeY > 0) { // range is greater than zero
// constrain to bounds
if (y === maxY) arrowOffsetY = barH;
else arrowOffsetY = ((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.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);
}
}
/**
* @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]
*/
/* eslint-disable jsdoc/require-property */
/**
* @namespace {PlainObject} jPicker
* @memberof external:jQuery
*/
$.jPicker = /** @lends external:jQuery.jPicker */ {
/* eslint-enable jsdoc/require-property */ /* eslint-enable jsdoc/require-property */
/** /**
* Array holding references to each active instance of the jPicker control. * Array holding references to each active instance of the jPicker control.
@@ -1174,50 +565,50 @@ const jPicker = function ($) {
return rgb; return rgb;
} }
} }
}; };
const {Color, List, ColorMethods} = $.jPicker; // local copies for YUI compressor const {Color, List, ColorMethods} = jPicker; // local copies for YUI compressor
/* eslint-disable jsdoc/require-returns */ /* eslint-disable jsdoc/require-returns */
/** /**
* @function external:jQuery.fn.jPicker * @function external:jQuery.fn.jPicker
* @see {@link external:jQuery.fn.$.fn.jPicker} * @see {@link external:jQuery.fn.$.fn.jPicker}
*/ */
/* eslint-enable jsdoc/require-returns */ /* eslint-enable jsdoc/require-returns */
/** /**
* Will be bound to active {@link jQuery.jPicker.Color}. * Will be bound to active {@link jQuery.jPicker.Color}.
* @callback module:jPicker.LiveCallback * @callback module:jPicker.LiveCallback
* @param {external:jQuery} ui * @param {external:jQuery} ui
* @param {Element} context * @param {Element} context
* @returns {void} * @returns {void}
*/ */
/** /**
* @callback module:jPicker.CommitCallback * @callback module:jPicker.CommitCallback
* @param {external:jQuery.jPicker.Color} activeColor * @param {external:jQuery.jPicker.Color} activeColor
* @param {external:jQuery} okButton * @param {external:jQuery} okButton
* @returns {void} Return value not used. * @returns {void} Return value not used.
*/ */
/** /**
* @callback module:jPicker.CancelCallback * @callback module:jPicker.CancelCallback
* @param {external:jQuery.jPicker.Color} activeColor * @param {external:jQuery.jPicker.Color} activeColor
* @param {external:jQuery} cancelButton * @param {external:jQuery} cancelButton
* @returns {void} Return value not used. * @returns {void} Return value not used.
*/ */
/** /**
* While it would seem this should specify the name `jPicker` for JSDoc, that doesn't * 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`), * 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. * so we use an approach to add a redundant `$.fn.` in the name.
* @namespace * @namespace
* @memberof external:jQuery.fn * @memberof external:jQuery.fn
* @param {external:jQuery.fn.jPickerOptions} options * @param {external:jQuery.fn.jPickerOptions} options
* @param {module:jPicker.CommitCallback} [commitCallback] * @param {module:jPicker.CommitCallback} [commitCallback]
* @param {module:jPicker.LiveCallback} [liveCallback] * @param {module:jPicker.LiveCallback} [liveCallback]
* @param {module:jPicker.CancelCallback} [cancelCallback] * @param {module:jPicker.CancelCallback} [cancelCallback]
* @returns {external:jQuery} * @returns {external:jQuery}
*/ */
$.fn.jPicker = function (options, commitCallback, liveCallback, cancelCallback) { export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback) {
return this.each(function () { return elem.each(function () {
const that = this, const that = this,
settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor settings = $.extend(true, {}, jPickerDefaults, options); // local copies for YUI compressor
if ($(that).get(0).nodeName.toLowerCase() === 'input') { // Add color picker icon if binding to an input element and bind the events to the input if ($(that).get(0).nodeName.toLowerCase() === 'input') { // Add color picker icon if binding to an input element and bind the events to the input
$.extend(true, settings, { $.extend(true, settings, {
window: { window: {
@@ -2246,91 +1637,91 @@ const jPicker = function ($) {
initialize.call(that); initialize.call(that);
}, 0); }, 0);
}); });
}; }
/** /**
* @typedef {PlainObject} external:jQuery.fn.jPickerOptionsIconInfo * @typedef {PlainObject} external:jQuery.fn.jPickerOptionsIconInfo
* @property {string} file Color Map/Color Bar/Color Picker arrow icon * @property {string} file Color Map/Color Bar/Color Picker arrow icon
* @property {Float} width * @property {Float} width
* @property {Float} height * @property {Float} height
*/ */
/** /**
* @typedef {PlainObject} external:jQuery.fn.jPickerOptionsImagesDimensionsArrow * @typedef {PlainObject} external:jQuery.fn.jPickerOptionsImagesDimensionsArrow
* @property {Float} width * @property {Float} width
* @property {Float} height * @property {Float} height
* @property {external:jQuery.fn.jPickerOptionsIconInfo} arrow * @property {external:jQuery.fn.jPickerOptionsIconInfo} arrow
*/ */
/** /**
* @typedef {PlainObject} external:jQuery.fn.jPickerOptionsRadioTextboxLocale * @typedef {PlainObject} external:jQuery.fn.jPickerOptionsRadioTextboxLocale
* @property {string} radio * @property {string} radio
* @property {string} textbox * @property {string} textbox
*/ */
/** /**
* @typedef {PlainObject} external:jQuery.fn.jPickerOptions * @typedef {PlainObject} external:jQuery.fn.jPickerOptions
* @property {PlainObject} window * @property {PlainObject} window
* @property {string|null} window.title Any title for the jPicker window itself - displays * @property {string|null} window.title Any title for the jPicker window itself - displays
* "Drag Markers To Pick A Color" if left null * "Drag Markers To Pick A Color" if left null
* @property {PlainObject} window.effects * @property {PlainObject} window.effects
* @property {"slide"|"show"|"fade"} window.effects.type Effect used to show/hide an expandable picker * @property {"slide"|"show"|"fade"} window.effects.type Effect used to show/hide an expandable picker
* @property {PlainObject} window.effects.speed * @property {PlainObject} window.effects.speed
* @property {"fast"|"slow"|Float} window.effects.speed.show Duration of "show" effect. Time in milliseconds. * @property {"fast"|"slow"|Float} window.effects.speed.show Duration of "show" effect. Time in milliseconds.
* @property {"fast"|"slow"|Float} window.effects.speed.hide Duration of "hide" effect. Time in milliseconds * @property {"fast"|"slow"|Float} window.effects.speed.hide Duration of "hide" effect. Time in milliseconds
* @property {PlainObject} window.position * @property {PlainObject} window.position
* @property {"left"|"center"|"right"|"screenCenter"|Float} window.position.x Relative px value * @property {"left"|"center"|"right"|"screenCenter"|Float} window.position.x Relative px value
* @property {"top"|"bottom"|"center"|Float} window.position.y Relative px value * @property {"top"|"bottom"|"center"|Float} window.position.y Relative px value
* @property {boolean} window.expandable Defaults to large static picker - set to `true` to make an expandable * @property {boolean} window.expandable Defaults to large static picker - set to `true` to make an expandable
* picker (small icon with popup) - set automatically when binded to input element; added by `$.fn.jPicker` * picker (small icon with popup) - set automatically when binded to input element; added by `$.fn.jPicker`
* @property {boolean} window.liveUpdate Set `false` if you want the user to have to click "OK" before the * @property {boolean} window.liveUpdate Set `false` if you want the user to have to click "OK" before the
* binded input box updates values (always `true` for expandable picker) * binded input box updates values (always `true` for expandable picker)
* @property {boolean} window.alphaSupport Set to `true` to enable alpha picking * @property {boolean} window.alphaSupport Set to `true` to enable alpha picking
* @property {Float} window.alphaPrecision Set decimal precision for alpha percentage display - hex codes do * @property {Float} window.alphaPrecision Set decimal precision for alpha percentage display - hex codes do
* not map directly to percentage integers - range 0-2 * not map directly to percentage integers - range 0-2
* @property {boolean} window.updateInputColor Set to `false` to prevent binded input colors from changing * @property {boolean} window.updateInputColor Set to `false` to prevent binded input colors from changing
* @property {boolean} [window.bindToInput] Added by `$.fn.jPicker` * @property {boolean} [window.bindToInput] Added by `$.fn.jPicker`
* @property {external:jQuery} [window.input] Added by `$.fn.jPicker` * @property {external:jQuery} [window.input] Added by `$.fn.jPicker`
* @property {PlainObject} color * @property {PlainObject} color
* @property {"h"|"s"|"v"|"r"|"g"|"b"|"a"} color.mode Symbols stand for "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha) * @property {"h"|"s"|"v"|"r"|"g"|"b"|"a"} color.mode Symbols stand for "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha)
* @property {Color|string} color.active Strings are HEX values (e.g. #ffc000) WITH OR WITHOUT the "#" prefix * @property {Color|string} color.active Strings are HEX values (e.g. #ffc000) WITH OR WITHOUT the "#" prefix
* @property {Color[]|string[]} color.quickList The quick pick color list * @property {Color[]|string[]} color.quickList The quick pick color list
* Strings are HEX values (e.g. #ffc000) WITH OR WITHOUT the "#" prefix * Strings are HEX values (e.g. #ffc000) WITH OR WITHOUT the "#" prefix
* @property {PlainObject} images * @property {PlainObject} images
* @property {string} images.clientPath Path to image files * @property {string} images.clientPath Path to image files
* @property {external:jQuery.fn.jPickerOptionsImagesDimensionsArrow} images.colorMap * @property {external:jQuery.fn.jPickerOptionsImagesDimensionsArrow} images.colorMap
* @property {external:jQuery.fn.jPickerOptionsImagesDimensionsArrow} images.colorBar * @property {external:jQuery.fn.jPickerOptionsImagesDimensionsArrow} images.colorBar
* @property {external:jQuery.fn.jPickerOptionsIconInfo} images.picker * @property {external:jQuery.fn.jPickerOptionsIconInfo} images.picker
* @property {PlainObject} localization alter these to change the text presented by the picker (e.g. different language) * @property {PlainObject} localization alter these to change the text presented by the picker (e.g. different language)
* @property {PlainObject} localization.text * @property {PlainObject} localization.text
* @property {string} localization.text.title * @property {string} localization.text.title
* @property {string} localization.text.newColor * @property {string} localization.text.newColor
* @property {string} localization.text.currentColor * @property {string} localization.text.currentColor
* @property {string} localization.text.ok * @property {string} localization.text.ok
* @property {string} localization.text.cancel * @property {string} localization.text.cancel
* @property {PlainObject} localization.tooltips * @property {PlainObject} localization.tooltips
* @property {PlainObject} localization.tooltips.colors * @property {PlainObject} localization.tooltips.colors
* @property {string} localization.tooltips.colors.newColor * @property {string} localization.tooltips.colors.newColor
* @property {string} localization.tooltips.colors.currentColor * @property {string} localization.tooltips.colors.currentColor
* @property {PlainObject} localization.tooltips.buttons * @property {PlainObject} localization.tooltips.buttons
* @property {string} localization.tooltips.buttons.ok * @property {string} localization.tooltips.buttons.ok
* @property {string} localization.tooltips.buttons.cancel * @property {string} localization.tooltips.buttons.cancel
* @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.hue * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.hue
* @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.saturation * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.saturation
* @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.value * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.value
* @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.red * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.red
* @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.green * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.green
* @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.blue * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.blue
* @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.alpha * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.alpha
* @property {PlainObject} localization.tooltips.hex * @property {PlainObject} localization.tooltips.hex
* @property {string} localization.tooltips.hex.textbox * @property {string} localization.tooltips.hex.textbox
* @property {string} localization.tooltips.hex.alpha * @property {string} localization.tooltips.hex.alpha
*/ */
/** /**
* The jPicker defaults - you can change anything in this section (such as the * The jPicker defaults - you can change anything in this section (such as the
* clientPath to your images) without fear of breaking the program. * clientPath to your images) without fear of breaking the program.
* @namespace {external:jQuery.fn.jPickerOptions} defaults * @namespace {external:jQuery.fn.jPickerOptions} defaults
* @memberof external:jQuery.fn.$.fn.jPicker * @memberof external:jQuery.fn.$.fn.jPicker
* @borrows external:jQuery.fn.jPickerOptions as external:jQuery.fn.jPicker.defaults * @borrows external:jQuery.fn.jPickerOptions as external:jQuery.fn.jPicker.defaults
* @see Source for all of the values * @see Source for all of the values
*/ */
$.fn.jPicker.defaults = { export const jPickerDefaults = {
window: { window: {
title: null, title: null,
effects: { effects: {
@@ -2505,8 +1896,8 @@ const jPicker = function ($) {
} }
} }
} }
};
return $;
}; };
// return $;
// };
export default jPicker; // export default jPicker;

78
src/editor/components/jgraduate/paint.js Normal file
View File

@@ -0,0 +1,78 @@
/**
*
*/
export default class Paint {
/**
* @param {module:jGraduate.jGraduatePaintOptions} [opt]
*/
constructor (opt) {
const options = opt || {};
this.alpha = isNaN(options.alpha) ? 100 : options.alpha;
// copy paint object
if (options.copy) {
/**
* @name module:jGraduate~Paint#type
* @type {"none"|"solidColor"|"linearGradient"|"radialGradient"}
*/
this.type = options.copy.type;
/**
* Represents opacity (0-100).
* @name module:jGraduate~Paint#alpha
* @type {Float}
*/
this.alpha = options.copy.alpha;
/**
* Represents #RRGGBB hex of color.
* @name module:jGraduate~Paint#solidColor
* @type {string}
*/
this.solidColor = null;
/**
* @name module:jGraduate~Paint#linearGradient
* @type {SVGLinearGradientElement}
*/
this.linearGradient = null;
/**
* @name module:jGraduate~Paint#radialGradient
* @type {SVGRadialGradientElement}
*/
this.radialGradient = null;
switch (this.type) {
case 'none':
break;
case 'solidColor':
this.solidColor = options.copy.solidColor;
break;
case 'linearGradient':
this.linearGradient = options.copy.linearGradient.cloneNode(true);
break;
case 'radialGradient':
this.radialGradient = options.copy.radialGradient.cloneNode(true);
break;
}
// create linear gradient paint
} else if (options.linearGradient) {
this.type = 'linearGradient';
this.solidColor = null;
this.radialGradient = null;
this.linearGradient = options.linearGradient.cloneNode(true);
// create linear gradient paint
} else if (options.radialGradient) {
this.type = 'radialGradient';
this.solidColor = null;
this.linearGradient = null;
this.radialGradient = options.radialGradient.cloneNode(true);
// create solid color paint
} else if (options.solidColor) {
this.type = 'solidColor';
this.solidColor = options.solidColor;
// create empty paint
} else {
this.type = 'none';
this.solidColor = null;
this.linearGradient = null;
this.radialGradient = null;
}
}
}

18
src/editor/components/seColorPicker.js
View File

@@ -1,13 +1,8 @@
/* globals jQuery */ /* globals $ */
import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js'; import {jGraduate, jGraduateMethod} from './jgraduate/jQuery.jGraduate.js';
import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js'; // import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
import PaintBox from './PaintBox.js'; import PaintBox from './PaintBox.js';
const $ = [
jQueryPluginJGraduate,
jQueryPluginJPicker
].reduce((jq, func) => func(jq), jQuery);
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
<style> <style>
@@ -181,8 +176,9 @@ export class SeColorPicker extends HTMLElement {
.draggable({ .draggable({
cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker', cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
containment: 'window' containment: 'window'
}) });
.jGraduate( jGraduateMethod(
$(this.$color_picker),
{ {
images: {clientPath: './components/jgraduate/images/'}, images: {clientPath: './components/jgraduate/images/'},
paint, paint,
@@ -190,7 +186,7 @@ export class SeColorPicker extends HTMLElement {
newstop: 'inverse' newstop: 'inverse'
}, },
(p) => { (p) => {
paint = new $.jGraduate.Paint(p); paint = new jGraduate.Paint(p);
this.setPaint(paint); this.setPaint(paint);
const changeEvent = new CustomEvent('change', {detail: { const changeEvent = new CustomEvent('change', {detail: {
paint paint

7
src/editor/panels/BottomPanelHandlers.js
View File

@@ -1,4 +1,5 @@
/* globals $ */ /* globals $ */
import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
import SvgCanvas from '../../svgcanvas/svgcanvas.js'; import SvgCanvas from '../../svgcanvas/svgcanvas.js';
const {$id} = SvgCanvas; const {$id} = SvgCanvas;
@@ -160,7 +161,7 @@ class BottomPanelHandlers {
// shift key or right click for stroke // shift key or right click for stroke
const {picker, color} = e.detail; const {picker, color} = e.detail;
// Webkit-based browsers returned 'initial' here for no stroke // Webkit-based browsers returned 'initial' here for no stroke
const paint = color === 'none' ? new $.jGraduate.Paint() : new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)}); const paint = color === 'none' ? new jGraduate.Paint() : new jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
if (picker === 'fill') { if (picker === 'fill') {
$id('fill_color').setPaint(paint); $id('fill_color').setPaint(paint);
} else { } else {
@@ -188,8 +189,8 @@ class BottomPanelHandlers {
$id('opacity').addEventListener('change', this.handleOpacity.bind(this)); $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
$id('palette').addEventListener('change', this.handlePalette.bind(this)); $id('palette').addEventListener('change', this.handlePalette.bind(this));
const {curConfig} = this.editor.configObj; const {curConfig} = this.editor.configObj;
$id('fill_color').setPaint(new $.jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color})); $id('fill_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color}));
$id('stroke_color').setPaint(new $.jGraduate.Paint({alpha: 100, solidColor: curConfig.initStroke.color})); $id('stroke_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initStroke.color}));
} }
} }

3
src/svgcanvas/elem-get-set.js
View File

@@ -1,4 +1,5 @@
/* globals jQuery */ /* globals jQuery */
import {jGraduate} from '../editor/components/jgraduate/jQuery.jGraduate.js';
/** /**
* @module elem-get-set get and set methods. * @module elem-get-set get and set methods.
* @license MIT * @license MIT
@@ -452,7 +453,7 @@ export const findDuplicateGradient = function (grad) {
*/ */
export const setPaintMethod = function (type, paint) { export const setPaintMethod = function (type, paint) {
// make a copy // make a copy
const p = new $.jGraduate.Paint(paint); const p = new jGraduate.Paint(paint);
this.setPaintOpacity(type, p.alpha / 100, true); this.setPaintOpacity(type, p.alpha / 100, true);
// now set the current paint object // now set the current paint object