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';

pages/_includes/layout/js.html

@@ -8,9 +8,10 @@
 <script src="{{ site.base }}/libs/selectize/js/standalone/selectize.min.js"></script>
 
 
+<script src="{{ site.base }}/js/polyfill.js"></script>
 <script src="{{ site.base }}/js/tabler.js"></script>
-<script src="{{ site.base }}/js/app/charts.js"></script>
-<script src="{{ site.base }}/js/app/demo.js"></script>
+<script src="{{ site.base }}/js/charts.js"></script>
+<script src="{{ site.base }}/js/demo.js"></script>
 
 <script>
    window.tabler = window.tabler || {};

pages/_includes/layout/sidenav.html

@@ -1,4 +1,4 @@
 {% assign menu = page.menu | default: layout.menu %}
-<aside class="d-none d-lg-flex navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %}">
+<aside class="d-none d-lg-flex navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
    {% include layout/sidenav-content.html menu=menu %}
 </aside>

pages/_includes/layout/topnav.html

@@ -1,4 +1,4 @@
-<header class="navbar navbar-expand-lg{% if include.dark %} navbar-dark{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
+<header class="navbar navbar-expand-lg{% if include.dark %} navbar-dark{% endif %}{% if include.sticky %} navbar-sticky{% endif %} js-header">
    {% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark fluid=include.fluid %}
 </header>
 

pages/_includes/ui/input-selectgroup.html

@@ -1,10 +1,11 @@
 {% assign values = include.values | default: "One,Two,Three" | split: ',' %}
+{% assign default = include.default | default: '' %}
 {% assign type = include.type | default: "checkbox" %}
 {% assign name = include.name | default: "name" %}
 <div class="selectgroup{% if include.class %} {{ include.class }}{% endif %}">
    {% for value in values %}
    <label class="selectgroup-item">
-      <input type="{{ type }}" name="input-{{ name }}" value="{{ value }}" class="selectgroup-input"{% if forloop.first %}{% if type == "radio" %} selected{% else %} checked{% endif %}{% endif %}>
+      <input type="{{ type }}" name="{{ name }}" value="{{ value }}" class="selectgroup-input"{% if value == default%}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
       {% assign s = value | split: "i:" %}
       <span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon %}{% else %}{{ value }}{% endif %}</span>
    </label>

pages/_layouts/base.html

@@ -21,7 +21,7 @@
 	<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
 
 	{% include layout/css.html %}
-	{% include layout/js.html %}
+   <style>body { display: none; }</style>
 </head>
 <body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
 
@@ -33,5 +33,7 @@
       {% endif %}
    {% endif %}
 
+   {% include layout/js.html %}
+   <script>document.body.style.display = 'block';</script>
 </body>
 </html>

pages/layout.html

@@ -7,10 +7,39 @@ title: Layout manager
       Layout manager
    </div>
    <div class="card-body">
-      <form action="">
+      <form action="" class="js-layout-form">
          <div class="row">
             <div class="col-4">
-               <div id="layout-manager"></div>
+               <div class="form-group">
+                  <label class="form-label">Color scheme</label>
+                  {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
+               </div>
+               <div class="form-group">
+                  <label class="form-label">Nav position</label>
+                  {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
+               </div>
+               <div class="form-group">
+                  <label class="form-label">Sidebar position</label>
+                  {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
+               </div>
+               <div class="form-group">
+                  <label class="form-label">Sidebar size</label>
+                  {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
+               </div>
+               <div class="form-group">
+                  <label class="form-label">Sidebar color</label>
+                  {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
+               </div>
+               <div class="form-group">
+                  <label class="form-label">Header color</label>
+                  {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
+               </div>
+
+
+
+               <!--<div class="form-footer">-->
+                  <!--<button type="submit" class="btn btn-primary">Save options</button>-->
+               <!--</div>-->
             </div>
          </div>
       </form>

pages/navbar.html

@@ -1,38 +0,0 @@
----
----
-
-<div class="card">
-	{% include parts/navbar.html stamp=true big-menu=true user-menu=2 %}
-</div>
-
-<div class="card">
-	{% include parts/navbar.html logo=true big-menu=true user-menu=3 person=5 %}
-</div>
-
-<div class="card">
-	{% include parts/navbar.html logo=true user-menu=4 person=7 progress=true %}
-</div>
-
-<div class="card">
-	{% include parts/navbar.html sync=true title="Settings" %}
-</div>
-
-<div class="card">
-	{% include parts/navbar.html register=true %}
-</div>
-
-<div class="card">
-	{% include parts/navbar.html premium=true %}
-</div>
-
-<div class="card">
-	{% include parts/navbar.html plus=true %}
-</div>
-
-<div class="card">
-	{% include parts/navbar.html title="Dashboard" language=true %}
-</div>
-
-<div class="card">
-	{% include parts/navbar.html title="Business Analytics Overview" manage=true %}
-</div>

scss/layout/_navbar.scss

@@ -222,6 +222,11 @@ Fixed navbar
   &.navbar-folded + .layout-main {
     margin-left: $sidenav-folded-width;
   }
+
+  &.navbar-right.navbar-folded + .layout-main {
+    margin-left: 0;
+    margin-right: $sidenav-folded-width;
+  }
 }
 
 /*
@@ -239,7 +244,6 @@ Dark navbar
 .navbar-dark {
   color: #fff;
   background-color: $sidenav-dark-bg;
-  border: none;
 
   .navbar-brand {
     filter: brightness(0) invert(1);