From 0d3df6bf7bc684e377f27e992d8ca80cbf4e4370 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Tue, 18 May 2021 19:39:03 +0530
Subject: [PATCH] #98 i18n translation changes

---
 .../extensions/ext-panning/ext-panning.js     | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/editor/extensions/ext-panning/ext-panning.js b/src/editor/extensions/ext-panning/ext-panning.js
index 3d0c5bf4..1a1396fb 100644
--- a/src/editor/extensions/ext-panning/ext-panning.js
+++ b/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,12 @@ export default {
     };
     return {
       newUI: true,
-      name: strings.name,
+      name: svgEditor.i18next.t(`${name}:name`),
       callback() {
         // Add the button and its handler(s)
         const buttonTemplate = document.createElement("template");
         buttonTemplate.innerHTML = `
-        <se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
+        <se-button id="ext-panning" title="${svgEditor.i18next.t(`${name}:buttons.0.title`)}" src="./images/panning.svg"></se-button>
         `;
         insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true));
         $id('ext-panning').addEventListener("click", () => {