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

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>