diff --git a/Controller.js b/Controller.js index a561b6f..6b55964 100644 --- a/Controller.js +++ b/Controller.js @@ -1,5 +1,9 @@ +import { Autoloader } from '../../jsOMS/Autoloader.js'; +import { Application } from '../../Web/Backend/js/backend.js'; import { Navigation } from './Models/Navigation.js'; +Autoloader.defineNamespace('jsOMS.Modules'); + /** * Navigation controller. * @@ -8,127 +12,114 @@ import { Navigation } from './Models/Navigation.js'; * @version 1.0.0 * @since 1.0.0 */ -(function (jsOMS) -{ - "use strict"; - - /** @namespace jsOMS.Modules.Navigation.Models */ - jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Navigation'); - - jsOMS.Modules.Navigation = class { - /** +jsOMS.Modules.Navigation = class { + /** * Constructor * * @since 1.0.0 */ - constructor() { - this.navigation = {}; - /** global: jsOMS */ - /** global: localStorage */ - this.rawNavData = JSON.parse(localStorage.getItem(jsOMS.Modules.Navigation.MODULE_NAME)); - this.rawNavData = this.rawNavData !== null ? this.rawNavData : {}; - }; - - /** - * Bind navigation - * - * @param {string} id Navigation to bind (optional) - * - * @return {void} - * - * @since 1.0.0 - */ - bind (id) { - const e = typeof id === 'undefined' ? document.getElementsByClassName('nav') : [document.getElementById(id)], - length = e.length; - - for (let i = 0; i < length; ++i) { - this.bindElement(e[i]); - } - }; - - /** - * Bind navigation element - * - * @param {Element} e Element to bind - * - * @return {void} - * - * @since 1.0.0 - */ - bindElement (e) { - if (typeof e === 'undefined' || !e) { - // todo: do logging here - - return; - } - - const extend = e.querySelectorAll('li label'), - self = this; - - this.navigation[e.id] = new Navigation(this.rawNavData[e.id]); - - // On load - const open = this.navigation[e.id].getOpen(); - let ele = null; - - for (let key in open) { - if (open.hasOwnProperty(key) && (ele = document.getElementById(key)) !== null) { - ele.checked = open[key]; - } - } - - if (!this.navigation[e.id].isVisible()) { - let width = window.innerWidth - || document.documentElement.clientWidth - || document.body.clientWidth; - - // todo: still buggy maybe always set true if < 800 and only call this if if >= 800 - e.nextElementSibling.checked = width < 800; - } - - e.scrollTop = this.navigation[e.id].getScrollPosition().y; - e.scrollLeft = this.navigation[e.id].getScrollPosition().x; - - // Bind minimize/maximize - jsOMS.addEventListenerToAll(extend, 'click', function () { - let box = document.getElementById(this.getAttribute('for')); - - if (!box.checked) { - self.navigation[e.id].setOpen(box.id); - } else { - self.navigation[e.id].setClose(box.id); - } - - localStorage.setItem(jsOMS.Modules.Navigation.MODULE_NAME, JSON.stringify(self.navigation)); - }); - - // Bind show/hide - e.nextElementSibling.addEventListener('change', function () { - self.navigation[e.id].setVisible(this.checked); - localStorage.setItem(jsOMS.Modules.Navigation.MODULE_NAME, JSON.stringify(self.navigation)); - }); - - // Bind scroll - e.addEventListener('scroll', function () { - self.navigation[e.id].setScrollPosition(this.scrollLeft, this.scrollTop); - localStorage.setItem(jsOMS.Modules.Navigation.MODULE_NAME, JSON.stringify(self.navigation)); - }); - }; + constructor() { + this.navigation = {}; + /** global: jsOMS */ + /** global: localStorage */ + this.rawNavData = JSON.parse(window.localStorage.getItem(Navigation.MODULE_NAME)); + this.rawNavData = this.rawNavData !== null ? this.rawNavData : {}; }; /** - * Module id + * Bind navigation + * + * @param {string} id Navigation to bind (optional) + * + * @return {void} * - * @var {string} * @since 1.0.0 */ - jsOMS.Modules.NavigationMODULE_NAME = '1000500001'; -}(window.jsOMS = window.jsOMS || {})); + bind (id) { + const e = typeof id === 'undefined' ? document.getElementsByClassName('nav') : [document.getElementById(id)], + length = e.length; -jsOMS.ready(function () -{ - "use strict"; + for (let i = 0; i < length; ++i) { + this.bindElement(e[i]); + } + }; - window.omsApp.moduleManager.get('Navigation').bind('nav-side'); -}); \ No newline at end of file + /** + * Bind navigation element + * + * @param {Element} e Element to bind + * + * @return {void} + * + * @since 1.0.0 + */ + bindElement (e) { + if (typeof e === 'undefined' || !e) { + // todo: do logging here + + return; + } + + const extend = e.querySelectorAll('li label'), + self = this; + + this.navigation[e.id] = new Navigation(this.rawNavData[e.id]); + + // On load + const open = this.navigation[e.id].getOpen(); + let ele = null; + + for (let key in open) { + if (open.hasOwnProperty(key) && (ele = document.getElementById(key)) !== null) { + ele.checked = open[key]; + } + } + + if (!this.navigation[e.id].isVisible()) { + let width = window.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth; + + // todo: still buggy maybe always set true if < 800 and only call this if if >= 800 + e.nextElementSibling.checked = width < 800; + } + + e.scrollTop = this.navigation[e.id].getScrollPosition().y; + e.scrollLeft = this.navigation[e.id].getScrollPosition().x; + + // Bind minimize/maximize + jsOMS.addEventListenerToAll(extend, 'click', function () { + let box = document.getElementById(this.getAttribute('for')); + + if (!box.checked) { + self.navigation[e.id].setOpen(box.id); + } else { + self.navigation[e.id].setClose(box.id); + } + + localStorage.setItem(Navigation.MODULE_NAME, JSON.stringify(self.navigation)); + }); + + // Bind show/hide + e.nextElementSibling.addEventListener('change', function () { + self.navigation[e.id].setVisible(this.checked); + localStorage.setItem(Navigation.MODULE_NAME, JSON.stringify(self.navigation)); + }); + + // Bind scroll + e.addEventListener('scroll', function () { + self.navigation[e.id].setScrollPosition(this.scrollLeft, this.scrollTop); + localStorage.setItem(Navigation.MODULE_NAME, JSON.stringify(self.navigation)); + }); + }; +}; + +/** + * Module id + * + * @var {string} + * @since 1.0.0 + */ +Navigation.MODULE_NAME = '1000500001'; + +window.omsApp.moduleManager.get('Navigation').bind('nav-side'); \ No newline at end of file diff --git a/Models/Navigation.js b/Models/Navigation.js index 58d741d..fc462f9 100644 --- a/Models/Navigation.js +++ b/Models/Navigation.js @@ -1,131 +1,131 @@ - export class Navigation { - /** - * Construct - * - * @param {Object} data Initialization (optional) - * - * @since 1.0.0 - */ - constructor (data) - { - if (typeof data === 'undefined') { - this.scrollPosition = {x: 0, y: 0}; - this.activeLinks = {}; - this.visible = true; - this.openCategories = {}; - } else { - this.scrollPosition = typeof data.scrollPosition === 'undefined' ? {x : 0, y : 0} : data.scrollPosition; - this.activeLinks = typeof data.activeLinks === 'undefined' ? {} : data.activeLinks; - this.visible = typeof data.visible === 'undefined' ? true : data.visible; - this.openCategories = typeof data.openCategories === 'undefined' ? {} : data.openCategories; - } - }; - - /** - * Set scroll position - * - * @param {int} x Horizontal position - * @param {int} y Vertical position - * - * @return {void} - * - * @since 1.0.0 - */ - setScrollPosition (x, y) - { - this.scrollPosition.x = x; - this.scrollPosition.y = y; - }; - - /** - * Get scroll position - * - * @return {Object} - * - * @since 1.0.0 - */ - getScrollPosition () - { - return this.scrollPosition; - }; - - /** - * Open navigation category - * - * @param {string} id Category id - * - * @return {void} - * - * @since 1.0.0 - */ - setOpen (id) - { - this.openCategories[id] = true; - }; - - /** - * Close navigation category - * - * @param {string} id Category id - * - * @return {void} - * - * @since 1.0.0 - */ - setClose (id) - { - delete this.openCategories[id]; - }; - - /** - * Get open navigation elements - * - * @return {Object} - * - * @since 1.0.0 - */ - getOpen () - { - return this.openCategories; - }; - - active (id) - { - this.allInactive(); - }; - - allInactive () - { - - }; - - inactive (id) - { - }; - - /** - * Set navigation visibility - * - * @param {bool} visible Visibility - * - * @return {bool} - * - * @since 1.0.0 - */ - setVisible (visible) - { - this.visible = visible; - }; - - /** - * Is navigation visible - * - * @return {bool} - * - * @since 1.0.0 - */ - isVisible () - { - return this.visible; - }; +export class Navigation { + /** + * Construct + * + * @param {Object} data Initialization (optional) + * + * @since 1.0.0 + */ + constructor (data) + { + if (typeof data === 'undefined') { + this.scrollPosition = {x: 0, y: 0}; + this.activeLinks = {}; + this.visible = true; + this.openCategories = {}; + } else { + this.scrollPosition = typeof data.scrollPosition === 'undefined' ? {x : 0, y : 0} : data.scrollPosition; + this.activeLinks = typeof data.activeLinks === 'undefined' ? {} : data.activeLinks; + this.visible = typeof data.visible === 'undefined' ? true : data.visible; + this.openCategories = typeof data.openCategories === 'undefined' ? {} : data.openCategories; + } }; + + /** + * Set scroll position + * + * @param {int} x Horizontal position + * @param {int} y Vertical position + * + * @return {void} + * + * @since 1.0.0 + */ + setScrollPosition (x, y) + { + this.scrollPosition.x = x; + this.scrollPosition.y = y; + }; + + /** + * Get scroll position + * + * @return {Object} + * + * @since 1.0.0 + */ + getScrollPosition () + { + return this.scrollPosition; + }; + + /** + * Open navigation category + * + * @param {string} id Category id + * + * @return {void} + * + * @since 1.0.0 + */ + setOpen (id) + { + this.openCategories[id] = true; + }; + + /** + * Close navigation category + * + * @param {string} id Category id + * + * @return {void} + * + * @since 1.0.0 + */ + setClose (id) + { + delete this.openCategories[id]; + }; + + /** + * Get open navigation elements + * + * @return {Object} + * + * @since 1.0.0 + */ + getOpen () + { + return this.openCategories; + }; + + active (id) + { + this.allInactive(); + }; + + allInactive () + { + + }; + + inactive (id) + { + }; + + /** + * Set navigation visibility + * + * @param {bool} visible Visibility + * + * @return {bool} + * + * @since 1.0.0 + */ + setVisible (visible) + { + this.visible = visible; + }; + + /** + * Is navigation visible + * + * @return {bool} + * + * @since 1.0.0 + */ + isVisible () + { + return this.visible; + }; +};