#86 Jquery convert to JavaScript (#88)

src/editor/components/jgraduate/Util.js

@@ -2,7 +2,7 @@
  * @param {any} obj
  * @returns {any}
  */
-export function findPos (obj) {
+export function findPos(obj) {
   let curleft = 0;
   let curtop = 0;
   if (obj.offsetParent) {
@@ -10,9 +10,9 @@ export function findPos (obj) {
       curleft += obj.offsetLeft;
       curtop += obj.offsetTop;
     } while (obj = obj.offsetParent);
-    return {left: curleft, top: curtop};
+    return { left: curleft, top: curtop };
   }
-  return {left: curleft, top: curtop};
+  return { left: curleft, top: curtop };
 }
 
 export function isObject(item) {
@@ -34,4 +34,184 @@ export function mergeDeep(target, source) {
     });
   }
   return output;
-}
+}
+
+/**
+ * Get the closest matching element up the DOM tree.
+ * @param  {Element} elem     Starting element
+ * @param  {String}  selector Selector to match against (class, ID, data attribute, or tag)
+ * @return {Boolean|Element}  Returns null if not match found
+ */
+export function getClosest(elem, selector) {
+  const firstChar = selector.charAt(0);
+  const supports = 'classList' in document.documentElement;
+  let attribute, value;
+  // If selector is a data attribute, split attribute from value
+  if (firstChar === '[') {
+    selector = selector.substr(1, selector.length - 2);
+    attribute = selector.split('=');
+    if (attribute.length > 1) {
+      value = true;
+      attribute[1] = attribute[1].replace(/"/g, '').replace(/'/g, '');
+    }
+  }
+  // Get closest match
+  for (; elem && elem !== document && elem.nodeType === 1; elem = elem.parentNode) {
+    // If selector is a class
+    if (firstChar === '.') {
+      if (supports) {
+        if (elem.classList.contains(selector.substr(1))) {
+          return elem;
+        }
+      } else {
+        if (new RegExp('(^|\\s)' + selector.substr(1) + '(\\s|$)').test(elem.className)) {
+          return elem;
+        }
+      }
+    }
+    // If selector is an ID
+    if (firstChar === '#') {
+      if (elem.id === selector.substr(1)) {
+        return elem;
+      }
+    }
+    // If selector is a data attribute
+    if (firstChar === '[') {
+      if (elem.hasAttribute(attribute[0])) {
+        if (value) {
+          if (elem.getAttribute(attribute[0]) === attribute[1]) {
+            return elem;
+          }
+        } else {
+          return elem;
+        }
+      }
+    }
+    // If selector is a tag
+    if (elem.tagName.toLowerCase() === selector) {
+      return elem;
+    }
+  }
+  return null;
+};
+
+/**
+ * Get all DOM element up the tree that contain a class, ID, or data attribute
+ * @param  {Node} elem The base element
+ * @param  {String} selector The class, id, data attribute, or tag to look for
+ * @return {Array} Null if no match
+ */
+ export function getParents(elem, selector) {
+  const parents = [];
+  let firstChar;
+  if ( selector ) {
+    firstChar = selector.charAt(0);
+  }
+  // Get matches
+  for ( ; elem && elem !== document; elem = elem.parentNode ) {
+    if ( selector ) {
+      // If selector is a class
+      if ( firstChar === '.' ) {
+        if ( elem.classList.contains( selector.substr(1) ) ) {
+          parents.push( elem );
+        }
+      }
+      // If selector is an ID
+      if ( firstChar === '#' ) {
+        if ( elem.id === selector.substr(1) ) {
+          parents.push( elem );
+        }
+      }
+      // If selector is a data attribute
+      if ( firstChar === '[' ) {
+        if ( elem.hasAttribute( selector.substr(1, selector.length - 1) ) ) {
+          parents.push( elem );
+        }
+      }
+      // If selector is a tag
+      if ( elem.tagName.toLowerCase() === selector ) {
+        parents.push( elem );
+      }
+    } else {
+      parents.push( elem );
+    }
+  }
+  // Return parents if any exist
+  if ( parents.length === 0 ) {
+    return null;
+  } else {
+    return parents;
+  }
+};
+
+export function getParentsUntil(elem, parent, selector) {
+  let parents = [];
+  let parentType;
+  let selectorType;
+  if ( parent ) {
+    parentType = parent.charAt(0);
+  }
+  if ( selector ) {
+    selectorType = selector.charAt(0);
+  }
+  // Get matches
+  for ( ; elem && elem !== document; elem = elem.parentNode ) {
+    // Check if parent has been reached
+    if ( parent ) {
+      // If parent is a class
+      if ( parentType === '.' ) {
+        if ( elem.classList.contains( parent.substr(1) ) ) {
+          break;
+        }
+      }
+      // If parent is an ID
+      if ( parentType === '#' ) {
+        if ( elem.id === parent.substr(1) ) {
+          break;
+        }
+      }
+      // If parent is a data attribute
+      if ( parentType === '[' ) {
+        if ( elem.hasAttribute( parent.substr(1, parent.length - 1) ) ) {
+          break;
+        }
+      }
+      // If parent is a tag
+      if ( elem.tagName.toLowerCase() === parent ) {
+        break;
+      }
+    }
+    if ( selector ) {
+      // If selector is a class
+      if ( selectorType === '.' ) {
+        if ( elem.classList.contains( selector.substr(1) ) ) {
+          parents.push( elem );
+        }
+      }
+      // If selector is an ID
+      if ( selectorType === '#' ) {
+        if ( elem.id === selector.substr(1) ) {
+          parents.push( elem );
+        }
+      }
+      // If selector is a data attribute
+      if ( selectorType === '[' ) {
+        if ( elem.hasAttribute( selector.substr(1, selector.length - 1) ) ) {
+          parents.push( elem );
+        }
+      }
+      // If selector is a tag
+      if ( elem.tagName.toLowerCase() === selector ) {
+        parents.push( elem );
+      }
+    } else {
+      parents.push( elem );
+    }
+  }
+  // Return parents if any exist
+  if ( parents.length === 0 ) {
+    return null;
+  } else {
+    return parents;
+  }
+};

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

@@ -223,7 +223,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
     idref = '#' + $this.getAttribute('id') + ' ';
   // JFH !!!!!
   const $shadowRoot = elem.parentNode;
-  // const $wc = (selector) => $($shadowRoot.querySelectorAll(selector));
 
   if (!idref) {
     // eslint-disable-next-line no-alert

src/editor/components/sePalette.js

@@ -134,45 +134,3 @@ export class SEPalette extends HTMLElement {
 
 // Register
 customElements.define('se-palette', SEPalette);
-
-/* #palette_holder {
-  overflow: hidden;
-  margin-top: 5px;
-  padding: 5px;
-  position: absolute;
-  right: 15px;
-  height: 16px;
-  background: #f0f0f0;
-  border-radius: 3px;
-  z-index: 2;
-
-  #palette {
-  float: left;
-  width: 632px;
-  height: 16px;
-}
-
-  $('.palette_item').mousedown(function (evt) {
-    // shift key or right click for stroke
-    const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
-    let color = $(this).data('rgb');
-    let paint;
-
-    // Webkit-based browsers returned 'initial' here for no stroke
-    if (color === 'none' || color === 'transparent' || color === 'initial') {
-      color = 'none';
-      paint = new $.jGraduate.Paint();
-    } else {
-      paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
-    }
-
-    paintBox[picker].setPaint(paint);
-    svgCanvas.setColor(picker, color);
-
-    if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
-      svgCanvas.setPaintOpacity(picker, 1.0);
-    }
-    updateToolButtonState();
-  }).bind('contextmenu', function (e) { e.preventDefault(); });
-
-*/