https://cdn.opinel.com/_themes/lba/opinel-theme/js/vendor/jquery.dlmenu.min.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    backLabel: 'Back',
34    // Change to "true" to use the active item as back link label.
35    useActiveItemAsBackLabel: false,
36    // Change to "true" to add a navigable link to the active item to its child
37    // menu.
38    useActiveItemAsLink: false,
39    // On close reset the menu to root
40    resetOnClose: true
41  };
42
43  $.DLMenu.prototype = {
44    _init : function( options ) {
45
46      // options
47      this.options = $.extend( true, {}, $.DLMenu.defaults, options );
48      // cache some elements and initialize some variables
49      this._config();
50
51      var animEndEventNames = {
52          'WebkitAnimation' : 'webkitAnimationEnd',
53          'OAnimation' : 'oAnimationEnd',
54          'msAnimation' : 'MSAnimationEnd',
55          'animation' : 'animationend'
56        },
57        transEndEventNames = {
58          'WebkitTransition' : 'webkitTransitionEnd',
59          'MozTransition' : 'transitionend',
60          'OTransition' : 'oTransitionEnd',
61          'msTransition' : 'MSTransitionEnd',
62          'transition' : 'transitionend'
63        };
64      // animation end event name
65      this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
66      // transition end event name
67      this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu';
68      // support for css animations and css transitions
69      this.supportAnimations = Modernizr.cssanimations;
70      this.supportTransitions = Modernizr.csstransitions;
71
72      this._initEvents();
73
74    },
75    _config : function() {
76      this.open = false;
77      this.$trigger = this.$el.children( '.dl-trigger' );
78      this.$menu = this.$el.children( 'ul.dl-menu' );
79      this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
80      this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-title"><a href="#">TITRE</a></li>' );
81      this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#">'+this.options.backLabel+'</a></li>' );
82
83      this.$el.find( 'ul.dl-submenu' ).each(function() {
84        var $title = $(this).prev('a').eq(0).text();
85        var $href= $(this).prev('a').eq(0).attr('href');
86        $(this).find('.dl-title a').html($title).attr('href',$href);
87      });
88
89      this.$back = this.$menu.find( 'li.dl-back' );
90      this.$title = this.$menu.find( 'li.dl-title' );
91    },
92    _initEvents : function() {
93
94      var self = this;
95
96      this.$trigger.on( 'click.dlmenu', function() {
97
98        if( self.open ) {
99          self._closeMenu();
100        }
101        else {
102          self._openMenu();
103        }
104        return false;
105
106      } );
107
108      this.$menuitems.on( 'click.dlmenu', function( event ) {
109
110        event.stopPropagation();
111
112        var $item = $(this),
113          $submenu = $item.children( 'ul.dl-submenu' );
114
115        // Only go to the next menu level if one exists AND the link isn't the
116        // one we added specifically for navigating to parent item pages.
117        if( ($submenu.length > 0) && !($(event.currentTarget).hasClass('dl-subviewopen'))) {
118
119          var $flyin = $submenu.clone().css( 'opacity', 0 ).insertAfter( self.$menu ),
120            onAnimationEndFn = function() {
121              self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classout ).addClass( 'dl-subview' );
122              $item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' );
123              $flyin.remove();
124            };
125
126          setTimeout( function() {
127            $flyin.addClass( self.options.animationClasses.classin );
128            self.$menu.addClass( self.options.animationClasses.classout );
129            if( self.supportAnimations ) {
130              self.$menu.on( self.animEndEventName, onAnimationEndFn );
131            }
132            else {
133              onAnimationEndFn.call();
134            }
135
136            self.options.onLevelClick( $item, $item.children( 'a:first' ).text() );
137          } );
138
139          return false;

140
141        }
142        else {
143          self.options.onLinkClick( $item, event );
144        }
145
146      } );
147
148      this.$back.on( 'click.dlmenu', function( event ) {
149
150        var $this = $( this ),
151          $submenu = $this.parents( 'ul.dl-submenu:first' ),
152          $item = $submenu.parent(),
153
154          $flyin = $submenu.clone().insertAfter( self.$menu );
155
156        var onAnimationEndFn = function() {
157          self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin );
158          $flyin.remove();
159        };
160
161        setTimeout( function() {
162          $flyin.addClass( self.options.animationClasses.classout );
163          self.$menu.addClass( self.options.animationClasses.classin );
164          if( self.supportAnimations ) {
165            self.$menu.on( self.animEndEventName, onAnimationEndFn );
166          }
167          else {
168            onAnimationEndFn.call();
169          }
170
171          $item.removeClass( 'dl-subviewopen' );
172
173          var $subview = $this.parents( '.dl-subview:first' );
174          if( $subview.is( 'li' ) ) {
175            $subview.addClass( 'dl-subviewopen' );
176          }
177          $subview.removeClass( 'dl-subview' );
178        } );
179
180        return false;
181
182      } );
183
184      this.$title.on( 'click.dlmenu', function( event ) {
185        //return false;
186      } );
187
188    },
189    closeMenu : function() {
190      if( this.open ) {
191        this._closeMenu();
192      }
193    },
194    _closeMenu : function() {
195      var self = this,
196        onTransitionEndFn = function() {
197          self.$menu.off( self.transEndEventName );
198          if( self.options.resetOnClose ){
199            self._resetMenu();
200          }
201        };
202
203      this.$menu.removeClass( 'dl-menuopen' );
204      this.$menu.addClass( 'dl-menu-toggle' );
205      this.$trigger.removeClass( 'dl-active' );
206      $body.removeClass( 'dl-body-menuopen' );
207
208      if( this.supportTransitions ) {
209        this.$menu.on( this.transEndEventName, onTransitionEndFn );
210      }
211      else {
212        onTransitionEndFn.call();
213      }
214
215      this.open = false;
216    },
217    openMenu : function() {
218      if( !this.open ) {
219        this._openMenu();
220      }
221    },
222    _openMenu : function() {
223      var self = this;
224      this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() {
225        $( this ).removeClass( 'dl-menu-toggle' );
226      } );
227      this.$trigger.addClass( 'dl-active' );
228      $body.addClass( 'dl-body-menuopen' );
229      this.open = true;
230    },
231    // resets the menu to its original state (first level of options)
232    _resetMenu : function() {
233      this.$menu.removeClass( 'dl-subview' );
234      this.$menuitems.removeClass( 'dl-subview dl-subviewopen' );
235    }
236  };
237
238  var logError = function( message ) {
239    if ( window.console ) {
240      window.console.error( message );
241    }
242  };
243
244  $.fn.dlmenu = function( options ) {
245    if ( typeof options === 'string' ) {
246      var args = Array.prototype.slice.call( arguments, 1 );
247      this.each(function() {
248        var instance = $.data( this, 'dlmenu' );
249        if ( !instance ) {
250          logError( "cannot call methods on dlmenu prior to initialization; " +
251            "attempted to call method '" + options + "'" );
252          return;
253        }
254        if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
255          logError( "no such method '" + options + "' for dlmenu instance" );
256          return;
257        }
258        instance[ options ].apply( instance, args );
259      });
260    }
261    else {
262      this.each(function() {
263        var instance = $.data( this, 'dlmenu' );
264        if ( instance ) {
265          instance._init();
266        }
267        else {
268          instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) );
269        }
270      });
271    }
272    return this;
273  };
274
275} )( jQuery, window );