#98 extension imagelib i18n modification

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

@@ -9,29 +9,46 @@
  *
  */
 
-const loadExtensionTranslation = async function (lang) {
+ const name = "imagelib";
+
+ 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: '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.'
-    }
-    */
-  ]
 };