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

#86 Jquery convert to JavaScript (#88)

Browse Source
This commit is contained in:
Agriya Dev5
2021-04-17 01:52:39 +05:30
committed by GitHub
parent a493dad418
commit 600ae92db5
435 changed files with 2728 additions and 10930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/editor/panels/BottomPanel.js
View File

@@ -140,7 +140,6 @@ class BottomPanel {
* @type {module}
*/
handleOpacity (evt) {
// if ($(this).find('div').length) { return; }
const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
this.editor.svgCanvas.setOpacity(val / 100);
}

89
src/editor/panels/LayersPanel.js
View File

@@ -1,6 +1,5 @@
/* eslint-disable max-len */
/* eslint-disable no-alert */
/* globals $ */
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
const SIDEPANEL_MAXWIDTH = 300;
@@ -324,7 +323,6 @@ class LayersPanel {
* @returns {void}
*/
layerRename() {
// const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
const oldName = document.querySelector("#layerlist tr.layersel td.layername").textContent;
const newName = prompt(this.uiStrings.notification.enterNewLayerName, "");
if (!newName) {
@@ -375,58 +373,73 @@ class LayersPanel {
*/
populateLayers() {
this.editor.svgCanvas.clearSelection();
const layerlist = $("#layerlist tbody").empty();
const selLayerNames = $("#selLayerNames").empty();
const self = this;
const layerlist = $id("layerlist").querySelector('tbody');
while(layerlist.firstChild)
layerlist.removeChild(layerlist.firstChild);
const selLayerNames = $id("selLayerNames");
// empty() ref: http://youmightnotneedjquery.com/#empty
while(selLayerNames.firstChild)
selLayerNames.removeChild(selLayerNames.firstChild);
const drawing = this.editor.svgCanvas.getCurrentDrawing();
const currentLayerName = drawing.getCurrentLayerName();
let layer = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
while (layer--) {
const name = drawing.getLayerName(layer);
const layerTr = $('<tr class="layer">').toggleClass(
"layersel",
name === currentLayerName
);
const layerVis = $('<td class="layervis">').toggleClass(
"layerinvis",
!drawing.getLayerVisibility(name)
);
const layerName = $('<td class="layername">' + name + "</td>");
layerlist.append(layerTr.append(layerVis, layerName));
selLayerNames.append(
'<option value="' + name + '">' + name + "</option>"
);
const layerTr = document.createElement("tr");
layerTr.className = (name === currentLayerName) ? 'layer layersel' : 'layer';
const layerVis = document.createElement("td");
layerVis.className = (!drawing.getLayerVisibility(name)) ? "layerinvis layervis" : 'layervis';
const layerName = document.createElement("td");
layerName.className = 'layername';
layerName.textContent = name;
layerTr.appendChild(layerVis);
layerTr.appendChild(layerName);
layerlist.appendChild(layerTr);
// eslint-disable-next-line no-unsanitized/property
selLayerNames.innerHTML += '<option value="' + name + '">' + name + '</option>';
}
// handle selection of layer
$("#layerlist td.layername")
.mouseup(evt => {
$("#layerlist tr.layer").removeClass("layersel");
$(evt.currentTarget.parentNode).addClass("layersel");
this.editor.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
evt.preventDefault();
})
.mouseover(evt => {
this.toggleHighlightLayer(
this.editor.svgCanvas,
const nelements = $id('layerlist').querySelectorAll("td.layername");
Array.from(nelements).forEach(function(element) {
element.addEventListener('mouseup', function(evt) {
const trElements = $id('layerlist').querySelectorAll("tr.layer");
Array.from(trElements).forEach(function(element) {
element.classList.remove("layersel");
});
evt.currentTarget.parentNode.classList.add("layersel");
self.editor.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
evt.preventDefault();
});
element.addEventListener('mouseup', function(evt) {
self.toggleHighlightLayer(
self.editor.svgCanvas,
evt.currentTarget.textContent
);
})
.mouseout(() => {
this.toggleHighlightLayer(this.editor.svgCanvas);
});
$("#layerlist td.layervis").click(evt => {
const row = $(evt.currentTarget.parentNode).prevAll().length;
const name = $("#layerlist tr.layer:eq(" + row + ") td.layername").text();
const vis = $(evt.currentTarget).hasClass("layerinvis");
this.editor.svgCanvas.setLayerVisibility(name, vis);
$(evt.currentTarget).toggleClass("layerinvis");
element.addEventListener('mouseout', function(evt) {
self.toggleHighlightLayer(self.editor.svgCanvas);
});
});
const elements = $id('layerlist').querySelectorAll("td.layervis");
Array.from(elements).forEach(function(element) {
element.addEventListener('click', function(evt) {
const name = evt.currentTarget.parentNode.querySelector("td.layername").textContent;
const vis = evt.currentTarget.classList.contains("layerinvis");
self.editor.svgCanvas.setLayerVisibility(name, vis);
evt.currentTarget.classList.toggle("layerinvis");
});
});
// if there were too few rows, let's add a few to make it not so lonely
let num = 5 - $("#layerlist tr.layer").size();
let num = 5 - $id('layerlist').querySelectorAll("tr.layer").length;
while (num-- > 0) {
// TODO: there must a better way to do this
layerlist.append('<tr><td style="color:white">_</td><td/></tr>');
const tlayer = document.createElement("tr");
tlayer.innerHTML = '<td style="color:white">_</td><td/>';
layerlist.append(tlayer);
}
}
}

4
src/editor/panels/LeftPanel.js
View File

@@ -214,10 +214,6 @@ class LeftPanel {
<se-button id="tool_circle" title="Square" src="./images/circle.svg"></se-button>
<se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
</se-flyingbutton>
<se-flyingbutton id="tools_polygon" title="Polygone/Star Tool">
<se-button id="tool_polygon" title="Polygon Tool" src="./images/polygon.svg"></se-button>
<se-button id="tool_star" title="Star Tool" src="./images/star.svg"></se-button>
</se-flyingbutton>
<se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
<se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
<se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>

103
src/editor/panels/TopPanel.js
View File

@@ -1,4 +1,3 @@
/* globals $ */
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
import { isValidUnit, getTypeMap, convertUnit } from "../../common/units.js";
@@ -51,7 +50,13 @@ class TopPanel {
if (changeElem) {
this.svgCanvas.setStrokeAttr('stroke-' + pre, val);
}
$(opt).addClass('current').siblings().removeClass('current');
opt.classList.add('current');
const elements = Array.prototype.filter.call(opt.parentNode.children, function(child){
return child !== opt;
});
Array.from(elements).forEach(function(element) {
element.classList.remove('current');
});
}
/**
@@ -149,7 +154,7 @@ class TopPanel {
updateContextPanel() {
const setInputWidth = elem => {
const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
$(elem).width(w);
elem.style.width = w + 'px';
};
let elem = this.editor.selectedElement;
@@ -182,14 +187,9 @@ class TopPanel {
$id("a_panel").style.display = 'none';
if (!isNullish(elem)) {
const elname = elem.nodeName;
// If this is a link with no transform and one child, pretend
// its child is selected
// if (elname === 'a') { // && !$(elem).attr('transform')) {
// elem = elem.firstChild;
// }
const angle = this.editor.svgCanvas.getRotationAngle(elem);
$("#angle").val(angle);
$id("angle").value = angle;
const blurval = this.editor.svgCanvas.getBlur(elem) * 10;
$id("blur").value = blurval;
@@ -227,8 +227,8 @@ class TopPanel {
y = convertUnit(y);
}
$("#selected_x").val(x || 0);
$("#selected_y").val(y || 0);
$id("selected_x").value = (x || 0);
$id("selected_y").value = (y || 0);
$id("xy_panel").style.display = 'block';
}
@@ -242,32 +242,31 @@ class TopPanel {
].includes(elname)
? "none"
: "block";
$id("tool_reorient").style.display =
elname === "path" ? "block" : "none";
$id("tool_reorient").disabled = angle === 0;
$id("tool_reorient").style.display = (elname === "path") ? "block" : "none";
$id("tool_reorient").disabled = (angle === 0);
} else {
const point = this.path.getNodePoint();
$("#tool_add_subpath").pressed = false;
$("#tool_node_delete").toggleClass(
"disabled",
!this.path.canDeleteNodes
);
$id("tool_add_subpath").pressed = false;
// eslint-disable-next-line max-len
(!this.path.canDeleteNodes) ? $id("tool_node_delete").classList.add("disabled") : $id("tool_node_delete").classList.remove("disabled");
// Show open/close button based on selected point
// setIcon('#tool_openclose_path', path.closed_subpath ? 'open_path' : 'close_path');
if (point) {
const segType = $("#seg_type");
const segType = $id("seg_type");
if (unit) {
point.x = convertUnit(point.x);
point.y = convertUnit(point.y);
}
$("#path_node_x").val(point.x);
$("#path_node_y").val(point.y);
$id("path_node_x").value = (point.x);
$id("path_node_y").value = (point.y);
if (point.type) {
segType.val(point.type).removeAttr("disabled");
segType.value = (point.type);
segType.removeAttribute("disabled");
} else {
segType.val(4).attr("disabled", "disabled");
segType.value = 4;
segType.setAttribute("disabled", "disabled");
}
}
return;
@@ -288,23 +287,23 @@ class TopPanel {
const { tagName } = elem;
// if ($(elem).data('gsvg')) {
// $('#g_panel').show();
// }
let linkHref = null;
if (tagName === "a") {
linkHref = this.editor.svgCanvas.getHref(elem);
$id("g_panel").style.display = 'block';
}
if (elem.parentNode.tagName === "a" && !$(elem).siblings().length) {
// siblings
const selements = Array.prototype.filter.call(elem.parentNode.children, function(child){
return child !== elem;
});
if (elem.parentNode.tagName === "a" && !selements.length) {
$id("a_panel").style.display = 'block';
linkHref = this.editor.svgCanvas.getHref(elem.parentNode);
}
// Hide/show the make_link buttons
$("#tool_make_link, #tool_make_link_multi").toggle(!linkHref);
$id('tool_make_link').style.display = (!linkHref) ? 'block' : 'none';
$id('tool_make_link_multi').style.display = (!linkHref) ? 'block' : 'none';
if (linkHref) {
$id("link_url").value = linkHref;
@@ -353,9 +352,8 @@ class TopPanel {
if (this.editor.svgCanvas.addedNew) {
// Timeout needed for IE9
setTimeout(() => {
$("#text")
.focus()
.select();
$id("text").focus()
$id("text").select();
}, 100);
}
// text
@@ -370,10 +368,10 @@ class TopPanel {
} else if (tagName === "g" || tagName === "use") {
$id("container_panel").style.display = 'block';
const title = this.editor.svgCanvas.getTitle();
const label = $("#g_title")[0];
const label = $id("g_title");
label.value = title;
setInputWidth(label);
$("#g_title").prop("disabled", tagName === "use");
$id("g_title").disabled = (tagName === "use");
}
}
menuItems.setAttribute(
@@ -408,9 +406,8 @@ class TopPanel {
if ((elem && !isNode) || this.multiselected) {
// update the selected elements' layer
$("#selLayerNames")
.removeAttr("disabled")
.val(currentLayerName);
$id("selLayerNames").removeAttribute("disabled")
$id("selLayerNames").value = currentLayerName;
// Enable regular menu options
const canCMenu = document.getElementById("se-cmenu_canvas");
@@ -419,7 +416,7 @@ class TopPanel {
"#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back"
);
} else {
$("#selLayerNames").attr("disabled", "disabled");
$id("selLayerNames").disabled = "disabled";
}
}
/**
@@ -444,13 +441,14 @@ class TopPanel {
$id("tool_wireframe").pressed = !$id("tool_wireframe").pressed;
this.editor.workarea.classList.toggle("wireframe");
const wfRules = $("#wireframe_rules");
if (!wfRules.length) {
/* wfRules = */ $('<style id="wireframe_rules"></style>').appendTo(
"head"
);
const wfRules = $id("wireframe_rules");
if (!wfRules) {
const fcRules = document.createElement('style');
fcRules.setAttribute('id', 'wireframe_rules');
document.getElementsByTagName("head")[0].appendChild(fcRules);
} else {
wfRules.empty();
while(wfRules.firstChild)
wfRules.removeChild(wfRules.firstChild);
}
this.editor.updateWireFrame();
}
@@ -496,10 +494,8 @@ class TopPanel {
*/
changeRotationAngle(e) {
this.editor.svgCanvas.setRotationAngle(e.target.value);
$("#tool_reorient").toggleClass(
"disabled",
Number.parseInt(e.target.value) === 0
);
// eslint-disable-next-line max-len
(Number.parseInt(e.target.value) === 0) ? $id("tool_reorient").classList.add("disabled") : $id("tool_reorient").classList.remove("disabled");
}
/**
@@ -544,7 +540,7 @@ class TopPanel {
* @returns {void}
*/
clickAlign(pos) {
let value = $("#tool_align_relative").val();
let value = $id("tool_align_relative").value;
if (value === "") {
value = "selected";
}
@@ -666,8 +662,8 @@ class TopPanel {
* @returns {void}
*/
addSubPath() {
const button = $("#tool_add_subpath");
const sp = !button.hasClass("pressed");
const button = $id("tool_add_subpath");
const sp = !button.classList.contains("pressed");
button.pressed = sp;
// button.toggleClass('push_button_pressed tool_button');
this.path.addSubPath(sp);
@@ -752,7 +748,6 @@ class TopPanel {
<div class="tool_sep"></div>
<se-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></se-button>
<se-button id="tool_wireframe" title="Wireframe Mode" shortcut="F" src="./images/wireframe.svg"></se-button>
<se-button id="view_grid" title="Show grid" src="./images/grid.svg"></se-button>
</div> <!-- editor_panel -->
<div id="history_panel">
<div class="tool_sep"></div>