*/ _createStyles: function () { if (!styleElement.parentNode) { styleElement.type = "text/css"; document.getElementsByTagName("head")[0].appendChild(styleElement); } }, /** * Removes styles from the */ _removeStyles: function () { if (styleElement.parentNode) { styleElement.parentNode.removeChild(styleElement); } }, /** * Creates Navigation Toggle */ _createToggle: function () { // If there's no toggle, let's create one if (!opts.customToggle) { var toggle = document.createElement("a"); toggle.innerHTML = parseHTML(opts.label); setAttributes(toggle, { "href": "#", "class": "nav-toggle-aycw" }); // Determine where to insert the toggle if (opts.insert === "after") { nav.parentNode.insertBefore(toggle, nav.nextSibling); } else { nav.parentNode.insertBefore(toggle, nav); } navToggle = toggle; // There is a toggle already, let's use that one } else { var toggleEl = opts.customToggle.replace("#", ""); if (document.getElementById(toggleEl)) { navToggle = document.getElementById(toggleEl); } else if (document.querySelector(toggleEl)) { navToggle = document.querySelector(toggleEl); } else { throw new Error("The custom nav toggle you are trying to select doesn't exist"); } } }, /** * Closes the navigation when a link inside is clicked */ _closeOnNavClick: function () { if (opts.closeOnNavClick) { var links = nav.getElementsByTagName("a"), self = this; forEach(links, function (i, el) { addEvent(links[i], "click", function () { if (isMobile) { self.toggle(); } }, false); }); } }, /** * Prevents the default tap functionality * * @param {event} event */ _preventDefault: function(e) { if (e.preventDefault) { if (e.stopImmediatePropagation) { e.stopImmediatePropagation(); } e.preventDefault(); e.stopPropagation(); return false; // This is strictly for old IE } else { e.returnValue = false; } }, /** * On touch start get the location of the touch * and disable pointer events on the body. * * @param {event} event */ _onTouchStart: function (e) { this._preventDefault(e); addClass(document.body, "disable-pointer-events"); this.startX = e.touches[0].clientX; this.startY = e.touches[0].clientY; this.touchHasMoved = false; /** * We remove mouseup event completely here to avoid * double triggering of events. */ removeEvent(navToggle, "mouseup", this, false); }, /** * Check if the user is scrolling instead of tapping and * re-enable pointer events if movement happed. * * @param {event} event */ _onTouchMove: function (e) { if (Math.abs(e.touches[0].clientX - this.startX) > 10 || Math.abs(e.touches[0].clientY - this.startY) > 10) { this._enablePointerEvents(); this.touchHasMoved = true; } }, /** * On touch end toggle either the whole navigation or * a sub-navigation depending on which one was tapped. * * @param {event} event */ _onTouchEnd: function (e) { this._preventDefault(e); if (!isMobile) { return; } // If the user isn't scrolling if (!this.touchHasMoved) { // If the event type is touch if (e.type === "touchend") { this.toggle(); if (opts.insert === "after") { setTimeout(function () { removeClass(document.body, "disable-pointer-events"); }, opts.transition + 300); } return; // Event type was click, not touch } else { var evt = e || window.event; // If it isn't a right click, do toggling if (!(evt.which === 3 || evt.button === 2)) { this.toggle(); } } } }, /** * For keyboard accessibility, toggle the navigation on Enter * keypress too (also sub-navigation is keyboard accessible * which explains the complexity here) * * @param {event} event */ _onKeyUp: function (e) { var evt = e || window.event; if (evt.keyCode === 13) { this.toggle(); } }, /** * Enable pointer events */ _enablePointerEvents: function () { removeClass(document.body, "disable-pointer-events"); }, /** * Adds the needed CSS transitions if animations are enabled */ _transitions: function () { if (opts.animate) { var objStyle = nav.style, transition = "max-height " + opts.transition + "ms"; objStyle.WebkitTransition = transition; objStyle.MozTransition = transition; objStyle.OTransition = transition; objStyle.transition = transition; } }, /** * Calculates the height of the navigation and then creates * styles which are later added to the page */ _calcHeight: function () { var savedHeight = 0; for (var i = 0; i < nav.inner.length; i++) { savedHeight += nav.inner[i].offsetHeight; } // Pointer event styles are also here since they might only be confusing inside the stylesheet var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important} ." + opts.jsClass + " .disable-pointer-events{pointer-events:none !important} ." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened.dropdown-active {max-height:9999px !important}"; if (styleElement.styleSheet) { styleElement.styleSheet.cssText = innerStyles; } else { styleElement.innerHTML = parseHTML(innerStyles); } innerStyles = ""; } }; /** * Return new Responsive Nav */ return new ResponsiveNav(el, options); }; window.responsiveNav = responsiveNav; }(document, window, 0)); //// /** * forEach implementation for Objects/NodeLists/Arrays, automatic type loops and context options * * @private * @author Todd Motto * @link https://github.com/toddmotto/foreach * @param {Array|Object|NodeList} collection - Collection of items to iterate, could be an Array, Object or NodeList * @callback requestCallback callback - Callback function for each iteration. * @param {Array|Object|NodeList} scope=null - Object/NodeList/Array that forEach is iterating over, to use as the this value when executing callback. * @returns {} */ var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)}; var hamburgers = document.querySelectorAll(".hamburger-aycw"); if (hamburgers.length > 0) { forEach(hamburgers, function(hamburger) { hamburger.addEventListener("click", function() { this.classList.toggle("active"); }, false); }); }