#46 jquery plugin convert to pure javascript

src/editor/components/PaintBox.js

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

src/editor/components/index.js

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

src/editor/components/jgraduate/ColorValuePicker.js

@@ -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);
+  }
+}

src/editor/components/jgraduate/paint.js

@@ -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;
+    }
+  }
+}

src/editor/components/seColorPicker.js

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

src/editor/panels/BottomPanelHandlers.js

@@ -1,4 +1,5 @@
 /* globals $ */
+import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
 import SvgCanvas from '../../svgcanvas/svgcanvas.js';
 
 const {$id} = SvgCanvas;
@@ -160,7 +161,7 @@ class BottomPanelHandlers {
     // shift key or right click for stroke
     const {picker, color} = e.detail;
     // 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') {
       $id('fill_color').setPaint(paint);
     } else {
@@ -188,8 +189,8 @@ class BottomPanelHandlers {
     $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
     $id('palette').addEventListener('change', this.handlePalette.bind(this));
     const {curConfig} = this.editor.configObj;
-    $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('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}));
   }
 }
 

src/svgcanvas/elem-get-set.js

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