initial test for web components

src/editor/components/ToolButton.js

@@ -0,0 +1,109 @@
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  :host :hover
+  {
+    background-color: #ffc;
+  }
+  :host
+  {
+    height: 24px;
+    width: 24px;
+    margin: 2px 2px 4px;
+    padding: 3px;
+    box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
+    background-color: #E8E8E8;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+  .svg_icon {
+    border: none;
+    width: 24px;
+    height: 24px;
+    overflow: none;
+  }
+  </style>
+  <div title="title">
+    <img class="svg_icon" src="./images/logo.svg" alt="icon">
+  </div>
+`;
+/**
+ * @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);

src/editor/components/index.js

@@ -0,0 +1 @@
+import './ToolButton.js';

src/editor/images/source.svg

@@ -0,0 +1,9 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 52">
+  <text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_40" y="15" x="28.23" font-weight="bold">s</text>
+  <text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_47" y="30" x="28.23" font-weight="bold">v</text>
+  <text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_48" y="44" x="28.23" font-weight="bold">g</text>
+  <line stroke-width="3" fill="none" stroke="#aa0000" id="svg_51" y2="43" x2="16" y1="25" x1="5"/>
+  <line id="svg_62" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="16" y1="26" x1="5"/>
+  <line id="svg_63" stroke-width="3" fill="none" stroke="#aa0000" y2="43" x2="39" y1="25" x1="50"/>
+  <line id="svg_64" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="39" y1="26" x1="51"/>
+ </svg>

src/editor/index.html

@@ -120,7 +120,7 @@
       <div id="tools_top" class="tools_panel">
         <div id="editor_panel">
           <div class="tool_sep"></div>
-          <div class="push_button" id="tool_source" title="Edit Source [U]"></div>
+          <tool-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></tool-button>
           <div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
         </div>
         <!-- History buttons -->

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

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 {

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 {

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);
               }
             }
           }