https://www.ricettedicultura.com/wp-content/plugins/responsive-menu/v4.0.0/assets/js/rmp-menu.js?ver=4.3.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
32			this.options = options;
33			this.menuId  = this.options['menu_id'];
34			this.trigger = '#rmp_menu_trigger-' + this.menuId;
35
36			this.isOpen  = false;
37
38			this.container    =  '#rmp-container-' + this.menuId;
39			this.headerBar    =  '#rmp-header-bar-' + this.menuId;
40			this.menuWrap     =  'ul#rmp-menu-'+ this.menuId;
41			this.subMenuArrow = '.rmp-menu-subarrow';
42			this.wrapper      = '.rmp-container';
43			this.linkElement  = '.rmp-menu-item-link';
44			this.pageWrapper  = this.options['page_wrapper'];
45			this.use_desktop_menu = this.options['use_desktop_menu'];
46			this.originalHeight = '',
47			this.animationSpeed        =  this.options['animation_speed'] * 1000;
48			this.hamburgerBreakpoint   =  this.options['tablet_breakpoint'];
49			this.subMenuTransitionTime =  this.options['sub_menu_speed'] * 1000;
50
51			if ( this.options['button_click_trigger'].length > 0 ) {
52				this.trigger = this.trigger +' , '+ this.options['button_click_trigger'];
53			}
54
55			//Append hamburger icon inside an element
56			if ( this.options['button_position_type'] == 'inside-element' ) {
57				var destination = jQuery(this.trigger).attr('data-destination');
58				jQuery(this.trigger).appendTo(jQuery(destination).parent());
59			}
60
61			this.init();
62		}
63
64		/**
65		 * This function register the events and initiate the menu settings.
66		 */
67		init() {
68			const self = this;
69
70			/**
71			 * Register click event of trigger.
72			 * @fires click
73			 */
74			jQuery( this.trigger ).on( 'click', function( e ) {
75				e.stopPropagation();
76				self.triggerMenu();
77			} );
78
79			// Show/Hide sub menu item when click on item toggle.
80			jQuery( self.menuWrap ).find( self.subMenuArrow ).on( 'click', function( e ) {
81				e.preventDefault();
82				e.stopPropagation();
83				self.triggerSubArrow( this );
84			});
85
86			if ( 'on' == self.options['menu_close_on_body_click'] ) {
87				jQuery( document ).on( 'click', 'body', function ( e ) {
88					if ( jQuery( window ).width() < self.hamburgerBreakpoint ) {
89						if ( self.isOpen ) {
90							if ( jQuery( e.target ).closest( self.container ).length || jQuery( e.target ).closest( self.target ).length ) {
91								return;
92							}
93						}
94						self.closeMenu();
95					}
96				});
97			}
98
99			/**
100			 * Close the menu when click on menu item link before load.
101			 */
102			if ( self.options['menu_close_on_link_click'] == 'on') {
103
104				jQuery(  this.menuWrap +' '+ self.linkElement ).on( 'click', function(e) {
105
106					if( jQuery(window).width() < self.hamburgerBreakpoint ) {
107						e.preventDefault();
108
109						// When close menu on parent clicks is on.
110						if ( self.options['menu_item_click_to_trigger_submenu'] == 'on' ) {
111							if( jQuery(this).is( '.rmp-menu-item-has-children > ' + self.linkElement ) ) {
112								return;
113							}
114						}
115
116						let _href = jQuery(this).attr('href');
117						let _target = ( typeof jQuery(this).attr('target') ) == 'undefined' ? '_self' : jQuery(this).attr('target');
118
119						if( self.isOpen ) {
120							if( jQuery(e.target).closest(this.subMenuArrow).length) {
121								return;
122							}
123							if( typeof _href != 'undefined' ) {
124								self.closeMenu();
125								setTimeout(function() {
126									window.open( _href, _target);
127								}, self.animationSpeed);
128							}
129						}
130					}
131				});
132			}
133
134			// Expand Sub items on Parent Item Click.
135			if ( 'on' == self.options['menu_item_click_to_trigger_submenu']  ) {
136				jQuery( this.menuWrap +' .rmp-menu-item-has-children > ' + self.linkElement ).on( 'click', function(e) {
137					if ( jQuery(window).width() < self.hamburgerBreakpoint ) {
138						e.preventDefault();
139						self.triggerSubArrow(
140							jQuery(this).children( '.rmp-menu-subarrow' ).first()
141						);
142					}
143				});
144			}
145		}
146		/**
147		 * Set push translate for toggle and page wrapper.
148		 */
149		setWrapperTranslate() {
150			let translate,translateContainer;
151			switch( this.options['menu_appear_from'] ) {
152				case 'left':
153					translate = 'translateX(' + this.menuWidth() + 'px)';
154					translateContainer = 'translateX(-' + this.menuWidth() + 'px)';
155					break;
156				case 'right':
157					translate = 'translateX(-' + this.menuWidth() + 'px)';
158					translateContainer = 'translateX(' + this.menuWidth() + 'px)';
159					break;
160				case 'top':
161					translate = 'translateY(' + this.wrapperHeight() + 'px)';
162					translateContainer = 'translateY(-' + this.menuHeight() + 'px)';
163					break;
164				case 'bottom':
165					translate = 'translateY(-' + this.menuHeight() + 'px)';
166					translateContainer = 'translateY(' + this.menuHeight() + 'px)';
167					break;
168			}
169
170			if ( this.options['animation_type'] == 'push' ) {
171				jQuery(this.pageWrapper).css( { 'transform':translate } );
172
173				//If push Wrapper has body element then handle menu position.
174				if	( 'body' == this.pageWrapper ) {
175					jQuery( this.container ).css( { 'transform' : translateContainer } );
176				}
177
178			}
179
180			if ( this.options['button_push_with_animation'] == 'on' ) {
181				jQuery( this.trigger ).css( { 'transform' : translate } );
182			}
183
184		}
185
186		/**
187		 * Clear push translate on button and page wrapper.
188		 */
189		clearWrapperTranslate() {
190
191			if ( this.options['animation_type'] == 'push' ) {
192				jQuery(this.pageWrapper).css( { 'transform' : '' } );
193			}
194
195			if ( this.options['button_push_with_animation'] == 'on' ) {
196				jQuery( this.trigger ).css( { 'transform' : '' } );
197			}
198		}
199
200		/**
201		 * Function to fadeIn the hamburger menu container.
202		 */
203		fadeMenuIn() {
204			jQuery(this.container).fadeIn(this.animationSpeed);
205		}
206
207		/**
208		 * Function to fadeOut the hamburger menu container.
209		 */
210		fadeMenuOut() {
211			jQuery(this.container)
212				.fadeOut(this.animationSpeed, function() {
213					jQuery(this).css('display', '');
214				});
215		}
216
217		/**
218		 * Function is use to open the hamburger menu.
219		 *
220		 * @since 4.0.0
221		 */
222		openMenu() {
223			var self = this;
224			jQuery(this.trigger).addClass(RmpMenu.activeToggleClass);
225			jQuery(this.container).addClass(RmpMenu.openContainerClass);
226
227			//this.pushMenuTrigger();
228
229			if ( this.options['animation_type'] == 'fade'){
230				this.fadeMenuIn();
231			} else {
232				this.setWrapperTranslate();
233			}
234
235			this.isOpen = true;
236		}
237
238		/**
239		 * Function is use to close the hamburger menu.
240		 *
241		 * @since 4.0.0
242		 */
243		closeMenu() {
244			jQuery(this.trigger).removeClass(RmpMenu.activeToggleClass);
245			jQuery(this.container).removeClass(RmpMenu.openContainerClass);
246
247			if ( this.options['animation_type'] == 'fade') {
248				this.fadeMenuOut();
249			} else {
250				this.clearWrapperTranslate();
251			}
252
253			this.isOpen = false;

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