progress

src/editor/components/jgraduate/css/jPicker.css

@@ -0,0 +1,256 @@
+.jPicker .Icon {
+    display: inline-block;
+    height: 24px;
+    position: relative;
+    text-align: left;
+    width: 25px
+}
+
+.jPicker .Icon span.Color, .jPicker .Icon span.Alpha {
+    background-position: 2px 2px;
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%
+}
+
+.jPicker .Icon span.Image {
+    background-repeat: no-repeat;
+    cursor: pointer;
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%
+}
+
+.jPicker.Container {
+    z-index: 10
+}
+
+table.jPicker {
+    background-color: #efefef;
+    border: 1px outset #666;
+    font-family: Arial, Helvetica, Sans-Serif;
+    font-size: 12px!important;
+    margin: 0;
+    padding: 5px;
+    width: 545px;
+    z-index: 20
+}
+
+.jPicker .Move {
+    background-color: #ddd;
+    border-color: #fff #666 #666 #fff;
+    border-style: solid;
+    border-width: 1px;
+    cursor: move;
+    height: 12px;
+    padding: 0
+}
+
+.jPicker .Title {
+    font-size: 11px!important;
+    font-weight: bold;
+    margin: -2px 0 0 0;
+    padding: 0;
+    text-align: center;
+    width: 100%
+}
+
+.jPicker div.Map {
+    border-bottom: 2px solid #fff;
+    border-left: 2px solid #9a9a9a;
+    border-right: 2px solid #fff;
+    border-top: 2px solid #9a9a9a;
+    cursor: crosshair;
+    height: 260px;
+    margin: 0 5px 0 5px;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    width: 260px
+}
+
+.jPicker div[class="Map"] {
+    height: 256px;
+    width: 256px
+}
+
+.jPicker div.Bar {
+    border-bottom: 2px solid #fff;
+    border-left: 2px solid #9a9a9a;
+    border-right: 2px solid #fff;
+    border-top: 2px solid #9a9a9a;
+    cursor: n-resize;
+    height: 260px;
+    margin: 12px 10px 0 5px;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    width: 24px
+}
+
+.jPicker div[class="Bar"] {
+    height: 256px;
+    width: 20px
+}
+
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3, .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4, .jPicker .Bar .Map5, .jPicker .Bar .Map6 {
+    background-color: transparent;
+    background-image: none;
+    display: block;
+    left: 0;
+    position: absolute;
+    top: 0
+}
+
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3 {
+    height: 2596px;
+    width: 256px
+}
+
+.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
+    height: 3896px;
+    width: 20px
+}
+
+.jPicker .Bar .Map5, .jPicker .Bar .Map6 {
+    height: 256px;
+    width: 20px
+}
+
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Bar .Map6 {
+    background-repeat: no-repeat
+}
+
+.jPicker .Map .Map3, .jPicker .Bar .Map5 {
+    background-repeat: repeat
+}
+
+.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
+    background-repeat: repeat-x
+}
+
+.jPicker .Map .Arrow {
+    display: block;
+    position: absolute
+}
+
+.jPicker .Bar .Arrow {
+    display: block;
+    left: 0;
+    position: absolute
+}
+
+.jPicker .Preview {
+    font-size: 9px;
+    text-align: center
+}
+
+.jPicker .Preview div {
+    border: 2px inset #eee;
+    height: 62px;
+    margin: 0 auto;
+    padding: 0;
+    width: 62px
+}
+
+.jPicker .Preview div span {
+    border: 1px solid #000;
+    display: block;
+    height: 30px;
+    margin: 0 auto;
+    padding: 0;
+    width: 60px
+}
+
+.jPicker .Preview .Active {
+    border-bottom-width: 0
+}
+
+.jPicker .Preview .Current {
+    border-top-width: 0;
+    cursor: pointer
+}
+
+.jPicker .Button {
+    text-align: center;
+    width: 115px
+}
+
+.jPicker .Button input {
+    width: 100px
+}
+
+.jPicker .Button .Ok {
+    margin: 12px 0 5px 0
+}
+
+.jPicker td.Radio {
+    margin: 0;
+    padding: 0;
+    width: 31px
+}
+
+.jPicker td.Radio input {
+    margin: 0 5px 0 0;
+    padding: 0
+}
+
+.jPicker td.Text {
+    font-size: 12px!important;
+    height: 22px;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    width: 70px
+}
+
+.jPicker tr.Hex td.Text {
+    width: 100px
+}
+
+.jPicker td.Text input {
+    background-color: #fff;
+    border: 1px inset #aaa;
+    height: 19px;
+    margin: 0 0 0 5px;
+    text-align: left;
+    width: 30px
+}
+
+.jPicker td[class="Text"] input {
+    height: 15px
+}
+
+.jPicker tr.Hex td.Text input.Hex {
+    width: 50px
+}
+
+.jPicker tr.Hex td.Text input.AHex {
+    width: 20px
+}
+
+.jPicker .Grid {
+    text-align: center;
+    width: 114px
+}
+
+.jPicker .Grid span.QuickColor {
+    border: 1px inset #aaa;
+    cursor: pointer;
+    display: inline-block;
+    height: 15px;
+    line-height: 15px;
+    margin: 0;
+    padding: 0;
+    width: 19px
+}
+
+.jPicker .Grid span[class="QuickColor"] {
+    width: 17px
+}

src/editor/components/jgraduate/jQuery.jGraduate.js

@@ -17,6 +17,11 @@
  * @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception?
 */
 
+/**
+ * @todo JFH: This jQuery plugin was adapted to work within a Web Component.
+ * We have to rewrite it as a pure webcomponent.
+*/
+
 /* eslint-disable jsdoc/require-property */
 /**
   * The jQuery namespace.
@@ -273,6 +278,9 @@ export default function jQueryPluginJGraduate ($) {
         $settings = $.extend(true, {}, $.fn.jGraduateDefaults, options || {}),
         id = $this.attr('id'),
         idref = '#' + $this.attr('id') + ' ';
+      // JFH !!!!!
+      const $shadowRoot = this.parentNode;
+      const $wc = (selector) => $($shadowRoot.querySelectorAll(selector));
 
       if (!idref) {
         /* await */ $.alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
@@ -332,8 +340,9 @@ export default function jQueryPluginJGraduate ($) {
         '<div class="jGraduate_LightBox"></div>' +
         '<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>'
       );
-      const colPicker = $(idref + '> .jGraduate_colPick');
+      /* JFH !!!! */
-      const gradPicker = $(idref + '> .jGraduate_gradPick');
+      const colPicker = $wc(idref + '> .jGraduate_colPick');
+      const gradPicker = $wc(idref + '> .jGraduate_gradPick');
 
       gradPicker.html(
         '<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
@@ -440,9 +449,9 @@ export default function jQueryPluginJGraduate ($) {
       const attrInput = {};
 
       const SLIDERW = 145;
-      $('.jGraduate_SliderBar').width(SLIDERW);
+      $wc('.jGraduate_SliderBar').width(SLIDERW);
-
+      // JFH !!!!!!
-      const container = $('#' + id + '_jGraduate_GradContainer')[0];
+      const container = $wc('#' + id + '_jGraduate_GradContainer')[0];
 
       const svg = mkElem('svg', {
         id: id + '_jgraduate_svg',
@@ -491,7 +500,8 @@ export default function jQueryPluginJGraduate ($) {
 
       let stopGroup; // eslint-disable-line prefer-const
       if (isSolid) {
-        grad = curGradient = $('#' + id + '_lg_jgraduate_grad')[0];
+        // JFH !!!!!!!!
+        grad = curGradient = $wc('#' + id + '_lg_jgraduate_grad')[0];
         color = $this.paint[curType];
         mkStop(0, '#' + color, 1);
 
@@ -578,18 +588,6 @@ export default function jQueryPluginJGraduate ($) {
 
       focusCoord[0].id = id + '_jGraduate_focusCoord';
 
-      // const coords = $(idref + ' .grad_coord');
-
-      // $(container).hover(function () {
-      //   coords.animate({
-      //     opacity: 1
-      //   }, 500);
-      // }, function () {
-      //   coords.animate({
-      //     opacity: .2
-      //   }, 500);
-      // });
-
       let showFocus;
       $.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function (i, attr) {
         const isRadial = isNaN(attr[1]);
@@ -606,7 +604,7 @@ export default function jQueryPluginJGraduate ($) {
           }
         }
 
-        attrInput[attr] = $('#' + id + '_jGraduate_' + attr)
+        attrInput[attr] = $wc('#' + id + '_jGraduate_' + attr)
           .val(attrval)
           .change(function () {
             // TODO: Support values < 0 and > 1 (zoomable preview?)
@@ -683,14 +681,14 @@ export default function jQueryPluginJGraduate ($) {
           e.preventDefault();
           return false;
         }).data('stop', stop).data('bg', pathbg).dblclick(function () {
-          $('div.jGraduate_LightBox').show();
+          $wc('div.jGraduate_LightBox').show();
           const colorhandle = this;
           let stopOpacity = Number(stop.getAttribute('stop-opacity')) || 1;
           let stopColor = stop.getAttribute('stop-color') || 1;
           let thisAlpha = (Number.parseFloat(stopOpacity) * 255).toString(16);
           while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }
           colr = stopColor.substr(1) + thisAlpha;
-          $('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({
+          $wc('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({
             window: {title: 'Pick the start color and opacity for the gradient'},
             images: {clientPath: $settings.images.clientPath},
             color: {active: colr, alphaSupport: true}
@@ -701,11 +699,11 @@ export default function jQueryPluginJGraduate ($) {
             colorhandle.setAttribute('fill-opacity', stopOpacity);
             stop.setAttribute('stop-color', stopColor);
             stop.setAttribute('stop-opacity', stopOpacity);
-            $('div.jGraduate_LightBox').hide();
+            $wc('div.jGraduate_LightBox').hide();
-            $('#' + id + '_jGraduate_stopPicker').hide();
+            $wc('#' + id + '_jGraduate_stopPicker').hide();
           }, null, function () {
-            $('div.jGraduate_LightBox').hide();
+            $wc('div.jGraduate_LightBox').hide();
-            $('#' + id + '_jGraduate_stopPicker').hide();
+            $wc('#' + id + '_jGraduate_stopPicker').hide();
           });
         });
 
@@ -735,13 +733,13 @@ export default function jQueryPluginJGraduate ($) {
       */
       function remStop () {
         delStop.setAttribute('display', 'none');
-        const path = $(curStop);
+        const path = $wc(curStop);
         const stop = path.data('stop');
         const bg = path.data('bg');
-        $([curStop, stop, bg]).remove();
+        $wc([curStop, stop, bg]).remove();
       }
 
-      const stopMakerDiv = $('#' + id + '_jGraduate_StopSlider');
+      const stopMakerDiv = $wc('#' + id + '_jGraduate_StopSlider');
 
       let stops, curStop, drag;
 
@@ -761,9 +759,6 @@ export default function jQueryPluginJGraduate ($) {
         if (curStop) curStop.setAttribute('stroke', '#000');
         item.setAttribute('stroke', 'blue');
         curStop = item;
-        //   stops = $('stop');
-        //   opac_select.val(curStop.attr('fill-opacity') || 1);
-        //   root.append(delStop);
       }
 
       let stopOffset;
@@ -792,7 +787,7 @@ export default function jQueryPluginJGraduate ($) {
         const rot = angle ? 'rotate(' + angle + ',' + cX + ',' + cY + ') ' : '';
         if (scaleX === 1 && scaleY === 1) {
           curGradient.removeAttribute('gradientTransform');
-          // $('#ang').addClass('dis');
+          // $wc('#ang').addClass('dis');
         } else {
           const x = -cX * (scaleX - 1);
           const y = -cY * (scaleY - 1);
@@ -801,7 +796,7 @@ export default function jQueryPluginJGraduate ($) {
             rot + 'translate(' + x + ',' + y + ') scale(' +
               scaleX + ',' + scaleY + ')'
           );
-          // $('#ang').removeClass('dis');
+          // $wc('#ang').removeClass('dis');
         }
       }
 
@@ -981,22 +976,22 @@ export default function jQueryPluginJGraduate ($) {
 
       previewRect.setAttribute('fill-opacity', gradalpha / 100);
 
-      $('#' + id + ' div.grad_coord').mousedown(function (evt) {
+      $wc(id + ' div.grad_coord').mousedown(function (evt) {
         evt.preventDefault();
-        draggingCoord = $(this);
+        draggingCoord = $wc(this);
         // const sPos = draggingCoord.offset();
         offset = draggingCoord.parent().offset();
         $win.mousemove(onCoordDrag).mouseup(onCoordUp);
       });
 
       // bind GUI elements
-      $('#' + id + '_jGraduate_Ok').bind('click', function () {
+      $wc(id + '_jGraduate_Ok').bind('click', function () {
         $this.paint.type = curType;
         $this.paint[curType] = curGradient.cloneNode(true);
         $this.paint.solidColor = null;
         okClicked();
       });
-      $('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
+      $wc(id + '_jGraduate_Cancel').bind('click', function (paint) {
         cancelClicked();
       });
 
@@ -1010,11 +1005,11 @@ export default function jQueryPluginJGraduate ($) {
         }
       }
 
-      $('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
+      $wc('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
 
       let lastfx, lastfy;
 
-      $('#' + id + '_jGraduate_match_ctr').change(function () {
+      $wc('#' + id + '_jGraduate_match_ctr').change(function () {
         showFocus = !this.checked;
         focusCoord.toggle(showFocus);
         attrInput.fx.val('');
@@ -1157,13 +1152,13 @@ export default function jQueryPluginJGraduate ($) {
       };
 
       $.each(sliders, function (type, data) {
-        const handle = $(data.handle);
+        const handle = $wc(data.handle);
         handle.mousedown(function (evt) {
           const parent = handle.parent();
           slider = {
             type,
             elem: handle,
-            input: $(data.input),
+            input: $wc(data.input),
             parent,
             offset: parent.offset()
           };
@@ -1171,7 +1166,7 @@ export default function jQueryPluginJGraduate ($) {
           evt.preventDefault();
         });
 
-        $(data.input).val(data.val).change(function () {
+        $wc(data.input).val(data.val).change(function () {
           const isRad = curType === 'radialGradient';
           let val = Number(this.value);
           let xpos = 0;
@@ -1261,28 +1256,30 @@ export default function jQueryPluginJGraduate ($) {
         null,
         function () { cancelClicked(); }
       );
-
+      // JFH !!!!
-      const tabs = $(idref + ' .jGraduate_tabs li');
+      // const tabs = $wc(idref + ' .jGraduate_tabs li');
+      const tabs = $wc('.jGraduate_tabs li');
       tabs.click(function () {
         tabs.removeClass('jGraduate_tab_current');
         $(this).addClass('jGraduate_tab_current');
-        $(idref + ' > div').hide();
+        $wc(idref + ' > div').hide();
         const type = $(this).attr('data-type');
-        /* const container = */ $(idref + ' .jGraduate_gradPick').show();
+        $wc(idref + ' .jGraduate_gradPick').show();
         if (type === 'rg' || type === 'lg') {
           // Show/hide appropriate fields
-          $('.jGraduate_' + type + '_field').show();
+          $wc('.jGraduate_' + type + '_field').show();
-          $('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
+          $wc('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
 
-          $('#' + id + '_jgraduate_rect')[0].setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
+          $wc('#' + id + '_jgraduate_rect')[0]
+            .setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
 
           // Copy stops
 
           curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
 
-          $('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
+          $wc('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
 
-          const newGrad = $('#' + id + '_' + type + '_jgraduate_grad')[0];
+          const newGrad = $wc('#' + id + '_' + type + '_jgraduate_grad')[0];
 
           if (curGradient !== newGrad) {
             const curStops = $(curGradient).find('stop');
@@ -1292,27 +1289,27 @@ export default function jQueryPluginJGraduate ($) {
             curGradient.setAttribute('spreadMethod', sm);
           }
           showFocus = type === 'rg' && curGradient.getAttribute('fx') !== null && !(cx === fx && cy === fy);
-          $('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
+          $wc('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
           if (showFocus) {
-            $('#' + id + '_jGraduate_match_ctr')[0].checked = false;
+            $wc('#' + id + '_jGraduate_match_ctr')[0].checked = false;
           }
         } else {
-          $(idref + ' .jGraduate_gradPick').hide();
+          $wc(idref + ' .jGraduate_gradPick').hide();
-          $(idref + ' .jGraduate_colPick').show();
+          $wc(idref + ' .jGraduate_colPick').show();
         }
       });
-      $(idref + ' > div').hide();
+      $wc(idref + ' > div').hide();
       tabs.removeClass('jGraduate_tab_current');
       let tab;
       switch ($this.paint.type) {
       case 'linearGradient':
-        tab = $(idref + ' .jGraduate_tab_lingrad');
+        tab = $wc(idref + ' .jGraduate_tab_lingrad');
         break;
       case 'radialGradient':
-        tab = $(idref + ' .jGraduate_tab_radgrad');
+        tab = $wc(idref + ' .jGraduate_tab_radgrad');
         break;
       default:
-        tab = $(idref + ' .jGraduate_tab_color');
+        tab = $wc(idref + ' .jGraduate_tab_color');
         break;
       }
       $this.show();

src/editor/components/jgraduate/jQuery.jPicker.js

@@ -1556,7 +1556,7 @@ const jPicker = function ($) {
           const all = ui.val('all');
           activePreview.css({backgroundColor: (all && '#' + all.hex) || 'transparent'});
           setAlpha.call(that, activePreview, (all && toFixedNumeric((all.a * 100) / 255, 4)) || 0);
-        } catch (e) { }
+        } catch (e) {}
       }
       /**
       * @param {external:jQuery} ui

src/editor/components/seColorPicker.js

@@ -1,6 +1,6 @@
 /* globals jQuery */
-import jQueryPluginJGraduate from '../jgraduate/jQuery.jGraduate.js';
+import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';
-import jQueryPluginJPicker from '../jgraduate/jQuery.jPicker.js';
+import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
 import PaintBox from './PaintBox.js';
 
 const $ = [
@@ -11,7 +11,9 @@ const $ = [
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
-  img {
+  @import "./components/jgraduate/css/jGraduate.css";
+  @import "./components/jgraduate/css/jPicker.css";
+  #logo {
     height: 22px;
     width: 22px;
   }
@@ -26,17 +28,20 @@ template.innerHTML = `
     height: 26px;
     line-height: 26px;
     border-radius: 3px;
-    min-width: 52px;
+    width: 52px;
     display: flex;
     align-items: center;
     margin-right: 4px;
     justify-content: space-evenly;
   }
-  
+  #color_picker {
+    position: absolute;
+    bottom: 40px;
+  }
   </style>
   <div id="picker">
-      <img src="./images/logo.svg" alt="icon">
+      <img src="./images/logo.svg" alt="icon" id="logo">
-      <label for="color" title="Change xxx color"></label>
+      <label for="color" title="Change xxx color" id="label"></label>
       <div class="block">
           <div id="bg"></div>
           <div id="color" class="block"></div>
@@ -46,7 +51,7 @@ template.innerHTML = `
   <div id="color_picker"></div>
 `;
 /**
- * @class SeMenuItem
+ * @class SeColorPicker
  */
 export class SeColorPicker extends HTMLElement {
   /**
@@ -57,17 +62,18 @@ export class SeColorPicker extends HTMLElement {
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
     this._shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$img = this._shadowRoot.querySelector('img');
+    this.$logo = this._shadowRoot.getElementById('logo');
-    this.$label = this._shadowRoot.querySelector('label');
+    this.$label = this._shadowRoot.getElementById('label');
-    this.$picker = this._shadowRoot.getElementById('picker');
     this.paintBox = null;
+    this.$picker = this._shadowRoot.getElementById('picker');
+    this.$color_picker = this._shadowRoot.getElementById('color_picker');
   }
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['label', 'src', 'value', 'picker'];
+    return ['label', 'src', 'type'];
   }
   /**
    * @function attributeChangedCallback
@@ -80,10 +86,13 @@ export class SeColorPicker extends HTMLElement {
     if (oldValue === newValue) return;
     switch (name) {
     case 'src':
-      this.$img.setAttribute('src', newValue);
+      this.$logo.setAttribute('src', newValue);
       break;
     case 'label':
-      this.$label.setAttribute('title', newValue);
+      this.setAttribute('title', newValue);
+      break;
+    case 'type':
+      this.$label.setAttribute(`Pick a ${newValue} Paint and Opacity`);
       break;
     default:
       // eslint-disable-next-line no-console
@@ -96,7 +105,7 @@ export class SeColorPicker extends HTMLElement {
    * @returns {any}
    */
   get label () {
-    return this.getAttribute('label');
+    return this.$label.getAttribute('title');
   }
 
   /**
@@ -106,6 +115,21 @@ export class SeColorPicker extends HTMLElement {
   set label (value) {
     this.setAttribute('label', value);
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get type () {
+    return this.getAttribute('type');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set type (value) {
+    this.setAttribute('type', value);
+  }
   /**
    * @function get
    * @returns {any}
@@ -138,29 +162,31 @@ export class SeColorPicker extends HTMLElement {
   connectedCallback () {
     this.paintBox = new PaintBox(this, this.type);
     let {paint} = this.paintBox;
-    $('#color_picker')
+    $(this.$picker).click(() => {
-      .draggable({
+      $(this.$color_picker)
-        cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
+        .draggable({
-        containment: 'window'
+          cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
-      })
+          containment: 'window'
-      .jGraduate(
+        })
-        {
+        .jGraduate(
-          images: {clientPath: './jgraduate/images/'},
+          {
-          paint,
+            images: {clientPath: './components/jgraduate/images/'},
-          window: {pickerTitle: this.label},
+            paint,
-          // images: {clientPath: configObj.curConfig.imgPath},
+            window: {pickerTitle: this.label},
-          newstop: 'inverse'
+            // images: {clientPath: configObj.curConfig.imgPath},
-        },
+            newstop: 'inverse'
-        function (p) {
+          },
-          paint = new $.jGraduate.Paint(p);
+          function (p) {
-          this.paintBox.setPaint(paint);
+            paint = new $.jGraduate.Paint(p);
-          this.svgCanvas.setPaint(this.picker, paint);
+            this.paintBox.setPaint(paint);
-          $('#color_picker').hide();
+            this.svgCanvas.setPaint(this.picker, paint);
-        },
+            $('#color_picker').hide();
-        () => {
+          },
-          $('#color_picker').hide();
+          () => {
-        }
+            $('#color_picker').hide();
-      );
+          }
+        );
+    });
   }
 }
 

src/editor/index.html

@@ -398,8 +398,6 @@
           <li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
         </ul>
       </div>
-      <!-- hidden divs -->
-      <div id="color_picker"></div>
     </div>
     <div id="dialog_box">
       <div class="overlay"></div>

src/editor/jgraduate/css/jPicker.css

@@ -1 +0,0 @@
-.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 5px 0 5px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;text-align:center}.jPicker .Preview div{border:2px inset #eee;height:62px;margin:0 auto;padding:0;width:62px}.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker .Button{text-align:center;width:115px}.jPicker .Button input{width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px}

src/editor/svgedit.css

@@ -1,7 +1,3 @@
-@import "./jgraduate/css/jGraduate.css";
-@import "./jgraduate/css/jPicker.css";
-
-
 body {
   background: #D0D0D0;
 }