https://www.weseehope.org.uk/wp-content/plugins/responsive-menu/v4.0.0/assets/js/rmp-menu.js?ver=4.6.0

1/**
2 * This file contain the scrips for menu frontend.
3 * @author ExpressTech System
4 *
5 * @since 4.0.0
6 */
7
8jQuery( document ).ready( function( jQuery ) {
9
10	/**
11	 * RmpMenu Class
12	 * This RMP class is handling the frontend events and action on menu elements.
13	 * @since      4.0.0
14	 * @access     public
15	 *
16	 * @class      RmpMenu
17	 */
18	class RmpMenu {
19
20		/**
21		 * This is constructor function which is initialize the elements and options.
22		 * @access public
23		 * @since 4.0.0
24		 * @param {Array} options List of options.
25		 */
26		constructor( options ) {
27			RmpMenu.activeToggleClass        = 'is-active';
28			RmpMenu.openContainerClass       = 'rmp-menu-open';
29			RmpMenu.activeSubMenuArrowClass  = 'rmp-menu-subarrow-active';
30			RmpMenu.subMenuClass             = '.rmp-submenu';
31			RmpMenu.activeTopMenuClass  	 = 'rmp-topmenu-active';
32
33			this.options = options;
34			this.menuId  = this.options['menu_id'];
35			this.trigger = '#rmp_menu_trigger-' + this.menuId;
36
37			this.isOpen  = false;
38
39			this.container    =  '#rmp-container-' + this.menuId;
40			this.headerBar    =  '#rmp-header-bar-' + this.menuId;
41			this.menuWrap     =  'ul#rmp-menu-'+ this.menuId;
42			this.subMenuArrow = '.rmp-menu-subarrow';
43			this.wrapper      = '.rmp-container';
44			this.linkElement  = '.rmp-menu-item-link';
45			this.pageWrapper  = this.options['page_wrapper'];
46			this.use_desktop_menu = this.options['use_desktop_menu'];
47			this.originalHeight = '',
48			this.animationSpeed        =  this.options['animation_speed'] * 1000;
49			this.hamburgerBreakpoint   =  this.options['tablet_breakpoint'];
50			this.subMenuTransitionTime =  this.options['sub_menu_speed'] * 1000;
51
52			if ( this.options['button_click_trigger'].length > 0 ) {
53				this.trigger = this.trigger +' , '+ this.options['button_click_trigger'];
54			}
55
56			//Append hamburger icon inside an element
57			if ( this.options['button_position_type'] == 'inside-element' ) {
58				var destination = jQuery(this.trigger).attr('data-destination');
59				jQuery(this.trigger).appendTo(jQuery(destination).parent());
60			}
61
62			this.init();
63		}
64
65		/**
66		 * This function register the events and initiate the menu settings.
67		 */
68		init() {
69			const self = this;
70
71			/**
72			 * Register click event of trigger.
73			 * @fires click
74			 */
75			jQuery( this.trigger ).on( 'click', function( e ) {
76				e.stopPropagation();
77				self.triggerMenu();
78			} );
79
80			// Show/Hide sub menu item when click on item toggle.
81			jQuery( self.menuWrap ).find( self.subMenuArrow ).on( 'click', function( e ) {
82				e.preventDefault();
83				e.stopPropagation();
84				self.triggerSubArrow( this );
85			});
86
87			if ( 'on' == self.options['menu_close_on_body_click'] ) {
88				jQuery( document ).on( 'click', 'body', function ( e ) {
89					if ( jQuery( window ).width() < self.hamburgerBreakpoint ) {
90						if ( self.isOpen ) {
91							if ( jQuery( e.target ).closest( self.container ).length || jQuery( e.target ).closest( self.target ).length ) {
92								return;
93							}
94						}
95						self.closeMenu();
96					}
97				});
98			}
99
100			/**
101			 * Close the menu when click on menu item link before load.
102			 */
103			if ( self.options['menu_close_on_link_click'] == 'on') {
104
105				jQuery(  this.menuWrap +' '+ self.linkElement ).on( 'click', function(e) {
106
107					if( jQuery(window).width() < self.hamburgerBreakpoint ) {
108						e.preventDefault();
109
110						// When close menu on parent clicks is on.
111						if ( self.options['menu_item_click_to_trigger_submenu'] == 'on' ) {
112							if( jQuery(this).is( '.rmp-menu-item-has-children > ' + self.linkElement ) ) {
113								return;
114							}
115						}
116
117						let _href = jQuery(this).attr('href');
118						let _target = ( typeof jQuery(this).attr('target') ) == 'undefined' ? '_self' : jQuery(this).attr('target');
119
120						if( self.isOpen ) {
121							if( jQuery(e.target).closest(this.subMenuArrow).length) {
122								return;
123							}
124							if( typeof _href != 'undefined' ) {
125								self.closeMenu();
126								setTimeout(function() {
127									window.open( _href, _target);
128								}, self.animationSpeed);
129							}
130						}
131					}
132				});
133			}
134
135			// Expand Sub items on Parent Item Click.
136			if ( 'on' == self.options['menu_item_click_to_trigger_submenu']  ) {
137				jQuery( this.menuWrap +' .rmp-menu-item-has-children > ' + self.linkElement ).on( 'click', function(e) {
138					if ( jQuery(window).width() < self.hamburgerBreakpoint ) {
139						e.preventDefault();
140						self.triggerSubArrow(
141							jQuery(this).children( '.rmp-menu-subarrow' ).first()
142						);
143					}
144				});
145			}
146
147			jQuery(document).on('keydown', function (event) {
148				let menuOpen = jQuery('.rmp-container.rmp-menu-open');
149				if (menuOpen.length) {
150					let activeMenu = menuOpen.find('.rmp-selected-menu-item').length ? menuOpen.find('.rmp-selected-menu-item') : menuOpen.find('.rmp-menu-current-item');
151					let parentContainer = jQuery('.rmp-container.rmp-menu-open');
152					let menuItems = menuOpen.find('.rmp-menu-item');
153
154					if (event.keyCode === 9) {
155						menuItems.removeClass('rmp-selected-menu-item');
156						if (activeMenu.length) {
157							if (activeMenu.hasClass('rmp-menu-item-has-children')) {
158								activeMenu.children('.rmp-menu-item-link').first().find('.rmp-menu-subarrow').click();
159								let firstChild = activeMenu.find('.rmp-submenu').children('.rmp-menu-item').first();
160								firstChild.addClass('rmp-selected-menu-item').children('.rmp-menu-item-link').first().focus();
161							} else {
162								let nextMenu = activeMenu.next('.rmp-menu-item');
163								if (nextMenu.length) {
164									nextMenu.addClass('rmp-selected-menu-item').children('.rmp-menu-item-link').first().focus();
165								} else {
166									let parentSubmenu = activeMenu.closest('.rmp-submenu');
167									if (parentSubmenu.length) {
168										let parentMenu = parentSubmenu.closest('.rmp-menu-item');
169										let nextSibling = parentMenu.next('.rmp-menu-item');
170										parentMenu.children('.rmp-menu-item-link').first().find('.rmp-menu-subarrow').click();
171										if (nextSibling.length) {
172											nextSibling.addClass('rmp-selected-menu-item').children('.rmp-menu-item-link').first().focus();
173										} else {
174											let parentSibling = parentMenu.closest('.rmp-submenu').closest('.rmp-menu-item').next('.rmp-menu-item');
175											if (parentSibling.length) {
176												parentSibling.find('.rmp-menu-item-link').addClass('rmp-selected-menu-item').children('.rmp-menu-item-link').first().focus();
177											} else {
178												parentContainer.find('.rmp-menu-item').first().addClass('rmp-selected-menu-item').children('.rmp-menu-item-link').first().focus();
179											}
180										}
181									} else {
182										parentContainer.find('.rmp-menu-item').first().addClass('rmp-selected-menu-item').children('.rmp-menu-item-link').first().focus();
183									}
184								}
185							}
186						} else {
187							menuItems.first().addClass('rmp-selected-menu-item').children('.rmp-menu-item-link').first().focus();
188						}
189						event.preventDefault();
190					}
191
192					if (event.keyCode === 13 && activeMenu.length) {
193						activeMenu.click();
194					}
195				}
196			});
197			// Add rmp-topmenu-active class to current menu item on load
198			this.setActiveMenuItemOnLoad();
199
200		}
201		// Add rmp-topmenu-active class to current menu item on load
202		setActiveMenuItemOnLoad() {
203			const currentURL = window.location.href;
204			const menuItems = jQuery(this.menuWrap).find('a');
205
206			menuItems.each(function() {
207				if (this.href === currentURL) {
208					jQuery(this).closest('.rmp-menu-item-has-children').addClass(RmpMenu.activeTopMenuClass);
209					return false; // Exit the loop once we've found and marked the current item
210				}
211			});
212		}
213		/**
214		 * Set push translate for toggle and page wrapper.
215		 */
216		setWrapperTranslate() {
217			let translate,translateContainer;
218			switch( this.options['menu_appear_from'] ) {
219				case 'left':
220					translate = 'translateX(' + this.menuWidth() + 'px)';
221					translateContainer = 'translateX(-' + this.menuWidth() + 'px)';
222					break;
223				case 'right':
224					translate = 'translateX(-' + this.menuWidth() + 'px)';
225					translateContainer = 'translateX(' + this.menuWidth() + 'px)';
226					break;
227				case 'top':
228					translate = 'translateY(' + this.wrapperHeight() + 'px)';
229					translateContainer = 'translateY(-' + this.menuHeight() + 'px)';
230					break;
231				case 'bottom':
232					translate = 'translateY(-' + this.menuHeight() + 'px)';
233					translateContainer = 'translateY(' + this.menuHeight() + 'px)';
234					break;
235			}
236
237			if ( this.options['animation_type'] == 'push' ) {
238				jQuery(this.pageWrapper).css( { 'transform':translate } );
239
240				//If push Wrapper has body element then handle menu position.
241				if	( 'body' == this.pageWrapper ) {
242					jQuery( this.container ).css( { 'transform' : translateContainer } );
243				}
244
245			}
246
247			if ( this.options['button_push_with_animation'] == 'on' ) {
248				jQuery( this.trigger ).css( { 'transform' : translate } );
249			}
250
251		}
252
253		/**
254		 * Clear push translate on button and page wrapper.
255		 */
256		clearWrapperTranslate() {
257
258			if ( this.options['animation_type'] == 'push' ) {
259				jQuery(this.pageWrapper).css( { 'transform' : '' } );
260			}
261
262			if ( this.options['button_push_with_animation'] == 'on' ) {
263				jQuery( this.trigger ).css( { 'transform' : '' } );
264			}
265		}
266
267		/**
268		 * Function to fadeIn the hamburger menu container.
269		 */
270		fadeMenuIn() {
271			jQuery(this.container).fadeIn(this.animationSpeed);
272		}
273
274		/**
275		 * Function to fadeOut the hamburger menu container.
276		 */
277		fadeMenuOut() {
278			jQuery(this.container)
279				.fadeOut(this.animationSpeed, function() {
280					jQuery(this).css('display', '');
281				});
282		}
283
284		/**
285		 * Function is use to open the hamburger menu.
286		 *
287		 * @since 4.0.0
288		 */
289		openMenu() {
290			var self = this;
291			jQuery(this.trigger).addClass(RmpMenu.activeToggleClass);
292			jQuery(this.container).addClass(RmpMenu.openContainerClass);
293
294			//this.pushMenuTrigger();
295
296			if ( this.options['animation_type'] == 'fade'){
297				this.fadeMenuIn();
298			} else {
299				this.setWrapperTranslate();
300			}
301
302			this.isOpen = true;
303		}
304
305		/**
306		 * Function is use to close the hamburger menu.
307		 *
308		 * @since 4.0.0
309		 */
310		closeMenu() {
311			jQuery(this.trigger).removeClass(RmpMenu.activeToggleClass);
312			jQuery(this.container).removeClass(RmpMenu.openContainerClass);
313
314			if ( this.options['animation_type'] == 'fade') {
315				this.fadeMenuOut();
316			} else {
317				this.clearWrapperTranslate();
318			}
319
320			this.isOpen = false;

321		}
322
323		/**
324		 * Function is responsible for checking the menu is open or close.
325		 *
326		 * @since 4.0.0
327		 * @param {Event} e
328		 */
329		triggerMenu() {
330			this.isOpen ? this.closeMenu() : this.openMenu();
331		}
332
333		triggerSubArrow( subArrow ) {
334			var self = this;
335			var sub_menu = jQuery( subArrow ).parent().siblings( RmpMenu.subMenuClass );
336
337			//Accordion animation.
338			if ( self.options['accordion_animation'] == 'on' ) {
339				// Get Top Most Parent and the siblings.
340				var top_siblings   = sub_menu.parents('.rmp-menu-item-has-children').last().siblings('.rmp-menu-item-has-children');
341				var first_siblings = sub_menu.parents('.rmp-menu-item-has-children').first().siblings('.rmp-menu-item-has-children');
342
343				// Close up just the top level parents to key the rest as it was.
344				top_siblings.children('.rmp-submenu').slideUp(self.subMenuTransitionTime, 'linear').removeClass('rmp-submenu-open');
345
346				// Set each parent arrow to inactive.
347				top_siblings.each(function() {
348					jQuery(this).find(self.subMenuArrow).first().html(self.options['inactive_toggle_contents']);
349					jQuery(this).find(self.subMenuArrow).first().removeClass(RmpMenu.activeSubMenuArrowClass);
350				});
351
352				// Now Repeat for the current item siblings.
353				first_siblings.children('.rmp-submenu').slideUp(self.subMenuTransitionTime, 'linear').removeClass('rmp-submenu-open');
354				first_siblings.each(function() {
355					jQuery(this).find(self.subMenuArrow).first().html(self.options['inactive_toggle_contents']);
356					jQuery(this).find(self.subMenuArrow).first().removeClass(RmpMenu.activeSubMenuArrowClass);
357				});
358			}
359
360			// Active sub menu as default behavior.
361			if( sub_menu.hasClass('rmp-submenu-open') ) {
362				sub_menu.slideUp(self.subMenuTransitionTime, 'linear',function() {
363					jQuery(this).css( 'display', '' );
364				} ).removeClass('rmp-submenu-open');
365				jQuery( subArrow ).html( self.options['inactive_toggle_contents'] );
366				jQuery( subArrow ).removeClass(RmpMenu.activeSubMenuArrowClass);
367			} else {
368				sub_menu.slideDown(self.subMenuTransitionTime, 'linear').addClass( 'rmp-submenu-open' );
369				jQuery( subArrow ).html(self.options['active_toggle_contents'] );
370				jQuery( subArrow ).addClass(RmpMenu.activeSubMenuArrowClass);
371			}
372
373		}
374
375		/**
376		 * Function to add tranform style on trigger.
377		 *
378		 * @version 4.0.0
379		 *
380		 * @param {Event} e Event object.
381		 */
382		pushMenuTrigger( e ) {
383			if ( 'on' == this.options['button_push_with_animation'] ) {
384				jQuery( this.trigger ).css( { 'transform' : this.menuWidth() } );
385			}
386		}
387
388		/**
389		 * Returns the height of container.
390		 *
391		 * @version 4.0.0
392		 *
393		 * @return Number
394		 */
395		menuHeight() {
396			return jQuery( this.container ).height();
397		}
398
399		/**
400		 * Returns the width of the container.
401		 *
402		 * @version 4.0.0
403		 *
404		 * @return Number
405		 */
406		menuWidth() {
407			return jQuery( this.container ).width();
408		}
409
410		wrapperHeight() {
411			return jQuery( this.wrapper ).height();
412		}
413
414		backUpSlide( backButton ) {
415			let translateTo = parseInt( jQuery( this.menuWrap )[0].style.transform.replace( /^\D+/g, '' ) ) - 100;
416			jQuery( this.menuWrap ).css( { 'transform': 'translateX(-' + translateTo + '%)' } );
417			let previousSubmenuHeight = jQuery( backButton ).parent( 'ul' ).parent( 'li' ).parent( '.rmp-submenu' ).height();
418			if ( ! previousSubmenuHeight ) {
419				jQuery( this.menuWrap ).css( { 'height': this.originalHeight } );
420			} else {
421				jQuery( this.menuWrap + this.menuId ).css( { 'height': previousSubmenuHeight + 'px' } );
422			}
423		}
424	}
425
426	/**
427	 * Create multiple instance of menu and pass the options.
428	 *
429	 * @version 4.0.0
430	 */
431	for ( let index = 0; index < rmp_menu.menu.length; index++ ) {
432		let rmp = new RmpMenu( rmp_menu.menu[index] );
433	}
434
435} );