Merge pull request #553 from OptimistikSAS/issues/105

#105 jquery convert to pure javascript

cypress/integration/unit/contextmenu.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import * as contextmenu from '../../../instrumented/editor/contextmenu.js';
 
 describe('contextmenu', function () {

cypress/integration/unit/coords.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
 import * as coords from '../../../instrumented/svgcanvas/coords.js';

cypress/integration/unit/draw.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as draw from '../../../instrumented/svgcanvas/draw.js';
 import * as units from '../../../instrumented/common/units.js';

cypress/integration/unit/history.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js';
 import * as utilities from '../../../instrumented/svgcanvas/utilities.js';

cypress/integration/unit/math.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as math from '../../../instrumented/svgcanvas/math.js';
 

cypress/integration/unit/path.js

@@ -1,8 +1,5 @@
 /* globals SVGPathSeg */
 import 'pathseg';
-import $ from 'jquery';
-window.$ = $;
-
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
 import * as pathModule from '../../../instrumented/svgcanvas/path.js';

cypress/integration/unit/recalculate.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
 import * as coords from '../../../instrumented/svgcanvas/coords.js';

cypress/integration/unit/sanitize.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as sanitize from '../../../instrumented/svgcanvas/sanitize.js';
 

cypress/integration/unit/select.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import * as select from '../../../instrumented/svgcanvas/select.js';
 import { NS } from '../../../instrumented/common/namespaces.js';
 

cypress/integration/unit/svgtransformlist.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js';
 import { disableSupportsNativeTransformLists } from '../../../instrumented/common/browser.js';

cypress/integration/unit/test1.js

@@ -1,7 +1,4 @@
 /* eslint-disable max-len, no-console */
-import $ from 'jquery';
-window.$ = $;
-
 import SvgCanvas from '../../../instrumented/svgcanvas/svgcanvas.js';
 
 describe('Basic Module', function () {

cypress/integration/unit/units.js

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-window.$ = $;
 import * as units from '../../../instrumented/common/units.js';
 
 describe('units', function () {

cypress/integration/unit/utilities-bbox.js

@@ -1,7 +1,5 @@
 /* eslint-disable max-len */
 import 'pathseg';
-import $ from 'jquery';
-window.$ = $;
 
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as utilities from '../../../instrumented/svgcanvas/utilities.js';

cypress/integration/unit/utilities-performance.js

@@ -1,7 +1,5 @@
 /* eslint-disable max-len, no-console */
 import 'pathseg';
-import $ from 'jquery';
-window.$ = $;
 
 import { NS } from '../../../instrumented/common/namespaces.js';
 import * as utilities from '../../../instrumented/svgcanvas/utilities.js';

cypress/integration/unit/utilities.js

@@ -1,6 +1,4 @@
 /* eslint-disable max-len */
-import $ from 'jquery';
-window.$ = $;
 import * as browser from '../../../instrumented/common/browser.js';
 import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
 import { NS } from '../../../instrumented/common/namespaces.js';

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "svgedit",
       "version": "7.0.0-preview",
       "license": "(MIT AND Apache-2.0 AND ISC AND LGPL-3.0-or-later AND X11)",
       "dependencies": {
@@ -12,10 +13,8 @@
         "@web/dev-server-rollup": "0.3.4",
         "canvg": "3.0.7",
         "core-js": "3.12.1",
-        "deparam": "1.0.5",
         "elix": "15.0.0",
         "i18next": "20.3.0",
-        "jquery": "3.6.0",
         "jspdf": "2.3.1",
         "pathseg": "1.2.0",
         "regenerator-runtime": "0.13.7",
@@ -4254,6 +4253,7 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -7351,6 +7351,7 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -9265,11 +9266,6 @@
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
     },
-    "node_modules/deparam": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/deparam/-/deparam-1.0.5.tgz",
-      "integrity": "sha1-dAEbur0mtA+GDD48ws1hvtTrQ/I="
-    },
     "node_modules/depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -9918,7 +9914,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -14400,11 +14397,6 @@
       "integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==",
       "dev": true
     },
-    "node_modules/jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
-    },
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -14714,7 +14706,8 @@
         "canvg": "^3.0.6",
         "core-js": "^3.6.0",
         "dompurify": "^2.2.0",
-        "fflate": "^0.4.8"
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
       },
       "optionalDependencies": {
         "html2canvas": "^1.0.0-rc.5"
@@ -16285,6 +16278,7 @@
       "integrity": "sha512-akCrLDWfbdAWkMLBxJEeWTdNsjML+dt5YgOI4gJ53vuO0vrmYQkUPxa6j6V65s9CcePIr2SSWqjT2EcrNseryQ==",
       "dev": true,
       "dependencies": {
+        "encoding": "^0.1.12",
         "minipass": "^3.1.0",
         "minipass-sized": "^1.0.3",
         "minizlib": "^2.0.0"
@@ -16526,6 +16520,7 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -20254,6 +20249,9 @@
       "version": "2.48.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.48.0.tgz",
       "integrity": "sha512-wl9ZSSSsi5579oscSDYSzGn092tCS076YB+TQrzsGuSfYyJeep8eEWj0eaRjuC5McuMNmcnR8icBqiE/FWNB1A==",
+      "dependencies": {
+        "fsevents": "~2.3.1"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -22841,6 +22839,7 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
+        "fsevents": "~2.1.2",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -32291,11 +32290,6 @@
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
     },
-    "deparam": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/deparam/-/deparam-1.0.5.tgz",
-      "integrity": "sha1-dAEbur0mtA+GDD48ws1hvtTrQ/I="
-    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -36462,11 +36456,6 @@
       "integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==",
       "dev": true
     },
-    "jquery": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
-    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",

package.json

@@ -98,7 +98,6 @@
     "core-js": "3.12.1",
     "elix": "15.0.0",
     "i18next": "20.3.0",
-    "jquery": "3.6.0",
     "jspdf": "2.3.1",
     "pathseg": "1.2.0",
     "regenerator-runtime": "0.13.7",

src/editor/Editor.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-/* globals seConfirm seAlert $ */
+/* globals seConfirm seAlert */
 /**
 * The main module for the visual SVG this.
 *
@@ -14,12 +14,8 @@
 * @module SVGEditor
 */
 
-import jQuery from 'jquery/dist/jquery.slim.js';
-import jQueryPluginSVG from '../svgcanvas/jQuery.attr.js'; // Needed for SVG attribute
 import './components/index.js';
 import './dialogs/index.js';
-// Global Constant
-window.$ = jQueryPluginSVG(jQuery);
 
 import './touch.js';
 import { isMac } from '../common/browser.js';
@@ -1144,32 +1140,32 @@ class Editor extends EditorStartup {
   loadFromURL(url, { cache, noAlert } = {}) {
     return this.ready(() => {
       return new Promise((resolve, reject) => {
-        $.ajax({
+        fetch (url, { cache: cache ? 'force-cache' : 'no-cache' })
-          url,
+          .then( (response) =>
-          dataType: 'text',
+          {
-          cache: Boolean(cache),
+            if (!response.ok) {
-          beforeSend() {
+              if (noAlert) {
-            $.process_cancel(this.i18next.t('notification.loadingImage'));
+                reject(new Error('URLLoadFail'));
-          },
+                return;
-          success(str) {
+              }
-            this.loadSvgString(str, { noAlert });
+              seAlert(this.i18next.t('notification.URLLoadFail') );
-          },
+              resolve();
-          error(xhr, stat, err) {
-            if (xhr.status !== 404 && xhr.responseText) {
-              this.loadSvgString(xhr.responseText, { noAlert });
-              return;
             }
+            return response.text();
+          })
+          .then( (str) =>
+          {
+            this.loadSvgString(str, { noAlert });
+            return str;
+          })
+          .catch( (error) => {
             if (noAlert) {
               reject(new Error('URLLoadFail'));
               return;
             }
-            seAlert(this.i18next.t('notification.URLLoadFail') + ': \n' + err);
+            seAlert(this.i18next.t('notification.URLLoadFail') + ': \n' + error);
             resolve();
-          },
+          });
-          complete() {
-            if ($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
-          }
-        });
       });
     });
   }

src/editor/EditorStartup.js

@@ -1,4 +1,4 @@
-/* globals $ seConfirm seAlert */
+/* globals seConfirm seAlert */
 import './touch.js';
 import { convertUnit } from '../common/units.js';
 import {
@@ -722,7 +722,7 @@ class EditorStartup {
             // eslint-disable-next-line no-unsanitized/method
             const imported = await import(`./extensions/${encodeURIComponent(extname)}/${encodeURIComponent(extname)}.js`);
             const { name = extname, init: initfn } = imported.default;
-            return this.addExtension(name, (initfn && initfn.bind(this)), { $, langParam: 'en' }); /** @todo  change to current lng */
+            return this.addExtension(name, (initfn && initfn.bind(this)), { langParam: 'en' }); /** @todo  change to current lng */
           } catch (err) {
             // Todo: Add config to alert any errors
             console.error('Extension failed to load: ' + extname + '; ', err);
@@ -746,7 +746,7 @@ class EditorStartup {
             // eslint-disable-next-line no-unsanitized/method
             const imported = await import(encodeURI(extPathName));
             const { name, init: initfn } = imported.default;
-            return this.addExtension(name, (initfn && initfn.bind(this)), { $ });
+            return this.addExtension(name, (initfn && initfn.bind(this)), {});
           } catch (err) {
             // Todo: Add config to alert any errors
             console.error('Extension failed to load: ' + extPathName + '; ', err);

src/editor/components/jgraduate/Util.js

@@ -10,7 +10,8 @@ export function findPos(obj) {
     do {
       curleft += obj.offsetLeft;
       curtop += obj.offsetTop;
-    } while (obj == obj.offsetParent);
+    // eslint-disable-next-line no-cond-assign
+    } while (obj = obj.offsetParent);
     return { left: curleft, top: curtop };
   }
   return { left: curleft, top: curtop };

src/editor/extensions/ext-imagelib/index.html

@@ -9,9 +9,6 @@
     <script nomodule="" src="../../redirect-on-no-module-support.js"></script>
     <script type="module" src="../../redirect-on-lacking-support.js"></script>
 
-    <!-- As yet no ES6 -->
-    <script src="../../jquery.min.js"></script>
-
     <script type="module" src="index.js"></script>
 </head>
 <body>

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

@@ -23,7 +23,7 @@ const loadExtensionTranslation = async function (lang) {
 
 export default {
   name: 'server_opensave',
-  async init ({ $, decode64, encode64 }) {
+  async init ({ decode64, encode64 }) {
     const svgEditor = this;
     const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
     const {
@@ -262,7 +262,7 @@ export default {
         form.submit();
 
         rebuildInput(form);
-        await $.process_cancel(strings.uploading);
+        // await $.process_cancel(strings.uploading);
         cancelled = true;
         if($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
       }

src/svgcanvas/sanitize.js

@@ -49,8 +49,8 @@ const svgWhiteList_ = {
   metadata: [ 'class', 'id' ],
   path: [ 'class', 'clip-path', 'clip-rule', 'd', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform' ],
   pattern: [ 'class', 'height', 'id', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y' ],
-  polygon: [ 'class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'class', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform' ],
+  polygon: [ 'class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'class', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'sides', 'shape' ],
-  polyline: [ 'class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform' ],
+  polyline: [ 'class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'se:connector' ],
   radialGradient: [ 'class', 'cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'id', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href' ],
   rect: [ 'class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'width', 'x', 'y' ],
   stop: [ 'class', 'id', 'offset', 'requiredFeatures', 'stop-opacity', 'style', 'systemLanguage', 'stop-color', 'gradientUnits', 'gradientTransform' ],

src/svgcanvas/svgcanvas.js

@@ -854,7 +854,7 @@ class SvgCanvas {
 *   if extension of supplied name already exists
 * @returns {Promise<void>} Resolves to `undefined`
 */
-    this.addExtension = async function (name, extInitFunc, { $: jq, importLocale }) {
+    this.addExtension = async function (name, extInitFunc, { importLocale }) {
       if (typeof extInitFunc !== 'function') {
         throw new TypeError('Function argument expected for `svgcanvas.addExtension`');
       }
@@ -875,7 +875,6 @@ class SvgCanvas {
    * @see {@link module:svgcanvas.PrivateMethods} source for the other methods/properties
    */
       const argObj = canvas.mergeDeep(canvas.getPrivateMethods(), {
-        $: jq,
         importLocale,
         svgroot,
         svgcontent,