diff --git a/src/editor/components/ToolButton.js b/src/editor/components/ToolButton.js new file mode 100644 index 00000000..e7185495 --- /dev/null +++ b/src/editor/components/ToolButton.js @@ -0,0 +1,109 @@ +const template = document.createElement('template'); +template.innerHTML = ` + +
+ icon +
+`; +/** + * @class ToolButton + */ +export class ToolButton extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // create the shadowDom and insert the template + this._shadowRoot = this.attachShadow({mode: 'closed'}); + this._shadowRoot.appendChild(template.content.cloneNode(true)); + // locate the component + this.$div = this._shadowRoot.querySelector('div'); + this.$img = this._shadowRoot.querySelector('img'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['title', 'src']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'title': + this.$div.setAttribute('title', newValue); + break; + case 'src': + this.$img.setAttribute('src', newValue); + break; + default: + // eslint-disable-next-line no-console + console.error(`unknown attribute: ${name}`); + break; + } + console.log(name, oldValue, newValue); + } + /** + * @function get + * @returns {any} + */ + get title () { + return this.getAttribute('title'); + } + + /** + * @function set + * @returns {void} + */ + set title (value) { + this.setAttribute('title', value); + } + /** + * @function get + * @returns {any} + */ + get src () { + return this.getAttribute('src'); + } + + /** + * @function set + * @returns {void} + */ + set src (value) { + this.setAttribute('src', value); + } +} + +// Register +customElements.define('tool-button', ToolButton); diff --git a/src/editor/components/index.js b/src/editor/components/index.js new file mode 100644 index 00000000..3946dd8c --- /dev/null +++ b/src/editor/components/index.js @@ -0,0 +1 @@ +import './ToolButton.js'; diff --git a/src/editor/images/source.svg b/src/editor/images/source.svg new file mode 100644 index 00000000..3b9171ae --- /dev/null +++ b/src/editor/images/source.svg @@ -0,0 +1,9 @@ + + s + v + g + + + + + \ No newline at end of file diff --git a/src/editor/index.html b/src/editor/index.html index 2dbc5836..26e4ff5a 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -120,7 +120,7 @@
-
+
diff --git a/src/editor/index.js b/src/editor/index.js index c511058b..3c578d3e 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -6,6 +6,7 @@ For default config and extensions (and available options) available to import './jquery.min.js'; import './jquery-ui/jquery-ui-1.8.17.custom.min.js'; +import './components/index.js'; import svgEditor from './svgedit.js'; // URL OVERRIDE CONFIG diff --git a/src/editor/locale.js b/src/editor/locale.js index a2c5f315..600107e8 100644 --- a/src/editor/locale.js +++ b/src/editor/locale.js @@ -76,7 +76,7 @@ export const setStrings = function (type, obj, ids) { break; case 'title': - elem.title = val; + elem.setAttribute('title', val); break; } } else { diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 48c09823..d47c06b4 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -698,14 +698,10 @@ span.zoom_tool { width: 24px; margin: 2px 2px 4px 2px; padding: 3px; - -webkit-box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3); - moz-box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3); box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3); background-color: #E8E8E8; cursor: pointer; border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; } #main_menu li#tool_open, #main_menu li#tool_import { @@ -848,7 +844,7 @@ span.zoom_tool { width: 300px; position: relative; margin-top: 5px; - -webkit-transition: width 150ms ease; + transition: width 150ms ease; } .expanded #tools_bottom_2 { diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 0d4ee095..b429ec24 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1059,7 +1059,6 @@ editor.init = () => { open: 'open.png', import: 'import.png', docprops: 'document-properties.png', - source: 'source.png', wireframe: 'wireframe.png', undo: 'undo.png', @@ -1121,7 +1120,6 @@ editor.init = () => { '#tool_export div': 'export', '#tool_open div': 'open', '#tool_import div': 'import', - '#tool_source': 'source', '#tool_docprops > div': 'docprops', '#tool_editor_prefs > div': 'config', '#tool_editor_homepage > div': 'globe_link', @@ -4755,7 +4753,7 @@ editor.init = () => { // behave more like buttons being pressed-in and not images (function () { const toolnames = [ - 'clear', 'open', 'save', 'source', 'delete', + 'clear', 'open', 'save', 'delete', 'delete_multi', 'paste', 'clone', 'clone_multi', 'move_top', 'move_bottom' ]; @@ -4794,11 +4792,11 @@ editor.init = () => { if (button) { const {title} = button; const index = title.indexOf('Ctrl+'); - button.title = [ + button.setAttribute('title', [ title.substr(0, index), 'Cmd+', title.substr(index + 5) - ].join(''); + ].join('')); } } } @@ -5569,7 +5567,7 @@ editor.init = () => { keyAssocs[keyval] = opts.sel; // Disregard for menu items if (btn.closest('#main_menu') === null) { - btn.title = newTitle; + btn.setAttribute('title', newTitle); } } }