mirror of
https://github.com/Karaka-Management/oms-Navigation.git
synced 2026-02-11 14:28:40 +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';
|
import { Navigation } from './Models/Navigation.js';
|
||||||
|
|
||||||
|
Autoloader.defineNamespace('jsOMS.Modules');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Navigation controller.
|
* Navigation controller.
|
||||||
*
|
*
|
||||||
|
|
@ -8,127 +12,114 @@ import { Navigation } from './Models/Navigation.js';
|
||||||
* @version 1.0.0
|
* @version 1.0.0
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
*/
|
*/
|
||||||
(function (jsOMS)
|
jsOMS.Modules.Navigation = class {
|
||||||
{
|
/**
|
||||||
"use strict";
|
|
||||||
|
|
||||||
/** @namespace jsOMS.Modules.Navigation.Models */
|
|
||||||
jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Navigation');
|
|
||||||
|
|
||||||
jsOMS.Modules.Navigation = class {
|
|
||||||
/**
|
|
||||||
* Constructor
|
* Constructor
|
||||||
*
|
*
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
*/
|
*/
|
||||||
constructor() {
|
constructor() {
|
||||||
this.navigation = {};
|
this.navigation = {};
|
||||||
/** global: jsOMS */
|
/** global: jsOMS */
|
||||||
/** global: localStorage */
|
/** global: localStorage */
|
||||||
this.rawNavData = JSON.parse(localStorage.getItem(jsOMS.Modules.Navigation.MODULE_NAME));
|
this.rawNavData = JSON.parse(window.localStorage.getItem(Navigation.MODULE_NAME));
|
||||||
this.rawNavData = this.rawNavData !== null ? this.rawNavData : {};
|
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));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Module id
|
* Bind navigation
|
||||||
|
*
|
||||||
|
* @param {string} id Navigation to bind (optional)
|
||||||
|
*
|
||||||
|
* @return {void}
|
||||||
*
|
*
|
||||||
* @var {string}
|
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
*/
|
*/
|
||||||
jsOMS.Modules.NavigationMODULE_NAME = '1000500001';
|
bind (id) {
|
||||||
}(window.jsOMS = window.jsOMS || {}));
|
const e = typeof id === 'undefined' ? document.getElementsByClassName('nav') : [document.getElementById(id)],
|
||||||
|
length = e.length;
|
||||||
|
|
||||||
jsOMS.ready(function ()
|
for (let i = 0; i < length; ++i) {
|
||||||
{
|
this.bindElement(e[i]);
|
||||||
"use strict";
|
}
|
||||||
|
};
|
||||||
|
|
||||||
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 {
|
export class Navigation {
|
||||||
/**
|
/**
|
||||||
* Construct
|
* Construct
|
||||||
*
|
*
|
||||||
* @param {Object} data Initialization (optional)
|
* @param {Object} data Initialization (optional)
|
||||||
*
|
*
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
*/
|
*/
|
||||||
constructor (data)
|
constructor (data)
|
||||||
{
|
{
|
||||||
if (typeof data === 'undefined') {
|
if (typeof data === 'undefined') {
|
||||||
this.scrollPosition = {x: 0, y: 0};
|
this.scrollPosition = {x: 0, y: 0};
|
||||||
this.activeLinks = {};
|
this.activeLinks = {};
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
this.openCategories = {};
|
this.openCategories = {};
|
||||||
} else {
|
} else {
|
||||||
this.scrollPosition = typeof data.scrollPosition === 'undefined' ? {x : 0, y : 0} : data.scrollPosition;
|
this.scrollPosition = typeof data.scrollPosition === 'undefined' ? {x : 0, y : 0} : data.scrollPosition;
|
||||||
this.activeLinks = typeof data.activeLinks === 'undefined' ? {} : data.activeLinks;
|
this.activeLinks = typeof data.activeLinks === 'undefined' ? {} : data.activeLinks;
|
||||||
this.visible = typeof data.visible === 'undefined' ? true : data.visible;
|
this.visible = typeof data.visible === 'undefined' ? true : data.visible;
|
||||||
this.openCategories = typeof data.openCategories === 'undefined' ? {} : data.openCategories;
|
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;
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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