#84 JavaScript conversion changes (#85)

src/editor/extensions/ext-arrows/ext-arrows.js

@@ -113,7 +113,7 @@ export default {
           val = 'none';
         }
 
-        $('#arrow_list').val(val);
+        $id('arrow_list').value = val;
       }
     }
 

src/editor/extensions/ext-eyedropper/ext-eyedropper.js

@@ -36,6 +36,7 @@ export default {
         strokeLinecap: 'butt',
         strokeLinejoin: 'miter'
       };
+      const {$id} = svgCanvas;
 
     /**
      *
@@ -47,14 +48,14 @@ export default {
       const mode = svgCanvas.getMode();
       if (mode === 'eyedropper') { return; }
 
-      const tool = $('#tool_eyedropper');
+      const tool = $id('tool_eyedropper');
       // enable-eye-dropper if one element is selected
       let elem = null;
       if (!opts.multiselected && opts.elems[0] &&
         !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)
       ) {
         elem = opts.elems[0];
-        tool.removeClass('disabled');
+        tool.classList.remove('disabled');
         // grab the current style
         currentStyle.fillPaint = elem.getAttribute('fill') || 'black';
         currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0;
@@ -67,7 +68,7 @@ export default {
         currentStyle.opacity = elem.getAttribute('opacity') || 1.0;
       // disable eye-dropper tool
       } else {
-        tool.addClass('disabled');
+        tool.classList.add('disabled');
       }
     }
 

src/editor/extensions/ext-foreignobject/ext-foreignobject.js

@@ -35,8 +35,8 @@ export default {
 
     const properlySourceSizeTextArea = function () {
       // TODO: remove magic numbers here and get values from CSS
-      const height = $('#svg_source_container').height() - 80;
-      $('#svg_source_textarea').css('height', height);
+      const height = parseFloat(getComputedStyle($id(svg_source_container), null).height.replace("px", "")) - 80;
+      $id('svg_source_textarea').style.height = height + "px";
     };
 
     /**

src/editor/extensions/ext-imagelib/ext-imagelib.js

@@ -259,7 +259,7 @@ export default {
             title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
           }
           if (curMeta) {
-            preview.children().each(function () {
+            $(preview).children().each(function () {
               if ($(this).data('id') === id) {
                 if (curMeta.preview_url) {
                   $(this).html(
@@ -321,24 +321,50 @@ export default {
     // Receive `postMessage` data
     window.addEventListener('message', onMessage, true);
 
+    function insertAfter(referenceNode, newNode) {
+      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+    }
+
     /**
     * @param {boolean} show
     * @returns {void}
     */
     function toggleMulti (show) {
-      $('#lib_framewrap, #imglib_opts').css({right: (show ? 200 : 10)});
+      $id('lib_framewrap').style.right = (show ? 200 : 10);
+      $id('imglib_opts').style.right = (show ? 200 : 10);
       if (!preview) {
-        preview = $('<div id=imglib_preview>').css({
-          position: 'absolute',
-          top: 45,
-          right: 10,
-          width: 180,
-          bottom: 45,
-          background: '#fff',
-          overflow: 'auto'
-        }).insertAfter('#lib_framewrap');
+        preview = document.createElement('div');
+        preview.setAttribute('id', 'imglib_preview');
+        // eslint-disable-next-line max-len
+        preview.setAttribute('style', `position: absolute;top: 45px;right: 10px;width: 180px;bottom: 45px;background: #fff;overflow: auto;`);
+        insertAfter($id('lib_framewrap'), preview);
+        
+        /* submit = document.createElement('button');
+        submit.setAttribute('content', 'Import selected');
+        submit.setAttribute('disabled', true);  
+        submit.textContent = 'Import selected';
+        submit.setAttribute('style', `position: absolute;bottom: 10px;right: -10px;`);  
+        $id('imgbrowse').appendChild(submit);
+        submit.addEventListener('click', function () {
+          $.each(multiArr, function (i) {
+            const type = this[0];
+            const data = this[1];
+            if (type === 'svg') {
+              svgCanvas.importSvgString(data);
+            } else {
+              importImage(data);
+            }
+            svgCanvas.moveSelectedElements(i * 20, i * 20, false);
+          });
+          $(preview).empty();
+          multiArr = [];
+          $id("imgbrowse_holder").style.display = 'none';
+        }) 
+        submit.style.display = (show) ? 'block' : 'none';
+        */
 
-        submit = $('<button disabled>Import selected</button>')
+
+         submit = $('<button disabled>Import selected</button>')
           .appendTo('#imgbrowse')
           .on('click touchend', function () {
             $.each(multiArr, function (i) {
@@ -351,7 +377,7 @@ export default {
               }
               svgCanvas.moveSelectedElements(i * 20, i * 20, false);
             });
-            preview.empty();
+            $(preview).empty();
             multiArr = [];
             $id("imgbrowse_holder").style.display = 'none';
           }).css({
@@ -361,7 +387,7 @@ export default {
           });
       }
 
-      preview.toggle(show);
+      preview.style.display = (show) ? 'block' : 'none';
       submit.toggle(show);
     }
 

src/editor/extensions/ext-mathjax/ext-mathjax.js

@@ -190,7 +190,7 @@ export default {
               });
 
             // MathJax preprocessing has to ignore most of the page.
-            $('body').addClass('tex2jax_ignore');
+            document.body.classList.add("tex2jax_ignore");
 
             try {
               await import('./mathjax/MathJax.min.js'); // ?config=TeX-AMS-MML_SVG.js');