https://www.infoflora.ch/assets/js/slide-nav.js

1/*
2 * slide-nav 1.0.1
3 * ES6 Vanilla.js navigation plugin to simple use on one-page websites.
4 * https://github.com/qmixi/slide-nav
5 *
6 * Copyright (C) 2017 - A project by Piotr Kumorek
7 * Released under the MIT license.
8*/
9
10'use strict';
11
12var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
13
14function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
15
16var SlideNav = function () {
17	function SlideNav(options) {
18		_classCallCheck(this, SlideNav);
19
20		//default values
21		if (!options) var options = {};
22		this.activeClass = options.activeClass || 'active';
23		this.toggleButtonSelector = options.toggleButtonSelector || false;
24		this.toggleBoxSelector = options.toggleBoxSelector || false;
25		this.speed = options.speed > 0 ? options.speed : 70;
26		this.hideAfterSelect = options.hideBoxAfterSelect || true;
27		this.changeHash = options.changeHash || false;
28		this.navBoxToggleClass = options.navBoxToggleClass || false;
29
30		//initialize
31		this.init();
32	}
33
34	_createClass(SlideNav, [{
35		key: 'init',
36		value: function init() {
37			//scrollDoc
38			this.scrollDoc = document.scrollingElement || document.documentElement;
39
40			this.getElements();
41			this.observe();
42			this.setActiveAnchor();
43		}
44	}, {
45		key: 'getElements',
46		value: function getElements() {
47			this.toggleButton = document.querySelector(this.toggleButtonSelector);
48			if (this.toggleButton) {
49				this.opened = false;
50			}
51			this.toggleBoxes = document.querySelectorAll(this.toggleBoxSelector);
52			this.navAnchors = document.querySelectorAll('.onepager-subnav a:not([target="_blank"])');
53		}
54	}, {
55		key: 'observe',
56		value: function observe() {
57			var _this = this;
58
59			//blur navBox
60			window.addEventListener("click", function (e) {
61				if (_this.opened && !_this.isClosestElement(e.target, _this.toggleButton) && !_this.isBoxNavTarget(e.target)) {
62					_this.hideNavBox();
63				}
64			});
65			// toggle button
66			if (this.toggleButton) {
67				this.toggleButton.addEventListener("click", function (e) {
68					setTimeout(function () {
69						_this.opened ? _this.hideNavBox() : _this.showNavBox();
70					});
71				});
72			};
73
74			// anchors
75			var _iteratorNormalCompletion = true;
76			var _didIteratorError = false;
77			var _iteratorError = undefined;
78
79			try {
80				for (var _iterator = this.navAnchors[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
81					var anchor = _step.value;
82
83					anchor.addEventListener("click", function (e) {
84						e.preventDefault();
85						var linkHash = _this.getHash(e.currentTarget.href);
86						if (!_this.goToSection(linkHash) && e.currentTarget.href) _this.goToUrl(e.currentTarget.href);
87					});
88				}
89			} catch (err) {
90				_didIteratorError = true;
91				_iteratorError = err;
92			} finally {
93				try {
94					if (!_iteratorNormalCompletion && _iterator.return) {
95						_iterator.return();
96					}
97				} finally {
98					if (_didIteratorError) {
99						throw _iteratorError;
100					}
101				}
102			}
103
104			;
105			// scroll
106			var isScrolling;
107			window.addEventListener("scroll", function () {
108				_this.setActiveAnchor();
109				// Clear our timeout throughout the scroll
110				window.clearTimeout( isScrolling );
111
112				// Set a timeout to run after scrolling ends
113				isScrolling = setTimeout(function() {
114					_this.setActiveAnchor();
115				}, 66);
116
117			}, false);
118		}
119	}, {
120		key: 'setActiveAnchor',
121		value: function setActiveAnchor() {
122			var _iteratorNormalCompletion2 = true;
123			var _didIteratorError2 = false;

124			var _iteratorError2 = undefined;
125
126			try {
127				for (var _iterator2 = this.navAnchors[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
128                    var anchor = _step2.value;
129
130                    var linkHash = this.getHash(anchor.href),
131					    section = this.getSection(linkHash),
132					    offset = this.scrollDoc.scrollTop,
133					    scrollHeight = this.scrollDoc.scrollHeight;
134
135					if (section && (section.offsetTop <= offset && section.offsetTop + section.offsetHeight > offset || offset + window.innerHeight == scrollHeight)) {
136						var _iteratorNormalCompletion3 = true;
137						var _didIteratorError3 = false;
138						var _iteratorError3 = undefined;
139
140						try {
141							for (var _iterator3 = this.navAnchors[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
142								var link = _step3.value;
143
144								if (link.href != anchor.href) link.classList.remove('active');
145							}
146						} catch (err) {
147							_didIteratorError3 = true;
148							_iteratorError3 = err;
149						} finally {
150							try {
151								if (!_iteratorNormalCompletion3 && _iterator3.return) {
152									_iterator3.return();
153								}
154							} finally {
155								if (_didIteratorError3) {
156									throw _iteratorError3;
157								}
158							}
159						}
160
161						anchor.classList.add('active');
162					}
163				}
164			} catch (err) {
165				_didIteratorError2 = true;
166				_iteratorError2 = err;
167			} finally {
168				try {
169					if (!_iteratorNormalCompletion2 && _iterator2.return) {
170						_iterator2.return();
171					}
172				} finally {
173					if (_didIteratorError2) {
174						throw _iteratorError2;
175					}
176				}
177			}
178		}
179	}, {
180		key: 'goToSection',
181		value: function goToSection(linkHash) {
182			var section = this.getSection(linkHash);
183			if (section) {
184				var offsetTop = section.offsetTop;
185				console.log(this.speed);
186				this.scrollTo(offsetTop, this.speed);
187				if (this.hideAfterSelect) this.hideNavBox();
188				if (this.changeHash) {
189					history.pushState({}

189, null, "#" + linkHash);
190				}
191				return true;
192			} else {
193				return false;
194			}
195		}
196	}, {
197		key: 'scrollTo',
198		value: function scrollTo(destOffset, duration) {
199			var _this2 = this;
200
201			var diffOffset = destOffset - this.scrollDoc.scrollTop,
202			    partDist = diffOffset / duration * 1;
203
204			if (duration <= 0) return;
205			setTimeout(function () {
206				_this2.scrollDoc.scrollTop = _this2.scrollDoc.scrollTop + partDist;
207				if (_this2.scrollDoc.scrollTop == destOffset) return;
208				_this2.scrollTo(destOffset, duration - 1);
209			}, 1);
210		}
211	}, {
212		key: 'goToUrl',
213		value: function goToUrl(url) {
214			return window.location = url;
215		}
216	}, {
217		key: 'getSection',
218		value: function getSection(linkHash) {
219            if (linkHash) {
220				return document.getElementById(decodeURI(linkHash));
221			}
222			return false;
223		}
224	}, {
225		key: 'getHash',
226		value: function getHash(href) {
227			return href.split('#')[1];
228		}
229	}, {
230		key: 'isBoxNavTarget',
231		value: function isBoxNavTarget(target) {
232			var isTarget = false;
233			var _iteratorNormalCompletion4 = true;
234			var _didIteratorError4 = false;
235			var _iteratorError4 = undefined;
236
237			try {
238				for (var _iterator4 = this.toggleBoxes[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
239					var box = _step4.value;
240
241					if (this.isClosestElement(target, box)) isTarget = true;
242				}
243			} catch (err) {
244				_didIteratorError4 = true;
245				_iteratorError4 = err;
246			} finally {
247				try {
248					if (!_iteratorNormalCompletion4 && _iterator4.return) {
249						_iterator4.return();
250					}
251				} finally {
252					if (_didIteratorError4) {
253						throw _iteratorError4;
254					}
255				}
256			}
257
258			return isTarget;
259		}
260	}, {
261		key: 'isClosestElement',
262		value: function isClosestElement(target, element) {
263			while (element != target) {
264				target = target.parentNode;
265				if (!target) return false;
266			}
267			return true;
268		}
269	}, {
270		key: 'hideNavBox',
271		value: function hideNavBox() {
272			var _iteratorNormalCompletion5 = true;
273			var _didIteratorError5 = false;
274			var _iteratorError5 = undefined;
275		    onepagerSubNavBtn.click();
276			setTimeout(function () { updateSlideNav(); }, this.speed);
277
278			try {
279				for (var _iterator5 = this.toggleBoxes[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
280					var box = _step5.value;
281
282					if (this.navBoxToggleClass) {
283						box.classList.remove(this.navBoxToggleClass);
284					} else {
285						box.style.display = 'none';
286					}
287				}
288			} catch (err) {
289				_didIteratorError5 = true;
290				_iteratorError5 = err;
291			} finally {
292				try {
293					if (!_iteratorNormalCompletion5 && _iterator5.return) {
294						_iterator5.return();
295					}
296				} finally {
297					if (_didIteratorError5) {
298						throw _iteratorError5;
299					}
300				}
301			}
302
303			this.opened = false;
304		}
305	}, {
306		key: 'showNavBox',
307		value: function showNavBox() {
308			var _iteratorNormalCompletion6 = true;
309			var _didIteratorError6 = false;
310			var _iteratorError6 = undefined;
311
312			try {
313				for (var _iterator6 = this.toggleBoxes[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
314					var box = _step6.value;
315
316					if (this.navBoxToggleClass) {
317						box.classList.add(this.navBoxToggleClass);
318					} else {
319						box.style.display = 'block';
320					}
321				}
322			} catch (err) {
323				_didIteratorError6 = true;
324				_iteratorError6 = err;
325			} finally {
326				try {
327					if (!_iteratorNormalCompletion6 && _iterator6.return) {
328						_iterator6.return();
329					}
330				} finally {
331					if (_didIteratorError6) {
332						throw _iteratorError6;
333					}
334				}
335			}
336
337			this.opened = true;
338		}
339	}]);
340
341	return SlideNav;
342}();