https://www.epogen.com/-/media/Base-Themes/Components-Theme/Scripts/component-navigation.js

1/**
2 * Component Navigation
3 * @module Navigation
4 * @param  {jQuery} $ Instance of jQuery
5 * @return {Object} List of navigation methods
6 */
7XA.component.navigation = (function($) {
8    var timeout = 200,
9        timer = 0,
10        submenu,
11        dropDownEvents = {
12            show: function(sm) {
13                this.debounce();
14                submenu = sm;
15                submenu.closest("li").addClass("show");
16            },
17            debounce: function() {
18                if (timer) {
19                    clearTimeout(timer);
20                    timer = null;
21                }
22            },
23            hide: function() {
24                if (submenu) {
25                    submenu.closest("li").removeClass("show");
26                }
27            },
28            queueHide: function() {
29                timer = setTimeout(function() {
30                    dropDownEvents.hide();
31                }, timeout);
32            },
33            focus: function() {
34                $(this)
35                    .closest("li")
36                    .siblings()
37                    .removeClass("show");
38                $(this)
39                    .closest("li")
40                    .addClass("show");
41            },
42            blur: function() {
43                if (
44                    $(this)
45                        .closest("li")
46                        .is(".last")
47                ) {
48                    $(this)
49                        .parents(".rel-level1")
50                        .removeClass("show");
51                }
52            }
53        };
54
55    /**
56     * Prepares DOM structure of Navigation component and
57     * adds Event listeners of showing and hiding
58     * different levels of navigation.
59     * @method
60     * @alias module:Navigation.dropDownNavigation
61     * @memberOf module:Navigation
62     * breadcrum elements wrapped by jquery
63     * @param {jQuery} navi Root DOM element of
64     * navigation component wrapped by jQuery
65     * @private
66     */
67    function dropDownNavigation(navi) {
68        navi.on(
69            "mouseover",
70            ".rel-level1 > a, .rel-level1 >.navigation-title>a, .rel-level2 >.navigation-title>a",
71            function() {
72                $(this)
73                    .closest("li")
74                    .siblings()
75                    .removeClass("show");
76                $(this)
77                    .closest("li.rel-level1")
78                    .siblings()
79                    .removeClass("show");
80                $(this)
81                    .closest("li.rel-level1")
82                    .siblings()
83                    .find(".show")
84                    .removeClass("show");
85                var elem = $(this)
86                    .closest("li")
87                    .find(">ul");
88                dropDownEvents.show(elem);
89            }
90        );
91        navi.on(
92            "mouseleave",
93            ".rel-level1 > a, .rel-level1 >.navigation-title",
94            dropDownEvents.queueHide
95        );
96        navi.on("mouseover", ".rel-level1 > ul", dropDownEvents.debounce);
97        navi.on("mouseleave", ".rel-level1 > ul", dropDownEvents.queueHide);
98        navi.on(
99            "focus",
100            ".rel-level1 > a, .rel-level1 >.navigation-title, .rel-level1 >.navigation-title",
101            dropDownEvents.focus
102        );
103        navi.on("blur", ".rel-level2 > a", dropDownEvents.blur);
104        navi.on("mouseleave", function() {
105            $(this)
106                .find(".show")
107                .removeClass("show");
108        });
109        navi.find(".rel-level1").each(function() {
110            if ($(this).find("ul").length) {
111                $(this).addClass("submenu");
112            }
113        });
114
115        navi.find(".rel-level2").each(function() {
116            //if level2 menu has children
117            if ($(this).parents("#header") > 0) {
118                if ($(this).find("ul").length) {
119                    $(this).addClass("submenu");
120                    $(this)
121                        .parents(".rel-level1")
122                        .addClass("wide-nav");
123                }
124            }
125
126            //if level2 menu should be navigation-image variant
127            if ($(this).find("> img").length) {
128                $(this).addClass("submenu navigation-image");
129            }
130        });
131
132        navi.on("click", ".sxaToogleNavBtn", function() {
133            var $this = jQuery(this);
134            $this.find(".sxaWrappedList").toggleClass("hidden");
135        });
136    }
137    /**
138     * Prepares DOM structure of Mobile Navigation component and
139     * adds Event listeners of showing and hiding
140     * different levels of navigation.
141     * @method
142     * @alias module:Navigation.mobileNavigation
143     * @memberOf module:Navigation
144     * breadcrum elements wrapped by jquery
145     * @param {jQuery} navi Root DOM element of
146     * navigation component wrapped by jQuery
147     * @private
148     */
149    function mobileNavigation(navi) {
150        function checkChildren(nav) {
151            nav.find(".rel-level1").each(function() {
152                if (!$(this).find("ul").length) {
153                    $(this).addClass("no-child");
154                }
155            });
156        }
157
158        function bindEvents(nav) {
159            nav.find(".navigation-title").on("click", function(e) {
160                var navlvl = $(this).closest("li"),
161                    menuParent = navlvl.parents(".navigation");
162
163                if (menuParent.hasClass("navigation-mobile")) {
164                    if (!$(e.target).is("a")) {
165                        if (navlvl.hasClass("active")) {
166                            navlvl.find(">ul").slideToggle(function() {
167                                navlvl.removeClass("active");
168                            });
169                        } else {
170                            navlvl.find(">ul").slideToggle(function() {
171                                navlvl.addClass("active");
172                            });
173                        }
174                    }
175                }
176            });
177
178            nav.find(".rel-level1").on("focus", function() {
179                $(this)
180                    .siblings("ul")
181                    .slideDown();
182                $(this)
183                    .closest("li")
184                    .siblings()
185                    .find("ul")
186                    .slideUp();
187            });
188        }
189        checkChildren(navi);
190        bindEvents(navi);
191    }
192
193    /**
194     * @method
195     * @alias module:Navigation.toggleIcon
196     * @memberOf module:Navigation
197     * @param {$} toggle
198     * navigation elements wrapped by jquery
199     * @private
200     */
201    function toggleIcon(toggle) {
202        $(toggle).on("click", function() {
203            $(this)
204                .parents(".navigation")
205                .toggleClass("active");
206            $(this).toggleClass("active");
207        });
208    }
209
210    /**
211     * This object stores all public api methods
212     * @type {Object.<Methods>}
213     * @memberOf module:Navigation
214     * */
215    var api = {};
216
217    /**
218     * initIstance method. <br/>
219     * If added <b>navigation-main</b> class
220     * called [dropDownNavigation]{@link module:Navigation.dropDownNavigation},
221     * [mobileNavigation]{@link module:Navigation.mobileNavigation} methods. <br/>
222     * If added <b>navigation-mobile</b> class
223     * called only [mobileNavigation]{@link module:Navigation.mobileNavigation},
224     * @memberOf module:Navigation
225     * @method
226     * @param {jQuery} component Root DOM element of
227     * navigation component wrapped by jQuery
228     * @alias module:Navigation.initInstance
229     */
230    api.initInstance = function(component) {
231        if (component.hasClass("navigation-main")) {
232            dropDownNavigation(component);
233            mobileNavigation(component);
234        } else if (component.hasClass("navigation-mobile")) {
235            mobileNavigation(component);
236        }
237    };
238    /**
239     * init method calls [initInstance]{@link module:Navigation.initInstance} method
240     * in a loop for each navigation component on a page. <br/>
241     *
242     * For navigation with set <b>mobile-nav</b> class
243     * calls [toggleIcon]{@link module:Navigation.toggleIcon} method
244     *
245     * @memberOf module:Navigation
246     * @alias module:Navigation.init
247     */
248    api.init = function() {
249        var navigation = $(".navigation:not(.initialized)");
250        navigation.each(function() {
251            api.initInstance($(this));
252            $(this).addClass("initialized");
253        });
254
255        var toggle = $(".mobile-nav:not(.initialized)");
256        toggle.each(function() {
257            toggleIcon(this);
258            $(this).addClass("initialized");
259        });
260    };
261
262    return api;
263})(jQuery, document);
264
265XA.register("navigation", XA.component.navigation);