From 1d23b53461e04895d5376a8d6a731e9811fde31c Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 8 Jul 2019 22:06:28 +0200 Subject: [PATCH] layout manager form --- js/app/demo.js | 68 --------- js/{app => }/autosize.js | 0 js/{app => }/charts.js | 0 js/demo.js | 172 ++++++++++++++++++++++ js/polyfill.js | 1 + pages/_includes/layout/js.html | 5 +- pages/_includes/layout/sidenav.html | 2 +- pages/_includes/layout/topnav.html | 2 +- pages/_includes/ui/input-selectgroup.html | 3 +- pages/_layouts/base.html | 4 +- pages/layout.html | 33 ++++- pages/navbar.html | 38 ----- scss/layout/_navbar.scss | 6 +- 13 files changed, 219 insertions(+), 115 deletions(-) delete mode 100644 js/app/demo.js rename js/{app => }/autosize.js (100%) rename js/{app => }/charts.js (100%) create mode 100644 js/demo.js create mode 100644 js/polyfill.js delete mode 100644 pages/navbar.html 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 @@ + - - + + diff --git a/pages/layout.html b/pages/layout.html index 21594e637..f23efd3f9 100644 --- a/pages/layout.html +++ b/pages/layout.html @@ -7,10 +7,39 @@ title: Layout manager Layout manager
-
+
-
+
+ + {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %} +
+
+ + {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %} +
+
+ + {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %} +
+
+ + {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %} +
+
+ + {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %} +
+
+ + {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %} +
+ + + + + +
diff --git a/pages/navbar.html b/pages/navbar.html deleted file mode 100644 index 017eedc7b..000000000 --- a/pages/navbar.html +++ /dev/null @@ -1,38 +0,0 @@ ---- ---- - -
- {% include parts/navbar.html stamp=true big-menu=true user-menu=2 %} -
- -
- {% include parts/navbar.html logo=true big-menu=true user-menu=3 person=5 %} -
- -
- {% include parts/navbar.html logo=true user-menu=4 person=7 progress=true %} -
- -
- {% include parts/navbar.html sync=true title="Settings" %} -
- -
- {% include parts/navbar.html register=true %} -
- -
- {% include parts/navbar.html premium=true %} -
- -
- {% include parts/navbar.html plus=true %} -
- -
- {% include parts/navbar.html title="Dashboard" language=true %} -
- -
- {% include parts/navbar.html title="Business Analytics Overview" manage=true %} -
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index 0f4c2c8c0..cb671f596 100644 --- a/scss/layout/_navbar.scss +++ b/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);