https://www.fctatran.sk/design/js/ddfullscreenmenu.js

1// Multi-Level Full Screen Menu Script v1.0
2// Date: Jan 13th, 17'
3// By Dynamic Drive: http://www.dynamicdrive.com
4
5// classLists Pollyfill: https://github.com/remy/polyfills/blob/6e87470526c496c0fc53fa87ed5a825eff61f1f3/classList.js
6
7(function () {
8
9if (typeof window.Element === "undefined" || "classList" in document.documentElement) return;
10
11var prototype = Array.prototype,
12    push = prototype.push,
13    splice = prototype.splice,
14    join = prototype.join;
15
16function DOMTokenList(el) {
17  this.el = el;
18  // The className needs to be trimmed and split on whitespace
19  // to retrieve a list of classes.
20  var classes = el.className.replace(/^\s+|\s+$/g,'').split(/\s+/);
21  for (var i = 0; i < classes.length; i++) {
22    push.call(this, classes[i]);
23  }
24};
25
26DOMTokenList.prototype = {
27  add: function(token) {
28    if(this.contains(token)) return;
29    push.call(this, token);
30    this.el.className = this.toString();
31  },
32  contains: function(token) {
33    return this.el.className.indexOf(token) != -1;
34  },
35  item: function(index) {
36    return this[index] || null;
37  },
38  remove: function(token) {
39    if (!this.contains(token)) return;
40    for (var i = 0; i < this.length; i++) {
41      if (this[i] == token) break;
42    }
43    splice.call(this, i, 1);
44    this.el.className = this.toString();
45  },
46  toString: function() {
47    return join.call(this, ' ');
48  },
49  toggle: function(token) {
50    if (!this.contains(token)) {
51      this.add(token);
52    } else {
53      this.remove(token);
54    }
55
56    return this.contains(token);
57  }
58};
59
60window.DOMTokenList = DOMTokenList;
61
62function defineElementGetter (obj, prop, getter) {
63    if (Object.defineProperty) {
64        Object.defineProperty(obj, prop,{
65            get : getter
66        });
67    } else {
68        obj.__defineGetter__(prop, getter);
69    }
70}
71
72defineElementGetter(Element.prototype, 'classList', function () {
73  return new DOMTokenList(this);
74});
75
76})();
77
78// Multi-Level Full Screen Menu code:
79
80var ddfullscreenmenu = (function(){
81
82	var menuref,
83			ulwrapper,
84			mainul,
85			closex,
86			closetimer,
87			mobilezindex = 100
88
89	function animatemenu(showmenu, hidemenu, dir){
90		showmenu.classList.remove('hidemenu')
91		showmenu.classList.remove('showmenu')		
92		hidemenu.classList.remove('hidemenu')
93		hidemenu.classList.remove('showmenu')	
94		if (dir == 'forward'){
95			hidemenu.classList.add('hidemenu')
96			showmenu.classList.add('showmenu')
97		}
98		else{
99			showmenu.classList.add('showmenu')
100		}
101		showmenu.style.zIndex = mobilezindex++
102	}
103
104	function flattenul(ul, cloneulBol, callback, finalcall){
105		var callback = callback || function(){}
106		var finalcall = finalcall || function(){}
107		var docfrag = document.createDocumentFragment()
108		var targetul = cloneulBol? ul.cloneNode(true) : ul
109		var subuls = targetul.getElementsByTagName('ul')
110		var subulscount = subuls.length
111		for (var i=subulscount-1; i>=0; i--){
112			var subul = subuls[i]
113			var header = subuls[i].parentNode
114			docfrag.appendChild( subuls[i] )
115			callback(i, header, subul)
116		}
117		docfrag.appendChild( targetul )
118		finalcall(targetul)
119		return docfrag
120	}
121
122	var mainmenufunc = {
123
124		togglemenu:function(action){
125			if (typeof action == 'undefined'){
126				menuref.classList.toggle('openmenu')
127			}
128			else{
129				menuref.classList[(action == 'open')? 'add' : 'remove']('openmenu')
130			}
131		},
132
133		init:function(){
134			menuref = document.getElementById('ddfullscreenmenu')
135			ulwrapper = document.getElementById('ulwrapper')
136			mainul = document.getElementById('fullscreenmenu-ul')
137			closex = document.getElementById('closex')
138
139			closex.addEventListener('click', function(e){ // action when user clicks on "close" button
140				ddfullscreenmenu.togglemenu('close')
141				e.preventDefault()			
142			}, false)
143
144			var flattened = flattenul(mainul, false,
145				function(i, header, subul){ // loop through header LIs and sub ULs
146					header.className = 'header'
147					header._submenuref = subul
148					subul.className = 'submenu'
149					var breadcrumb = document.createElement('li')
150					breadcrumb.className = "breadcrumb"
151					breadcrumb.innerHTML = header.getElementsByTagName('a')[0].firstChild.nodeValue
152					breadcrumb._headerref = header
153					subul.insertBefore(breadcrumb, subul.getElementsByTagName('li')[0])
154					header.addEventListener('click', function(e){ // action when user clicks on header (LI with children UL)
155						var headermenu = this.parentNode
156						var submenu = this._submenuref
157						animatemenu(submenu, headermenu, 'forward')
158						e.stopPropagation()
159						e.preventDefault()
160					}, false)
161					breadcrumb.addEventListener('click', function(e){ // action when user clicks on "back breadcrumb" LI
162						var parentmenu = this._headerref.parentNode
163						var curmenu = this._headerref._submenuref
164						animatemenu(parentmenu, curmenu, 'backwards')
165						e.stopPropagation()
166						e.preventDefault()
167					}, false)
168				},
169				function(topul){
170					topul.style.zIndex = mobilezindex++
171				}
172			)
173			ulwrapper.appendChild(flattened)
174			ulwrapper.addEventListener('click', function(){ // close menu when a menu link is clicked on
175				clearTimeout(closetimer)
176				closetimer = setTimeout(function(){
177					ddfullscreenmenu.togglemenu('close')
178				}, 100)
179			}, false)
180		}
181
182	}
183
184	return mainmenufunc
185
186})();