layout manager form

js/app/demo.js

@@ -1,68 +0,0 @@
-'use strict';
-
-class TablerDemo {
-  constructor() {
-    this.init();
-  };
-
-  init() {
-    this.config = this.getConfig();
-
-    console.log('config', this.config);
-  };
-
-  getConfig = function () {
-    return {
-      colorScheme: (localStorage.getItem('tablerColorScheme')) ? localStorage.getItem('tablerColorScheme') : 'light',
-      navPosition: (localStorage.getItem('tablerNavPosition')) ? localStorage.getItem('tablerNavPosition') : 'side',
-      sidebarColor: (localStorage.getItem('tablerSidebarColor')) ? localStorage.getItem('tablerSidebarColor') : 'light',
-      sidebarSize: (localStorage.getItem('tablerSidebarSize')) ? localStorage.getItem('tablerSidebarSize') : 'default',
-      sidebarPosition: (localStorage.getItem('tablerSidebarPosition')) ? localStorage.getItem('tablerSidebarPosition') : 'left'
-    };
-  };
-
-  setConfig = function (key, value, availableValues) {
-    if (availableValues && availableValues.indexOf(value) !== -1) {
-      key = 'tabler' + key.charAt(0).toUpperCase() + key.slice(1);
-
-      localStorage.setItem(key, value);
-    }
-
-    return this.getConfig();
-  };
-
-  renderManagerHtml(elem) {
-    elem.innerHTML = 'test2';
-  };
-
-  toggleColorScheme(colorScheme) {
-    return this.setConfig('colorScheme', colorScheme, ['dark', 'light']);
-  };
-
-  toggleNavPosition(position) {
-    return this.setConfig('navPosition', position, ['top', 'side']);
-  };
-
-  toggleSidebarPosition(position) {
-    return this.setConfig('sidebarPosition', position, ['left', 'right']);
-  };
-
-  toggleSidebarSize(size) {
-    return this.setConfig('sidebarSize', size, ['default', 'folded']);
-  };
-
-  toggleSidebarColor(color) {
-    return this.setConfig('sidebarColor', color, ['dark', 'light']);
-  };
-}
-
-const demo = new TablerDemo();
-window.DEMO = demo;
-
-document.addEventListener("DOMContentLoaded", function () {
-  let  elem = document.getElementById('layout-manager');
-
-  if (elem) {
-    demo.renderManagerHtml(elem);
-  }
-});

js/demo.js

@@ -0,0 +1,172 @@
+'use strict';
+
+class TablerDemo {
+  constructor() {
+    this.init();
+
+    this.form = document.querySelector('.js-layout-form');
+
+    if(this.form) {
+      this.form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        this.onSubmitForm();
+      });
+
+      var inputs = this.form.querySelectorAll('input[type="radio"]');
+      for (var i = 0; i < inputs.length; i++) {
+        inputs[i].addEventListener('change', () => {
+          this.onSubmitForm();
+        });
+      }
+
+      this.initFormControls();
+    }
+  };
+
+  init() {
+    this.config = this.getConfig();
+  };
+
+  getConfig = function () {
+    return {
+      colorScheme: (localStorage.getItem('tablerColorScheme')) ? localStorage.getItem('tablerColorScheme') : 'light',
+      sidebarColor: (localStorage.getItem('tablerSidebarColor')) ? localStorage.getItem('tablerSidebarColor') : 'light',
+      headerColor: (localStorage.getItem('tablerHeaderColor')) ? localStorage.getItem('tablerHeaderColor') : 'light',
+      navPosition: (localStorage.getItem('tablerNavPosition')) ? localStorage.getItem('tablerNavPosition') : 'side',
+      sidebarSize: (localStorage.getItem('tablerSidebarSize')) ? localStorage.getItem('tablerSidebarSize') : 'default',
+      sidebarPosition: (localStorage.getItem('tablerSidebarPosition')) ? localStorage.getItem('tablerSidebarPosition') : 'left'
+    };
+  };
+
+  setConfig = function (key, value, availableValues, onSuccess) {
+    if (availableValues && availableValues.indexOf(value) !== -1) {
+      key = 'tabler' + key.charAt(0).toUpperCase() + key.slice(1);
+
+      localStorage.setItem(key, value);
+
+      onSuccess && onSuccess(value);
+    }
+
+    return this.getConfig();
+  };
+
+  onSubmitForm = function () {
+    const form = this.form;
+
+    this.toggleColorScheme(form.querySelector('[name="color-scheme"]:checked').value);
+    this.toggleNavPosition(form.querySelector('[name="nav-position"]:checked').value);
+    this.toggleSidebarPosition(form.querySelector('[name="sidebar-position"]:checked').value);
+    this.toggleSidebarSize(form.querySelector('[name="sidebar-size"]:checked').value);
+    this.toggleSidebarColor(form.querySelector('[name="sidebar-color"]:checked').value);
+    this.toggleHeaderColor(form.querySelector('[name="header-color"]:checked').value);
+  };
+
+  initFormControls = function() {
+    const config = this.getConfig();
+
+    this.toggleColorScheme(config.colorScheme);
+    this.toggleNavPosition(config.navPosition);
+    this.toggleSidebarPosition(config.sidebarPosition);
+    this.toggleSidebarSize(config.sidebarSize);
+    this.toggleSidebarColor(config.sidebarColor);
+    this.toggleHeaderColor(config.headerColor);
+  };
+
+  setFormValue = function(name, value,) {
+    let elements = this.form.querySelectorAll(`[name="${name}"]`);
+
+    if(elements) {
+      elements.forEach((e) => e.checked = false);
+      this.form.querySelector(`[name="${name}"][value="${value}"]`).checked = true;
+    }
+  };
+
+  renderManagerHtml(elem) {
+    elem.innerHTML = 'test2';
+  };
+
+  /*
+  Color scheme toggle
+   */
+  toggleColorScheme(color) {
+    return this.setConfig('colorScheme', color, ['dark', 'light'], () => {
+      if (color === 'dark') {
+        document.body.classList.add('theme-dark');
+      } else {
+        document.body.classList.remove('theme-dark');
+      }
+
+      this.setFormValue('color-scheme', color);
+    });
+  };
+
+  toggleNavPosition(position) {
+    return this.setConfig('navPosition', position, ['top', 'side'], () => {
+      this.setFormValue('nav-position', position);
+    });
+  };
+
+  toggleSidebarPosition(position) {
+    return this.setConfig('sidebarPosition', position, ['left', 'right'], () => {
+      if (position === 'right') {
+        document.querySelector('.js-sidebar').classList.add('navbar-right');
+      } else {
+        document.querySelector('.js-sidebar').classList.remove('navbar-right');
+      }
+
+      this.setFormValue('sidebar-position', position);
+    });
+  };
+
+  toggleSidebarSize(size) {
+    return this.setConfig('sidebarSize', size, ['default', 'folded'], () => {
+      if (size === 'folded') {
+        document.querySelector('.js-sidebar').classList.add('navbar-folded');
+      } else {
+        document.querySelector('.js-sidebar').classList.remove('navbar-folded');
+      }
+
+      this.setFormValue('sidebar-size', size);
+    });
+  };
+
+  toggleSidebarColor(color) {
+    return this.setConfig('sidebarColor', color, ['dark', 'light'], () => {
+      if (color === 'dark') {
+        document.querySelector('.js-sidebar').classList.add('navbar-dark');
+      } else {
+        document.querySelector('.js-sidebar').classList.remove('navbar-dark');
+      }
+
+      this.setFormValue('sidebar-color', color);
+    });
+  };
+
+  toggleHeaderColor(color) {
+    return this.setConfig('headerColor', color, ['dark', 'light'], () => {
+      if (color === 'dark') {
+        document.querySelector('.js-header').classList.add('navbar-dark');
+      } else {
+        document.querySelector('.js-header').classList.remove('navbar-dark');
+      }
+
+      this.setFormValue('header-color', color);
+    });
+  };
+}
+
+/*
+Init demo
+ */
+
+
+(function () {
+  const demo = new TablerDemo();
+  window.DEMO = demo;
+
+  let elem = document.getElementById('layout-manager');
+
+  if (elem) {
+    demo.renderManagerHtml(elem);
+  }
+})();

js/polyfill.js

@@ -0,0 +1 @@
+'use strict';