Add rtl direction support and playground.js

.eslintrc.yml

@@ -15,6 +15,7 @@ parserOptions:
 globals:
   pageContent: writable
   module: writable
+  process: writable
 
 
 rules: 

src/PageState.js

@@ -35,6 +35,13 @@ export class PageState extends Page {
     localStorage.setItem('token', value);
   }
 
+  get pageDirection() {
+    return localStorage.getItem('pageDirection') || "ltr";
+  }
+  set pageDirection(value) {
+    localStorage.setItem('pageDirection', value);
+  }
+
   get language() {
     return localStorage.getItem('language') || "";
   }

src/main.js

@@ -33,7 +33,7 @@ function ListItem(children) {
   });
 }
 
-function onLoad() {
+async function onLoad() {
   document.body.innerHTML = "";
   document.body.appendChild(makeElement({
     tag: "nav",
@@ -103,6 +103,11 @@ function onLoad() {
   }));
 
   window.pageContent = document.querySelector("#pageContent");
+
+  if (process.env.NODE_ENV == "development") {
+    await (await import("./playground.js")).playground();
+  }
+
   renderPage();
 
   setInterval(async () => {
@@ -117,7 +122,7 @@ function onLoad() {
   }, 5000);
 }
 
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', async function () {
   i18next.init({
     lng: pageState.language,
     fallbackLng: 'en',
@@ -129,7 +134,7 @@ document.addEventListener('DOMContentLoaded', function () {
         return value;
       }
     }
-  }).then(function (_) {
-    onLoad();
+  }).then(async function (_) {
+    await onLoad();
   });
 }, false);

src/pageUtils.js

@@ -82,6 +82,7 @@ export function changePage(page, shouldSwitch = true) {
 }
 
 export function renderPage() {
+  document.documentElement.dir = pageState.pageDirection;
   console.log("Rendering Page: ", pageState.currentPage.name);
   document.querySelector("#pageContent").innerHTML = "";
   setPageTitle(pageState.currentPage.name);

src/pages/SetLanguage.js

@@ -54,8 +54,9 @@ export class SetLanguagePage extends Page {
       let language = formData.get("language");
       pageState.language = language;
       console.log(pageState.language);
-      i18next.changeLanguage(language).then((_) => {
+      i18next.changeLanguage(language).then((t) => {
         changePage("HOME", false);
+        pageState.pageDirection = t("language_direction");
         location.reload();
       });
     });

src/playground.js

@@ -0,0 +1,14 @@
+import { pageState } from "./globalPageState.js";
+import i18next from 'i18next';
+
+// Playground is a way to debug and test things.
+// Anything you put in here is gonna be run on page initial load
+// before rendering.
+// Also it only runs when process.env.NODE_ENV == "development"
+
+// Please empty this function before committing.
+export async function playground() {
+  console.log("Welcome to Playground!");
+  window.pageState = pageState;
+  window.i18next = i18next;
+}

src/translations/de.js

@@ -1,6 +1,8 @@
 module.exports = {
   // The localised name for the language
   "language_name": "Deutsche",
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
 
   // These are the buttons on the top bar.
   "home_btn": "Startseite",

src/translations/en.js

@@ -1,6 +1,8 @@
 module.exports = {
   // The localised name for the language
   "language_name": "English",
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
 
   // These are the buttons on the top bar.
   "home_btn": "Home",

src/translations/fr.js

@@ -1,6 +1,8 @@
 module.exports = {
   // The localised name for the language
   "language_name": "Français",
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
 
   // These are the buttons on the top bar.
   "home_btn": "Accueil",

src/translations/nl.js

@@ -1,6 +1,8 @@
 module.exports = {
   // The localised name for the language
   "language_name": "Nederlands",
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
 
   // These are the buttons on the top bar.
   "home_btn": "Homepagina",

src/translations/ru.js

@@ -1,6 +1,8 @@
 module.exports = {
   // The localised name for the language
   "language_name": "русский",
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
 
   // These are the buttons on the top bar.
   "home_btn": "Главная страница",