https://realinternet.ru/wp-content/themes/line/moby/moby.js

1/**
2 * T A B L E   O F   C O N T E N T S
3 *
4 * @author      Josh Sanger
5 * @version     2.0.6
6 *
7 * 01. INIT MOBY
8 * 02. CLASS VARIABLES
9 * 03. CLOSE MOBY
10 * 04. CLONE MENU
11 * 05. OPEN MOBY
12 * 06. BREAKPOINT RESIZE
13 * 07. MOBY EXPAND SUB MENU
14 * 06. MOBY PREVENT DUMMY LINKS
15 */
16
17
18/**
19 * 01. INIT MOBY
20 * Sets up the Moby class
21 */
22var Moby = function(options) {
23
24    Moby.instances++;
25
26    // Set defaults
27
28
29
30    this.breakpoint         = (typeof(options.breakpoint) == 'undefined' ? 1024 : options.breakpoint);
31    this.enableEscape       = (typeof(options.enableEscape) == 'undefined' ? true : options.enableEscape);
32    this.menu               = (typeof(options.menu) == 'undefined' ? jQuery('#main-nav') : options.menu);
33    this.menuClass          = (typeof(options.menuClass) == 'undefined' ? 'right-side' : options.menuClass);
34    this.mobyTrigger        = (typeof(options.mobyTrigger) == 'undefined' ? jQuery('#moby-button') : options.mobyTrigger);
35    this.onClose            = (typeof(options.onClose) == 'undefined' ? false : options.onClose);;
36    this.onOpen             = (typeof(options.onOpen) == 'undefined' ? false : options.onOpen);;
37    this.overlay            = (typeof(options.overlay) == 'undefined' ? true : options.overlay);
38    this.overlayClass       = (typeof(options.overlayClass) == 'undefined' ? 'dark' : options.overlayClass);
39    this.subMenuOpenIcon    = (typeof(options.subMenuOpenIcon) == 'undefined' ? '<span>&#x25BC;</span>' : options.subMenuOpenIcon);
40    this.subMenuCloseIcon   = (typeof(options.subMenuCloseIcon) == 'undefined' ? '<span>&#x25B2;</span>' : options.subMenuCloseIcon);
41    this.template           = (typeof(options.template) == 'undefined' ? false : options.template);
42
43    // add the overlay to the beginning of the body
44    if (this.overlay === true) {
45
46        jQuery('body').prepend('<div class="moby-overlay ' + this.overlayClass + '" id="moby-overlay' + Moby.instances + '"></div>');
47        this.overlaySelector = jQuery('body').find('#moby-overlay' + Moby.instances);
48        this.overlaySelector.on('click', this.closeMoby.bind(this));
49    }
50
51    // add moby markup
52    jQuery('body').prepend('<div class="moby moby-hidden ' + this.menuClass + '" id="moby' + Moby.instances + '"></div>');
53    this.mobySelector = jQuery('body').find('#moby' + Moby.instances);
54    this.cloneMenu();
55
56    // assign close function
57    this.mobySelector.on('click', '.moby-close', this.closeMoby.bind(this));
58
59    // if the escapeLey functinality is desired (or left undefined), assign close function to the escape key
60    if (this.enableEscape === true) {
61
62        jQuery(document).on('keydown', function(e) {
63
64            if (e.keyCode == 27) {
65                this.closeMoby();
66            }
67        }.bind(this));
68    }
69
70    // assign the open function to the mobyTrigger
71    this.mobyTrigger.on('click', this.openMoby.bind(this));
72
73    // Assign breakpointResize function when the window resizes
74    jQuery(window).on('resize', this.breakpointResize.bind(this));
75
76    // Assign mobyExpandSubMenu to sub menu icons
77    this.mobySelector.on('click', '.moby-expand', function(e){
78
79        e.preventDefault();
80        e.stopPropagation();
81        this.mobyExpandSubMenu(jQuery(e.currentTarget));
82    }.bind(this));
83
84    // Assign mobyPreventDummyLinks to links
85    this.mobySelector.on('click', 'a', this.mobyPreventDummyLinks.bind(this));
86};
87
88
89/**
90 * 02. CLASS VARIABLES
91 * Variables that will be used throughout the class
92 */
93Moby.instances       = 0;
94Moby.slideTransition = 200;
95
96
97/**
98 * 03. CLOSE MOBY
99 * Closes the Moby menu
100 */
101Moby.prototype.closeMoby = function() {
102
103    var mobyActive = jQuery('body').find('.moby.moby-active');
104
105    if (mobyActive.length > 0) {
106
107        if (this.overlay === true) {
108            jQuery('body').find('.moby-overlay.moby-overlay-active').removeClass('moby-overlay-active');
109        }
110        mobyActive.removeClass('moby-active');
111        jQuery('body').removeClass('moby-body-fixed');
112
113        if (this.onClose !== false) {
114            this.onClose();
115        }
116    }
117};
118
119
120/**
121 * 04. CLONE MENU
122 * Clones the menu that the user specified and removes all ids
123 */
124Moby.prototype.cloneMenu = function() {
125
126    var mobyMarkup  = '';
127    var submenuIcon = this.subMenuOpenIcon;
128
129    if (this.template === false) {
130        mobyMarkup  = '<div class="moby-wrap">';
131        mobyMarkup +=     '<div class="moby-close"><span class="moby-close-icon"></span> Close Menu</div>';
132        mobyMarkup +=     '<div class="moby-menu"></div>';
133        mobyMarkup += '</div>';
134    } else {
135        mobyMarkup = this.template;
136    }
137
138    this.mobySelector.append(mobyMarkup);
139
140    if (this.mobySelector.find('.moby-menu').length < 1) {
141        console.error('You must have a moby-menu class in your template!');
142        return false;

143    }
144
145    this.menu.clone().appendTo(this.mobySelector.find('.moby-menu'));
146
147    this.mobySelector.find('.moby-menu *[id]').removeAttr('id');
148
149    this.mobySelector.find('.moby-menu li').each(function() {
150
151        if (jQuery(this).find('ul').length > 0) {
152            jQuery(this).find('> a').append("<span class='moby-expand'>" + submenuIcon + '</span>');
153        }
154    });
155
156    this.mobySelector.removeClass('moby-hidden');
157};
158
159
160/**
161 * 05. OPEN MOBY
162 * Opens the Moby menu
163 */
164Moby.prototype.openMoby = function() {
165
166    // moby-active should be used to initiate the animation in your css file
167    this.mobySelector.addClass('moby-active');
168
169    // When the menu is open, don't allow the user to scroll through the page
170    jQuery('body').addClass('moby-body-fixed');
171
172    // Show the overlay
173    if (this.overlay === true) {
174        this.overlaySelector.addClass('moby-overlay-active');
175    }
176
177    if (this.onOpen !== false) {
178        this.onOpen();
179    }
180};
181
182
183/**
184 * 06. BREAKPOINT RESIZE
185 * Checks to see if the viewport width has changed. If so, close the menu
186 */
187Moby.prototype.breakpointResize = function() {
188
189    var w = window.outerWidth;
190
191    if (this.breakpoint === false) {
192        return false;
193    } else {
194
195        if (w >= this.breakpoint && this.mobySelector.hasClass('moby-active')) {
196            this.closeMoby();
197        }
198    }
199};
200
201
202/**
203 * 07. MOBY EXPAND SUB MENU
204 * Expands the sub menu (nested <ul>)
205 *
206 * @param       elem        element     The element that was clicked
207 */
208Moby.prototype.mobyExpandSubMenu = function(elem) {
209
210    if (!elem.hasClass('moby-submenu-open')) {
211        elem.addClass('moby-submenu-open');
212        elem.html(this.subMenuCloseIcon);
213        elem.parents('li').first().find('> ul').slideDown(Moby.slideTransition);
214    } else {
215        elem.removeClass('moby-submenu-open');
216        elem.html(this.subMenuOpenIcon);
217        elem.parents('li').first().find('> ul').slideUp(Moby.slideTransition);
218    }
219};
220
221
222/**
223 * 06. MOBY PREVENT DUMMY LINKS
224 * Prevents the default link behavior on links with no URL, then triggers the .moby-expand
225 */
226Moby.prototype.mobyPreventDummyLinks = function(e) {
227
228    var mobyExpand = jQuery(this).find('> .moby-expand');
229
230    if (jQuery(this).attr('href') == "#") {
231
232        e.preventDefault();
233
234        if (mobyExpand.length > 0) {
235            mobyExpand.trigger('click');
236        }
237    }
238};