From 7fc2c93693bb54850f2e8bc945394c62de70c69d Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Mon, 30 Aug 2021 19:16:08 +0530
Subject: [PATCH] #631 web component i18n implement new approach

---
 src/editor/components/seButton.js             |   3 +-
 src/editor/components/seFlyingButton.js       |   3 +-
 src/editor/components/seInput.js              |  24 +++-
 src/editor/components/seList.js               |   3 +-
 src/editor/components/seSpinInput.js          |  26 +++-
 .../extensions/ext-connector/ext-connector.js |   2 +-
 .../ext-eyedropper/ext-eyedropper.js          |   4 +-
 src/editor/extensions/ext-grid/ext-grid.js    |   2 +-
 .../ext-helloworld/ext-helloworld.js          |   2 +-
 .../extensions/ext-panning/ext-panning.js     |   2 +-
 .../extensions/ext-polystar/ext-polystar.js   |   6 +-
 src/editor/locale/lang.en.js                  |   1 +
 src/editor/panels/LayersPanel.js              |  12 +-
 src/editor/panels/LeftPanel.js                |  30 ++---
 src/editor/panels/TopPanel.js                 | 116 +++++++++---------
 15 files changed, 141 insertions(+), 95 deletions(-)

diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js
index f6e5478a..1a2f2f26 100644
--- a/src/editor/components/seButton.js
+++ b/src/editor/components/seButton.js
@@ -1,3 +1,4 @@
+import { t } from '../locale.js';
 const template = document.createElement('template');
 // eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
@@ -75,7 +76,7 @@ export class ToolButton extends HTMLElement {
     case 'title':
       {
         const shortcut = this.getAttribute('shortcut');
-        this.$div.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
+        this.$div.setAttribute('title', `${t(newValue)} ${shortcut ? `[${t(shortcut)}]` : ''}`);
       }
       break;
     case 'style':
diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js
index ddcc957b..330066c8 100644
--- a/src/editor/components/seFlyingButton.js
+++ b/src/editor/components/seFlyingButton.js
@@ -1,3 +1,4 @@
+import { t } from '../locale.js';
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
@@ -120,7 +121,7 @@ export class FlyingButton extends HTMLElement {
     case 'title':
       {
         const shortcut = this.getAttribute('shortcut');
-        this.$button.setAttribute('title', `${newValue} [${shortcut}]`);
+        this.$button.setAttribute('title', `${t(newValue)} ${shortcut ? `[${t(shortcut)}]` : ''}`);
       }
       break;
     case 'pressed':
diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js
index e19e1dbf..71119a9e 100644
--- a/src/editor/components/seInput.js
+++ b/src/editor/components/seInput.js
@@ -1,4 +1,5 @@
 import 'elix/define/Input.js';
+import { t } from '../locale.js';
 
 const template = document.createElement('template');
 template.innerHTML = `
@@ -45,6 +46,7 @@ export class SEInput extends HTMLElement {
     this._shadowRoot = this.attachShadow({ mode: 'open' });
     this._shadowRoot.append(template.content.cloneNode(true));
     // locate the component
+    this.$div = this._shadowRoot.querySelector('div');
     this.$img = this._shadowRoot.querySelector('img');
     this.$label = this.shadowRoot.getElementById('label');
     this.$event = new CustomEvent('change');
@@ -55,7 +57,7 @@ export class SEInput extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'value', 'label', 'src', 'size' ];
+    return [ 'value', 'label', 'src', 'size', 'title' ];
   }
   /**
    * @function attributeChangedCallback
@@ -67,6 +69,9 @@ export class SEInput extends HTMLElement {
   attributeChangedCallback (name, oldValue, newValue) {
     if (oldValue === newValue) return;
     switch (name) {
+    case 'title':
+      this.$div.setAttribute('title', `${t(newValue)}`);
+      break;
     case 'src':
       this.$img.setAttribute('src', newValue);
       this.$label.remove();
@@ -75,7 +80,7 @@ export class SEInput extends HTMLElement {
       this.$input.setAttribute('size', newValue);
       break;
     case 'label':
-      this.$label.textContent = newValue;
+      this.$label.textContent = t(newValue);
       this.$img.remove();
       break;
     case 'value':
@@ -87,6 +92,21 @@ export class SEInput extends HTMLElement {
       break;
     }
   }
+  /**
+   * @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}
diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
index 7f573115..7da9426b 100644
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -1,4 +1,5 @@
 import 'elix/define/DropdownList.js';
+import { t } from '../locale.js';
 
 const template = document.createElement('template');
 template.innerHTML = `
@@ -59,7 +60,7 @@ export class SeList extends HTMLElement {
     if (oldValue === newValue) return;
     switch (name) {
     case 'label':
-      this.$label.textContent = newValue;
+      this.$label.textContent = t(newValue);
       break;
     case 'height':
       this.$dropdown.style.height = newValue;
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index 24c82ed8..12433bd5 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -1,4 +1,5 @@
 import '../dialogs/se-elix/define/NumberSpinBox.js';
+import { t } from '../locale.js';
 
 const template = document.createElement('template');
 template.innerHTML = `
@@ -72,7 +73,7 @@ export class SESpinInput extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step' ];
+    return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step', 'title' ];
   }
   /**
    * @function attributeChangedCallback
@@ -84,6 +85,12 @@ export class SESpinInput extends HTMLElement {
   attributeChangedCallback (name, oldValue, newValue) {
     if (oldValue === newValue) return;
     switch (name) {
+    case 'title':
+      {
+        const shortcut = this.getAttribute('shortcut');
+        this.$div.setAttribute('title', `${t(newValue)} ${shortcut ? `[${t(shortcut)}]` : ''}`);
+      }
+      break;
     case 'src':
       this.$img.setAttribute('src', newValue);
       this.$label.remove();
@@ -105,7 +112,7 @@ export class SESpinInput extends HTMLElement {
       this.$input.setAttribute('max', newValue);
       break;
     case 'label':
-      this.$label.textContent = newValue;
+      this.$label.textContent = t(newValue);
       this.$img.remove();
       break;
     case 'value':
@@ -117,6 +124,21 @@ export class SESpinInput extends HTMLElement {
       break;
     }
   }
+  /**
+   * @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}
diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js
index ebd3394a..2ecbc9db 100644
--- a/src/editor/extensions/ext-connector/ext-connector.js
+++ b/src/editor/extensions/ext-connector/ext-connector.js
@@ -354,7 +354,7 @@ export default {
     return {
       name: svgEditor.i18next.t(`${name}:name`),
       callback() {
-        const btitle = svgEditor.i18next.t(`${name}:langListTitle`);
+        const btitle = `${name}:langListTitle`;
         // eslint-disable-next-line no-unsanitized/property
         const buttonTemplate = `
         <se-button id="mode_connect" title="${btitle}" src="${imgPath}/conn.svg"></se-button>
diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
index 0bb6bbb7..298e4514 100644
--- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
+++ b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
@@ -83,8 +83,8 @@ export default {
       name: svgEditor.i18next.t(`${name}:name`),
       callback() {
         // Add the button and its handler(s)
-        const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
-        const key = svgEditor.i18next.t(`${name}:buttons.0.key`);
+        const title = `${name}:buttons.0.title`;
+        const key = `${name}:buttons.0.key`;
         // eslint-disable-next-line no-unsanitized/property
         const buttonTemplate = `
         <se-button id="tool_eyedropper" title="${title}" src="${imgPath}/eye_dropper.svg" shortcut=${key}></se-button>
diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js
index 7c11b72f..ba761a62 100644
--- a/src/editor/extensions/ext-grid/ext-grid.js
+++ b/src/editor/extensions/ext-grid/ext-grid.js
@@ -164,7 +164,7 @@ export default {
       callback () {
         // Add the button and its handler(s)
         const buttonTemplate = document.createElement("template");
-        const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
+        const title = `${name}:buttons.0.title`;
 
         // eslint-disable-next-line no-unsanitized/property
         buttonTemplate.innerHTML = `
diff --git a/src/editor/extensions/ext-helloworld/ext-helloworld.js b/src/editor/extensions/ext-helloworld/ext-helloworld.js
index 297a70eb..8e8069db 100644
--- a/src/editor/extensions/ext-helloworld/ext-helloworld.js
+++ b/src/editor/extensions/ext-helloworld/ext-helloworld.js
@@ -43,7 +43,7 @@ export default {
       callback() {
         // Add the button and its handler(s)
         const buttonTemplate = document.createElement("template");
-        const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
+        const title = `${name}:buttons.0.title`;
         // eslint-disable-next-line no-unsanitized/property
         buttonTemplate.innerHTML = `
         <se-button id="hello_world" title="${title}" src="${imgPath}/hello_world.svg"></se-button>
diff --git a/src/editor/extensions/ext-panning/ext-panning.js b/src/editor/extensions/ext-panning/ext-panning.js
index 7f4ba2a0..9705e7e9 100644
--- a/src/editor/extensions/ext-panning/ext-panning.js
+++ b/src/editor/extensions/ext-panning/ext-panning.js
@@ -46,7 +46,7 @@ export default {
     return {
       name: svgEditor.i18next.t(`${name}:name`),
       callback() {
-        const btitle = svgEditor.i18next.t(`${name}:buttons.0.title`);
+        const btitle = `${name}:buttons.0.title`;
         // Add the button and its handler(s)
         const buttonTemplate = document.createElement("template");
         // eslint-disable-next-line no-unsanitized/property
diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js
index 74b224ce..97a3eed4 100644
--- a/src/editor/extensions/ext-polystar/ext-polystar.js
+++ b/src/editor/extensions/ext-polystar/ext-polystar.js
@@ -81,9 +81,9 @@ export default {
       callback() {
         // Add the button and its handler(s)
         // Note: the star extension needs to be loaded before the polygon extension
-        const fbtitle = svgEditor.i18next.t(`${name}:title`);
-        const title_star = svgEditor.i18next.t(`${name}:buttons.0.title`);
-        const title_polygon = svgEditor.i18next.t(`${name}:buttons.1.title`);
+        const fbtitle = `${name}:title`;
+        const title_star = `${name}:buttons.0.title`;
+        const title_polygon = `${name}:buttons.1.title`;
         // eslint-disable-next-line no-unsanitized/property
         const buttonTemplate = `
             <se-flyingbutton id="tools_polygon" title="${fbtitle}">
diff --git a/src/editor/locale/lang.en.js b/src/editor/locale/lang.en.js
index ca00c950..d996a40b 100644
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@@ -70,6 +70,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Change text contents',
+    font_family_label: 'Font',
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index 04c59820..d563b5a8 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -54,12 +54,12 @@ class LayersPanel {
         <div id="layerpanel">
           <h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
           <fieldset id="layerbuttons">
-            <se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="${imgPath}/new.svg"></se-button>
-            <se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="${imgPath}/delete.svg"></se-button>
-            <se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="${imgPath}/text.svg"></se-button>
-            <se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="${imgPath}/go_up.svg"></se-button>
-            <se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="${imgPath}/go_down.svg"></se-button>
-            <se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="${imgPath}/context_menu.svg">
+            <se-button id="layer_new" title="layers.new" size="small" src="${imgPath}/new.svg"></se-button>
+            <se-button id="layer_delete" title="layers.del" size="small" src="${imgPath}/delete.svg"></se-button>
+            <se-button id="layer_rename" title="layers.rename" size="small" src="${imgPath}/text.svg"></se-button>
+            <se-button id="layer_up" title="layers.move_up" size="small" src="${imgPath}/go_up.svg"></se-button>
+            <se-button id="layer_down" title="layers.move_down" size="small" src="${imgPath}/go_down.svg"></se-button>
+            <se-button id="layer_moreopts" title="common.more_opts" size="small" src="${imgPath}/context_menu.svg">
             </se-button>
           </fieldset>
           <table id="layerlist">
diff --git a/src/editor/panels/LeftPanel.js b/src/editor/panels/LeftPanel.js
index 8a16642e..a2b0c524 100644
--- a/src/editor/panels/LeftPanel.js
+++ b/src/editor/panels/LeftPanel.js
@@ -201,47 +201,47 @@ class LeftPanel {
     // add Left panel
     const leftMenu = [
       {
-        menu: `<se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="${imgPath}/select.svg"></se-button>`,
+        menu: `<se-button id="tool_select" title="tools.mode_select" src="${imgPath}/select.svg"></se-button>`,
         position: 1
       },
       {
-        menu: `<se-button id="tool_zoom" title="${i18next.t('tools.mode_zoom')}" src="${imgPath}/zoom.svg" shortcut="Z"></se-button>`,
+        menu: `<se-button id="tool_zoom" title="tools.mode_zoom" src="${imgPath}/zoom.svg" shortcut="Z"></se-button>`,
         position: 2
       },
       {
-        menu: `<se-button id="tool_fhpath" title="${i18next.t('tools.mode_fhpath')}" src="${imgPath}/pencil.svg" shortcut="Q"></se-button>`,
+        menu: `<se-button id="tool_fhpath" title="tools.mode_fhpath" src="${imgPath}/pencil.svg" shortcut="Q"></se-button>`,
         position: 3
       },
       {
-        menu: `<se-button id="tool_line" title="${i18next.t('tools.mode_line')}" src="${imgPath}/pen.svg" shortcut="L"></se-button>`,
+        menu: `<se-button id="tool_line" title="tools.mode_line" src="${imgPath}/pen.svg" shortcut="L"></se-button>`,
         position: 4
       },
       {
-        menu: `<se-button id="tool_path" title="${i18next.t('tools.mode_path')}" src="${imgPath}/path.svg" shortcut="P"></se-button>`,
+        menu: `<se-button id="tool_path" title="tools.mode_path" src="${imgPath}/path.svg" shortcut="P"></se-button>`,
         position: 5
       },
       {
-        menu: `<se-flyingbutton id="tools_rect" title="${i18next.t('tools.square_rect_tool')}">
-        <se-button id="tool_rect" title="${i18next.t('tools.mode_rect')}" src="${imgPath}/rect.svg" shortcut="R"></se-button>
-        <se-button id="tool_square" title="${i18next.t('tools.mode_square')}" src="${imgPath}/square.svg"></se-button>
-        <se-button id="tool_fhrect" title="${i18next.t('tools.mode_fhrect')}" src="${imgPath}/fh_rect.svg"></se-button>
+        menu: `<se-flyingbutton id="tools_rect" title="tools.square_rect_tool">
+        <se-button id="tool_rect" title="tools.mode_rect" src="${imgPath}/rect.svg" shortcut="R"></se-button>
+        <se-button id="tool_square" title="tools.mode_square" src="${imgPath}/square.svg"></se-button>
+        <se-button id="tool_fhrect" title="tools.mode_fhrect" src="${imgPath}/fh_rect.svg"></se-button>
       </se-flyingbutton>`,
         position: 6
       },
       {
-        menu: `<se-flyingbutton id="tools_ellipse" title="${i18next.t('tools.ellipse_circle_tool')}">
-          <se-button id="tool_ellipse" title="${i18next.t('tools.mode_ellipse')}" src="${imgPath}/ellipse.svg" shortcut="E"></se-button>
-          <se-button id="tool_circle" title="${i18next.t('tools.mode_circle')}" src="${imgPath}/circle.svg"></se-button>
-          <se-button id="tool_fhellipse" title="${i18next.t('tools.mode_fhellipse')}" src="${imgPath}/fh_ellipse.svg"></se-button>
+        menu: `<se-flyingbutton id="tools_ellipse" title="tools.ellipse_circle_tool">
+          <se-button id="tool_ellipse" title="tools.mode_ellipse" src="${imgPath}/ellipse.svg" shortcut="E"></se-button>
+          <se-button id="tool_circle" title="tools.mode_circle" src="${imgPath}/circle.svg"></se-button>
+          <se-button id="tool_fhellipse" title="tools.mode_fhellipse" src="${imgPath}/fh_ellipse.svg"></se-button>
         </se-flyingbutton>`,
         position: 7
       },
       {
-        menu: `<se-button id="tool_text" title="${i18next.t('tools.mode_text')}" src="${imgPath}/text.svg" shortcut="T"></se-button>`,
+        menu: `<se-button id="tool_text" title="tools.mode_text" src="${imgPath}/text.svg" shortcut="T"></se-button>`,
         position: 8
       },
       {
-        menu: `<se-button id="tool_image" title="${i18next.t('tools.mode_image')}" src="${imgPath}/image.svg"></se-button>`,
+        menu: `<se-button id="tool_image" title="tools.mode_image" src="${imgPath}/image.svg"></se-button>`,
         position: 11
       }
     ];
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index 34928a31..73eddc51 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -833,49 +833,49 @@ class TopPanel {
           <div class="tool_sep"></div>
           <se-button
             id="tool_source"
-            title="${i18next.t('tools.tool_source')}"
+            title="tools.tool_source"
             shortcut="U"
             src="${imgPath}/source.svg"
           ></se-button>
           <se-button
             id="tool_wireframe"
-            title="${i18next.t('tools.wireframe_mode')}"
+            title="tools.wireframe_mode"
             shortcut="F"
             src="${imgPath}/wireframe.svg"
           ></se-button>
         </div> <!-- editor_panel -->
         <div id="history_panel">
           <div class="tool_sep"></div>
-          <se-button id="tool_undo" title="${i18next.t('tools.undo')}" shortcut="Z" src="${imgPath}/undo.svg" disabled></se-button>
-          <se-button id="tool_redo" title="${i18next.t('tools.redo')}" shortcut="Y" src="${imgPath}/redo.svg" disabled></se-button>
+          <se-button id="tool_undo" title="tools.undo" shortcut="Z" src="${imgPath}/undo.svg" disabled></se-button>
+          <se-button id="tool_redo" title="tools.redo" shortcut="Y" src="${imgPath}/redo.svg" disabled></se-button>
         </div> <!-- history_panel -->
         <!-- Buttons when a single element is selected -->
         <div class="selected_panel">
           <div class="tool_sep"></div>
-          <se-button id="tool_clone" title="${i18next.t('tools.clone')}" shortcut="D" src="${imgPath}/clone.svg"></se-button>
-          <se-button id="tool_delete" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" src="${imgPath}/delete.svg"></se-button>
+          <se-button id="tool_clone" title="tools.clone" shortcut="D" src="${imgPath}/clone.svg"></se-button>
+          <se-button id="tool_delete" title="tools.del" shortcut="Delete/Backspace" src="${imgPath}/delete.svg"></se-button>
         </div>
         <div class="selected_panel">
           <div class="tool_sep"></div>
-          <se-button id="tool_move_top" title="${i18next.t('tools.move_top')}" shortcut="Ctrl+Shift+]" src="${imgPath}/move_top.svg"></se-button>
-          <se-button id="tool_move_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg"></se-button>
+          <se-button id="tool_move_top" title="tools.move_top" shortcut="Ctrl+Shift+]" src="${imgPath}/move_top.svg"></se-button>
+          <se-button id="tool_move_bottom" title="tools.move_bottom" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg"></se-button>
         </div>
         <div class="selected_panel">
-          <se-button id="tool_topath" title="${i18next.t('tools.to_path')}" src="${imgPath}/to_path.svg"></se-button>
-          <se-button id="tool_reorient" title="${i18next.t('tools.reorient_path')}" src="${imgPath}/reorient.svg"></se-button>
-          <se-button id="tool_make_link" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button>
+          <se-button id="tool_topath" title="tools.to_path" src="${imgPath}/to_path.svg"></se-button>
+          <se-button id="tool_reorient" title="tools.reorient_path" src="${imgPath}/reorient.svg"></se-button>
+          <se-button id="tool_make_link" title="tools.make_link" src="${imgPath}/globe_link.svg"></se-button>
         </div>
         <div class="selected_panel">
           <div class="tool_sep"></div>
-          <se-input id="elem_id" data-attr="id" size="10" label="id" title="${i18next.t('properties.id')}"></se-input>
+          <se-input id="elem_id" data-attr="id" size="10" label="id" title="properties.id"></se-input>
         </div>
         <div class="selected_panel">
-          <se-input id="elem_class" data-attr="class" size="10" label="class" title="${i18next.t('properties.class')}"></se-input>
+          <se-input id="elem_class" data-attr="class" size="10" label="class" title="properties.class"></se-input>
           <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg"
-            title="${i18next.t('properties.angle')}"></se-spin-input>
+            title="properties.angle"></se-spin-input>
           <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg"
-            title="${i18next.t('properties.blur')}"></se-spin-input>
-          <se-list id="tool_position" title="${i18next.t('tools.align_to_page')}" label="" width="22px" height="22px">
+            title="properties.blur"></se-spin-input>
+          <se-list id="tool_position" title="tools.align_to_page" label="" width="22px" height="22px">
             <se-list-item id="tool_posleft" value="l">
               <img title="${i18next.t('tools.align_left')}" src="${imgPath}/align_left.svg" height="22px">
             </se-list-item>
@@ -897,29 +897,29 @@ class TopPanel {
           </se-list>
         </div>
         <div class="xy_panel">
-          <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="${i18next.t('properties.pos_x')}">
+          <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="properties.pos_x">
           </se-spin-input>
-          <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="${i18next.t('properties.pos_y')}">
+          <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="properties.pos_y">
           </se-spin-input>
         </div>
         <!-- Buttons when multiple elements are selected -->
         <div class="multiselected_panel">
           <div class="tool_sep"></div>
-          <se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="${imgPath}/clone.svg"></se-button>
-          <se-button id="tool_delete_multi" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace"
+          <se-button id="tool_clone_multi" title="tools.clone" shortcut="C" src="${imgPath}/clone.svg"></se-button>
+          <se-button id="tool_delete_multi" title="tools.del" shortcut="Delete/Backspace"
             src="${imgPath}/delete.svg"></se-button>
         </div>
         <div class="multiselected_panel">
           <div class="tool_sep"></div>
-          <se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="${imgPath}/group_elements.svg">
+          <se-button id="tool_group_elements" title="tools.group_elements" shortcut="G" src="${imgPath}/group_elements.svg">
           </se-button>
-          <se-button id="tool_make_link_multi" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button>
-          <se-button id="tool_align_left" title="${i18next.t('tools.align_left')}" src="${imgPath}/align_left.svg"></se-button>
-          <se-button id="tool_align_center" title="${i18next.t('tools.align_center')}" src="${imgPath}/align_center.svg"></se-button>
-          <se-button id="tool_align_right" title="${i18next.t('tools.align_right')}" src="${imgPath}/align_right.svg"></se-button>
-          <se-button id="tool_align_top" title="${i18next.t('tools.align_top')}" src="${imgPath}/align_top.svg"></se-button>
-          <se-button id="tool_align_middle" title="${i18next.t('tools.align_middle')}" src="${imgPath}/align_middle.svg"></se-button>
-          <se-button id="tool_align_bottom" title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg"></se-button>
+          <se-button id="tool_make_link_multi" title="tools.make_link" src="${imgPath}/globe_link.svg"></se-button>
+          <se-button id="tool_align_left" title="tools.align_left" src="${imgPath}/align_left.svg"></se-button>
+          <se-button id="tool_align_center" title="tools.align_center" src="${imgPath}/align_center.svg"></se-button>
+          <se-button id="tool_align_right" title="tools.align_right" src="${imgPath}/align_right.svg"></se-button>
+          <se-button id="tool_align_top" title="tools.align_top" src="${imgPath}/align_top.svg"></se-button>
+          <se-button id="tool_align_middle" title="tools.align_middle" src="${imgPath}/align_middle.svg"></se-button>
+          <se-button id="tool_align_bottom" title="tools.align_bottom" src="${imgPath}/align_bottom.svg"></se-button>
           <se-list id="tool_align_relative" label="relative to:">
             <se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item>
             <se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item>
@@ -928,18 +928,18 @@ class TopPanel {
           </se-list>
         </div> <!-- multiselected_panel -->
         <div class="rect_panel">
-            <se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="${i18next.t('properties.rect_width')}">
+            <se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="properties.rect_width">
             </se-spin-input>
-            <se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="${i18next.t('properties.rect_height')}">
+            <se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="properties.rect_height">
             </se-spin-input>
-          <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="${i18next.t('properties.corner_radius')}"
+          <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
             data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input>
         </div> <!-- rect_panel -->
         <div class="image_panel">
-            <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="${i18next.t('properties.image_width')}">
+            <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="properties.image_width">
             </se-spin-input>
             <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h"
-              title="${i18next.t('properties.image_height')}"></se-spin-input>
+              title="properties.image_height"></se-spin-input>
         </div>
         <div class="image_panel">
             <se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input> 
@@ -952,31 +952,31 @@ class TopPanel {
             <se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input>
         </div>
         <div class="ellipse_panel">
-            <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="${i18next.t('properties.ellipse_cx')}" label="cx">
+            <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx" label="cx">
             </se-spin-input>
-            <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="${i18next.t('properties.ellipse_cy')}" label="cy">
+            <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy" label="cy">
             </se-spin-input>
         </div>
         <div class="ellipse_panel">
-            <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="${i18next.t('properties.ellipse_rx')}" label="rx">
+            <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx" label="rx">
             </se-spin-input>
-            <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="${i18next.t('properties.ellipse_ry')}" label="ry">
+            <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry" label="ry">
             </se-spin-input>
         </div>
         <div class="line_panel">
-            <se-spin-input id="line_x1" data-attr="x1" size="4" title="${i18next.t('properties.line_x1')}" label="x1">
+            <se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="x1">
             </se-spin-input>
-            <se-spin-input id="line_y1" data-attr="y1" size="4" title="${i18next.t('properties.line_y1')}" label="y1">
+            <se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="y1">
             </se-spin-input>
-            <se-spin-input id="line_x2" data-attr="x2" size="4" title="${i18next.t('properties.line_x2')}" label="x2">
+            <se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="x2">
             </se-spin-input>
-            <se-spin-input id="line_y2" data-attr="y2" size="4" title="${i18next.t('properties.line_y2')}" label="y2">
+            <se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="y2">
             </se-spin-input>
         </div>
         <div class="text_panel">
-          <se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button>
-          <se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button>
-          <se-list id="tool_font_family" label="Font:">
+          <se-button id="tool_bold" title="properties.bold" src="${imgPath}/bold.svg" shortcut="B"></se-button>
+          <se-button id="tool_italic" title="properties.italic" src="${imgPath}/italic.svg" shortcut="I"></se-button>
+          <se-list id="tool_font_family" label="properties.font_family_label">
             <se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item>
             <se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item>
             <se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item>
@@ -986,27 +986,27 @@ class TopPanel {
             <se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item>
             <se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
           </se-list>
-          <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}"
+          <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size"
             src="${imgPath}/fontsize.svg"></se-spin-input>
         </div>
         <div class="text_panel">
-            <se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="${imgPath}/anchor_start.svg"></se-button>
-            <se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="${imgPath}/anchor_middle.svg"></se-button>
-            <se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="${imgPath}/anchor_end.svg"></se-button>
+            <se-button id="tool_text_anchor_start" title="properties.text_anchor_start" src="${imgPath}/anchor_start.svg"></se-button>
+            <se-button id="tool_text_anchor_middle" title="properties.text_anchor_middle" src="${imgPath}/anchor_middle.svg"></se-button>
+            <se-button id="tool_text_anchor_end" title="properties.text_anchor_end" src="${imgPath}/anchor_end.svg"></se-button>
         </div>
         <!-- Not visible, but still used -->
         <input id="text" type="text" size="35" />
         <div class="container_panel">
           <div class="tool_sep"></div>
-          <se-input id="g_title" data-attr="title" size="8" label="${i18next.t('label')}"></se-input> 
+          <se-input id="g_title" data-attr="title" size="8" label="label"></se-input> 
         </div> <!-- container_panel -->
         <div class="use_panel">
-          <se-button id="tool_unlink_use" title="${i18next.t('tools.tool_unlink_use')}"
+          <se-button id="tool_unlink_use" title="tools.tool_unlink_use"
             src="${imgPath}/unlink_use.svg">
           </se-button>
         </div> <!-- use_panel -->
         <div class="g_panel">
-          <se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="${imgPath}/ungroup.svg">
+          <se-button id="tool_ungroup" title="tools.ungroup" src="${imgPath}/ungroup.svg">
           </se-button>
         </div> <!-- g_panel -->
         <!-- For anchor elements -->
@@ -1018,22 +1018,22 @@ class TopPanel {
         </div> <!-- a_panel -->
         <div class="path_node_panel">
           <div class="tool_sep"></div>
-          <se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="${imgPath}/tool_node_link.svg" pressed>
+          <se-button id="tool_node_link" title="tools.node_link" src="${imgPath}/tool_node_link.svg" pressed>
           </se-button>
           <div class="tool_sep"></div>
-          <se-spin-input id="path_node_x" data-attr="x" size="4" title="${i18next.t('properties.node_x')}" label="x:">
+          <se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="x:">
           </se-spin-input>
-          <se-spin-input id="path_node_y" data-attr="y" size="4" title="${i18next.t('properties.node_y')}" label="y:">
+          <se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="y:">
           </se-spin-input>
           <select id="seg_type" title="${i18next.t('tools.seg_type')}">
             <option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>
             <option id="curve_segments" value="6">${i18next.t('properties.curve_segments')}</option>
           </select>
-          <se-button id="tool_node_clone" title="${i18next.t('tools.node_clone')}" src="${imgPath}/tool_node_clone.svg"></se-button>
-          <se-button id="tool_node_delete" title="${i18next.t('tools.node_delete')}" src="${imgPath}/tool_node_delete.svg"></se-button>
-          <se-button id="tool_openclose_path" title="${i18next.t('tools.openclose_path')}" src="${imgPath}/tool_openclose_path.svg">
+          <se-button id="tool_node_clone" title="tools.node_clone" src="${imgPath}/tool_node_clone.svg"></se-button>
+          <se-button id="tool_node_delete" title="tools.node_delete" src="${imgPath}/tool_node_delete.svg"></se-button>
+          <se-button id="tool_openclose_path" title="tools.openclose_path" src="${imgPath}/tool_openclose_path.svg">
           </se-button>
-          <se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="${imgPath}/tool_add_subpath.svg"></se-button>
+          <se-button id="tool_add_subpath" title="tools.add_subpath" src="${imgPath}/tool_add_subpath.svg"></se-button>
         </div> <!-- path_node_panel -->
         <div id="cur_context_panel"></div>
      </div>