https://www.plateforme1418.com/frontend/js/jquery.dlmenu.js

1/**
2 * jquery.dlmenu.js v1.0.1
3 * http://www.codrops.com
4 *
5 * Licensed under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7 * 
8 * Copyright 2013, Codrops
9 * http://www.codrops.com
10 */
11;( function( $, window, undefined ) {
12
13	'use strict';
14
15	// global
16	var Modernizr = window.Modernizr, $body = $( 'body' );
17
18	$.DLMenu = function( options, element ) {
19		this.$el = $( element );
20		this._init( options );
21	};
22
23	// the options
24	$.DLMenu.defaults = {
25		// classes for the animation effects
26		animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' },
27		// callback: click a link that has a sub menu
28		// el is the link element (li); name is the level name
29		onLevelClick : function( el, name ) { return false; },
30		// callback: click a link that does not have a sub menu
31		// el is the link element (li); ev is the event obj
32		onLinkClick : function( el, ev ) { return false; }
33	};
34
35	$.DLMenu.prototype = {
36		_init : function( options ) {
37
38			// options
39			this.options = $.extend( true, {}, $.DLMenu.defaults, options );
40			// cache some elements and initialize some variables
41			this._config();
42			
43			var animEndEventNames = {
44					'WebkitAnimation' : 'webkitAnimationEnd',
45					'OAnimation' : 'oAnimationEnd',
46					'msAnimation' : 'MSAnimationEnd',
47					'animation' : 'animationend'
48				},
49				transEndEventNames = {
50					'WebkitTransition' : 'webkitTransitionEnd',
51					'MozTransition' : 'transitionend',
52					'OTransition' : 'oTransitionEnd',
53					'msTransition' : 'MSTransitionEnd',
54					'transition' : 'transitionend'
55				};
56			// animation end event name
57			this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
58			// transition end event name
59			this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu',
60			// support for css animations and css transitions
61			this.supportAnimations = Modernizr.cssanimations,
62			this.supportTransitions = Modernizr.csstransitions;
63
64			this._initEvents();
65
66		},
67		_config : function() {
68			this.open = false;
69			this.$trigger = this.$el.children( '.dl-trigger' );
70			this.$menu = this.$el.children( 'ul.dl-menu' );
71			this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
72			this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#">Retour</a></li>' );
73			this.$back = this.$menu.find( 'li.dl-back' );
74		},
75		_initEvents : function() {
76
77			var self = this;
78
79			this.$trigger.on( 'click.dlmenu', function() {
80				
81				if( self.open ) {
82					self._closeMenu();
83				} 
84				else {
85					self._openMenu();
86				}
87				return false;
88
89			} );
90
91			this.$menuitems.on( 'click.dlmenu', function( event ) {
92				
93				event.stopPropagation();
94
95				var $item = $(this),
96					$submenu = $item.children( 'ul.dl-submenu' );
97
98				if( $submenu.length > 0 ) {
99
100					var $flyin = $submenu.clone().css( 'opacity', 0 ).insertAfter( self.$menu ),
101						onAnimationEndFn = function() {
102							self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classout ).addClass( 'dl-subview' );
103							$item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' );
104							$flyin.remove();
105						};
106
107					setTimeout( function() {
108						$flyin.addClass( self.options.animationClasses.classin );
109						self.$menu.addClass( self.options.animationClasses.classout );
110						if( self.supportAnimations ) {
111							self.$menu.on( self.animEndEventName, onAnimationEndFn );
112						}
113						else {
114							onAnimationEndFn.call();
115						}
116
117						self.options.onLevelClick( $item, $item.children( 'a:first' ).text() );
118					} );
119
120					return false;
121
122				}
123				else {
124					self.options.onLinkClick( $item, event );
125				}
126
127			} );
128
129			this.$back.on( 'click.dlmenu', function( event ) {
130				
131				var $this = $( this ),
132					$submenu = $this.parents( 'ul.dl-submenu:first' ),
133					$item = $submenu.parent(),
134
135					$flyin = $submenu.clone().insertAfter( self.$menu );
136
137				var onAnimationEndFn = function() {
138					self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin );
139					$flyin.remove();
140				};
141
142				setTimeout( function() {
143					$flyin.addClass( self.options.animationClasses.classout );
144					self.$menu.addClass( self.options.animationClasses.classin );
145					if( self.supportAnimations ) {
146						self.$menu.on( self.animEndEventName, onAnimationEndFn );
147					}
148					else {
149						onAnimationEndFn.call();
150					}
151
152					$item.removeClass( 'dl-subviewopen' );
153					
154					var $subview = $this.parents( '.dl-subview:first' );
155					if( $subview.is( 'li' ) ) {
156						$subview.addClass( 'dl-subviewopen' );
157					}
158					$subview.removeClass( 'dl-subview' );
159				} );
160
161				return false;

162
163			} );
164			
165		},
166		closeMenu : function() {
167			if( this.open ) {
168				this._closeMenu();
169			}
170		},
171		_closeMenu : function() {
172			var self = this,
173				onTransitionEndFn = function() {
174					self.$menu.off( self.transEndEventName );
175					self._resetMenu();
176				};
177			
178			this.$menu.removeClass( 'dl-menuopen' );
179			this.$menu.addClass( 'dl-menu-toggle' );
180			this.$trigger.removeClass( 'dl-active' );
181			
182			if( this.supportTransitions ) {
183				this.$menu.on( this.transEndEventName, onTransitionEndFn );
184			}
185			else {
186				onTransitionEndFn.call();
187			}
188
189			this.open = false;
190		},
191		openMenu : function() {
192			if( !this.open ) {
193				this._openMenu();
194			}
195		},
196		_openMenu : function() {
197			var self = this;
198			// clicking somewhere else makes the menu close
199			$body.off( 'click' ).on( 'click.dlmenu', function() {
200				self._closeMenu() ;
201			} );
202			this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() {
203				$( this ).removeClass( 'dl-menu-toggle' );
204			} );
205			this.$trigger.addClass( 'dl-active' );
206			this.open = true;
207		},
208		// resets the menu to its original state (first level of options)
209		_resetMenu : function() {
210			this.$menu.removeClass( 'dl-subview' );
211			this.$menuitems.removeClass( 'dl-subview dl-subviewopen' );
212		}
213	};
214
215	var logError = function( message ) {
216		if ( window.console ) {
217			window.console.error( message );
218		}
219	};
220
221	$.fn.dlmenu = function( options ) {
222		if ( typeof options === 'string' ) {
223			var args = Array.prototype.slice.call( arguments, 1 );
224			this.each(function() {
225				var instance = $.data( this, 'dlmenu' );
226				if ( !instance ) {
227					logError( "cannot call methods on dlmenu prior to initialization; " +
228					"attempted to call method '" + options + "'" );
229					return;
230				}
231				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
232					logError( "no such method '" + options + "' for dlmenu instance" );
233					return;
234				}
235				instance[ options ].apply( instance, args );
236			});
237		} 
238		else {
239			this.each(function() {	
240				var instance = $.data( this, 'dlmenu' );
241				if ( instance ) {
242					instance._init();
243				}
244				else {
245					instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) );
246				}
247			});
248		}
249		return this;
250	};
251
252} )( jQuery, window );