diff --git a/src/editor/Editor.js b/src/editor/Editor.js index 98fd01b4..9e32fdfc 100644 --- a/src/editor/Editor.js +++ b/src/editor/Editor.js @@ -281,14 +281,17 @@ class Editor extends EditorStartup { // Misc additional actions // Make 'return' keypress trigger the change event - $('.attr_changer, #image_url').bind( - 'keydown', - 'return', - function (evt) { - $(this).change(); + const elements = document.getElementsByClassName("attr_changer"); + Array.from(elements).forEach(function(element) { + element.addEventListener('keydown', function(evt) { + evt.currentTarget.dispatchEvent(new Event('change')); evt.preventDefault(); - } - ); + }); + }); + $id('image_url').addEventListener('keydown', function(evt) { + evt.currentTarget.dispatchEvent(new Event('change')); + evt.preventDefault(); + }); } /** * @returns {void} @@ -348,11 +351,16 @@ class Editor extends EditorStartup { * @returns {void} */ togglePathEditMode (editmode, elems) { - $('#path_node_panel').toggle(editmode); + $id('path_node_panel').style.display = (editmode) ? 'block' : 'none'; if (editmode) { // Change select icon - $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); - $('#tool_select').addClass('tool_button_current').removeClass('tool_button'); + const elements = document.getElementsByClassName("tool_button_current"); + Array.from(elements).forEach(function(element) { + element.classList.add('tool_button_current'); + element.classList.remove('tool_button') + }); + $id('#tool_select').classList.add('tool_button_current') + $id('#tool_select').classList.remove('tool_button'); this.multiselected = false; if (elems.length) { this.selectedElement = this.elems[0]; @@ -409,7 +417,7 @@ class Editor extends EditorStartup { url = this.defaultImageURL; } this.svgCanvas.setImageURL(url); - $('#image_url').val(url); + $id("image_url").value = url; if (url.startsWith('data:')) { // data URI found @@ -609,8 +617,8 @@ class Editor extends EditorStartup { switch (mode) { case 'rotate': { const ang = this.svgCanvas.getRotationAngle(elem); - $('#angle').val(ang); - $('#tool_reorient').toggleClass('disabled', ang === 0); + $id('angle').value = ang; + (ang === 0) ? $id('tool_reorient').classList.add('disabled') : $id('tool_reorient').classList.remove('disabled'); break; } } @@ -914,7 +922,7 @@ class Editor extends EditorStartup { rotateSelected (cw, step) { if (isNullish(this.selectedElement) || this.multiselected) { return; } if (!cw) { step *= -1; } - const angle = Number.parseFloat($('#angle').val()) + step; + const angle = Number.parseFloat($id('angle').value) + step; this.svgCanvas.setRotationAngle(angle); this.topPanel.updateContextPanel(); } diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index 0529bcb8..e6e109ba 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -58,6 +58,7 @@ class EditorStartup { * @returns {void} */ async init () { + const self = this; // allow to prepare the dom without display this.$svgEditor.style.visibility = 'hidden'; try { @@ -187,20 +188,20 @@ class EditorStartup { res.w = convertUnit(res.w) + this.configObj.curConfig.baseUnit; res.h = convertUnit(res.h) + this.configObj.curConfig.baseUnit; } - $('#se-img-prop').attr('dialog', 'close'); - $('#se-img-prop').attr('title', this.svgCanvas.getDocumentTitle()); - $('#se-img-prop').attr('width', res.w); - $('#se-img-prop').attr('height', res.h); - $('#se-img-prop').attr('save', this.configObj.pref('img_save')); + $id('se-img-prop').setAttribute('dialog', 'close'); + $id('se-img-prop').setAttribute('title', this.svgCanvas.getDocumentTitle()); + $id('se-img-prop').setAttribute('width', res.w); + $id('se-img-prop').setAttribute('height', res.h); + $id('se-img-prop').setAttribute('save', this.configObj.pref('img_save')); // Lose focus for select elements when changed (Allows keyboard shortcuts to work better) $('select').change((evt) => { $(evt.currentTarget).blur(); }); // fired when user wants to move elements to another layer let promptMoveLayerOnce = false; - $('#selLayerNames').change((evt) => { + $id('selLayerNames').addEventListener('change', function(evt) { const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value; - const confirmStr = this.uiStrings.notification.Qmovethis.elemsToLayer.replace('%s', destLayer); + const confirmStr = self.uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer); /** * @param {boolean} ok * @returns {void} @@ -208,9 +209,9 @@ class EditorStartup { const moveToLayer = (ok) => { if (!ok) { return; } promptMoveLayerOnce = true; - this.svgCanvas.moveSelectedToLayer(destLayer); - this.svgCanvas.clearSelection(); - this.layersPanel.populateLayers(); + self.svgCanvas.moveSelectedToLayer(destLayer); + self.svgCanvas.clearSelection(); + self.layersPanel.populateLayers(); }; if (destLayer) { if (promptMoveLayerOnce) { @@ -224,33 +225,31 @@ class EditorStartup { } } }); - - $('#tool_font_family').change((evt) => { - this.svgCanvas.setFontFamily(evt.originalEvent.detail.value); + $id('tool_font_family').addEventListener('change', function(evt) { + self.svgCanvas.setFontFamily(evt.detail.value); }); - $('#seg_type').change((evt) => { - this.svgCanvas.setSegType($(evt.currentTarget).val()); + $id('seg_type').addEventListener('change', function(evt) { + self.svgCanvas.setSegType(evt.currentTarget.value); }); $('#text').bind('keyup input', (evt) => { this.svgCanvas.setTextContent(evt.currentTarget.value); }); - - $('#image_url').change((evt) => { - this.setImageURL(evt.currentTarget.value); + $id('image_url').addEventListener('change', function(evt) { + self.setImageURL(evt.currentTarget.value); }); - $('#link_url').change((evt) => { + $id('link_url').addEventListener('change', function(evt) { if (evt.currentTarget.value.length) { - this.svgCanvas.setLinkURL(evt.currentTarget.value); + self.svgCanvas.setLinkURL(evt.currentTarget.value); } else { - this.svgCanvas.removeHyperlink(); + self.svgCanvas.removeHyperlink(); } }); - $('#g_title').change((evt) => { - this.svgCanvas.setGroupTitle(evt.currentTarget.value); + $id('g_title').addEventListener('change', function(evt) { + self.svgCanvas.setGroupTitle(evt.currentTarget.value); }); const wArea = this.workarea; @@ -339,7 +338,30 @@ class EditorStartup { $('#text').focus(); } }); - const winWh = {width: $(window).width(), height: $(window).height()}; + // ref: https://stackoverflow.com/a/1038781 + function getWidth() { + return Math.max( + document.body.scrollWidth, + document.documentElement.scrollWidth, + document.body.offsetWidth, + document.documentElement.offsetWidth, + document.documentElement.clientWidth + ); + } + + function getHeight() { + return Math.max( + document.body.scrollHeight, + document.documentElement.scrollHeight, + document.body.offsetHeight, + document.documentElement.offsetHeight, + document.documentElement.clientHeight + ); + } + const winWh = { + width: getWidth(), + height: getHeight() + }; window.addEventListener('resize', (evt) => { Object.entries(winWh).forEach(([type, val]) => { @@ -360,15 +382,22 @@ class EditorStartup { $id('stroke_width').value = this.configObj.curConfig.initStroke.width; $id('opacity').value = this.configObj.curConfig.initOpacity * 100; - - $('.push_button').mousedown(() => { - if (!$(this).hasClass('disabled')) { - $(this).addClass('push_button_pressed').removeClass('push_button'); - } - }).mouseout(() => { - $(this).removeClass('push_button_pressed').addClass('push_button'); - }).mouseup(() => { - $(this).removeClass('push_button_pressed').addClass('push_button'); + const elements = document.getElementsByClassName("push_button"); + Array.from(elements).forEach(function(element) { + element.addEventListener('mousedown', function(event) { + if (!event.currentTarget.classList.contains('disabled')) { + event.currentTarget.classList.add('push_button_pressed') + event.currentTarget.classList.remove('push_button'); + } + }); + element.addEventListener('mouseout', function(event) { + event.currentTarget.classList.add('push_button') + event.currentTarget.classList.remove('push_button_pressed'); + }); + element.addEventListener('mouseup', function(event) { + event.currentTarget.classList.add('push_button') + event.currentTarget.classList.remove('push_button_pressed'); + }); }); this.layersPanel.populateLayers(); diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index 7ac7e7d3..99678d52 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -119,8 +119,7 @@ class MainMenu { this.editor.configObj.curConfig.snappingStep = gridsnappingstep; this.editor.configObj.curConfig.gridColor = gridcolor; this.editor.configObj.curConfig.showRulers = showrulers; - - $("#rulers").toggle(this.editor.configObj.curConfig.showRulers); + $id('rulers').style.display = (this.editor.configObj.curConfig.showRulers) ? 'block' : 'none'; if (this.editor.configObj.curConfig.showRulers) { this.editor.rulers.updateRulers(); } diff --git a/src/editor/components/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js index d3c2ed2b..0a4a4ae4 100644 --- a/src/editor/components/jgraduate/jQuery.jGraduate.js +++ b/src/editor/components/jgraduate/jQuery.jGraduate.js @@ -750,7 +750,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { const rot = angle ? 'rotate(' + angle + ',' + cX + ',' + cY + ') ' : ''; if (scaleX === 1 && scaleY === 1) { curGradient.removeAttribute('gradientTransform'); - // $wc('#ang').addClass('dis'); } else { const x = -cX * (scaleX - 1); const y = -cY * (scaleY - 1); @@ -759,7 +758,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { rot + 'translate(' + x + ',' + y + ') scale(' + scaleX + ',' + scaleY + ')' ); - // $wc('#ang').removeClass('dis'); } } diff --git a/src/editor/components/jgraduate/jQuery.jPicker.js b/src/editor/components/jgraduate/jQuery.jPicker.js index 76830cc1..e8226f9f 100755 --- a/src/editor/components/jgraduate/jQuery.jPicker.js +++ b/src/editor/components/jgraduate/jQuery.jPicker.js @@ -1310,7 +1310,6 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc const win = settings.window, popup = win.expandable ? nexts.querySelector('#Container') : null; container = win.expandable ? document.createElement('div') : that; - // container.addClass('jPicker Container'); container.classList.add('jPicker'); container.classList.add('Container'); if (win.expandable) container.style.display = 'none'; diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js index 975288b8..897fad32 100644 --- a/src/editor/components/sePalette.js +++ b/src/editor/components/sePalette.js @@ -99,7 +99,7 @@ export class SEPalette extends HTMLElement { const newDiv = document.createElement('div'); newDiv.classList.add('square'); if(rgb === 'none') { - var img = document.createElement('img'); + const img = document.createElement('img'); img.src = `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9InN2Z19pY29uIj48c3ZnIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNkNDAwMDAiIGlkPSJzdmdfOTAiIHkyPSIyNCIgeDI9IjI0IiB5MT0iMCIgeDE9IjAiLz4KICAgIDxsaW5lIGlkPSJzdmdfOTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0MDAwMCIgeTI9IjI0IiB4Mj0iMCIgeTE9IjAiIHgxPSIyNCIvPgogIDwvc3ZnPjwvc3ZnPg==`; img.style.width = "15px"; img.style.height = "15px"; diff --git a/src/editor/dragmove/dragmove.js b/src/editor/dragmove/dragmove.js index 065d4730..24713bb0 100644 --- a/src/editor/dragmove/dragmove.js +++ b/src/editor/dragmove/dragmove.js @@ -17,7 +17,7 @@ export const dragmove = function(target, handler, parent, onStart, onEnd, onDrag } // On mouse move, dispatch the coords to all registered callbacks. - for (var i = 0; i < _callbacks.length; i++) { + for (let i = 0; i < _callbacks.length; i++) { _callbacks[i](c.clientX, c.clientY); } }); diff --git a/src/editor/extensions/ext-arrows/ext-arrows.js b/src/editor/extensions/ext-arrows/ext-arrows.js index 4336c3d9..bc1406cb 100644 --- a/src/editor/extensions/ext-arrows/ext-arrows.js +++ b/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; } } diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js index 4a842ee2..4a7069da 100644 --- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js +++ b/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'); } } diff --git a/src/editor/extensions/ext-foreignobject/ext-foreignobject.js b/src/editor/extensions/ext-foreignobject/ext-foreignobject.js index 11387f60..ea662fae 100644 --- a/src/editor/extensions/ext-foreignobject/ext-foreignobject.js +++ b/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"; }; /** diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index 219d2c73..a36df5ce 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/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 = $('
').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 = $('') + + submit = $('') .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); } diff --git a/src/editor/extensions/ext-mathjax/ext-mathjax.js b/src/editor/extensions/ext-mathjax/ext-mathjax.js index 4253ce76..c7d20067 100644 --- a/src/editor/extensions/ext-mathjax/ext-mathjax.js +++ b/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'); diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index e5c0ab37..acbc54e3 100644 --- a/src/editor/panels/TopPanel.js +++ b/src/editor/panels/TopPanel.js @@ -83,31 +83,27 @@ class TopPanel { } } - $("#stroke_width").val(gWidth === null ? "" : gWidth); + $id("stroke_width").value = (gWidth === null ? "" : gWidth); this.editor.bottomPanel.updateColorpickers(true); break; } default: { this.editor.bottomPanel.updateColorpickers(true); - $("#stroke_width").val( - this.selectedElement.getAttribute("stroke-width") || 1 - ); - $("#stroke_style").val( - this.selectedElement.getAttribute("stroke-dasharray") || "none" - ); + $id("stroke_width").value = this.selectedElement.getAttribute("stroke-width") || 1; + $id("stroke_style").value = this.selectedElement.getAttribute("stroke-dasharray") || "none"; let attr = this.selectedElement.getAttribute("stroke-linejoin") || "miter"; - if ($("#linejoin_" + attr).length) { - this.setStrokeOpt($("#linejoin_" + attr)[0]); + if ($id("linejoin_" + attr).length) { + this.setStrokeOpt($id("linejoin_" + attr)); } attr = this.selectedElement.getAttribute("stroke-linecap") || "butt"; - if ($("#linecap_" + attr).length) { - this.setStrokeOpt($("#linecap_" + attr)[0]); + if ($id("linecap_" + attr).length) { + this.setStrokeOpt($id("linecap_" + attr)); } } } @@ -311,7 +307,7 @@ class TopPanel { $("#tool_make_link, #tool_make_link_multi").toggle(!linkHref); if (linkHref) { - $("#link_url").val(linkHref); + $id("link_url").value = linkHref; } if (panels[tagName]) { @@ -329,7 +325,6 @@ class TopPanel { if (tagName === "text") { $id("text_panel").style.display = "inline-block"; - $id("tool_font_size").style.display = "inline"; $id("tool_italic").pressed = this.editor.svgCanvas.getItalic(); $id("tool_bold").pressed = this.editor.svgCanvas.getBold(); $id("tool_font_family").value = elem.getAttribute("font-family"); diff --git a/src/svgcanvas/text-actions.js b/src/svgcanvas/text-actions.js index 86e4129c..f41b91a5 100644 --- a/src/svgcanvas/text-actions.js +++ b/src/svgcanvas/text-actions.js @@ -391,7 +391,7 @@ export const textActionsMethod = (function () { textActionsContext_.getCanvas().textActions.init(); - $(curtext).css('cursor', 'text'); + curtext.style.cursor = 'text'; // if (supportsEditableText()) { // curtext.setAttribute('editable', 'simple'); @@ -420,11 +420,11 @@ export const textActionsMethod = (function () { blinker = null; if (selblock) { $(selblock).attr('display', 'none'); } if (cursor) { $(cursor).attr('visibility', 'hidden'); } - $(curtext).css('cursor', 'move'); + curtext.style.cursor = 'move'; if (selectElem) { textActionsContext_.getCanvas().clearSelection(); - $(curtext).css('cursor', 'move'); + curtext.style.cursor = 'move'; textActionsContext_.call('selected', [curtext]); textActionsContext_.getCanvas().addToSelection([curtext], true);