i18n

index.json

@@ -1,5 +1,12 @@
 {
   "controls": [
+    {
+      "name": "translator",
+      "options": {
+        "url": "sv.json",
+        "intl": "sv"
+      }
+    },
     {
       "name": "home",
       "options": {

src/controls.js

@@ -21,3 +21,4 @@ export { default as Splash } from './controls/splash';
 export { default as Zoom } from './controls/zoom';
 export { default as Externalurl } from './controls/externalurl';
 export { default as Scalepicker } from './controls/scalepicker';
+export { default as Translator } from './controls/translation/component';

src/controls/translation/component.js

@@ -0,0 +1,43 @@
+import { Component } from '../../ui';
+import { TranslationModel } from './model';
+import Intl from './intl';
+
+const Translator = function Translator(options = {}) {
+  const {
+    url = '',
+    intl = ''
+  } = options;
+
+  // Get the translation json config
+  function getTranslation() {
+    fetch(options.url)
+      .then((res) => res.json())
+      .then((translation) => {
+        // Bind response to model
+        new TranslationModel(translation);
+      })
+      .catch(() => {
+        console.error('Could not load translation json.');
+      })
+  }
+  getTranslation()
+
+  return Component({
+    name: 'translator',
+    onAdd() {
+
+      // Find out what lang the user wants for the internationalization API 
+      const lang = navigator.languages[0].substr(0, 2);
+      const opt = options;
+      const langOption = opt.intl ? opt.intl : lang;
+
+      const date = Intl.date(langOption, new Date());
+      const number = Intl.number(langOption, 123456.789);
+
+      // A dispatch is mandatory
+      this.dispatch('render');
+    }
+  });
+};
+
+export default Translator;

src/controls/translation/intl.js

@@ -0,0 +1,20 @@
+/**
+ * Helper methods for ECMAScript Internationalization API
+ * 
+ */
+const intl = {
+  date: (lang, date) => {
+    const options = {
+      day: 'numeric',
+      month: 'long',
+      weekday: 'short',
+      hour: 'numeric',
+      minute: 'numeric'
+    };
+    return new Intl.DateTimeFormat([lang, 'en-EN'], options).format(date);
+  },
+  number: (lang, number) => {
+   return new Intl.NumberFormat([lang, 'en-EN']).format(number);
+  } 
+}
+export default intl;

src/controls/translation/model.js

@@ -0,0 +1,10 @@
+
+class TranslationModel {
+  constructor(translationRespons) {
+    this.maxLengthText = translationRespons.controls.editor.editform.maxLengthText
+    // console.log(this.maxLengthText);
+  }
+}
+export {
+  TranslationModel
+}

sv.json

@@ -0,0 +1,24 @@
+{
+  "controls": {
+    "editor": {
+      "editform": {
+        "maxLengthText": "Max antal tecken i editform",
+        "firstOptionText": "Välj"
+      },
+      "edithandler": {
+        "maxLengthText": "",
+        "firstOptionText": ""
+      }
+    },
+    "templates": {
+      "editform": {
+        "maxLengthText": "",
+        "firstOptionText": ""
+      },
+      "edithandler": {
+        "maxLengthText": "",
+        "firstOptionText": ""
+      }
+    }
+  }
+}