@everymatrix/general-logout 0.0.211 → 0.0.215

package/index.html

@@ -30,8 +30,8 @@
   </header>
 
   <div class="webcomponent">
-    <general-logout></general-logout>
+    <general-logout lang="en"></general-logout>
   </div>
-  
+
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-logout",
-  "version": "0.0.211",
+  "version": "0.0.215",
   "main": "dist/general-logout.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eb7aded94b6f22a8e22faf597608da9d045e5327"
+  "gitHead": "9c9f7a9e6a715010e0746e271e930d92e64e16d2"
 }

package/src/GeneralLogout.svelte

@@ -1,11 +1,15 @@
 <svelte:options tag={null} />
 
-<script lang="typescript">
+<script lang="ts">
   import { getDevice } from 'rvhelper';
   import { logOutIcon } from './../icons/iconService';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { GeneralLogoutTranslations } from './translations';
+
   export let endpoint:String = '';
   export let session:String = '';
   export let buttonlocation:string = '';
+  export let lang:string = '';
 
   let hasErrors:Boolean = false;
 
@@ -13,6 +17,12 @@
   let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
   const mediaQuery = window.matchMedia('(min-width: 768px)');
 
+  // setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(GeneralLogoutTranslations).forEach((item:any) => {
+    addNewMessages(item, GeneralLogoutTranslations[item]);
+  });
+
   const logout = () => {
     let reqHeaders = new Headers();
 
@@ -48,7 +58,12 @@
     return hasErrors;
   }
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
   $: endpoint && session && buttonlocation && checkAttrs();
+  $: lang && initialLoad();
 </script>
 
 {#if buttonlocation === 'PlayerAccountMenu'}
@@ -57,12 +72,12 @@
      <svg id="bbfaf345-72af-4296-bf4b-2fd41fc03d5d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><defs><style>.a88316b4-2478-4a69-b2eb-d32a5fb419dd{fill:#fff;}</style></defs><path class="a88316b4-2478-4a69-b2eb-d32a5fb419dd" d="M147.16,67.69,115.42,36a9.6,9.6,0,1,0-13.58,13.58l15.32,15.31H49.58a9.63,9.63,0,1,0,0,19.26h67.58L101.84,99.42a9.64,9.64,0,0,0,6.79,16.43,9.41,9.41,0,0,0,6.79-2.85l31.74-31.73a9.53,9.53,0,0,0,0-13.58Z"/><path class="a88316b4-2478-4a69-b2eb-d32a5fb419dd" d="M45.16,122.16H19.26V26.79H45.32a9.63,9.63,0,1,0,0-19.26H9.63A9.56,9.56,0,0,0,0,17.16V131.63a9.57,9.57,0,0,0,9.63,9.64H45.32A9.57,9.57,0,0,0,55,131.63a9.78,9.78,0,0,0-9.79-9.47Z"/></svg>
     </span>
     {#if !isMobile}
-      <span class="PlayerLogoutText">Logout</span>
+      <span class="PlayerLogoutText">{$_('logout.logoutButton')}</span>
     {/if}
   </p>
 {:else}
   <div class="GeneralLogout">
-    <button on:click={() => logout()}><span>Logout</span></button>
+    <button on:click={() => logout()}><span>{$_('logout.logoutButton')}</span></button>
   </div>
 {/if}
 

package/src/i18n.js

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/translations.js

@@ -0,0 +1,17 @@
+export const GeneralLogoutTranslations = {
+  en: {
+    logout: {
+      logoutButton: 'Logout',
+    }
+  },
+  tr: {
+    logout: {
+      logoutButton: 'Çıkış Yap',
+    }
+  },
+  ro: {
+    logout: {
+      logoutButton: 'Iesire',
+    }
+  },
+};