From 58cf7f0653b3c6f078cfb5119826982e72c73d53 Mon Sep 17 00:00:00 2001
From: Mikael Ulfvik <ulfvik.mikael@outlook.com>
Date: Mon, 4 May 2020 09:21:27 +0200
Subject: [PATCH] Setup

---
 index.json                            |  7 +++++
 src/controls.js                       |  1 +
 src/controls/translation/component.js | 43 +++++++++++++++++++++++++++
 src/controls/translation/intl.js      | 20 +++++++++++++
 src/controls/translation/model.js     | 10 +++++++
 sv.json                               | 24 +++++++++++++++
 6 files changed, 105 insertions(+)
 create mode 100644 src/controls/translation/component.js
 create mode 100644 src/controls/translation/intl.js
 create mode 100644 src/controls/translation/model.js
 create mode 100644 sv.json

diff --git a/index.json b/index.json
index cc9cd54ff..658344b21 100644
--- a/index.json
+++ b/index.json
@@ -1,5 +1,12 @@
 {
   "controls": [
+    {
+      "name": "translator",
+      "options": {
+        "url": "sv.json",
+        "intl": "sv"
+      }
+    },
     {
       "name": "home",
       "options": {
diff --git a/src/controls.js b/src/controls.js
index 07ad8d97e..6b3382fbe 100644
--- a/src/controls.js
+++ b/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';
diff --git a/src/controls/translation/component.js b/src/controls/translation/component.js
new file mode 100644
index 000000000..f9988bd50
--- /dev/null
+++ b/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;
diff --git a/src/controls/translation/intl.js b/src/controls/translation/intl.js
new file mode 100644
index 000000000..217e23a5c
--- /dev/null
+++ b/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;
diff --git a/src/controls/translation/model.js b/src/controls/translation/model.js
new file mode 100644
index 000000000..f863871a4
--- /dev/null
+++ b/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
+}
diff --git a/sv.json b/sv.json
new file mode 100644
index 000000000..de075f9c1
--- /dev/null
+++ b/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": ""
+      }
+    }
+  }
+}