https://vallummag.com/wp-content/plugins/responsive-menu/v4.0.0/assets/js/rmp-menu.js?ver=1790855360

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		/**
148		 * Set push translate for toggle and page wrapper.
149		 */
150		setWrapperTranslate() {
151			let translate,translateContainer;
152			switch( this.options['menu_appear_from'] ) {
153				case 'left':
154					translate = 'translateX(' + this.menuWidth() + 'px)';
155					translateContainer = 'translateX(-' + this.menuWidth() + 'px)';
156					break;
157				case 'right':
158					translate = 'translateX(-' + this.menuWidth() + 'px)';
159					translateContainer = 'translateX(' + this.menuWidth() + 'px)';
160					break;
161				case 'top':
162					translate = 'translateY(' + this.wrapperHeight() + 'px)';
163					translateContainer = 'translateY(-' + this.menuHeight() + 'px)';
164					break;
165				case 'bottom':
166					translate = 'translateY(-' + this.menuHeight() + 'px)';
167					translateContainer = 'translateY(' + this.menuHeight() + 'px)';
168					break;
169			}
170
171			if ( this.options['animation_type'] == 'push' ) {
172				jQuery(this.pageWrapper).css( { 'transform':translate } );
173
174				//If push Wrapper has body element then handle menu position.
175				if	( 'body' == this.pageWrapper ) {
176					jQuery( this.container ).css( { 'transform' : translateContainer } );
177				}
178
179			}
180
181			if ( this.options['button_push_with_animation'] == 'on' ) {
182				jQuery( this.trigger ).css( { 'transform' : translate } );
183			}
184
185		}
186
187		/**
188		 * Clear push translate on button and page wrapper.
189		 */
190		clearWrapperTranslate() {
191
192			if ( this.options['animation_type'] == 'push' ) {
193				jQuery(this.pageWrapper).css( { 'transform' : '' } );
194			}
195
196			if ( this.options['button_push_with_animation'] == 'on' ) {
197				jQuery( this.trigger ).css( { 'transform' : '' } );
198			}
199		}
200
201		/**
202		 * Function to fadeIn the hamburger menu container.
203		 */
204		fadeMenuIn() {
205			jQuery(this.container).fadeIn(this.animationSpeed);
206		}
207
208		/**
209		 * Function to fadeOut the hamburger menu container.
210		 */
211		fadeMenuOut() {
212			jQuery(this.container)
213				.fadeOut(this.animationSpeed, function() {
214					jQuery(this).css('display', '');
215				});
216		}
217
218		/**
219		 * Function is use to open the hamburger menu.
220		 *
221		 * @since 4.0.0
222		 */
223		openMenu() {
224			var self = this;
225			jQuery(this.trigger).addClass(RmpMenu.activeToggleClass);
226			jQuery(this.container).addClass(RmpMenu.openContainerClass);
227
228			//this.pushMenuTrigger();
229
230			if ( this.options['animation_type'] == 'fade'){
231				this.fadeMenuIn();
232			} else {
233				this.setWrapperTranslate();
234			}
235
236			this.isOpen = true;
237		}
238
239		/**
240		 * Function is use to close the hamburger menu.
241		 *
242		 * @since 4.0.0
243		 */
244		closeMenu() {
245			jQuery(this.trigger).removeClass(RmpMenu.activeToggleClass);
246			jQuery(this.container).removeClass(RmpMenu.openContainerClass);
247
248			if ( this.options['animation_type'] == 'fade') {
249				this.fadeMenuOut();
250			} else {
251				this.clearWrapperTranslate();
252			}
253
254			this.isOpen = false;

255		}
256
257		/**
258		 * Function is responsible for checking the menu is open or close.
259		 *
260		 * @since 4.0.0
261		 * @param {Event} e
262		 */
263		triggerMenu() {
264			this.isOpen ? this.closeMenu() : this.openMenu();
265		}
266
267		triggerSubArrow( subArrow ) {
268			var self = this;
269			var sub_menu = jQuery( subArrow ).parent().siblings( RmpMenu.subMenuClass );
270
271			//Accordion animation.
272			if ( self.options['accordion_animation'] == 'on' ) {
273				// Get Top Most Parent and the siblings.
274				var top_siblings   = sub_menu.parents('.rmp-menu-item-has-children').last().siblings('.rmp-menu-item-has-children');
275				var first_siblings = sub_menu.parents('.rmp-menu-item-has-children').first().siblings('.rmp-menu-item-has-children');
276
277				// Close up just the top level parents to key the rest as it was.
278				top_siblings.children('.rmp-submenu').slideUp(self.subMenuTransitionTime, 'linear').removeClass('rmp-submenu-open');
279
280				// Set each parent arrow to inactive.
281				top_siblings.each(function() {
282					jQuery(this).find(self.subMenuArrow).first().html(self.options['inactive_toggle_contents']);
283					jQuery(this).find(self.subMenuArrow).first().removeClass(RmpMenu.activeSubMenuArrowClass);
284					jQuery(this).removeClass(RmpMenu.activeTopMenuClass);
285				});
286
287				// Now Repeat for the current item siblings.
288				first_siblings.children('.rmp-submenu').slideUp(self.subMenuTransitionTime, 'linear').removeClass('rmp-submenu-open');
289				first_siblings.each(function() {
290					jQuery(this).find(self.subMenuArrow).first().html(self.options['inactive_toggle_contents']);
291					jQuery(this).find(self.subMenuArrow).first().removeClass(RmpMenu.activeSubMenuArrowClass);
292					jQuery(this).removeClass(RmpMenu.activeTopMenuClass);
293				});
294			}
295
296			// Active sub menu as default behavior.
297			if( sub_menu.hasClass('rmp-submenu-open') ) {
298				sub_menu.slideUp(self.subMenuTransitionTime, 'linear',function() {
299					jQuery(this).css( 'display', '' );
300				} ).removeClass('rmp-submenu-open');
301				jQuery( subArrow ).html( self.options['inactive_toggle_contents'] );
302				jQuery( subArrow ).removeClass(RmpMenu.activeSubMenuArrowClass);
303				jQuery( subArrow ).closest( '.rmp-menu-item-has-children' ).removeClass(RmpMenu.activeTopMenuClass);
304			} else {
305				sub_menu.slideDown(self.subMenuTransitionTime, 'linear').addClass( 'rmp-submenu-open' );
306				jQuery( subArrow ).html(self.options['active_toggle_contents'] );
307				jQuery( subArrow ).addClass(RmpMenu.activeSubMenuArrowClass);
308				jQuery( subArrow ).closest( '.rmp-menu-item-has-children' ).addClass(RmpMenu.activeTopMenuClass);
309			}
310
311		}
312
313		/**
314		 * Function to add tranform style on trigger.
315		 *
316		 * @version 4.0.0
317		 *
318		 * @param {Event} e Event object.
319		 */
320		pushMenuTrigger( e ) {
321			if ( 'on' == this.options['button_push_with_animation'] ) {
322				jQuery( this.trigger ).css( { 'transform' : this.menuWidth() } );
323			}
324		}
325
326		/**
327		 * Returns the height of container.
328		 *
329		 * @version 4.0.0
330		 *
331		 * @return Number
332		 */
333		menuHeight() {
334			return jQuery( this.container ).height();
335		}
336
337		/**
338		 * Returns the width of the container.
339		 *
340		 * @version 4.0.0
341		 *
342		 * @return Number
343		 */
344		menuWidth() {
345			return jQuery( this.container ).width();
346		}
347
348		wrapperHeight() {
349			return jQuery( this.wrapper ).height();
350		}
351
352		backUpSlide( backButton ) {
353			let translateTo = parseInt( jQuery( this.menuWrap )[0].style.transform.replace( /^\D+/g, '' ) ) - 100;
354			jQuery( this.menuWrap ).css( { 'transform': 'translateX(-' + translateTo + '%)' } );
355			let previousSubmenuHeight = jQuery( backButton ).parent( 'ul' ).parent( 'li' ).parent( '.rmp-submenu' ).height();
356			if ( ! previousSubmenuHeight ) {
357				jQuery( this.menuWrap ).css( { 'height': this.originalHeight } );
358			} else {
359				jQuery( this.menuWrap + this.menuId ).css( { 'height': previousSubmenuHeight + 'px' } );
360			}
361		}
362	}
363
364	/**
365	 * Create multiple instance of menu and pass the options.
366	 *
367	 * @version 4.0.0
368	 */
369	for ( let index = 0; index < rmp_menu.menu.length; index++ ) {
370		let rmp = new RmpMenu( rmp_menu.menu[index] );
371	}
372
373} );