diff --git a/js/app/demo.js b/js/app/demo.js
deleted file mode 100644
index 418da4ca5..000000000
--- a/js/app/demo.js
+++ /dev/null
@@ -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);
- }
-});
diff --git a/js/app/autosize.js b/js/autosize.js
similarity index 100%
rename from js/app/autosize.js
rename to js/autosize.js
diff --git a/js/app/charts.js b/js/charts.js
similarity index 100%
rename from js/app/charts.js
rename to js/charts.js
diff --git a/js/demo.js b/js/demo.js
new file mode 100644
index 000000000..70de37d0f
--- /dev/null
+++ b/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);
+ }
+})();
diff --git a/js/polyfill.js b/js/polyfill.js
new file mode 100644
index 000000000..ad9a93a7c
--- /dev/null
+++ b/js/polyfill.js
@@ -0,0 +1 @@
+'use strict';
diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html
index 4b36f958e..be6b4cde8 100644
--- a/pages/_includes/layout/js.html
+++ b/pages/_includes/layout/js.html
@@ -8,9 +8,10 @@
+
-
-
+
+