Adding demo

kamilrogala · May 25, 2018 · 7d50508 · 7d50508
1 parent dbcd641
commit 7d50508
Show file tree

Hide file tree

Showing 8 changed files with 612 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # project: jsLang!
 
 Fast and simple translating website plugin- just type language, make JSON file and go!
+Check [DEMO](https://kamilrogala.github.io/jsLang/) 
 
 ## Instalation
 ### Download

diff --git a/docs/assets/jsLang-EN.json b/docs/assets/jsLang-EN.json
@@ -0,0 +1,73 @@
+{
+  "navTitle": "jsLang plugin- just translate it!",
+  "text": {
+    "1": {
+      "content": "Normal text for first paragraph in english"
+    },
+    "2": {
+      "content": "Normal text for third paragraph in english, with some <span>inner HTML</span> in it"
+    },
+    "3": {
+      "content": "Link with some attributes"
+    },
+    "4": {
+      "content": "Installation"
+    },
+    "5": {
+      "content": "Author"
+    },
+    "6": {
+      "content": "What is jsLang?"
+    },
+    "7": {
+      "content": "jsLang is fast and simple translating website plugin- you just have to type language and make JSON file with your phrases to turn your site into multilingual"
+    },
+    "8": {
+      "content": "I have some ideas about this project so stay tuned!"
+    },
+    "9": {
+      "content": "Some examples"
+    },
+    "10": {
+      "content": "Text"
+    },
+    "11": {
+      "content": "Attributes"
+    },
+    "12": {
+      "content": "Check JSON files:"
+    },
+    "13": {
+      "content": "Check on GitHub"
+    }
+  },
+  "href": {
+    "1": {
+      "content": "https://github.com/kamilrogala/"
+    }
+  },
+  "title": {
+    "1": {
+      "content": "My GitHub"
+    },
+    "2": {
+      "content": "Check on GitHub"
+    },
+    "3": {
+      "content": "Installation"
+    },
+    "4": {
+      "content": "Author's website"
+    }
+  },
+  "alt": {
+    "1": {
+      "content": "Flag of the United Kingdom"
+    }
+  },
+  "src": {
+    "1": {
+      "content": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/1200px-Flag_of_the_United_Kingdom.svg.png"
+    }
+  }
+}
diff --git a/docs/assets/jsLang-PL.json b/docs/assets/jsLang-PL.json
@@ -0,0 +1,73 @@
+{
+  "navTitle": "Plugin jsLang- po prostu to przetłumacz!",
+  "text": {
+    "1": {
+      "content": "Normalny tekst dla pierwszego akapitu po polsku"
+    },
+    "2": {
+      "content": "Normalny tekst dla drugiego akapitu po polsku, z jakimś <span>HTML wewnątrz</span> tego paragrafu"
+    },
+    "3": {
+      "content": "Link z jakimiś atrybutami"
+    },
+    "4": {
+      "content": "Instalacja"
+    },
+    "5": {
+      "content": "Autor"
+    },
+    "6": {
+      "content": "Co to jsLang?"
+    },
+    "7": {
+      "content": "jsLang to szybki i łatwy sposób na tlumaczenie stron WWW. Plugin wymaga minimum pracy- wystarczy skonfigurować języki, stworzyć plik JSON z frazami językowymi i tyle! Twoja strona staje sie w mig wielojęzyczna!"
+    },
+    "8": {
+      "content": "Mam parę pomysłów na projekt, więc bądźcie dobrej myśli!"
+    },
+    "9": {
+      "content": "Jakieś przykłady"
+    },
+    "10": {
+      "content": "Tekst"
+    },
+    "11": {
+      "content": "Atrybuty"
+    },
+    "12": {
+      "content": "Sprawdź pliki JSON:"
+    },
+    "13": {
+      "content": "Sprawdź na GitHub"
+    }
+  },
+  "href": {
+    "1": {
+      "content": "https://kamilrogala.it"
+    }
+  },
+  "title": {
+    "1": {
+      "content": "Mój blog"
+    },
+    "2": {
+      "content": "Sprawdź na GitHub"
+    },
+    "3": {
+      "content": "Instalacja"
+    },
+    "4": {
+      "content": "Strona autora"
+    }
+  },
+  "alt": {
+    "1": {
+      "content": "Flaga Polski"
+    }
+  },
+  "src": {
+    "1": {
+      "content": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Flag_of_Poland.svg/800px-Flag_of_Poland.svg.png"
+    }
+  }
+}
diff --git a/docs/github-logo.png b/docs/github-logo.png
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>jsLang example file</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <header>
+    <div class="wrapper">
+      <div class="flex-container justify-space-between">
+        <h1>jsLang</h1>
+        <nav>
+          <ul class="flex-container justify-flex-end">
+            <li><a href="https://github.com/kamilrogala/jsLang" target="_blank" title="Check on GitHub" data-jslang-title="2">GitHub</a></li>
+            <li><a href="https://github.com/kamilrogala/jsLang#instalation" target="_blank" title="Installation" data-jslang-title="3" data-jslang-txt="4">Installation</a></li>
+            <li><a href="https://kamilrogala.it/" target="_blank" title="Author's website" data-jslang-title="4" data-jslang-txt="5">Author</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </header>
+  <section class="about">
+    <div class="wrapper">
+      <h3 data-jslang-txt="6">What is jsLang?</h3>
+      <p data-jslang-txt="7">jsLang is fast and simple translating website plugin- you just have to type language and make JSON file with your phrases to turn your site into multilingual</p>
+      <p data-jslang-txt="8">I have some ideas about this project so stay tuned!</p>
+    </div>
+  </section>
+  <section class="examples">
+    <div class="wrapper">
+      <h3 data-jslang-txt="9">Some examples</h3>
+      <div class="example">
+        <h4 data-jslang-txt="10">Text</h4>
+        <p data-jslang-txt="1">Normal text for first paragraph (without chosen language)</p>
+        <p data-jslang-txt="2">Normal text for third paragraph (without chosen language) with some <span>inner HTML</span> in it</p>
+      </div>
+      <div class="example">
+        <h4 data-jslang-txt="11">Attributes</h4>
+        <p>
+          <a href="#" title="some title" data-jslang-txt="3" data-jslang-href="1" data-jslang-title="1">Link with some attributes</a>
+        </p>
+        <p class="center flag"><img src="http://placehold.it/800x500/0000ff" alt="blue image" data-jslang-src="1" data-jslang-alt="1"></p>
+      </div>
+    </div>
+  </section>
+  <section class="check">
+    <div class="wrapper">
+      <p class="big center" data-jslang-txt="12">Check JSON files:</p>
+      <p class="center">
+        <a class="btn" href="assets/jsLang-PL.json" target="_blank">jsLang-PL.json</a>
+        <a class="btn" href="assets/jsLang-EN.json" target="_blank">jsLang-EN.json</a>
+      </p>
+    </div>
+  </section>
+  <section class="github">
+    <div class="wrapper">
+      <p class="center"><a href="https://github.com/kamilrogala/jsLang" target="_blank" data-jslang-title="2"><img src="github-logo.png" alt="logo GitHub"> <span data-jslang-text="13">Check on GitHub</span></a></p>
+    </div>
+  </section>
+
+  <script src="js/jsLang.min.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      jsLang({
+        languages: ['pl', 'en']
+      });
+    });
+
+  </script>
+</body>
+
+</html>
diff --git a/docs/js/jsLang.js b/docs/js/jsLang.js
@@ -0,0 +1,146 @@
+'use strict';
+
+/*jshint esversion:6,browser:true,devel: true*/
+var jsLang = function jsLang(options) {
+  var complexMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  var typeOfStorage = void 0;
+  if (window.localStorage) {
+    var jsLangTrigger = function jsLangTrigger(newLang) {
+      var langFileUrl = 'assets/jsLang-' + newLang.toUpperCase() + '.json';
+
+      function loadJSON(callback) {
+        var xobj = new XMLHttpRequest();
+        xobj.overrideMimeType("application/json");
+        xobj.open('GET', langFileUrl, true);
+        xobj.onreadystatechange = function () {
+          if (xobj.readyState == 4 && xobj.status == "200") {
+            callback(xobj.responseText);
+          }
+        };
+        xobj.send(null);
+      }
+      loadJSON(function (response) {
+        var jsonPhrase = JSON.parse(response);
+        var allTextElements = document.querySelectorAll('[data-jslang-txt]');
+        var allHrefElements = document.querySelectorAll('[data-jslang-href]');
+        var allTitleElements = document.querySelectorAll('[data-jslang-title]');
+        var allAltElements = document.querySelectorAll('[data-jslang-alt]');
+        var allImgElements = document.querySelectorAll('[data-jslang-src]');
+
+        allTextElements.forEach(function (item) {
+          var itemLangID = [];
+          itemLangID.push(item.getAttribute('data-jslang-txt'));
+          try {
+            item.innerHTML = jsonPhrase.text[itemLangID].content;
+          } catch (e) {
+            console.error('Broken data for element: data-jslang-txt, ID ' + item.getAttribute('data-jslang-txt') + ' \n in file: ' + langFileUrl);
+          }
+        });
+        allHrefElements.forEach(function (item) {
+          var itemLangID = [];
+          itemLangID.push(item.getAttribute('data-jslang-href'));
+          try {
+            var langPhrase = jsonPhrase.href[itemLangID].content;
+            item.setAttribute('href', langPhrase);
+          } catch (e) {
+            console.error('Broken data for element: data-jslang-href, ID ' + item.getAttribute('data-jslang-href') + ' \n in file: ' + langFileUrl);
+          }
+        });
+        allTitleElements.forEach(function (item) {
+          var itemLangID = [];
+          itemLangID.push(item.getAttribute('data-jslang-title'));
+          try {
+            var langPhrase = jsonPhrase.title[itemLangID].content;
+            item.setAttribute('title', langPhrase);
+          } catch (e) {
+            console.error('Broken data for element: data-jslang-title, ID ' + item.getAttribute('data-jslang-title') + ' \n in file: ' + langFileUrl);
+          }
+        });
+        allAltElements.forEach(function (item) {
+          var itemLangID = [];
+          itemLangID.push(item.getAttribute('data-jslang-alt'));
+          try {
+            var langPhrase = jsonPhrase.alt[itemLangID].content;
+            item.setAttribute('alt', langPhrase);
+          } catch (e) {
+            console.error('Broken data for element: data-jslang-alt, ID ' + item.getAttribute('data-jslang-alt') + ' \n in file: ' + langFileUrl);
+          }
+        });
+        allImgElements.forEach(function (item) {
+          var itemLangID = [];
+          itemLangID.push(item.getAttribute('data-jslang-src'));
+          try {
+            var langPhrase = jsonPhrase.src[itemLangID].content;
+            item.setAttribute('src', langPhrase);
+          } catch (e) {
+            console.error('Broken data for element: data-jslang-src, ID ' + item.getAttribute('data-jslang-src') + ' \n in file: ' + langFileUrl);
+          }
+        });
+        document.title = jsonPhrase.navTitle;
+      });
+
+      var regBody = new RegExp('\\bjsLang(.*)?\\b', 'g');
+      document.body.className = document.body.className.replace(regBody, '');
+      document.body.classList.add('jsLang-' + newLang.toUpperCase());
+      document.querySelector('html').setAttribute('lang', newLang.toLowerCase());
+    };
+
+    if (options.storage === 'session') {
+      typeOfStorage = window.sessionStorage;
+    } else {
+      typeOfStorage = window.localStorage;
+    }
+    var langTriggerContainer = document.createElement('div');
+    langTriggerContainer.classList += 'jsLang lang-container';
+
+    if (options === undefined || options.languages === undefined) {
+      langTriggerContainer.innerHTML = '<button type="button" class="btn btn-lang btn-EN"><span>EN</span></button><button type="button" class="btn btn-lang btn-PL"><span>PL</span></button>';
+    } else {
+      options.languages.forEach(function (singleLanguage) {
+        langTriggerContainer.innerHTML += '<button type="button" class="btn btn-lang btn-' + singleLanguage.toUpperCase() + '"><span>' + singleLanguage.toUpperCase() + '</span></button>';
+      });
+    }
+    document.body.appendChild(langTriggerContainer);
+
+    var docLang = void 0;
+    if (docLang === null) {
+      docLang = navigator.language;
+      if (docLang === undefined) {
+        docLang = 'en';
+      }
+    } else {
+      if (document.querySelector('html').hasAttribute('lang')) {
+        docLang = document.querySelector('html').getAttribute('lang').toLowerCase();
+      } else {
+        docLang = 'en';
+      }
+    }
+    docLang = docLang.charAt(0) + docLang.charAt(1);
+
+    var jsLangBtns = document.querySelectorAll('.jsLang button');
+
+    jsLangBtns.forEach(function (jsLangBtn) {
+      jsLangBtn.addEventListener('click', function () {
+        jsLangTrigger(this.textContent.toLowerCase());
+        typeOfStorage.setItem('jsLang', this.textContent.toLowerCase());
+      });
+    });
+
+    if (complexMode) {
+      jsLangTrigger(docLang);
+    }
+    if (typeOfStorage.getItem('jsLang')) {
+      if (!complexMode) {
+        document.body.classList += ' jsLang-' + typeOfStorage.getItem('jsLang').toUpperCase();
+      }
+      if (typeOfStorage.getItem('jsLang') !== docLang) {
+        jsLangTrigger(typeOfStorage.getItem('jsLang'));
+      }
+    } else {
+      typeOfStorage.setItem('jsLang', docLang);
+    }
+  } else {
+    console.log('Too old browser...');
+  }
+};
diff --git a/docs/js/jsLang.min.js b/docs/js/jsLang.min.js