First version

successk · May 6, 2016 · 49a1f4c · 49a1f4c
1 parent f1fffbc
commit 49a1f4c
Show file tree

Hide file tree

Showing 25 changed files with 762 additions and 0 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+/*.js
+/*.html
+bower_components
+node_modules
+/build
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,30 @@
+{
+  "env": {
+    "browser": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "rules": {
+    "indent": [
+      "error",
+      2
+    ],
+    "linebreak-style": [
+      "error",
+      "windows"
+    ],
+    "quotes": [
+      "error",
+      "double"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ]
+  },
+  "globals": {
+    "Polymer": true
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+/bower_components/
+/node_modules/
+/build
diff --git a/README.md b/README.md
@@ -0,0 +1,79 @@
+This is a web component to exploit i18next.
+
+# &lt;kwc-i18next&gt;
+
+> A web component used to manage internationalization – replaces kwc-i18n
+
+## Install
+
+Install the component using [Bower](http://bower.io/):
+
+```sh
+$ bower install kwc-i18next --save
+```
+
+Or [download as ZIP](https://github.com/successk/kwc-i18next/archive/master.zip).
+
+## Usage
+
+### 1 – Import polyfill:
+
+```html
+<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+```
+
+### 2 – Import custom element:
+
+```html
+<link rel="import" href="bower_components/kwc-i18next/kwc-i18next.html">
+```
+
+### 3 – Start using it!
+
+```html
+<kwc-i18next property="value"></kwc-i18next>
+```
+
+
+## Documentation
+
+See [docs](./docs) for options, children selector, methods, events and styles.
+
+## Development
+
+In order to run it locally you'll need to fetch some dependencies and a basic server setup.
+
+### 1 – Install [bower](http://bower.io/) & [gulp](http://gulpjs.com/):
+
+```sh
+$ npm install -g bower gulp
+$ npm install gulp
+```
+
+### 2 – Install local dependencies:
+
+```sh
+$ bower install
+$ npm install
+```
+
+### 3 – Start development server and open `http://localhost:8000/components/kwc-i18next/`.
+
+```sh
+$ gulp dev
+```
+
+### 4 - build and minify file
+
+```sh
+$ gulp build
+$ gulp verify # test minified file
+```
+
+## History
+
+For detailed changelog, check [Releases](https://github.com/successk/kwc-i18next/releases).
+
+## License
+
+MIT
diff --git a/bower.json b/bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "kwc-i18next",
+  "version": "0.1.0",
+  "description": "A web component used to manage internationalization – replaces kwc-i18n",
+  "license": "MIT",
+  "main": "kwc-i18next.html",
+  "keywords": [
+    "polymer",
+    "web-component",
+    "i18n",
+    "i18next"
+  ],
+  "ignore": [
+    "**/.*",
+    "bower_components",
+    "node_modules",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "homepage": "https://github.com/successk/kwc-i18next",
+  "authors": [
+    "Gaëtan Rizio <[email protected]>"
+  ]
+}
diff --git a/demo/base/base.html b/demo/base/base.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>&lt;kwc-i18next&gt;</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+
+  <link rel="import" href="../../kwc-i18next/kwc-i18next.html">
+</head>
+<body>
+<div class="example">
+  <h3>Base</h3>
+  <p>
+    <kwc-i18next key="test:title" show></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="test:body" show></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="test:footer" show></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="key" show></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="undefined" show></kwc-i18next>
+  </p>
+</div>
+
+<div class="example">
+  <h3>Interpolation</h3>
+  <p>
+    <kwc-i18next key="interpolation:base" show p-text="1" id="i18n-p-text"></kwc-i18next>
+    <button id="change-p-text">Change</button>
+  </p>
+  <p>
+    <kwc-i18next key="interpolation:html" show p-code="<u>underline</u>" id="i18n-p-code"></kwc-i18next>
+    <button class="change-p-code"><b>bold</b></button>
+    <button class="change-p-code"><i>italic</i></button>
+    <button class="change-p-code"><u>underline</u></button>
+  </p>
+  <p>
+    <kwc-i18next key="interpolation:dangerous" show p-code="<span style='color:red'>BOOM!<span>" not-escape></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="interpolation:dangerous" show p-code="<span style='color:red'>BOOM!<span>"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="interpolation:deep" show p-var='{"deep":{"deep":"Some var"}}'></kwc-i18next>
+  </p>
+</div>
+
+<div class="example">
+  <h3>Nesting</h3>
+  <p>
+    <kwc-i18next key="nesting:nesting1" show p-count="2" p-girls="3"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="nesting:girlsAndBoys" show p-count="2" p-girls="3"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="nesting:key2" show p-val="$t(nesting:key1)"></kwc-i18next>
+  </p>
+</div>
+
+<div class="example">
+  <h3>Plural</h3>
+  <p>
+    <kwc-i18next key="plural:key" show p-count="0"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="plural:key" show p-count="1"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="plural:key" show p-count="5"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="plural:key" show p-count="100"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="plural:keyWithCount" show p-count="0"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="plural:keyWithCount" show p-count="1"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="plural:keyWithCount" show p-count="5"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="plural:keyWithCount" show p-count="100"></kwc-i18next>
+  </p>
+</div>
+
+<div class="example">
+  <h3>Context</h3>
+  <p>
+    <kwc-i18next key="context:friend" show></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="context:friend" show p-context="male"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="context:friend" show p-context="female"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="context:friend" show p-context="male" p-count="1"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="context:friend" show p-context="male" p-count="100"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="context:friend" show p-context="female" p-count="1"></kwc-i18next>
+  </p>
+  <p>
+    <kwc-i18next key="context:friend" show p-context="female" p-count="100"></kwc-i18next>
+  </p>
+</div>
+
+<div>
+  <button class="lang">fr</button>
+  <button class="lang">en</button>
+  <button class="lang">en-US</button>
+</div>
+
+<script src="../../i18next-xhr-backend/i18nextXHRBackend.min.js"></script>
+<script src="../../i18next/i18next.min.js"></script>
+<script>
+  (function () {
+    i18next
+        .use(window.i18nextXHRBackend)
+        .init({
+          debug: true,
+          lng: "en",
+          fallbackLng: "en",
+          backend: {
+            loadPath: "locales/{{lng}}/{{ns}}.json"
+          },
+          ns: [
+            "test",
+            "interpolation",
+            "nesting",
+            "plural",
+            "context",
+            "default",
+            "global"
+          ],
+          defaultNS: "default",
+          fallbackNS: "global"
+        });
+
+    Array.from(document.querySelectorAll(".lang")).forEach(function (elt) {
+      elt.addEventListener("click", function (e) {
+        e.preventDefault();
+        i18next.changeLanguage(e.target.textContent);
+      })
+    });
+
+    document.querySelector("#change-p-text").addEventListener("click", function (e) {
+      e.preventDefault();
+      document.querySelector("#i18n-p-text").setAttribute("p-text", Math.random().toString());
+    });
+
+    Array.from(document.querySelectorAll(".change-p-code")).forEach(function (elt) {
+      elt.addEventListener("click", function (e) {
+        e.preventDefault();
+        document.querySelector("#i18n-p-code").setAttribute("p-code", elt.innerHTML);
+      });
+    });
+  })()
+</script>
+</body>
+</html>
diff --git a/demo/base/locales/en-US/test.json b/demo/base/locales/en-US/test.json
@@ -0,0 +1,5 @@
+{
+  "title": "My US title",
+  "body": "My US body",
+  "footer": "My US footer"
+}
diff --git a/demo/base/locales/en/context.json b/demo/base/locales/en/context.json
@@ -0,0 +1,7 @@
+{
+  "friend": "A friend",
+  "friend_male": "A boyfriend",
+  "friend_female": "A girlfriend",
+  "friend_male_plural": "{{count}} boyfriends",
+  "friend_female_plural": "{{count}} girlfriends"
+}
diff --git a/demo/base/locales/en/default.json b/demo/base/locales/en/default.json
@@ -0,0 +1,3 @@
+{
+  "key": "A key"
+}
diff --git a/demo/base/locales/en/global.json b/demo/base/locales/en/global.json
@@ -0,0 +1,3 @@
+{
+  "undefined": "Please give a value"
+}
diff --git a/demo/base/locales/en/interpolation.json b/demo/base/locales/en/interpolation.json
@@ -0,0 +1,6 @@
+{
+  "base": "A random value: {{text}}",
+  "html": "A value in HTML: {{-code}}",
+  "dangerous": "Maybe this code is dangerous: {{code}}",
+  "deep": "A complex variable: {{var.deep.deep}}"
+}
diff --git a/demo/base/locales/en/nesting.json b/demo/base/locales/en/nesting.json
@@ -0,0 +1,11 @@
+{
+  "nesting1": "en $t(nesting2)",
+  "nesting2": "2 $t(nesting3)",
+  "nesting3": "3",
+  "girlsAndBoys": "$t(nesting:girls, {\"count\": {{girls}} }) and {{count}} boy",
+  "girlsAndBoys_plural": "$t(nesting:girls, {\"count\": {{girls}} }) and {{count}} boys",
+  "girls": "{{count}} girl",
+  "girls_plural": "{{count}} girls",
+  "key1": "hello world",
+  "key2": "say: {{val}}"
+}
diff --git a/demo/base/locales/en/plural.json b/demo/base/locales/en/plural.json
@@ -0,0 +1,6 @@
+{
+  "key": "item",
+  "key_plural": "items",
+  "keyWithCount": "{{count}} item",
+  "keyWithCount_plural": "{{count}} items"
+}
diff --git a/demo/base/locales/en/test.json b/demo/base/locales/en/test.json
@@ -0,0 +1,5 @@
+{
+  "title": "My title",
+  "body": "My body",
+  "footer": "My footer"
+}
diff --git a/demo/base/locales/fr/default.json b/demo/base/locales/fr/default.json
@@ -0,0 +1,3 @@
+{
+  "key": "Une clef"
+}
diff --git a/demo/base/locales/fr/global.json b/demo/base/locales/fr/global.json
@@ -0,0 +1,3 @@
+{
+  "undefined": "Veuillez fournir une valeur"
+}