From eaa65b1329fd92d91b985efa4ff1f9e303afe13e Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Wed, 3 Feb 2021 20:48:22 +0530
Subject: [PATCH] #46 jquery remove and convert to pure javascript

---
 .../components/jgraduate/ColorValuePicker.js  |  20 +-
 src/editor/components/jgraduate/Slider.js     |  20 +-
 .../components/jgraduate/jQuery.jGraduate.js  | 345 ++++++++++--------
 .../components/jgraduate/jQuery.jPicker.js    |  50 +--
 4 files changed, 248 insertions(+), 187 deletions(-)

diff --git a/src/editor/components/jgraduate/ColorValuePicker.js b/src/editor/components/jgraduate/ColorValuePicker.js
index a658ee6a..bcd16925 100644
--- a/src/editor/components/jgraduate/ColorValuePicker.js
+++ b/src/editor/components/jgraduate/ColorValuePicker.js
@@ -253,16 +253,16 @@ export default class ColorValuePicker {
     */
     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) : '');
+      if (context !== red) red.value = (!isNullish(all) ? all.r : '');
+      if (context !== green) green.value = (!isNullish(all) ? all.g : '');
+      if (context !== blue) blue.value = (!isNullish(all) ? all.b : '');
+      if (alpha && context !== alpha) alpha.value = (!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : '');
+      if (context !== hue) hue.value = (!isNullish(all) ? all.h : '');
+      if (context !== saturation) saturation.value = (!isNullish(all) ? all.s : '');
+      if (context !== value) value.value = (!isNullish(all) ? all.v : '');
+      if (context !== hex && ((bindedHex && context !== bindedHex) || !bindedHex)) hex.value = (!isNullish(all) ? all.hex : '');
+      if (bindedHex && context !== bindedHex && context !== hex) bindedHex.value = (!isNullish(all) ? all.hex : '');
+      if (ahex && context !== ahex) ahex.value = (!isNullish(all) ? all.ahex.substring(6) : '');
     }
     /**
     * Unbind all events and null objects.
diff --git a/src/editor/components/jgraduate/Slider.js b/src/editor/components/jgraduate/Slider.js
index 315e30d5..44a67b2d 100644
--- a/src/editor/components/jgraduate/Slider.js
+++ b/src/editor/components/jgraduate/Slider.js
@@ -10,6 +10,18 @@
 const isNullish = (val) => {
   return val === null || val === undefined;
 };
+function findPos (obj) {
+  let curleft = 0;
+  let curtop = 0;
+  if (obj.offsetParent) {
+    do {
+      curleft += obj.offsetLeft;
+      curtop += obj.offsetTop;
+    } while (obj = obj.offsetParent);
+    return {left: curleft, top: curtop};
+  }
+  return {left: curleft, top: curtop};
+}
 /**
  * Encapsulate slider functionality for the ColorMap and ColorBar -
  * could be useful to use a jQuery UI draggable for this with certain extensions.
@@ -39,7 +51,7 @@ export default class Slider {
      * @returns {void}
      */
     function mouseDown (e) {
-      const off = bar.offset();
+      const off = findPos(bar);
       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
@@ -130,9 +142,9 @@ export default class Slider {
         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'});
-        // arrow.style.left = arrowOffsetX + 'px';
-        // arrow.style.top = arrowOffsetY + 'px';
+        // arrow.css({left: arrowOffsetX + 'px', top: arrowOffsetY + 'px'});
+        arrow.style.left = arrowOffsetX + 'px';
+        arrow.style.top = arrowOffsetY + 'px';
       });
     }
 
diff --git a/src/editor/components/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js
index 329069f0..3dd456cf 100644
--- a/src/editor/components/jgraduate/jQuery.jGraduate.js
+++ b/src/editor/components/jgraduate/jQuery.jGraduate.js
@@ -1,3 +1,6 @@
+/* eslint-disable unicorn/prefer-node-remove */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable no-unsanitized/property */
 /**
  * @file jGraduate 0.4
  *
@@ -50,6 +53,19 @@ if (!window.console) {
   };
 }
 
+function findPos (obj) {
+  let curleft = 0;
+  let curtop = 0;
+  if (obj.offsetParent) {
+    do {
+      curleft += obj.offsetLeft;
+      curtop += obj.offsetTop;
+    } while (obj = obj.offsetParent);
+    return {left: curleft, top: curtop};
+  }
+  return {left: curleft, top: curtop};
+}
+
 /**
 * Adds {@link external:jQuery.jGraduate.Paint},
 * {@link external:jQuery.fn.jGraduateDefaults},
@@ -244,11 +260,11 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       break;
     }
     typeof $this.okCallback === 'function' && $this.okCallback($this.paint);
-    $this.hide();
+    $this.style.display = 'none';
   };
   const cancelClicked = function () {
     typeof $this.cancelCallback === 'function' && $this.cancelCallback();
-    $this.hide();
+    $this.style.display = 'none';
   };
 
   $.extend(
@@ -265,13 +281,12 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
 
   let // pos = $this.position(),
     color = null;
-  const $win = $(window);
+  const $win = window;
 
   if ($this.paint.type === 'none') {
     $this.paint = new jGraduate.Paint({solidColor: 'ffffff'});
   }
   $this.classList.add('jGraduate_Picker');
-  // $this.addClass('jGraduate_Picker');
   /* eslint-disable max-len */
   $this.innerHTML = '<ul class="jGraduate_tabs">' +
       '<li class="jGraduate_tab_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">Solid Color</li>' +
@@ -283,8 +298,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
     '<div class="jGraduate_LightBox" id="jGraduate_LightBox"></div>' +
     '<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>';
   /* JFH !!!! */
-  const colPicker = $this.querySelector('#jGraduate_colPick'); //($wc(idref + '> .jGraduate_colPick'))[0];
-  const gradPicker = $this.querySelector('#jGraduate_gradPick'); // ($wc(idref + '> .jGraduate_gradPick'))[0];
+  const colPicker = $this.querySelector('#jGraduate_colPick');
+  const gradPicker = $this.querySelector('#jGraduate_gradPick');
   const html = '<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
         '<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
         '<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
@@ -378,10 +393,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   const div = document.createElement('div');
   div.innerHTML = html;
   while (div.children.length > 0) {
-    console.log(gradPicker);
     gradPicker.appendChild(div.children[0]);
   }
-  console.log(gradPicker);
   /* eslint-enable max-len */
   // --------------
   // Set up all the SVG elements (the gradient, stops and rectangle)
@@ -395,9 +408,12 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   const attrInput = {};
 
   const SLIDERW = 145;
-  $wc('.jGraduate_SliderBar').width(SLIDERW);
+  const JQSliderBars = $this.querySelectorAll('.jGraduate_SliderBar');
+  for (const JQSliderBar of JQSliderBars) {
+    JQSliderBar.style.width = SLIDERW + 'px';
+  }
   // JFH !!!!!!
-  const container = $wc('#' + id + '_jGraduate_GradContainer')[0];
+  const container = $this.querySelector('#' + id + '_jGraduate_GradContainer');
 
   const svg = mkElem('svg', {
     id: id + '_jgraduate_svg',
@@ -447,7 +463,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   let stopGroup; // eslint-disable-line prefer-const
   if (isSolid) {
     // JFH !!!!!!!!
-    grad = curGradient = $wc('#' + id + '_lg_jgraduate_grad')[0];
+    grad = curGradient = $this.querySelector('#' + id + '_lg_jgraduate_grad');
     color = $this.paint[curType];
     mkStop(0, '#' + color, 1);
 
@@ -505,39 +521,72 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   }, svg);
 
   // stop visuals created here
-  const beginCoord = $('<div/>').attr({
-    class: 'grad_coord jGraduate_lg_field',
-    title: 'Begin Stop'
-  }).text(1).css({
-    top: y1 * MAX,
-    left: x1 * MAX
-  }).data('coord', 'start').appendTo(container);
+  const beginCoord = document.createElement('div');
+  beginCoord.setAttribute('class', 'grad_coord jGraduate_lg_field');
+  beginCoord.setAttribute('title', 'Begin Stop');
+  beginCoord.textContent = 1;
+  beginCoord.style.top = y1 * MAX;
+  beginCoord.style.left = x1 * MAX;
+  beginCoord.dataset.coord = 'start';
+  container.appendChild(beginCoord);
 
-  const endCoord = beginCoord.clone().text(2).css({
-    top: y2 * MAX,
-    left: x2 * MAX
-  }).attr('title', 'End stop').data('coord', 'end').appendTo(container);
+  const endCoord = document.createElement('div');
+  endCoord.setAttribute('class', 'grad_coord jGraduate_lg_field');
+  endCoord.setAttribute('title', 'End stop');
+  endCoord.textContent = 2;
+  endCoord.style.top = y2 * MAX;
+  endCoord.style.left = x2 * MAX;
+  endCoord.dataset.coord = 'end';
+  container.appendChild(endCoord);
 
-  const centerCoord = $('<div/>').attr({
-    class: 'grad_coord jGraduate_rg_field',
-    title: 'Center stop'
-  }).text('C').css({
-    top: cy * MAX,
-    left: cx * MAX
-  }).data('coord', 'center').appendTo(container);
+  const centerCoord = document.createElement('div');
+  centerCoord.setAttribute('class', 'grad_coord jGraduate_rg_field');
+  centerCoord.setAttribute('title', 'Center stop');
+  centerCoord.textContent = 'C';
+  centerCoord.style.top = cy * MAX;
+  centerCoord.style.left = cx * MAX;
+  centerCoord.dataset.coord = 'center';
+  container.appendChild(centerCoord);
 
-  const focusCoord = centerCoord.clone().text('F').css({
-    top: fy * MAX,
-    left: fx * MAX,
-    display: 'none'
-  }).attr('title', 'Focus point').data('coord', 'focus').appendTo(container);
-
-  focusCoord[0].id = id + '_jGraduate_focusCoord';
+  const focusCoord = document.createElement('div');
+  focusCoord.setAttribute('class', 'grad_coord jGraduate_rg_field');
+  focusCoord.setAttribute('title', 'Focus point');
+  focusCoord.textContent = 'F';
+  focusCoord.style.top = fy * MAX;
+  focusCoord.style.left = fx * MAX;
+  focusCoord.style.display = 'none';
+  focusCoord.dataset.coord = 'focus';
+  focusCoord.setAttribute('id', id + '_jGraduate_focusCoord');
+  container.appendChild(focusCoord);
 
   let showFocus;
-  $.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function (i, attr) {
+  const onAttrChangeHandler = (e, attr, isRadial) => {
+    // TODO: Support values < 0 and > 1 (zoomable preview?)
+    if (isNaN(Number.parseFloat(e.target.value)) || e.target.value < 0) {
+      e.target.value = 0.0;
+    } else if (e.target.value > 1) {
+      e.target.value = 1.0;
+    }
+
+    if (!(attr[0] === 'f' &&
+      !showFocus) &&
+      ((isRadial && curType === 'radialGradient') || (!isRadial && curType === 'linearGradient'))) {
+      curGradient.setAttribute(attr, e.target.value);
+    }
+
+    const $elem = isRadial
+      ? attr[0] === 'c' ? centerCoord : focusCoord
+      : attr[1] === '1' ? beginCoord : endCoord;
+
+    if (attr.includes('x') === 'left') {
+      $elem.style.left = e.target.value * MAX;
+    } else if (attr.includes('x') === 'top') {
+      $elem.style.top = e.target.value * MAX;
+    }
+  };
+  for (const [i, attr] of ['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'].entries()) {
     const isRadial = isNaN(attr[1]);
-    
+
     let attrval = curGradient.getAttribute(attr);
     if (!attrval) {
       // Set defaults
@@ -550,31 +599,11 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       }
     }
 
-    attrInput[attr] = $wc('#' + id + '_jGraduate_' + attr)
-      .val(attrval)
-      .change(function () {
-        // TODO: Support values < 0 and > 1 (zoomable preview?)
-        if (isNaN(Number.parseFloat(this.value)) || this.value < 0) {
-          this.value = 0.0;
-        } else if (this.value > 1) {
-          this.value = 1.0;
-        }
-
-        if (!(attr[0] === 'f' &&
-          !showFocus) &&
-          ((isRadial && curType === 'radialGradient') || (!isRadial && curType === 'linearGradient'))) {
-          curGradient.setAttribute(attr, this.value);
-        }
-
-        const $elem = isRadial
-          ? attr[0] === 'c' ? centerCoord : focusCoord
-          : attr[1] === '1' ? beginCoord : endCoord;
-
-        const cssName = attr.includes('x') ? 'left' : 'top';
-
-        $elem.css(cssName, this.value * MAX);
-      }).change();
-  });
+    attrInput[attr] = $this.querySelector('#' + id + '_jGraduate_' + attr);
+    attrInput[attr].value = attrval;
+    attrInput[attr].addEventListener('change', (evt) => onAttrChangeHandler(evt, attr, isRadial));
+    attrInput[attr].dispatchEvent(new Event('change'));
+  }
 
   /**
    *
@@ -596,7 +625,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       opac = stopElem.getAttribute('stop-opacity');
       n = stopElem.getAttribute('offset');
     } else {
-      console.log(curGradient);
       curGradient.appendChild(stop);
     }
     if (opac === null) opac = 1;
@@ -623,7 +651,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
     $(path).mousedown(function (e) {
       selectStop(this);
       drag = curStop;
-      $win.mousemove(dragColor).mouseup(remDrags);
+      $win.addEventListener('mousemove', dragColor);
+      $win.addEventListener('mouseup', remDrags);
       stopOffset = stopMakerDiv.offset();
       e.preventDefault();
       return false;
@@ -715,7 +744,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   * @returns {void}
   */
   function remDrags () {
-    $win.unbind('mousemove', dragColor);
+    $win.removeEventListener('mousemove', dragColor);
     if (delStop.getAttribute('display') !== 'none') {
       remStop();
     }
@@ -848,31 +877,32 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
     x = x < 0 ? 0 : x > MAX ? MAX : x;
     y = y < 0 ? 0 : y > MAX ? MAX : y;
 
-    draggingCoord.css('left', x).css('top', y);
+    draggingCoord.style.left = x + 'px';
+    draggingCoord.style.top = y + 'px';
 
     // calculate stop offset
     const fracx = x / SIZEX;
     const fracy = y / SIZEY;
 
-    const type = draggingCoord.data('coord');
+    const type = draggingCoord.dataset.coord;
     const grd = curGradient;
 
     switch (type) {
     case 'start':
-      attrInput.x1.val(fracx);
-      attrInput.y1.val(fracy);
+      attrInput.x1.value = fracx;
+      attrInput.y1.value = fracy;
       grd.setAttribute('x1', fracx);
       grd.setAttribute('y1', fracy);
       break;
     case 'end':
-      attrInput.x2.val(fracx);
-      attrInput.y2.val(fracy);
+      attrInput.x2.value = fracx;
+      attrInput.y2.value = fracy;
       grd.setAttribute('x2', fracx);
       grd.setAttribute('y2', fracy);
       break;
     case 'center':
-      attrInput.cx.val(fracx);
-      attrInput.cy.val(fracy);
+      attrInput.cx.value = fracx;
+      attrInput.cy.value = fracy;
       grd.setAttribute('cx', fracx);
       grd.setAttribute('cy', fracy);
       cX = fracx;
@@ -880,8 +910,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       xform();
       break;
     case 'focus':
-      attrInput.fx.val(fracx);
-      attrInput.fy.val(fracy);
+      attrInput.fx.value = fracx;
+      attrInput.fy.value = fracy;
       grd.setAttribute('fx', fracx);
       grd.setAttribute('fy', fracy);
       xform();
@@ -892,7 +922,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
 
   const onCoordUp = function () {
     draggingCoord = null;
-    $win.unbind('mousemove', onCoordDrag).unbind('mouseup', onCoordUp);
+    $win.removeEventListener('mousemove', onCoordDrag);
+    $win.removeEventListener('mouseup', onCoordUp);
   };
 
   // Linear gradient
@@ -923,44 +954,50 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
 
   previewRect.setAttribute('fill-opacity', gradalpha / 100);
 
-  $wc('#' + id + ' div.grad_coord').mousedown(function (evt) {
-    evt.preventDefault();
-    draggingCoord = $(this);
+  const JQGradCoords = $this.querySelectorAll('#' + id + ' div.grad_coord');
+  const onMouseDownGradCoords = (e) => {
+    e.preventDefault();
+    draggingCoord = e.target;
     // const sPos = draggingCoord.offset();
-    offset = draggingCoord.parent().offset();
-    $win.mousemove(onCoordDrag).mouseup(onCoordUp);
-  });
+    offset = findPos(draggingCoord.parentNode);
+    $win.addEventListener('mousemove', onCoordDrag);
+    $win.addEventListener('mouseup', onCoordUp);
+  };
+  for (const JQGradCoord of JQGradCoords) {
+    JQGradCoord.addEventListener('mousedown', onMouseDownGradCoords);
+  }
 
   // bind GUI elements
-  $wc('#' + id + '_jGraduate_Ok').bind('click', function () {
+  $this.querySelector('#' + id + '_jGraduate_Ok').addEventListener('click', function () {
     $this.paint.type = curType;
     $this.paint[curType] = curGradient.cloneNode(true);
     $this.paint.solidColor = null;
     okClicked();
   });
-  $wc('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
-    cancelClicked();
-  });
+  $this.querySelector('#' + id + '_jGraduate_Cancel').addEventListener('click', cancelClicked);
 
   if (curType === 'radialGradient') {
     if (showFocus) {
-      focusCoord.show();
+      focusCoord.style.display = 'block';
     } else {
-      focusCoord.hide();
-      attrInput.fx.val('');
-      attrInput.fy.val('');
+      focusCoord.style.display = 'none';
+      attrInput.fx.value = '';
+      attrInput.fy.value = '';
     }
   }
 
-  $wc('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
+  $this.querySelector('#' + id + '_jGraduate_match_ctr').checked = !showFocus;
 
   let lastfx, lastfy;
-
-  $wc('#' + id + '_jGraduate_match_ctr').change(function () {
-    showFocus = !this.checked;
-    focusCoord.toggle(showFocus);
-    attrInput.fx.val('');
-    attrInput.fy.val('');
+  const onMatchCtrHandler = (e) => {
+    showFocus = !e.target.checked;
+    if (showFocus) {
+      focusCoord.style.display = 'block';
+    } else {
+      focusCoord.style.display = 'none';
+    }
+    attrInput.fx.value = '';
+    attrInput.fy.value = '';
     const grd = curGradient;
     if (!showFocus) {
       lastfx = grd.getAttribute('fx');
@@ -972,10 +1009,11 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       const fY = lastfy || 0.5;
       grd.setAttribute('fx', fX);
       grd.setAttribute('fy', fY);
-      attrInput.fx.val(fX);
-      attrInput.fy.val(fY);
+      attrInput.fx.value = fX;
+      attrInput.fy.value = fY;
     }
-  });
+  };
+  $this.querySelector('#' + id + '_jGraduate_match_ctr').addEventListener('change', onMatchCtrHandler);
 
   stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
   numstops = stops.length;
@@ -1109,7 +1147,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
         parent,
         offset: parent.offset()
       };
-      $win.mousemove(dragSlider).mouseup(stopSlider);
+      $win.addEventListener('mousemove', dragSlider);
+      $win.addEventListener('mouseup', stopSlider);
       evt.preventDefault();
     });
 
@@ -1158,7 +1197,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       } else if (xpos < 0) {
         xpos = 0;
       }
-      handle.css({'margin-left': xpos - 5});
+      handle.style.marginLeft = (xpos - 5) + 'px';
     }).change();
   });
 
@@ -1168,7 +1207,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   };
 
   const stopSlider = function (evt) {
-    $win.unbind('mousemove', dragSlider).unbind('mouseup', stopSlider);
+    $win.removeEventListener('mousemove', dragSlider);
+    $win.removeEventListener('mouseup', stopSlider);
     slider = null;
   };
 
@@ -1181,9 +1221,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   if (!isSolid) {
     color = stops[0].getAttribute('stop-color');
   }
-
   // This should be done somewhere else, probably
-  $.extend(jPickerDefaults.window, {
+  Object.assign(jPickerDefaults.window, {
     alphaSupport: true, effects: {type: 'show', speed: 0}
   });
 
@@ -1204,70 +1243,90 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
     null,
     function () { cancelClicked(); }
   );
+
   // JFH !!!!
-  // 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');
-    $wc(idref + ' > div').hide();
-    const type = $(this).attr('data-type');
-    $wc(idref + ' .jGraduate_gradPick').show();
+  const tabs = $this.querySelectorAll('.jGraduate_tabs li');
+  const onTabsClickHandler = (e) => {
+    for (const tab of tabs) {
+      tab.classList.remove('jGraduate_tab_current');
+    }
+    e.target.classList.add('jGraduate_tab_current');
+    const innerDivs = $this.querySelectorAll(idref + ' > div');
+    [].forEach.call(innerDivs, function (innerDiv) {
+      innerDiv.style.display = 'none';
+    });
+    const type = e.target.dataset.type;
+    gradPicker.style.display = 'block';
     if (type === 'rg' || type === 'lg') {
-      // Show/hide appropriate fields
-      $wc('.jGraduate_' + type + '_field').show();
-      $wc('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
-
-      $wc('#' + id + '_jgraduate_rect')[0]
+      const tFileds = $this.querySelectorAll('.jGraduate_' + type + '_field');
+      [].forEach.call(tFileds, function (tFiled) {
+        tFiled.style.display = 'block';
+      });
+      const t1Fileds = $this.querySelectorAll('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field');
+      [].forEach.call(t1Fileds, function (tFiled) {
+        tFiled.style.display = 'none';
+      });
+      $this.querySelectorAll('#' + id + '_jgraduate_rect')[0]
         .setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
-
-      // Copy stops
-
       curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
-
-      $wc('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
-
-      const newGrad = $wc('#' + id + '_' + type + '_jgraduate_grad')[0];
-
+      const jOpacInput = $this.querySelector('#' + id + '_jGraduate_OpacInput');
+      jOpacInput.value = $this.paint.alpha;
+      jOpacInput.dispatchEvent(new Event('change'));
+      const newGrad = $this.querySelectorAll('#' + id + '_' + type + '_jgraduate_grad')[0];
       if (curGradient !== newGrad) {
-        const curStops = $(curGradient).find('stop');
-        $(newGrad).empty().append(curStops);
+        const curStops = curGradient.querySelectorAll('stop');
+        while (newGrad.firstChild) {
+          newGrad.removeChild(newGrad.firstChild);
+        }
+        [].forEach.call(curStops, function (curS) {
+          newGrad.appendChild(curS);
+        });
         curGradient = newGrad;
         const sm = spreadMethodOpt.getAttribute('value');
         curGradient.setAttribute('spreadMethod', sm);
       }
       showFocus = type === 'rg' && curGradient.getAttribute('fx') !== null && !(cx === fx && cy === fy);
-      $wc('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
+      const jQfocusCoord = $this.querySelectorAll('#' + id + '_jGraduate_focusCoord');
+      if (jQfocusCoord[0].style.display === 'none') {
+        jQfocusCoord[0].style.display = 'block';
+      } else {
+        jQfocusCoord[0].style.display = 'none';
+      }
       if (showFocus) {
-        $wc('#' + id + '_jGraduate_match_ctr')[0].checked = false;
+        $this.querySelectorAll('#' + id + '_jGraduate_match_ctr')[0].checked = false;
       }
     } else {
-      $wc(idref + ' .jGraduate_gradPick').hide();
-      $wc(idref + ' .jGraduate_colPick').show();
+      gradPicker.style.display = 'none';
+      colPicker.style.display = 'block';
     }
+  };
+  for (const tab of tabs) {
+    tab.addEventListener('click', onTabsClickHandler);
+  }
+  const innerDivs = $this.querySelectorAll(idref + ' > div');
+  [].forEach.call(innerDivs, function (innerDiv) {
+    innerDiv.style.display = 'none';
   });
-  $wc(idref + ' > div').hide();
-  tabs.removeClass('jGraduate_tab_current');
+  for (const tab of tabs) {
+    tab.classList.remove('jGraduate_tab_current');
+  }
   let tab;
   switch ($this.paint.type) {
   case 'linearGradient':
-    tab = $wc(idref + ' .jGraduate_tab_lingrad');
+    tab = $this.querySelector(idref + ' .jGraduate_tab_lingrad');
     break;
   case 'radialGradient':
-    tab = $wc(idref + ' .jGraduate_tab_radgrad');
+    tab = $this.querySelector(idref + ' .jGraduate_tab_radgrad');
     break;
   default:
-    tab = $wc(idref + ' .jGraduate_tab_color');
+    tab = $this.querySelector(idref + ' .jGraduate_tab_color');
     break;
   }
   $this.style.display = 'block';
 
   // jPicker will try to show after a 0ms timeout, so need to fire this after that
   setTimeout(() => {
-    tab.addClass('jGraduate_tab_current').click();
+    tab.classList.add('jGraduate_tab_current');
+    tab.dispatchEvent(new Event('click'));
   }, 10);
-  // });
 }
-
-//   return $;
-// }
diff --git a/src/editor/components/jgraduate/jQuery.jPicker.js b/src/editor/components/jgraduate/jQuery.jPicker.js
index 9c64240e..a1e66e04 100755
--- a/src/editor/components/jgraduate/jQuery.jPicker.js
+++ b/src/editor/components/jgraduate/jQuery.jPicker.js
@@ -945,7 +945,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
   function updatePreview (ui) {
     try {
       const all = ui.val('all');
-      activePreview.css({backgroundColor: (all && '#' + all.hex) || 'transparent'});
+      activePreview.style.backgroundColor = (all && '#' + all.hex) || 'transparent';
       setAlpha.call(that, activePreview, (all && toFixedNumeric((all.a * 100) / 255, 4)) || 0);
     } catch (e) {}
   }
@@ -1039,7 +1039,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
   * @returns {void}
   */
   function setBG (el, c) {
-    el.css({backgroundColor: (c && c.length === 6 && '#' + c) || 'transparent'});
+    el.style.backgroundColor = (c && c.length === 6 && '#' + c) || 'transparent';
   }
 
   /**
@@ -1052,10 +1052,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
       img.setAttribute('pngSrc', src);
       img.style.backgroundImage = 'none';
       img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')';
-      // img.attr('pngSrc', src);
-      // img.css({backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'});
     } else img.style.backgroundImage = 'url(\'' + src + '\')';
-    // img.css({backgroundImage: 'url(\'' + src + '\')'});
   }
   /**
   * @param {external:jQuery} img
@@ -1063,7 +1060,6 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
   * @returns {void}
   */
   function setImgLoc (img, y) {
-    // img.css({top: y + 'px'});
     img.style.top = y + 'px';
   }
   /**
@@ -1079,10 +1075,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
         if (!isNullish(src) && (
           src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
         )) {
-          obj.css({
-            filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
-              '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'
-          });
+          obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
+          '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')';
         } else obj.style.opacity = toFixedNumeric(alpha / 100, 4);
       } else obj.style.opacity = toFixedNumeric(alpha / 100, 4);
     } else if (alpha === 0 || alpha === 100) {
@@ -1091,10 +1085,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
         if (!isNullish(src) && (
           src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
         )) {
-          obj.css({
-            filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
-            '\', sizingMethod=\'scale\')'
-          });
+          obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
+          '\', sizingMethod=\'scale\')';
         } else obj.style.opacity = '';
       } else obj.style.opacity = '';
     }
@@ -1160,7 +1152,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
   */
   function currentColorChanged (ui) {
     const hex = ui.val('hex');
-    currentPreview.css({backgroundColor: (hex && '#' + hex) || 'transparent'});
+    currentPreview.style.backgroundColor = (hex && '#' + hex) || 'transparent';
     setAlpha.call(that, currentPreview, toFixedNumeric(((ui.val('a') || 0) * 100) / 255, 4));
   }
   /**
@@ -1170,9 +1162,11 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
   function expandableColorChanged (ui) {
     const hex = ui.val('hex');
     const va = ui.val('va');
-    iconColor.css({backgroundColor: (hex && '#' + hex) || 'transparent'});
+    iconColor.style.backgroundColor = (hex && '#' + hex) || 'transparent';
     setAlpha.call(that, iconAlpha, toFixedNumeric(((255 - ((va && va.a) || 0)) * 100) / 255, 4));
     if (settings.window.bindToInput && settings.window.updateInputColor) {
+      // settings.window.input.style.backgroundColor = (hex && '#' + hex) || 'transparent';
+      // settings.window.input.style.color = isNullish(va) || va.v > 75 ? '#000000' : '#ffffff';
       settings.window.input.css({
         backgroundColor: (hex && '#' + hex) || 'transparent',
         color: isNullish(va) || va.v > 75 ? '#000000' : '#ffffff'
@@ -1199,11 +1193,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
   * @returns {false}
   */
   function documentMouseMove (e) {
-    container.css({
-      left: elementStartX - (pageStartX - e.pageX) + 'px',
-      top: elementStartY - (pageStartY - e.pageY) + 'px'
-    });
+    container.style.left = elementStartX - (pageStartX - e.pageX) + 'px';
+    container.style.top = elementStartY - (pageStartY - e.pageY) + 'px';
     if (settings.window.expandable && !$.support.boxModel) {
+      // const prev = container.previousElementSibling;
       container.prev().css({
         left: container.css('left'),
         top: container.css('top')
@@ -1258,7 +1251,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
     }
     if (settings.window.expandable) {
       $(document.body).children('div.jPicker.Container').css({zIndex: 10});
-      container.css({zIndex: 20});
+      container.style.zIndex = 20;
     }
     switch (settings.window.effects.type) {
     case 'fade':
@@ -1283,7 +1276,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
     * @returns {void}
     */
     function removeIFrame () {
-      if (settings.window.expandable) container.css({zIndex: 10});
+      if (settings.window.expandable) container.style.zIndex = 10;
       if (!settings.window.expandable || $.support.boxModel) return;
       container.prev().remove();
     }
@@ -1305,10 +1298,9 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
   * @returns {void}
   */
   function initialize () {
-    console.log('$(that).next() --> ', that.nextElementSibling);
-    console.log('$(that).next() --> ', that.nextElementSibling.querySelector('#Container'));
+    const nexts = that.nextElementSibling;
     const win = settings.window,
-      popup = win.expandable ? that.nextElementSibling.querySelector('#Container') : null;
+      popup = win.expandable ? nexts.querySelector('#Container') : null;
     container = win.expandable ? $('<div/>') : that;
     // container.addClass('jPicker Container');
     container.classList.add('jPicker');
@@ -1329,7 +1321,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
         <tr>
           <td rowspan="9"><h2 class="Title">${win.title || localization.text.title}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1">&nbsp;</span><span class="Map2" id="MMap2">&nbsp;</span><span class="Map3" id="MMap3">&nbsp;</span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td>
           <td rowspan="9"><div class="Bar" id="Bar"><span class="Map1" id="Map1">&nbsp;</span><span class="Map2" id="Map2">&nbsp;</span><span class="Map3" id="Map3">&nbsp;</span><span class="Map4" id="Map4">&nbsp;</span><span class="Map5" id="Map5">&nbsp;</span><span class="Map6" id="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td>
-          <td colspan="2" class="Preview" id="Preview">${localization.text.newColor}<div><span class="Active" id="Active" title="${localization.tooltips.colors.newColor}">&nbsp;</span><span class="Current" id="Current" title="${localization.tooltips.colors.currentColor}">&nbsp;</span></div>${localization.text.currentColor}</td>
+          <td colspan="2" class="Preview" id="Preview">${localization.text.newColor}<div id="preview-div"><span class="Active" id="Active" title="${localization.tooltips.colors.newColor}">&nbsp;</span><span class="Current" id="Current" title="${localization.tooltips.colors.currentColor}">&nbsp;</span></div>${localization.text.currentColor}</td>
           <td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="${localization.text.ok}" title="${localization.tooltips.buttons.ok}"/><input type="button" class="Cancel" id="Cancel" value="${localization.text.cancel}" title="${localization.tooltips.buttons.cancel}"/><hr/><div class="Grid" id="Grid"></div></td>
         </tr>
         <tr class="Hue">
@@ -1374,7 +1366,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
       container.mousedown(
         function () {
           $(document.body).children('div.jPicker.Container').css({zIndex: 10});
-          container.css({zIndex: 20});
+          container.style.zIndex = 20;
         }
       );
       container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
@@ -1464,11 +1456,9 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
       button = tbody.querySelector('#Button');
     activePreview = preview.querySelector('#Active');
     activePreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent';
-    // .css({backgroundColor: (hex && '#' + hex) || 'transparent'});
     currentPreview = preview.querySelector('#Current');
     currentPreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent';
     currentPreview.addEventListener('click', currentClicked);
-    // .css({backgroundColor: (hex && '#' + hex) || 'transparent'}).bind('click', currentClicked);
     setAlpha.call(that, currentPreview, toFixedNumeric((color.current.val('a') * 100) / 255, 4));
     okButton = button.querySelector('#Ok');
     okButton.addEventListener('click', okClicked);
@@ -1485,7 +1475,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
       setImg.call(that, colorBarL4, images.clientPath + 'Bars.png');
       setImg.call(that, colorBarL5, images.clientPath + 'bar-opacity.png');
       setImg.call(that, colorBarL6, images.clientPath + 'AlphaBar.png');
-      setImg.call(that, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
+      setImg.call(that, preview.querySelector('#preview-div'), images.clientPath + 'preview-opacity.png');
     }, 0);
     const radioInputs = tbody.querySelectorAll('td.Radio input');
     for (const radioInput of radioInputs) {