mirror of
https://github.com/Karaka-Management/oms-Navigation.git
synced 2026-01-11 16:18:42 +00:00
Use js modules
This commit is contained in:
parent
8d244712f1
commit
d01ee7fda4
215
Controller.js
215
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');
|
||||
});
|
||||
/**
|
||||
* 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');
|
||||
|
|
@ -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;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user