Jingga/oms-Navigation
1
0
Fork 0
mirror of https://github.com/Karaka-Management/oms-Navigation.git synced 2026-02-10 22:08:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve navigation to class step 1

Browse Source
This commit is contained in:
Dennis Eichhorn 2019-04-01 21:17:33 +02:00
parent 067375f2f6
commit b6a95d55eb
2 changed files with 217 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
Controller.js
View File

@ -11,20 +11,108 @@
"use strict"; "use strict";
/** @namespace jsOMS.Modules.Navigation.Models */ /** @namespace jsOMS.Modules.Navigation.Models */
//jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Navigation'); jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Navigation');
/** jsOMS.Modules.Navigation = class {
/**
* Constructor * Constructor
* *
* @since 1.0.0 * @since 1.0.0
*/ */
jsOMS.Modules.Navigation = function () 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(localStorage.getItem(jsOMS.Modules.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 jsOMS.Modules.Navigation.Models.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));
});
};
}; };
/** /**
@ -33,99 +121,7 @@
* @var {string} * @var {string}
* @since 1.0.0 * @since 1.0.0
*/ */
jsOMS.Modules.Navigation.MODULE_NAME = '1000500001'; jsOMS.Modules.NavigationMODULE_NAME = '1000500001';
/**
* Bind navigation
*
* @param {string} id Navigation to bind (optional)
*
* @return {void}
*
* @since 1.0.0
*/
jsOMS.Modules.Navigation.prototype.bind = function (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
*/
jsOMS.Modules.Navigation.prototype.bindElement = function (e)
{
if (typeof e === 'undefined' || !e) {
// todo: do logging here
return;
}
const extend = e.querySelectorAll('li label'),
self = this;
this.navigation[e.id] = new jsOMS.Modules.Navigation.Models.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));
});
};
}(window.jsOMS = window.jsOMS || {})); }(window.jsOMS = window.jsOMS || {}));
jsOMS.ready(function () jsOMS.ready(function ()

236
Models/Navigation.js
View File

@ -13,133 +13,135 @@
/** @namespace jsOMS.Modules.Navigation.Models */ /** @namespace jsOMS.Modules.Navigation.Models */
jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Navigation.Models'); jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Navigation.Models');
/** jsOMS.Modules.Navigation.Models.Navigation = class {
* Construct /**
* * Construct
* @param {Object} data Initialization (optional) *
* * @param {Object} data Initialization (optional)
* @since 1.0.0 *
*/ * @since 1.0.0
jsOMS.Modules.Navigation.Models.Navigation = function (data) */
{ constructor (data)
if (typeof data === 'undefined') { {
this.scrollPosition = {x: 0, y: 0}; if (typeof data === 'undefined') {
this.activeLinks = {}; this.scrollPosition = {x: 0, y: 0};
this.visible = true; this.activeLinks = {};
this.openCategories = {}; this.visible = true;
} else { this.openCategories = {};
this.scrollPosition = typeof data.scrollPosition === 'undefined' ? {x : 0, y : 0} : data.scrollPosition; } else {
this.activeLinks = typeof data.activeLinks === 'undefined' ? {} : data.activeLinks; this.scrollPosition = typeof data.scrollPosition === 'undefined' ? {x : 0, y : 0} : data.scrollPosition;
this.visible = typeof data.visible === 'undefined' ? true : data.visible; this.activeLinks = typeof data.activeLinks === 'undefined' ? {} : data.activeLinks;
this.openCategories = typeof data.openCategories === 'undefined' ? {} : data.openCategories; this.visible = typeof data.visible === 'undefined' ? true : data.visible;
} this.openCategories = typeof data.openCategories === 'undefined' ? {} : data.openCategories;
}; }
};
/** /**
* Set scroll position * Set scroll position
* *
* @param {int} x Horizontal position * @param {int} x Horizontal position
* @param {int} y Vertical position * @param {int} y Vertical position
* *
* @return {void} * @return {void}
* *
* @since 1.0.0 * @since 1.0.0
*/ */
jsOMS.Modules.Navigation.Models.Navigation.prototype.setScrollPosition = function (x, y) setScrollPosition (x, y)
{ {
this.scrollPosition.x = x; this.scrollPosition.x = x;
this.scrollPosition.y = y; this.scrollPosition.y = y;
}; };
/** /**
* Get scroll position * Get scroll position
* *
* @return {Object} * @return {Object}
* *
* @since 1.0.0 * @since 1.0.0
*/ */
jsOMS.Modules.Navigation.Models.Navigation.prototype.getScrollPosition = function () getScrollPosition ()
{ {
return this.scrollPosition; return this.scrollPosition;
}; };
/** /**
* Open navigation category * Open navigation category
* *
* @param {string} id Category id * @param {string} id Category id
* *
* @return {void} * @return {void}
* *
* @since 1.0.0 * @since 1.0.0
*/ */
jsOMS.Modules.Navigation.Models.Navigation.prototype.setOpen = function (id) setOpen (id)
{ {
this.openCategories[id] = true; this.openCategories[id] = true;
}; };
/** /**
* Close navigation category * Close navigation category
* *
* @param {string} id Category id * @param {string} id Category id
* *
* @return {void} * @return {void}
* *
* @since 1.0.0 * @since 1.0.0
*/ */
jsOMS.Modules.Navigation.Models.Navigation.prototype.setClose = function (id) setClose (id)
{ {
delete this.openCategories[id]; delete this.openCategories[id];
}; };
/** /**
* Get open navigation elements * Get open navigation elements
* *
* @return {Object} * @return {Object}
* *
* @since 1.0.0 * @since 1.0.0
*/ */
jsOMS.Modules.Navigation.Models.Navigation.prototype.getOpen = function () getOpen ()
{ {
return this.openCategories; return this.openCategories;
}; };
jsOMS.Modules.Navigation.Models.Navigation.prototype.active = function (id) active (id)
{ {
this.allInactive(); this.allInactive();
}; };
jsOMS.Modules.Navigation.Models.Navigation.prototype.allInactive = function () allInactive ()
{ {
}; };
jsOMS.Modules.Navigation.Models.Navigation.prototype.inactive = function (id) inactive (id)
{ {
}; };
/** /**
* Set navigation visibility * Set navigation visibility
* *
* @param {bool} visible Visibility * @param {bool} visible Visibility
* *
* @return {bool} * @return {bool}
* *
* @since 1.0.0 * @since 1.0.0
*/ */
jsOMS.Modules.Navigation.Models.Navigation.prototype.setVisible = function (visible) setVisible (visible)
{ {
this.visible = visible; this.visible = visible;
}; };
/** /**
* Is navigation visible * Is navigation visible
* *
* @return {bool} * @return {bool}
* *
* @since 1.0.0 * @since 1.0.0
*/ */
jsOMS.Modules.Navigation.Models.Navigation.prototype.isVisible = function () isVisible ()
{ {
return this.visible; return this.visible;
};
}; };
}(window.jsOMS = window.jsOMS || {})); }(window.jsOMS = window.jsOMS || {}));