#46 extend and data changes

src/editor/components/jgraduate/ColorValuePicker.js

@@ -350,10 +350,7 @@ export default class ColorValuePicker {
       value = inputs[2],
       hex = inputs[(inputs.length > 7) ? 7 : 6],
       ahex = inputs.length > 7 ? inputs[8] : null;
-    $.extend(true, that, {
+    Object.assign(that, {destroy});
-      // public properties and methods
-      destroy
-    });
     red.addEventListener('keyup', keyUp);
     green.addEventListener('keyup', keyUp);
     blue.addEventListener('keyup', keyUp);

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

@@ -225,7 +225,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
     idref = '#' + $this.getAttribute('id') + ' ';
   // JFH !!!!!
   const $shadowRoot = elem.parentNode;
-  const $wc = (selector) => $($shadowRoot.querySelectorAll(selector));
+  // const $wc = (selector) => $($shadowRoot.querySelectorAll(selector));
 
   if (!idref) {
     // eslint-disable-next-line no-alert
@@ -596,6 +596,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
    */
   function mkStop (n, colr, opac, sel, stopElem) {
     const stop = stopElem || mkElem('stop', {
+      id: 'jq_stop_' + Math.floor((Math.random() * 10000) + 1),
       'stop-color': colr,
       'stop-opacity': opac,
       offset: n
@@ -614,6 +615,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       '2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z';
 
     const pathbg = mkElem('path', {
+      id: 'jq_pathbg_' + Math.floor((Math.random() * 10000) + 1),
       d: pickerD,
       fill: 'url(#jGraduate_trans)',
       transform: 'translate(' + (10 + n * MAX) + ', 26)'
@@ -637,9 +639,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       e.preventDefault();
       return false;
     });
-    $(path).data('stop', stop).data('bg', pathbg);
+    path.dataset.stop = stop.getAttribute('id');
-    // path.dataset.stop = stop;
+    path.dataset.bg = pathbg.getAttribute('id');
-    // path.dataset.bg = pathbg;
     path.addEventListener('dblclick', function () {
       $this.querySelector('#jGraduate_LightBox').style.display = 'block';
       const colorhandle = this;
@@ -696,12 +697,11 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   * @returns {void}
   */
   function remStop () {
-    console.log("remStop --> ", curStop);
     delStop.setAttribute('display', 'none');
-    const path = $wc(curStop);
+    const path = curStop;
-    const stop = path.data('stop');
+    delete path.dataset.stop;
-    const bg = path.data('bg');
+    delete path.dataset.bg;
-    $([curStop, stop, bg]).remove();
+    curStop.parentNode.removeChild(curStop);
   }
 
   const stopMakerDiv = $this.querySelector('#' + id + '_jGraduate_StopSlider');
@@ -787,8 +787,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
     }
 
     drag.setAttribute('transform', xfStr);
-    $.data(drag, 'bg').setAttribute('transform', xfStr);
+    const jqpgpath = $this.querySelector('#'+drag.dataset.bg); 
-    const stop = $.data(drag, 'stop');
+    jqpgpath.setAttribute('transform', xfStr);
+    const stop = $this.querySelector('#'+drag.dataset.stop); 
     const sX = (x - 10) / MAX;
 
     stop.setAttribute('offset', sX);

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

@@ -1210,7 +1210,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
   function documentMouseMove (e) {
     container.style.left = elementStartX - (pageStartX - e.pageX) + 'px';
     container.style.top = elementStartY - (pageStartY - e.pageY) + 'px';
-    if (settings.window.expandable && !$.support.boxModel) {
+    if (settings.window.expandable) {
       const prev = container.previousElementSibling;
       prev.style.left = container.style.left;
       prev.style.top = container.style.top;
@@ -1251,7 +1251,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
     * @returns {void}
     */
     function attachIFrame () {
-      if (!settings.window.expandable || $.support.boxModel) return;
+      if (!settings.window.expandable) return;
       const table = container.querySelector('#jPicker-table');
       container.insertAdjacentElement('beforebegin', document.createElement('iframe'));
       const pELem = container.previousElementSibling;
@@ -1291,7 +1291,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
     */
     function removeIFrame () {
       if (settings.window.expandable) container.style.zIndex = 10;
-      if (!settings.window.expandable || $.support.boxModel) return;
+      if (!settings.window.expandable) return;
       container.prev().remove();
     }
     container.style.display = 'none';
@@ -1659,8 +1659,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
     iconAlpha = null, // iconAlpha for popup icon
     iconImage = null, // iconImage popup icon
     moveBar = null; // drag bar
-
+  Object.assign(that, {
-  $.extend(true, that, {
     // public properties, methods, and callbacks
     commitCallback, // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks "OK"
     liveCallback, // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)