From bc21386cb6612a30a2bbee84ee46f83bf987839e Mon Sep 17 00:00:00 2001 From: jfh Date: Wed, 21 Oct 2020 22:21:10 +0200 Subject: [PATCH] add disabled attribute for undo/redo button --- src/editor/components/ToolButton.js | 36 ++++++++++++++++++++++++++-- src/editor/images/redo.svg | 9 +++++++ src/editor/images/svg_edit_icons.svg | 24 ------------------- src/editor/images/undo.svg | 9 +++++++ src/editor/index.html | 4 ++-- src/editor/svgedit.js | 27 ++++----------------- 6 files changed, 59 insertions(+), 50 deletions(-) create mode 100644 src/editor/images/redo.svg create mode 100644 src/editor/images/undo.svg diff --git a/src/editor/components/ToolButton.js b/src/editor/components/ToolButton.js index 209b653c..52cbcea5 100644 --- a/src/editor/components/ToolButton.js +++ b/src/editor/components/ToolButton.js @@ -4,7 +4,7 @@ const template = document.createElement('template'); template.innerHTML = `
icon @@ -55,7 +59,7 @@ export class ToolButton extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'src', 'pressed']; + return ['title', 'src', 'pressed', 'disabled']; } /** * @function attributeChangedCallback @@ -83,6 +87,13 @@ export class ToolButton extends HTMLElement { this.$div.classList.remove('pressed'); } break; + case 'disabled': + if (newValue) { + this.$div.classList.add('disabled'); + } else { + this.$div.classList.remove('disabled'); + } + break; default: // eslint-disable-next-line no-console console.error(`unknown attribute: ${name}`); @@ -124,6 +135,26 @@ export class ToolButton extends HTMLElement { this.removeAttribute('pressed', ''); } } + /** + * @function get + * @returns {any} + */ + get disabled () { + return this.hasAttribute('disabled'); + } + + /** + * @function set + * @returns {void} + */ + set disabled (value) { + // boolean value => existence = true + if (value) { + this.setAttribute('disabled', 'true'); + } else { + this.removeAttribute('disabled', ''); + } + } /** * @function get * @returns {any} @@ -145,6 +176,7 @@ export class ToolButton extends HTMLElement { * @returns {void} */ connectedCallback () { + // capture shortcuts const shortcut = this.getAttribute('shortcut'); if (shortcut) { // register the keydown event diff --git a/src/editor/images/redo.svg b/src/editor/images/redo.svg new file mode 100644 index 00000000..50290e7d --- /dev/null +++ b/src/editor/images/redo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/editor/images/svg_edit_icons.svg b/src/editor/images/svg_edit_icons.svg index 598c5450..bb8ea45a 100644 --- a/src/editor/images/svg_edit_icons.svg +++ b/src/editor/images/svg_edit_icons.svg @@ -442,30 +442,6 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/editor/images/undo.svg b/src/editor/images/undo.svg new file mode 100644 index 00000000..210a3b77 --- /dev/null +++ b/src/editor/images/undo.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/editor/index.html b/src/editor/index.html index 0ae4c5cd..51506e37 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -126,8 +126,8 @@
-
-
+ +
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 459b6370..25bb11bf 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1060,9 +1060,6 @@ editor.init = () => { import: 'import.png', docprops: 'document-properties.png', - undo: 'undo.png', - redo: 'redo.png', - clone: 'clone.png', delete: 'delete.png', go_up: 'go-up.png', @@ -1123,9 +1120,6 @@ editor.init = () => { '#tool_editor_prefs > div': 'config', '#tool_editor_homepage > div': 'globe_link', - '#tool_undo': 'undo', - '#tool_redo': 'redo', - '#tool_select': 'select', '#tool_fhpath': 'pencil', '#tool_line': 'pen', @@ -2277,8 +2271,8 @@ editor.init = () => { } // update history buttons - $('#tool_undo').toggleClass('disabled', undoMgr.getUndoStackSize() === 0); - $('#tool_redo').toggleClass('disabled', undoMgr.getRedoStackSize() === 0); + $id('tool_undo').disabled = (undoMgr.getUndoStackSize() === 0); + $id('tool_redo').disabled = (undoMgr.getRedoStackSize() === 0); svgCanvas.addedNew = false; @@ -4434,7 +4428,6 @@ editor.init = () => { * @returns {void} */ const clickWireframe = function () { - console.log($id('tool_wireframe').pressed); $id('tool_wireframe').pressed = !$id('tool_wireframe').pressed; workarea.toggleClass('wireframe'); @@ -4769,12 +4762,6 @@ editor.init = () => { }).bind('mousedown mouseout', function () { $(this).removeClass(curClass); }); - - $('#tool_undo, #tool_redo').mousedown(function () { - if (!$(this).hasClass('disabled')) { $(this).addClass(curClass); } - }).bind('mousedown mouseout', function () { - $(this).removeClass(curClass); - }); }()); /** @@ -5356,6 +5343,9 @@ editor.init = () => { // register action to buttons $id('tool_source').addEventListener('click', showSourceEditor); $id('tool_wireframe').addEventListener('click', clickWireframe); + $id('tool_undo').addEventListener('click', clickUndo); + $id('tool_redo').addEventListener('click', clickRedo); + const toolButtons = [ {sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]}, {sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true]}, @@ -5388,8 +5378,6 @@ editor.init = () => { {sel: '#tool_export', fn: clickExport, evt: 'mouseup'}, {sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true]}, {sel: '#tool_import', fn: clickImport, evt: 'mouseup'}, - // {sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]}, - // {sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]}, { key: ['esc', false, false], fn () { @@ -5423,16 +5411,11 @@ editor.init = () => { {sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+['}, {sel: '#tool_topath', fn: convertToPath, evt: 'click'}, {sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click'}, - {sel: '#tool_undo', fn: clickUndo, evt: 'click'}, - {sel: '#tool_redo', fn: clickRedo, evt: 'click'}, {sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true]}, {sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true]}, {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'}, {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'}, {sel: '[id^=tool_align]', fn: clickAlign, evt: 'click'}, - // these two lines are required to make Opera work properly with the flyout mechanism - // {sel: '#tools_rect_show', fn: clickRect, evt: 'click'}, - // {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'}, {sel: '#tool_bold', fn: clickBold, evt: 'mousedown'}, {sel: '#tool_italic', fn: clickItalic, evt: 'mousedown'}, {sel: '#sidepanel_handle', fn: toggleSidePanel, key: ['X']},