github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#83 jquery convert to pure javascript changes (#84)

Browse Source
This commit is contained in:
Agriya Dev5
2021-03-16 14:30:40 +05:30
committed by GitHub
parent 6e1f7d2a07
commit c71284391b
20 changed files with 138 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/editor/extensions/ext-arrows/ext-arrows.js
View File

@@ -25,6 +25,7 @@ export default {
const svgEditor = this;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const
addElem = svgCanvas.addSVGElementFromJson,
{nonce, $} = S,
@@ -285,7 +286,8 @@ export default {
return Object.assign(contextTools[i], contextTool);
}),
callback () {
$('#arrow_panel').hide();
$id("arrow_panel").style.display = 'none';
// Set ID so it can be translated in locale file
$('#arrow_list option')[0].id = 'connector_no_arrow';
},

12
src/editor/extensions/ext-closepath/ext-closepath.js
View File

@@ -25,15 +25,17 @@ export default {
name: 'closepath',
async init ({importLocale, $}) {
const svgEditor = this;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
let selElems;
const updateButton = function (path) {
const seglist = path.pathSegList,
closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1,
showbutton = closed ? '#tool_openpath' : '#tool_closepath',
hidebutton = closed ? '#tool_closepath' : '#tool_openpath';
$(hidebutton).hide();
$(showbutton).show();
showbutton = closed ? 'tool_openpath' : 'tool_closepath',
hidebutton = closed ? 'tool_closepath' : 'tool_openpath';
$id("hidebutton").style.display = 'none';
$id("showbutton").style.display = 'block';
};
const showPanel = function (on) {
$('#closepath_panel').toggle(on);
@@ -89,7 +91,7 @@ export default {
return Object.assign(buttons[i], button);
}),
callback () {
$('#closepath_panel').hide();
$id("closepath_panel").style.display = 'none';
},
selectedChanged (opts) {
selElems = opts.elems;

6
src/editor/extensions/ext-foreignobject/ext-foreignobject.js
View File

@@ -7,7 +7,6 @@
* @copyright 2010 Jacques Distler, 2010 Alexis Deveria
*
*/
const loadExtensionTranslation = async function (lang) {
let translationModule;
try {
@@ -26,6 +25,7 @@ export default {
const svgEditor = this;
const {$, text2xml, NS} = S;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const
// {svgcontent} = S,
// addElem = svgCanvas.addSVGElementFromJson,
@@ -183,10 +183,10 @@ export default {
return Object.assign(contextTools[i], contextTool);
}),
callback () {
$('#foreignObject_panel').hide();
$id("foreignObject_panel").style.display = 'none';
const endChanges = function () {
$('#svg_source_editor').hide();
$id("svg_source_editor").style.display = 'none';
editingforeign = false;
$('#svg_source_textarea').blur();
toggleSourceButtons(false);

9
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@@ -24,6 +24,7 @@ export default {
name: 'imagelib',
async init ({$, decode64, dropXMLInternalSubset}) {
const svgEditor = this;
const {$id} = svgEditor.svgCanvas;
const imagelibStrings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {uiStrings, canvas: svgCanvas} = svgEditor;
@@ -41,7 +42,7 @@ export default {
* @returns {void}
*/
function closeBrowser () {
$('#imgbrowse_holder').hide();
$id("imgbrowse_holder").style.display = 'none';
document.activeElement.blur(); // make sure focus is the body to correct issue #417
}
@@ -352,7 +353,7 @@ export default {
});
preview.empty();
multiArr = [];
$('#imgbrowse_holder').hide();
$id("imgbrowse_holder").style.display = 'none';
}).css({
position: 'absolute',
bottom: 10,
@@ -390,7 +391,7 @@ export default {
$('<button><img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />' + uiStrings.common.cancel + '</button>')
.appendTo(browser)
.on('click touchend', function () {
$('#imgbrowse_holder').hide();
$id("imgbrowse_holder").style.display = 'none';
}).css({
position: 'absolute',
top: 5,
@@ -445,7 +446,7 @@ export default {
}).append(`<span>${description}</span>`);
});
} else {
$('#imgbrowse_holder').show();
$id("imgbrowse_holder").style.display = 'block';
}
}

6
src/editor/extensions/ext-markers/ext-markers.js
View File

@@ -48,6 +48,7 @@ export default {
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {$} = S;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const // {svgcontent} = S,
addElem = svgCanvas.addSVGElementFromJson;
const mtypes = ['start', 'mid', 'end'];
@@ -567,7 +568,10 @@ export default {
name: strings.name,
svgicons: '',
callback () {
$('#marker_panel').addClass('toolset').hide();
if($id("marker_panel") !== null) {
$id("marker_panel").classList.add('toolset');
$id("marker_panel").style.display = 'none';
}
},
/* async */ addLangData ({importLocale, lang}) {
return {data: strings.langList};

7
src/editor/extensions/ext-mathjax/ext-mathjax.js
View File

@@ -26,6 +26,7 @@ export default {
const svgEditor = this;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
// Configuration of the MathJax extention.
@@ -178,14 +179,14 @@ export default {
// Add functionality and picture to cancel button.
$('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true))
.on('click touched', function () {
$('#mathjax').hide();
$id("mathjax").style.display = 'none';
});
// Add functionality and picture to the save button.
$('#tool_mathjax_save').prepend($.getSvgIcon('ok', true))
.on('click touched', function () {
saveMath();
$('#mathjax').hide();
$id("mathjax").style.display = 'none';
});
// MathJax preprocessing has to ignore most of the page.
@@ -231,7 +232,7 @@ export default {
locationX = opts.mouse_x / zoom;
locationY = opts.mouse_y / zoom;
$('#mathjax').show();
$id("mathjax").style.display = 'block';
return {started: false}; // Otherwise the last selected object dissapears.
}
return undefined;

73
src/editor/extensions/ext-overview_window/ext-overview_window.js
View File

@@ -1,3 +1,4 @@
/* eslint-disable max-len */
/**
* @file ext-overview_window.js
*
@@ -7,9 +8,12 @@
*
*/
import { dragmove } from '../../../editor/dragmove/dragmove.js';
export default {
name: 'overview_window',
init ({$, isChrome}) {
const svgEditor = this;
const {$id} = svgEditor.svgCanvas;
const overviewWindowGlobals = {};
// Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and
// https://code.google.com/p/chromium/issues/detail?id=565120.
@@ -42,7 +46,8 @@ export default {
'</div>' +
'</div>' +
'</div>';
$('#sidepanels').append(propsWindowHtml);
// eslint-disable-next-line no-unsanitized/method
$id("sidepanels").insertAdjacentHTML( 'beforeend', propsWindowHtml );
// Define dynamic animation of the view box.
const updateViewBox = function () {
@@ -51,20 +56,20 @@ export default {
const portWidth = parseFloat(getComputedStyle(warea, null).width.replace("px", ""));
const portX = warea.scrollLeft;
const portY = warea.scrollTop;
const windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
const windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
const overviewWidth = $('#overviewMiniView').attr('width');
const overviewHeight = $('#overviewMiniView').attr('height');
const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", ""));
const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", ""));
const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const overviewHeight = parseFloat(getComputedStyle($id("overviewMiniView"), null).height.replace("px", ""));
const viewBoxX = portX / windowWidth * overviewWidth;
const viewBoxY = portY / windowHeight * overviewHeight;
const viewBoxWidth = portWidth / windowWidth * overviewWidth;
const viewBoxHeight = portHeight / windowHeight * overviewHeight;
$('#overview_window_view_box').css('min-width', viewBoxWidth + 'px');
$('#overview_window_view_box').css('min-height', viewBoxHeight + 'px');
$('#overview_window_view_box').css('top', viewBoxY + 'px');
$('#overview_window_view_box').css('left', viewBoxX + 'px');
$id("overview_window_view_box").style.minWidth = viewBoxWidth + 'px';
$id("overview_window_view_box").style.minHeight = viewBoxHeight + 'px';
$id("overview_window_view_box").style.top = viewBoxY + 'px';
$id("overview_window_view_box").style.left = viewBoxX + 'px';
};
document.getElementById('workarea').addEventListener('scroll', () => {
if (!(overviewWindowGlobals.viewBoxDragging)) {
@@ -76,16 +81,16 @@ export default {
// Compensate for changes in zoom and canvas size.
const updateViewDimensions = function () {
const viewWidth = $('#svgroot').attr('width');
const viewHeight = $('#svgroot').attr('height');
const viewWidth = parseFloat(getComputedStyle($id("svgroot"), null).width.replace("px", ""));
const viewHeight = parseFloat(getComputedStyle($id("svgroot"), null).height.replace("px", ""));
const viewX = 640;
const viewY = 480;
const svgWidthOld = $('#overviewMiniView').attr('width');
const svgWidthOld = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const svgHeightNew = viewHeight / viewWidth * svgWidthOld;
$('#overviewMiniView').attr('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
$('#overviewMiniView').attr('height', svgHeightNew);
$id('overviewMiniView').setAttribute('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
$id('overviewMiniView').setAttribute('height', svgHeightNew);
updateViewBox();
};
updateViewDimensions();
@@ -93,30 +98,31 @@ export default {
// Set up the overview window as a controller for the view port.
overviewWindowGlobals.viewBoxDragging = false;
const updateViewPortFromViewBox = function () {
const windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
const windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
const overviewWidth = $('#overviewMiniView').attr('width');
const overviewHeight = $('#overviewMiniView').attr('height');
const viewBoxX = Number.parseFloat($('#overview_window_view_box').css('left'));
const viewBoxY = Number.parseFloat($('#overview_window_view_box').css('top'));
const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", ""));
const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", ""));
const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const overviewHeight = parseFloat(getComputedStyle($id("overviewMiniView"), null).height.replace("px", ""));
const viewBoxX = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('left').replace("px", ""));;
const viewBoxY = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('top').replace("px", ""));;
const portX = viewBoxX / overviewWidth * windowWidth;
const portY = viewBoxY / overviewHeight * windowHeight;
document.getElementById('workarea').scrollLeft = portX;
document.getElementById('workarea').scrollTop = portY;
$id('workarea').scrollLeft = portX;
$id('workarea').scrollTop = portY;
};
const onStart = () => {
overviewWindowGlobals.viewBoxDragging = true;
updateViewPortFromViewBox();
};
const onEnd = (el, parent, x, y) => {
if((el.offsetLeft + el.offsetWidth) > $(parent).attr('width')){
el.style.left = ($(parent).attr('width') - el.offsetWidth) + 'px';
if((el.offsetLeft + el.offsetWidth) > parseFloat(getComputedStyle(parent, null).width.replace("px", ""))){
el.style.left = (parseFloat(getComputedStyle(parent, null).width.replace("px", "")) - el.offsetWidth) + 'px';
} else if(el.offsetLeft < 0){
el.style.left = "0px"
}
if((el.offsetTop + el.offsetHeight) > $(parent).attr('height')){
el.style.top = ($(parent).attr('height') - el.offsetHeight) + 'px';
if((el.offsetTop + el.offsetHeight) > parseFloat(getComputedStyle(parent, null).height.replace("px", ""))){
el.style.top = (parseFloat(getComputedStyle(parent, null).height.replace("px", "")) - el.offsetHeight) + 'px';
} else if(el.offsetTop < 0){
el.style.top = "0px"
}
@@ -130,14 +136,14 @@ export default {
const parentElem = document.querySelector("#overviewMiniView");
dragmove(dragElem, dragElem, parentElem, onStart, onEnd, onDrag);
$('#overviewMiniView').click(function (evt) {
$id("overviewMiniView").addEventListener("click", evt => {
// Firefox doesn't support evt.offsetX and evt.offsetY.
const mouseX = (evt.offsetX || evt.originalEvent.layerX);
const mouseY = (evt.offsetY || evt.originalEvent.layerY);
const overviewWidth = $('#overviewMiniView').attr('width');
const overviewHeight = $('#overviewMiniView').attr('height');
const viewBoxWidth = Number.parseFloat($('#overview_window_view_box').css('min-width'));
const viewBoxHeight = Number.parseFloat($('#overview_window_view_box').css('min-height'));
const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const overviewHeight = parseFloat(getComputedStyle($id("overviewMiniView"), null).height.replace("px", ""));
const viewBoxWidth = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('min-width').replace("px", ""));;
const viewBoxHeight = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('min-height').replace("px", ""));;
let viewBoxX = mouseX - 0.5 * viewBoxWidth;
let viewBoxY = mouseY - 0.5 * viewBoxHeight;
@@ -154,9 +160,8 @@ export default {
if (viewBoxY + viewBoxHeight > overviewHeight) {
viewBoxY = overviewHeight - viewBoxHeight;
}
$('#overview_window_view_box').css('top', viewBoxY + 'px');
$('#overview_window_view_box').css('left', viewBoxX + 'px');
$id("overview_window_view_box").style.top = viewBoxY + 'px';
$id("overview_window_view_box").style.left = viewBoxX + 'px';
updateViewPortFromViewBox();
});

3
src/editor/extensions/ext-placemark/ext-placemark.js
View File

@@ -23,6 +23,7 @@ export default {
async init (S) {
const svgEditor = this;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const addElem = svgCanvas.addSVGElementFromJson;
const {$} = S; // {svgcontent},
let
@@ -356,7 +357,7 @@ export default {
return Object.assign(contextTools[i], contextTool);
}),
callback () {
$('#placemark_panel').hide();
$id("placemark_panel").style.display = 'none';
// const endChanges = function(){};
},
mouseDown (opts) {

4
src/editor/extensions/ext-polygon/ext-polygon.js
View File

@@ -23,6 +23,7 @@ export default {
async init (S) {
const svgEditor = this;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const {$} = S, // {svgcontent}
// addElem = svgCanvas.addSVGElementFromJson,
editingitex = false;
@@ -113,8 +114,7 @@ export default {
}),
callback () {
$('#polygon_panel').hide();
if($id("polygon_panel") !== null) $id("polygon_panel").style.display = 'none';
const endChanges = function () {
// Todo: Missing?
};

12
src/editor/extensions/ext-server_opensave/ext-server_opensave.js
View File

@@ -32,6 +32,7 @@ export default {
},
canvas: svgCanvas
} = svgEditor;
const {$id} = svgCanvas;
/**
*
@@ -185,8 +186,7 @@ export default {
cancelled = false;
return;
}
$('#dialog_box').hide();
if($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
if (type !== 'import_img') {
xmlstr = decode64(str64);
@@ -247,7 +247,7 @@ export default {
rebuildInput(form);
await $.process_cancel(strings.uploading);
cancelled = true;
$('#dialog_box').hide();
if($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
}
if (form[0] === openSvgForm[0]) {
@@ -274,8 +274,10 @@ export default {
rebuildInput(importImgForm);
// Add forms to buttons
$('#tool_open').show().prepend(openSvgForm);
$('#tool_import').show().prepend(importSvgForm);
$id("tool_open").style.display = 'block';
$id("tool_import").style.display = 'block';
$('#tool_open').prepend(openSvgForm);
$('#tool_import').prepend(importSvgForm);
$('#tool_image').prepend(importImgForm);
}
};

4
src/editor/extensions/ext-star/ext-star.js
View File

@@ -23,7 +23,7 @@ export default {
async init (S) {
const svgEditor = this;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const {$} = S; // {svgcontent},
let
selElems,
@@ -121,7 +121,7 @@ export default {
return Object.assign(contextTools[i], contextTool);
}),
callback () {
$('#star_panel').hide();
if($id("star_panel") !== null) $id("star_panel").style.display = 'none';
// const endChanges = function(){};
},
mouseDown (opts) {