//2022-07-29
/* Script for UI elements:
* navigation menus
* element toggle switch
Requires files "axs.css" and "axs.js" included first.
Include the script in the :
Menu HTML structure supported by this script:
Language selector dropdown example:
Function arguments for attach():
0: ID of the menu element.
1: Config options:
dropdown: enable dropdown menu functionality;
toggle: enable menu toggle switch (mostly used for mobil layout but not only);
Any config keys that evaluate to TRUE will be added as classnames. Unlisted classnames can also be added this way.
*/
axs.menu={
cfg:{},
defaults:{'dropdown':false,'dropout':false,'drophover':false,'toggle':false,'open':false,'closed':false,'mobile_fixed':false,'ajax':false},
init:function(){
var menus=document.querySelectorAll('nav.menu');
for (var i=0, len=menus.length; i
attach:function(node){//
var a=axs.fn_args(arguments,{'node':null,'cfg':{}});
if (typeof(node)==='string') node=document.getElementById(node);
if (typeof(this.cfg[node.id])==="undefined") this.cfg[node.id]={};
for (k in this.defaults) {
if (typeof(a.cfg[k])!=="undefined") this.cfg[node.id][k]=a.cfg[k];
if (typeof(this.cfg[node.id][k])==="undefined") this.cfg[node.id][k]=this.defaults[k];
}
for (k in this.cfg[node.id]) if (this.cfg[node.id][k]) axs.class_add(node,k);
if (axs.class_has(node,['toggle','mobile_toggle','screen_toggle'])) this.toggle(node);
if (axs.class_has(node,'dropdown')) this.dropdown(node);
if (axs.class_has(node,'ajax')) this.ajaxNav(node.querySelectorAll('li>a'),this.cfg[node.id].ajax);
},//
ajaxNav:function(links){
var a=axs.fn_args(arguments,{'node':null,'target':true});
if ((!a.target)||(a.target===true)) a.target='#content';
for (var i=0; i
currentSet:function(node){
axs.class_rem(axs.elementParent(node,'nav').querySelectorAll('.submenu.open, .current'),['open','current']);
var li=axs.elementParent(node,'li');
axs.class_add((li)?li:node,'current');
while(node=axs.elementParent(node,'.submenu')) axs.class_add(node,'open');
},//
toggle:function(menu){//
axs.class_add(menu,'js');
if (axs.class_has(menu,'mobile_fixed')) axs.class_add(document.querySelector('body'),'mobile_menu-fixed');
if ((axs.class_has(menu,'toggle'))&&(axs.cookie_get('axs[menu]['+menu.id+'][closed]')==='1')) {
axs.class_rem(menu,'open');
axs.class_add(menu,'closed');
}
var sw=menu.querySelectorAll('.toggle-switch');
for (var i=0, len=sw.length; i
dropdown:function(menu){//
axs.class_add(menu,'js');
if (!axs.class_has(menu,'dropout')) axs.class_add(menu.querySelectorAll("li.submenu.open, li.submenu.current"),'js_open');
var el=menu.querySelectorAll("li>a");
for (var i=0; i
dropdownClose:function(li){//
for(var i=0; i
hasSubmenu:function(a){
var submenu=a.parentNode.querySelector('ul');
if ((submenu)||(axs.class_has(a.parentNode,'submenu'))) return true;
},//
/**/
inpageTopNavNodes:[],
inpageTopNavInit:function(node){
this.inpageTopNavNodes[this.inpageTopNavNodes.length]={show:false,node:node};
axs.class_add(node,['js']);
var fn=function(){
var h=window.innerHeight;
var pos=window.scrollY||document.documentElement.scrollTop;
var show=((pos<(h/4))/*||(document.body.offsetHeight-pos<=h)*/) ? false:true;
for(var i=0; i
/**/
/*
Supports the following HTML structure:
Lorem ipsum...
Available classes are: sticky-position fixed-position top bottom
*/
/*fixedEl:{},
fixedSizeCheck:false,
fixed:function(id){
var a=axs.fn_args(arguments,{id:'',cfg:{type:'fixed',pos:'top'}});
node=document.getElementById(id);
axs.class_add(node,[a.cfg.type+'-position',a.cfg.pos,'js']);
//var type=(axs.class_has(node,'sticky-position')) ? 'sticky':'fixed';
//var pos=(axs.class_has(node,'bottom')) ? 'bottom':'top';
var placeholder=document.getElementById(id+'_placeholder');
if (!placeholder) {
placeholder=document.createElement('div');
placeholder.id=id+'_placeholder';
placeholder.className='fixed_placeholder '+a.cfg.type;
if (a.cfg.type==='sticky') node.parentNode.insertBefore(placeholder,node);
else {
if (a.cfg.pos==='top') document.querySelector('body').insertBefore(placeholder,document.querySelector('body').firstChild);
else window.addEventListener('load',function(){
document.querySelector('body').appendChild(placeholder);
axs.menu.fixedSizeSet();
});
}
}
this.fixedEl[id]={node:node,type:a.cfg.type,pos:a.cfg.pos,placeholder:placeholder};
this.fixedSizeSet();
if (!this.fixedSizeCheck) {
window.addEventListener('resize',this.fixedSizeSet);
window.addEventListener('resize',this.fixedScroll);
window.addEventListener('scroll',this.fixedScroll);
this.fixedSizeCheck=window.setTimeout(function repeat(){
axs.menu.fixedSizeSet();
window.setTimeout(repeat,3000);
},3000);
}
},//
fixedScroll:function(){
var scrollPos=window.scrollY||document.documentElement.scrollTop;
for(var id in axs.menu.fixedEl){
var el=axs.menu.fixedEl[id];
if(el.pos==='top'){
if(scrollPos>=el.placeholder.offsetTop) { axs.class_add(el.node,'isStuck'); axs.class_add(el.placeholder,'isStuck'); }
else{ axs.class_rem(el.node,'isStuck'); axs.class_rem(el.placeholder,'isStuck'); }
}
if(el.pos==='bottom'){
if(scrollPos>=el.placeholder.offsetTop+parseInt(el.placeholder.style.height)) { axs.class_add(el.node,'isStuck'); axs.class_add(el.placeholder,'isStuck'); }
else{ axs.class_rem(el.node,'isStuck'); axs.class_rem(el.placeholder,'isStuck'); }
}
}
},//
fixedSizeSet:function(){
for(var id in axs.menu.fixedEl){
var el=axs.menu.fixedEl[id];
if (parseInt(el.placeholder.style.height)!=el.node.offsetHeight) el.placeholder.style.height=el.node.offsetHeight+'px';
}
},//
/**/
/*
Supports the following HTML structure:
*/
/*tabs:function(node){
if (typeof(node)==='string') node=document.querySelector(node);
if (!node) return axs.log('axs.menu.tabs','Node not found!');
axs.class_add(node,'js');
var el=node.querySelectorAll('.tab');//
for (var i=0, len=el.length; i*>a');//
for (var i=0, len=el.length; i
if ((window.location.hash)&&(node.querySelector('.nav>li a[href="'+window.location.hash+'"]'))) this.tabsCurrentSet(window.location.hash);
//
if (!node.querySelector('.nav>*.current')) this.tabsCurrentSet(node.querySelector('.nav>*>a').getAttribute('href'));
},//
tabsCurrentSet:function(id){
var p=document.querySelector(id+'-js').parentNode;
while (!axs.class_has(p,'tabs')) p=p.parentNode;
axs.class_rem(p.querySelectorAll('.nav>li, .tab'),'current');
axs.class_add(p.querySelector('.nav>li a[href="'+id+'"]').parentNode,'current');
axs.class_add(p.querySelector(id+'-js'),'current');
}//*/
}//
axs.menu.init();
//2010-01-07