Merge pull request #511 from OptimistikSAS/issues/98

#98 i18n translate changes

src/editor/Editor.js

@@ -110,6 +110,17 @@ class Editor extends EditorStartup {
     this.topPanel = new TopPanel(this);
     this.layersPanel = new LayersPanel(this);
     this.mainMenu = new MainMenu(this);
+    window.svgEditor = this;
+    this.loadComponentAndDialog();
+  }
+  /**
+  * @returns {void}
+  */
+  async loadComponentAndDialog() {
+    // eslint-disable-next-line no-unsanitized/method
+    // await import(`./components/index.js`);
+    // eslint-disable-next-line no-unsanitized/method
+    await import(`./dialogs/index.js`);
   }
   /**
    *

src/editor/dialogs/cmenuDialog.js

@@ -1,4 +1,6 @@
+/* globals svgEditor */
 const template = document.createElement('template');
+// eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
   <style>
   .contextMenu {
@@ -66,53 +68,53 @@ template.innerHTML = `
   <ul id="cmenu_canvas" class="contextMenu">
     <li>
       <a href="#cut" id="se-cut">
-        Cut<span class="shortcut">META+X</span>
+      ${svgEditor.i18next.t('tools.cut')}<span class="shortcut">META+X</span>
       </a>
     </li>
     <li>
       <a href="#copy" id="se-copy">
-        Copy<span class="shortcut">META+C</span>
+      ${svgEditor.i18next.t('tools.copy')}<span class="shortcut">META+C</span>
       </a>
     </li>
     <li>
-      <a href="#paste" id="se-paste">Paste</a>
+      <a href="#paste" id="se-paste">${svgEditor.i18next.t('tools.paste')}</a>
     </li>
     <li>
-      <a href="#paste_in_place" id="se-paste-in-place">Paste in Place</a>
+      <a href="#paste_in_place" id="se-paste-in-place">${svgEditor.i18next.t('tools.paste_in_place')}</a>
     </li>
     <li class="separator">
       <a href="#delete" id="se-delete">
-        Delete<span class="shortcut">BACKSPACE</span>
+      ${svgEditor.i18next.t('tools.delete')}<span class="shortcut">BACKSPACE</span>
       </a>
     </li>
     <li class="separator">
       <a href="#group" id="se-group">
-        Group<span class="shortcut">G</span>
+      ${svgEditor.i18next.t('tools.group')}<span class="shortcut">G</span>
       </a>
     </li>
     <li>
       <a href="#ungroup" id="se-ungroup">
-        Ungroup<span class="shortcut">G</span>
+      ${svgEditor.i18next.t('tools.ungroup')}<span class="shortcut">G</span>
       </a>
     </li>
     <li class="separator">
       <a href="#move_front" id="se-move-front">
-        Bring to Front<span class="shortcut">CTRL+SHFT+]</span>
+      ${svgEditor.i18next.t('tools.move_front')}<span class="shortcut">CTRL+SHFT+]</span>
       </a>
     </li>
     <li>
       <a href="#move_up" id="se-move-up">
-        Bring Forward<span class="shortcut">CTRL+]</span>
+      ${svgEditor.i18next.t('tools.move_up')}<span class="shortcut">CTRL+]</span>
       </a>
     </li>
     <li>
       <a href="#move_down" id="se-move-down">
-        Send Backward<span class="shortcut">CTRL+[</span>
+      ${svgEditor.i18next.t('tools.move_down')}<span class="shortcut">CTRL+[</span>
       </a>
     </li>
     <li>
       <a href="#move_back" id="se-move-back">
-        Send to Back<span class="shortcut">CTRL+SHFT+[</span>
+      ${svgEditor.i18next.t('tools.move_back')}<span class="shortcut">CTRL+SHFT+[</span>
       </a>
     </li> 
   </ul>

src/editor/dialogs/cmenuLayersDialog.js

@@ -1,4 +1,6 @@
+/* globals svgEditor */
 const template = document.createElement('template');
+// eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
   <style>
   .contextMenu {
@@ -64,10 +66,10 @@ template.innerHTML = `
   }  
   </style>
   <ul id="cmenu_layers" class="contextMenu">
-    <li><a href="#dupe" id="se-dupe">Duplicate Layer...</a></li>
+    <li><a href="#dupe" id="se-dupe">${svgEditor.i18next.t('layers.dupe')}</a></li>
-    <li><a href="#delete" id="se-layer-delete">Delete Layer</a></li>
+    <li><a href="#delete" id="se-layer-delete">${svgEditor.i18next.t('layers.del')}</a></li>
-    <li><a href="#merge_down" id="se-merge-down">Merge Down</a></li>
+    <li><a href="#merge_down" id="se-merge-down">${svgEditor.i18next.t('layers.merge_down')}</a></li>
-    <li><a href="#merge_all" id="se-merge-all">Merge All</a></li>
+    <li><a href="#merge_all" id="se-merge-all">${svgEditor.i18next.t('layers.merge_all')}</a></li>
   </ul>
 `;
 /**

src/editor/dialogs/editorPreferencesDialog.js

@@ -1,6 +1,6 @@
-
+/* globals svgEditor */
-
 const template = document.createElement('template');
+// eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
   <style>
   :not(:defined) {
@@ -150,16 +150,16 @@ template.innerHTML = `
     <div id="svg_prefs_container">
       <div id="tool_prefs_back" class="toolbar_button">
         <button id="tool_prefs_save">
-          OK
+          ${svgEditor.i18next.t('common.ok')}
         </button>
         <button id="tool_prefs_cancel">
-          Cancel
+          ${svgEditor.i18next.t('common.cancel')}
         </button>
       </div>
       <fieldset>
-        <legend id="svginfo_editor_prefs">Editor Preferences</legend>
+        <legend id="svginfo_editor_prefs">${svgEditor.i18next.t('config.editor_prefs')}</legend>
         <label>
-          <span id="svginfo_lang">Language:</span>
+          <span id="svginfo_lang">${svgEditor.i18next.t('config.language')}</span>
           <!-- Source: https://en.wikipedia.org/wiki/Language_names -->
           <select id="lang_select">
             <option id="lang_ar" value="ar">العربية</option>
@@ -185,46 +185,46 @@ template.innerHTML = `
           </select>
         </label>
         <label>
-          <span id="svginfo_icons">Icon size:</span>
+          <span id="svginfo_icons">${svgEditor.i18next.t('config.icon_size')}</span>
           <select id="iconsize">
-            <option id="icon_small" value="s">Small</option>
+            <option id="icon_small" value="s">${svgEditor.i18next.t('config.icon_small')}</option>
-            <option id="icon_medium" value="m" selected="selected">Medium</option>
+            <option id="icon_medium" value="m" selected="selected">${svgEditor.i18next.t('config.icon_medium')}</option>
-            <option id="icon_large" value="l">Large</option>
+            <option id="icon_large" value="l">${svgEditor.i18next.t('config.icon_large')}</option>
-            <option id="icon_xlarge" value="xl">Extra Large</option>
+            <option id="icon_xlarge" value="xl">${svgEditor.i18next.t('config.icon_xlarge')}</option>
           </select>
         </label>
         <fieldset id="change_background">
-          <legend id="svginfo_change_background">Editor Background</legend>
+          <legend id="svginfo_change_background">${svgEditor.i18next.t('config.background')}</legend>
           <div id="bg_blocks"></div>
           <label>
-            <span id="svginfo_bg_url">URL:</span>
+            <span id="svginfo_bg_url">${svgEditor.i18next.t('common.url')}</span>
             <input type="text" id="canvas_bg_url" />
           </label>
-          <p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
+          <p id="svginfo_bg_note">${svgEditor.i18next.t('config.editor_bg_note')}</p>
         </fieldset>
         <fieldset id="change_grid">
-          <legend id="svginfo_grid_settings">Grid</legend>
+          <legend id="svginfo_grid_settings">${svgEditor.i18next.t('config.grid')}</legend>
           <label for="svginfo_snap_onoff">
-            <span id="svginfo_snap_onoff">Snapping on/off</span>
+            <span id="svginfo_snap_onoff">${svgEditor.i18next.t('config.snapping_onoff')}</span>
             <input type="checkbox" value="snapping_on" id="grid_snapping_on" />
           </label>
           <label for="grid_snapping_step">
-            <span id="svginfo_snap_step">Snapping Step-Size:</span>
+            <span id="svginfo_snap_step">${svgEditor.i18next.t('config.snapping_stepsize')}</span>
             <input type="text" id="grid_snapping_step" size="3" value="10" />
           </label>
           <label>
-            <span id="svginfo_grid_color">Grid color:</span>
+            <span id="svginfo_grid_color">${svgEditor.i18next.t('config.grid_color')}</span>
             <input type="text" id="grid_color" size="3" value="#000" />
           </label>
         </fieldset>
         <fieldset id="units_rulers">
-          <legend id="svginfo_units_rulers">Units &amp; Rulers</legend>
+          <legend id="svginfo_units_rulers">${svgEditor.i18next.t('config.units_and_rulers')}</legend>
           <label>
-            <span id="svginfo_rulers_onoff">Show rulers</span>
+            <span id="svginfo_rulers_onoff">${svgEditor.i18next.t('config.show_rulers')}</span>
             <input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
           </label>
           <label>
-            <span id="svginfo_unit">Base Unit:</span>
+            <span id="svginfo_unit">${svgEditor.i18next.t('config.base_unit')}</span>
             <select id="base_unit">
               <option value="px">Pixels</option>
               <option value="cm">Centimeters</option>

src/editor/extensions/ext-connector/ext-connector.js

@@ -7,21 +7,25 @@
  *
  */
 
-const loadExtensionTranslation = async function (lang) {
+const name = "connector";
+
+const loadExtensionTranslation = async function (svgEditor) {
   let translationModule;
+  const lang = svgEditor.configObj.pref('lang');
   try {
     // eslint-disable-next-line no-unsanitized/method
-    translationModule = await import(`./locale/${encodeURIComponent(lang)}.js`);
+    translationModule = await import(`./locale/${lang}.js`);
   } catch (_error) {
     // eslint-disable-next-line no-console
-    console.error(`Missing translation (${lang}) - using 'en'`);
+    console.warn(`Missing translation (${lang}) for ${name} - using 'en'`);
+    // eslint-disable-next-line no-unsanitized/method
     translationModule = await import(`./locale/en.js`);
   }
-  return translationModule.default;
+  svgEditor.i18next.addResourceBundle(lang, name, translationModule.default);
 };
 
 export default {
-  name: 'connector',
+  name,
   async init(S) {
     const svgEditor = this;
     const { svgCanvas } = svgEditor;
@@ -29,6 +33,7 @@ export default {
     const { $, svgroot } = S,
       addElem = svgCanvas.addSVGElementFromJson,
       selManager = S.selectorManager;
+    await loadExtensionTranslation(svgEditor);
 
     let startX;
     let startY;
@@ -349,16 +354,17 @@ export default {
       });
     };
 
-    const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
     return {
       /** @todo JFH special flag */
       newUI: true,
-      name: strings.name,
+      name: svgEditor.i18next.t(`${name}:name`),
       callback() {
+        const btitle = svgEditor.i18next.t(`${name}:langListTitle`);
         // Add the button and its handler(s)
         const buttonTemplate = document.createElement("template");
+        // eslint-disable-next-line no-unsanitized/property
         buttonTemplate.innerHTML = `
-        <se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
+        <se-button id="mode_connect" title="${btitle}" src="./images/conn.svg"></se-button>
         `;
         $id('tools_left').append(buttonTemplate.content.cloneNode(true));
         $id('mode_connect').addEventListener("click", () => {
@@ -367,7 +373,9 @@ export default {
       },
       /* async */ addLangData({ _lang }) { // , importLocale: importLoc
         return {
-          data: strings.langList
+          data: [
+            { id: 'mode_connect', title: svgEditor.i18next.t(`${name}:langListTitle`) }
+          ]
         };
       },
       mouseDown(opts) {

src/editor/extensions/ext-connector/locale/en.js

@@ -1,5 +1,6 @@
 export default {
   name: 'Connector',
+  langListTitle: 'Connect two objects',
   langList: [
     { id: 'mode_connect', title: 'Connect two objects' }
   ],

src/editor/extensions/ext-connector/locale/fr.js

@@ -1,5 +1,6 @@
 export default {
   name: 'Connector',
+  langListTitle: 'Connecter deux objets',
   langList: [
     { id: 'mode_connect', title: 'Connecter deux objets' }
   ],

src/editor/extensions/ext-connector/locale/zh-CN.js

@@ -1,5 +1,6 @@
 export default {
   name: '连接器',
+  langListTitle: '连接两个对象',
   langList: [
     { id: 'mode_connect', title: '连接两个对象' }
   ],

src/editor/extensions/ext-imagelib/ext-imagelib.js

@@ -9,29 +9,46 @@
  *
  */
 
-const loadExtensionTranslation = async function (lang) {
+ const name = "imagelib";
-  let translationModule;
+
-  try {
+ const loadExtensionTranslation = async function (svgEditor) {
-    // eslint-disable-next-line no-unsanitized/method
+   let translationModule;
-    translationModule = await import(`./locale/${encodeURIComponent(lang)}.js`);
+   const lang = svgEditor.configObj.pref('lang');
-  } catch (_error) {
+   try {
-    // eslint-disable-next-line no-console
+     // eslint-disable-next-line no-unsanitized/method
-    console.error(`Missing translation (${lang}) - using 'en'`);
+     translationModule = await import(`./locale/${lang}.js`);
-    translationModule = await import(`./locale/en.js`);
+   } catch (_error) {
-  }
+     // eslint-disable-next-line no-console
-  return translationModule.default;
+     console.warn(`Missing translation (${lang}) for ${name} - using 'en'`);
-};
+     // eslint-disable-next-line no-unsanitized/method
+     translationModule = await import(`./locale/en.js`);
+   }
+   svgEditor.i18next.addResourceBundle(lang, name, translationModule.default);
+ };
 
 export default {
-  name: 'imagelib',
+  name,
   async init({ decode64, dropXMLInternalSubset }) {
     const svgEditor = this;
     const { $id } = svgEditor.svgCanvas;
-    const imagelibStrings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
+    await loadExtensionTranslation(svgEditor);
 
     const { svgCanvas } = svgEditor;
 
-    const allowedImageLibOrigins = imagelibStrings.imgLibs.map(({ url }) => {
+    const imgLibs = [
+      {
+        name: svgEditor.i18next.t(`${name}:imgLibs_0_name`),
+        url: 'extensions/ext-imagelib/index.html',
+        description: svgEditor.i18next.t(`${name}:imgLibs_0_description`)
+      },
+      {
+        name: svgEditor.i18next.t(`${name}:imgLibs_1_name`),
+        url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
+        description: svgEditor.i18next.t(`${name}:imgLibs_1_description`)
+      }
+    ];
+
+    const allowedImageLibOrigins = imgLibs.map(({ url }) => {
       try {
         return new URL(url).origin;
       } catch (err) {
@@ -391,7 +408,7 @@ export default {
         insertAfter($id('svg_editor'), div);
         browser = $id('imgbrowse');
 
-        const allLibs = imagelibStrings.select_lib;
+        const allLibs = svgEditor.i18next.t(`${name}:select_lib`);
 
         const divFrameWrap = document.createElement('div');
         divFrameWrap.id = 'lib_framewrap';
@@ -429,7 +446,7 @@ export default {
         const back = document.createElement('button');
         back.style.visibility = "hidden";
         // eslint-disable-next-line max-len
-        back.innerHTML = '<img class="svg_icon" src="./images/library.svg" alt="icon" width="16" height="16" />' + imagelibStrings.show_list;
+        back.innerHTML = '<img class="svg_icon" src="./images/library.svg" alt="icon" width="16" height="16" />' + svgEditor.i18next.t(`${name}:show_list`);
         leftBlock.appendChild(back);
         back.addEventListener('click', function () {
           frame.setAttribute('src', 'about:blank');
@@ -451,9 +468,9 @@ export default {
 
         const select = document.createElement('select');
         select.innerHTML = '<select><option value=s>' +
-          imagelibStrings.import_single + '</option><option value=m>' +
+          svgEditor.i18next.t(`${name}:import_single`) + '</option><option value=m>' +
-          imagelibStrings.import_multi + '</option><option value=o>' +
+          svgEditor.i18next.t(`${name}:import_multi`) + '</option><option value=o>' +
-          imagelibStrings.open + '</option>';
+          svgEditor.i18next.t(`${name}:open`) + '</option>';
         leftBlock.appendChild(select);
         select.addEventListener('change', function () {
           mode = this.value;
@@ -471,7 +488,7 @@ export default {
         });
         select.setAttribute('style', `margin-top: 10px;`);
 
-        imagelibStrings.imgLibs.forEach(function ({ name, url, description }) {
+        imgLibs.forEach(function ({ name, url, description }) {
           const li = document.createElement('li');
           libOpts.appendChild(li);
           li.textContent = name;

src/editor/extensions/ext-imagelib/locale/de.js

@@ -9,25 +9,8 @@ export default {
       title: 'Bilder-Bibliothek'
     }
   ],
-  imgLibs: [
+  imgLibs_0_name: 'Demo library (local)',
-    {
+  imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
-      name: 'Demo library (local)',
+  imgLibs_1_name: 'IAN Symbol Libraries',
-      url: 'extensions/ext-imagelib/index.html',
+  imgLibs_1_description: 'Free library of illustrations',
-      description: 'Demonstration library for SVG-edit on this server'
-    },
-    {
-      name: 'IAN Symbol Libraries',
-      url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
-    }
-    /*
-    // See message in "en" locale for further details
-    ,
-    {
-      name: 'Openclipart',
-      url: 'https://openclipart.org/svgedit',
-      description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
-    }
-    */
-  ]
 };

src/editor/extensions/ext-imagelib/locale/en.js

@@ -9,30 +9,8 @@ export default {
       title: 'Image library'
     }
   ],
-  imgLibs: [
+  imgLibs_0_name: 'Demo library (local)',
-    {
+  imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
-      name: 'Demo library (local)',
+  imgLibs_1_name: 'IAN Symbol Libraries',
-      url: 'extensions/ext-imagelib/index.html',
+  imgLibs_1_description: 'Free library of illustrations',
-      description: 'Demonstration library for SVG-edit on this server'
-    },
-    {
-      name: 'IAN Symbol Libraries',
-      url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
-    }
-    // The site is no longer using our API, and they have added an
-    //   `X-Frame-Options` header which prevents our usage cross-origin:
-    // Getting messages like this in console:
-    //   Refused to display 'https://openclipart.org/detail/307176/sign-bike' in a frame
-    //   because it set 'X-Frame-Options' to 'sameorigin'.
-    // url: 'https://openclipart.org/svgedit',
-    // However, they do have a custom API which we are using here:
-    /*
-    {
-      name: 'Openclipart',
-      url: '{path}imagelib/openclipart.html',
-      description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
-    }
-    */
-  ]
 };

src/editor/extensions/ext-imagelib/locale/fr.js

@@ -9,25 +9,8 @@ export default {
       title: "Bibliothèque d'images"
     }
   ],
-  imgLibs: [
+  imgLibs_0_name: 'Demo library (local)',
-    {
+  imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
-      name: 'Demo library (local)',
+  imgLibs_1_name: 'IAN Symbol Libraries',
-      url: 'extensions/ext-imagelib/index.html',
+  imgLibs_1_description: 'Free library of illustrations',
-      description: 'Demonstration library for SVG-edit on this server'
-    },
-    {
-      name: 'IAN Symbol Libraries',
-      url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
-    }
-    /*
-    // See message in "en" locale for further details
-    ,
-    {
-      name: 'Openclipart',
-      url: 'https://openclipart.org/svgedit',
-      description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
-    }
-    */
-  ]
 };

src/editor/extensions/ext-imagelib/locale/pl.js

@@ -9,25 +9,8 @@ export default {
       title: 'Biblioteka obrazów'
     }
   ],
-  imgLibs: [
+  imgLibs_0_name: 'Demo library (local)',
-    {
+  imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
-      name: 'Demo library (local)',
+  imgLibs_1_name: 'IAN Symbol Libraries',
-      url: 'extensions/ext-imagelib/index.html',
+  imgLibs_1_description: 'Free library of illustrations',
-      description: 'Demonstration library for SVG-edit on this server'
-    },
-    {
-      name: 'IAN Symbol Libraries',
-      url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
-    }
-    /*
-    // See message in "en" locale for further details
-    ,
-    {
-      name: 'Openclipart',
-      url: 'https://openclipart.org/svgedit',
-      description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
-    }
-    */
-  ]
 };

src/editor/extensions/ext-imagelib/locale/pt-BR.js

@@ -9,25 +9,8 @@ export default {
       title: 'Biblioteca de Imagens'
     }
   ],
-  imgLibs: [
+  imgLibs_0_name: 'Demo library (local)',
-    {
+  imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
-      name: 'Demo library (local)',
+  imgLibs_1_name: 'IAN Symbol Libraries',
-      url: 'extensions/ext-imagelib/index.html',
+  imgLibs_1_description: 'Free library of illustrations',
-      description: 'Demonstration library for SVG-edit on this server'
-    },
-    {
-      name: 'IAN Symbol Libraries',
-      url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
-    }
-    /*
-    // See message in "en" locale for further details
-    ,
-    {
-      name: 'Openclipart',
-      url: 'https://openclipart.org/svgedit',
-      description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
-    }
-    */
-  ]
 };

src/editor/extensions/ext-imagelib/locale/ro.js

@@ -9,25 +9,8 @@ export default {
       title: 'Bibliotecă de Imagini'
     }
   ],
-  imgLibs: [
+  imgLibs_0_name: 'Demo library (local)',
-    {
+  imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
-      name: 'Demo library (local)',
+  imgLibs_1_name: 'IAN Symbol Libraries',
-      url: 'extensions/ext-imagelib/index.html',
+  imgLibs_1_description: 'Free library of illustrations',
-      description: 'Demonstration library for SVG-edit on this server'
-    },
-    {
-      name: 'IAN Symbol Libraries',
-      url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
-    }
-    /*
-    // See message in "en" locale for further details
-    ,
-    {
-      name: 'Openclipart',
-      url: 'https://openclipart.org/svgedit',
-      description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
-    }
-    */
-  ]
 };

src/editor/extensions/ext-imagelib/locale/sk.js

@@ -9,25 +9,8 @@ export default {
       title: 'Knižnica obrázkov'
     }
   ],
-  imgLibs: [
+  imgLibs_0_name: 'Demo library (local)',
-    {
+  imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
-      name: 'Demo library (local)',
+  imgLibs_1_name: 'IAN Symbol Libraries',
-      url: 'extensions/ext-imagelib/index.html',
+  imgLibs_1_description: 'Free library of illustrations',
-      description: 'Demonstration library for SVG-edit on this server'
-    },
-    {
-      name: 'IAN Symbol Libraries',
-      url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
-    }
-    /*
-    // See message in "en" locale for further details
-    ,
-    {
-      name: 'Openclipart',
-      url: 'https://openclipart.org/svgedit',
-      description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
-    }
-    */
-  ]
 };

src/editor/extensions/ext-imagelib/locale/sl.js

@@ -9,25 +9,8 @@ export default {
       title: 'Knjižnica slik'
     }
   ],
-  imgLibs: [
+  imgLibs_0_name: 'Demo library (local)',
-    {
+  imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
-      name: 'Demo library (local)',
+  imgLibs_1_name: 'IAN Symbol Libraries',
-      url: 'extensions/ext-imagelib/index.html',
+  imgLibs_1_description: 'Free library of illustrations',
-      description: 'Demonstration library for SVG-edit on this server'
-    },
-    {
-      name: 'IAN Symbol Libraries',
-      url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
-    }
-    /*
-    // See message in "en" locale for further details
-    ,
-    {
-      name: 'Openclipart',
-      url: 'https://openclipart.org/svgedit',
-      description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
-    }
-    */
-  ]
 };

src/editor/extensions/ext-imagelib/locale/zh-CN.js

@@ -9,25 +9,8 @@ export default {
       title: '图像库'
     }
   ],
-  imgLibs: [
+  imgLibs_0_name: 'Demo library (local)',
-    {
+  imgLibs_0_description: 'Demonstration library for SVG-edit on this server',
-      name: 'Demo library (local)',
+  imgLibs_1_name: 'IAN Symbol Libraries',
-      url: 'extensions/ext-imagelib/index.html',
+  imgLibs_1_description: 'Free library of illustrations',
-      description: 'Demonstration library for SVG-edit on this server'
-    },
-    {
-      name: 'IAN Symbol Libraries',
-      url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
-    }
-    /*
-    // See message in "en" locale for further details
-    ,
-    {
-      name: 'Openclipart',
-      url: 'https://openclipart.org/svgedit',
-      description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
-    }
-    */
-  ]
 };

src/editor/extensions/ext-panning/ext-panning.js

@@ -10,24 +10,28 @@
   This is a very basic SVG-Edit extension to let tablet/mobile devices pan without problem
 */
 
-const loadExtensionTranslation = async function (lang) {
+const name = "panning";
+
+const loadExtensionTranslation = async function (svgEditor) {
   let translationModule;
+  const lang = svgEditor.configObj.pref('lang');
   try {
     // eslint-disable-next-line no-unsanitized/method
-    translationModule = await import(`./locale/${encodeURIComponent(lang)}.js`);
+    translationModule = await import(`./locale/${lang}.js`);
   } catch (_error) {
     // eslint-disable-next-line no-console
-    console.error(`Missing translation (${lang}) - using 'en'`);
+    console.warn(`Missing translation (${lang}) for ${name} - using 'en'`);
+    // eslint-disable-next-line no-unsanitized/method
     translationModule = await import(`./locale/en.js`);
   }
-  return translationModule.default;
+  svgEditor.i18next.addResourceBundle(lang, name, translationModule.default);
 };
 
 export default {
-  name: 'panning',
+  name,
   async init() {
     const svgEditor = this;
-    const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
+    await loadExtensionTranslation(svgEditor);
     const {
       svgCanvas
     } = svgEditor;
@@ -39,12 +43,14 @@ export default {
     };
     return {
       newUI: true,
-      name: strings.name,
+      name: svgEditor.i18next.t(`${name}:name`),
       callback() {
+        const btitle = svgEditor.i18next.t(`${name}:buttons.0.title`);
         // Add the button and its handler(s)
         const buttonTemplate = document.createElement("template");
+        // eslint-disable-next-line no-unsanitized/property
         buttonTemplate.innerHTML = `
-        <se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
+        <se-button id="ext-panning" title="${btitle}" src="./images/panning.svg"></se-button>
         `;
         insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true));
         $id('ext-panning').addEventListener("click", () => {

src/editor/extensions/ext-polystar/ext-polystar.js

@@ -8,7 +8,7 @@
  *
  */
 
- const name = "polystar";
+const name = "polystar";
 
 const loadExtensionTranslation = async function (svgEditor) {
   let translationModule;

src/editor/extensions/ext-shapes/ext-shapes.js

@@ -6,15 +6,32 @@
  * @copyright 2010 Christian Tzurcanu, 2010 Alexis Deveria
  *
  */
+const name = "shapes";
+
+const loadExtensionTranslation = async function (svgEditor) {
+  let translationModule;
+  const lang = svgEditor.configObj.pref('lang');
+  try {
+    // eslint-disable-next-line no-unsanitized/method
+    translationModule = await import(`./locale/${lang}.js`);
+  } catch (_error) {
+    // eslint-disable-next-line no-console
+    console.warn(`Missing translation (${lang}) for ${name} - using 'en'`);
+    // eslint-disable-next-line no-unsanitized/method
+    translationModule = await import(`./locale/en.js`);
+  }
+  svgEditor.i18next.addResourceBundle(lang, name, translationModule.default);
+};
 
 export default {
-  name: 'shapes',
+  name,
-  init () {
+  async init () {
     const svgEditor = this;
     const canv = svgEditor.svgCanvas;
     const { $id } = canv;
     const svgroot = canv.getRootElem();
     let lastBBox = {};
+    await loadExtensionTranslation(svgEditor);
 
     const modeId = 'shapelib';
     const startClientPos = {};
@@ -27,8 +44,9 @@ export default {
       callback () {
         if ($id('tool_shapelib') === null) {
           const buttonTemplate = document.createElement("template");
+          // eslint-disable-next-line no-unsanitized/property
           buttonTemplate.innerHTML = `
-          <se-explorerbutton id="tool_shapelib" title="Shape library" lib="./extensions/ext-shapes/shapelib/"
+          <se-explorerbutton id="tool_shapelib" title="${svgEditor.i18next.t(`${name}:buttons.0.title`)}" lib="./extensions/ext-shapes/shapelib/"
           src="./images/shapelib.svg"></se-explorerbutton>
           `;
           $id('tools_left').append(buttonTemplate.content.cloneNode(true));

src/editor/extensions/ext-storage/storageDialog.js

@@ -1,6 +1,16 @@
 /* eslint-disable max-len */
-
+/* globals svgEditor */
+import 'elix/define/Dialog.js';
 const template = document.createElement('template');
+const notification = svgEditor.i18next.t('notification.editorPreferencesMsg');
+const prefs_and_content = svgEditor.i18next.t('properties.prefs_and_content');
+const prefs_only = svgEditor.i18next.t('properties.prefs_only');
+const no_prefs_or_content = svgEditor.i18next.t('properties.no_prefs_or_content');
+const remember_this_choice = svgEditor.i18next.t('tools.remember_this_choice');
+const remember_this_choice_title = svgEditor.i18next.t('tools.remember_this_choice_title');
+const ok = svgEditor.i18next.t('common.ok');
+const cancel = svgEditor.i18next.t('common.cancel');
+// eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
   <style>
  
@@ -51,25 +61,25 @@ template.innerHTML = `
     <div id="dialog_container">
       <div id="dialog_content">
         <p>
-          By default and where supported, SVG-Edit can store your editor preferences and SVG content locally on your machine so you do not need to add these back each time you load SVG-Edit. If, for privacy reasons, you do not wish to store this information on your machine, you can change away from the default option below.
+          ${notification} 
         </p>
         <select id="se-storage-pref">
-          <option value="prefsAndContent">Store preferences and SVG content locally</option>
+          <option value="prefsAndContent">${prefs_and_content}</option>
-          <option value="prefsOnly">Only store preferences locally</option>
+          <option value="prefsOnly">${prefs_only}</option>
-          <option value="noPrefsOrContent">Do not store my preferences or SVG content locally</option>
+          <option value="noPrefsOrContent">${no_prefs_or_content}</option>
         </select> 
-        <label title="If you choose to opt out of storage while remembering this choice, the URL will change so as to avoid asking again.">
+        <label title="${remember_this_choice_title}">
-          Remember this choice?<input type="checkbox" id="se-remember" value="" checked>
+        ${remember_this_choice}<input type="checkbox" id="se-remember" value="" checked>
         </label>     
       </div>
       <div id="dialog_buttons">
         <button id="storage_ok">
           <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
-          Ok
+          ${ok}
         </button>
         <button id="storage_cancel">
           <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
-          Cancel
+          ${cancel}
         </button>
       </div>
     </div>

src/editor/index.js

@@ -6,7 +6,6 @@ For default config and extensions (and available options) available to
 
 import './jquery.min.js';
 import './components/index.js';
-import './dialogs/index.js';
 import Editor from './Editor.js';
 
 const svgEditor = new Editor();

src/editor/locale/lang.en.js

@@ -163,7 +163,9 @@ export default {
     move_back: 'Send to Back',
     tool_unlink_use: 'Break link to reference element (make unique)',
     ellipse_circle_tool: 'Ellipse/Circle Tool',
-    square_rect_tool: 'Square/Rect Tool'
+    square_rect_tool: 'Square/Rect Tool',
+    remember_this_choice: 'Remember this choice?',
+    remember_this_choice_title: 'If you choose to opt out of storage while remembering this choice, the URL will change so as to avoid asking again.',
   },
   layers: {
     layer: 'Layer',