Team:SYSU-China/js/jquery.dlmenu

From 2014.igem.org

(Difference between revisions)
(Created page with "/** * jquery.dlmenu.js v1.0.1 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013, Codrop...")
 
Line 1: Line 1:
-
/**
+
/*
-
* jquery.dlmenu.js v1.0.1
+
FlexNav.js 1.3.3
-
* http://www.codrops.com
+
-
*
+
-
* Licensed under the MIT license.
+
-
* http://www.opensource.org/licenses/mit-license.php
+
-
*
+
-
* Copyright 2013, Codrops
+
-
* http://www.codrops.com
+
-
*/
+
-
;( function( $, window, undefined ) {
+
-
'use strict';
+
Created by Jason Weaver http://jasonweaver.name
 +
Released under http://unlicense.org/
-
// global
+
//
-
var Modernizr = window.Modernizr, $body = $( 'body' );
+
*/
-
$.DLMenu = function( options, element ) {
 
-
this.$el = $( element );
 
-
this._init( options );
 
-
};
 
-
// the options
+
(function() {
-
$.DLMenu.defaults = {
+
  var $;
-
// classes for the animation effects
+
-
animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' },
+
-
// callback: click a link that has a sub menu
+
-
// el is the link element (li); name is the level name
+
-
onLevelClick : function( el, name ) { return false; },
+
-
// callback: click a link that does not have a sub menu
+
-
// el is the link element (li); ev is the event obj
+
-
onLinkClick : function( el, ev ) { return false; }
+
-
};
+
-
$.DLMenu.prototype = {
+
  $ = jQuery;
-
_init : function( options ) {
+
-
// options
+
  $.fn.flexNav = function(options) {
-
this.options = $.extend( true, {}, $.DLMenu.defaults, options );
+
    var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector;
-
// cache some elements and initialize some variables
+
    settings = $.extend({
-
this._config();
+
      'animationSpeed': 250,
-
+
      'transitionOpacity': true,
-
var animEndEventNames = {
+
      'buttonSelector': '.menu-button',
-
'WebkitAnimation' : 'webkitAnimationEnd',
+
      'hoverIntent': false,
-
'OAnimation' : 'oAnimationEnd',
+
      'hoverIntentTimeout': 150,
-
'msAnimation' : 'MSAnimationEnd',
+
      'calcItemWidths': false,
-
'animation' : 'animationend'
+
      'hover': true
-
},
+
    }, options);
-
transEndEventNames = {
+
    $nav = $(this);
-
'WebkitTransition' : 'webkitTransitionEnd',
+
    $nav.addClass('with-js');
-
'MozTransition' : 'transitionend',
+
    if (settings.transitionOpacity === true) {
-
'OTransition' : 'oTransitionEnd',
+
      $nav.addClass('opacity');
-
'msTransition' : 'MSTransitionEnd',
+
    }
-
'transition' : 'transitionend'
+
    $nav.find("li").each(function() {
-
};
+
      if ($(this).has("ul").length) {
-
// animation end event name
+
        return $(this).addClass("item-with-ul").find("ul").hide();
-
this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
+
      }
-
// transition end event name
+
    });
-
this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu',
+
    if (settings.calcItemWidths === true) {
-
// support for css animations and css transitions
+
      $top_nav_items = $nav.find('>li');
-
this.supportAnimations = Modernizr.cssanimations,
+
      count = $top_nav_items.length;
-
this.supportTransitions = Modernizr.csstransitions;
+
      nav_width = 100 / count;
 +
      nav_percent = nav_width + "%";
 +
    }
 +
    if ($nav.data('breakpoint')) {
 +
      breakpoint = $nav.data('breakpoint');
 +
    }
 +
    showMenu = function() {
 +
      if ($nav.hasClass('lg-screen') === true && settings.hover === true) {
 +
        if (settings.transitionOpacity === true) {
 +
          return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
 +
            height: ["toggle", "swing"],
 +
            opacity: "toggle"
 +
          }, settings.animationSpeed);
 +
        } else {
 +
          return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
 +
            height: ["toggle", "swing"]
 +
          }, settings.animationSpeed);
 +
        }
 +
      }
 +
      flx = true;
 +
    };
 +
    resetMenu = function() {
 +
      if ($nav.hasClass('lg-screen') === true && $(this).find('>ul').hasClass('flexnav-show') === true && settings.hover === true) {
 +
        if (settings.transitionOpacity === true) {
 +
          return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
 +
            height: ["toggle", "swing"],
 +
            opacity: "toggle"
 +
          }, settings.animationSpeed);
 +
        } else {
 +
          return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
 +
            height: ["toggle", "swing"]
 +
          }, settings.animationSpeed);
 +
        }
 +
      }
 +
    };
 +
    resizer = function() {
 +
      var selector;
 +
      if ($(window).width() <= breakpoint) {
 +
        $nav.removeClass("lg-screen").addClass("sm-screen");
 +
        if (settings.calcItemWidths === true) {
 +
          $top_nav_items.css('width', '100%');
 +
        }
 +
        selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
 +
        $(selector).removeClass('active');
 +
        return $('.one-page li a').on('click', function() {
 +
          return $nav.removeClass('flexnav-show');
 +
        });
 +
      } else if ($(window).width() > breakpoint) {
 +
        $nav.removeClass("sm-screen").addClass("lg-screen");
 +
        if (settings.calcItemWidths === true) {
 +
          $top_nav_items.css('width', nav_percent);
 +
        }
 +
        $nav.removeClass('flexnav-show').find('.item-with-ul').on();
 +
        $('.item-with-ul').find('ul').removeClass('flexnav-show');
 +
        resetMenu();
 +
        if (settings.hoverIntent === true) {
 +
          return $('.item-with-ul').hoverIntent({
 +
            over: showMenu,
 +
            out: resetMenu,
 +
            timeout: settings.hoverIntentTimeout
 +
          });
 +
        } else if (settings.hoverIntent === false) {
 +
          return $('.item-with-ul').on('mouseenter', showMenu).on('mouseleave', resetMenu);
 +
        }
 +
      }
 +
    };
 +
    $(settings['buttonSelector']).data('navEl', $nav);
 +
    touch_selector = '.item-with-ul, ' + settings['buttonSelector'];
 +
    $(touch_selector).append('<span class="touch-button"><i class="navicon">&#9660;</i></span>');
 +
    toggle_selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
 +
    $(toggle_selector).on('click', function(e) {
 +
      var $btnParent, $thisNav, bs;
 +
      $(toggle_selector).toggleClass('active');
 +
      e.preventDefault();
 +
      e.stopPropagation();
 +
      bs = settings['buttonSelector'];
 +
      $btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs);
 +
      $thisNav = $btnParent.data('navEl');
 +
      return $thisNav.toggleClass('flexnav-show');
 +
    });
 +
    $('.touch-button').on('click', function(e) {
 +
      var $sub, $touchButton;
 +
      $sub = $(this).parent('.item-with-ul').find('>ul');
 +
      $touchButton = $(this).parent('.item-with-ul').find('>span.touch-button');
 +
      if ($nav.hasClass('lg-screen') === true) {
 +
        $(this).parent('.item-with-ul').siblings().find('ul.flexnav-show').removeClass('flexnav-show').hide();
 +
      }
 +
      if ($sub.hasClass('flexnav-show') === true) {
 +
        $sub.removeClass('flexnav-show').slideUp(settings.animationSpeed);
 +
        return $touchButton.removeClass('active');
 +
      } else if ($sub.hasClass('flexnav-show') === false) {
 +
        $sub.addClass('flexnav-show').slideDown(settings.animationSpeed);
 +
        return $touchButton.addClass('active');
 +
      }
 +
    });
 +
    $nav.find('.item-with-ul *').focus(function() {
 +
      $(this).parent('.item-with-ul').parent().find(".open").not(this).removeClass("open").hide();
 +
      return $(this).parent('.item-with-ul').find('>ul').addClass("open").show();
 +
    });
 +
    resizer();
 +
    return $(window).on('resize', resizer);
 +
  };
-
this._initEvents();
+
}).call(this);
-
 
+
-
},
+
-
_config : function() {
+
-
this.open = false;
+
-
this.$trigger = this.$el.children( '.dl-trigger' );
+
-
this.$menu = this.$el.children( 'ul.dl-menu' );
+
-
this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
+
-
this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#">back</a></li>' );
+
-
this.$back = this.$menu.find( 'li.dl-back' );
+
-
},
+
-
_initEvents : function() {
+
-
 
+
-
var self = this;
+
-
 
+
-
this.$trigger.on( 'click.dlmenu', function() {
+
-
+
-
if( self.open ) {
+
-
self._closeMenu();
+
-
}
+
-
else {
+
-
self._openMenu();
+
-
}
+
-
return false;
+
-
 
+
-
} );
+
-
 
+
-
this.$menuitems.on( 'click.dlmenu', function( event ) {
+
-
+
-
event.stopPropagation();
+
-
 
+
-
var $item = $(this),
+
-
$submenu = $item.children( 'ul.dl-submenu' );
+
-
 
+
-
if( $submenu.length > 0 ) {
+
-
 
+
-
var $flyin = $submenu.clone().css( 'opacity', 0 ).insertAfter( self.$menu ),
+
-
onAnimationEndFn = function() {
+
-
self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classout ).addClass( 'dl-subview' );
+
-
$item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' );
+
-
$flyin.remove();
+
-
};
+
-
 
+
-
setTimeout( function() {
+
-
$flyin.addClass( self.options.animationClasses.classin );
+
-
self.$menu.addClass( self.options.animationClasses.classout );
+
-
if( self.supportAnimations ) {
+
-
self.$menu.on( self.animEndEventName, onAnimationEndFn );
+
-
}
+
-
else {
+
-
onAnimationEndFn.call();
+
-
}
+
-
 
+
-
self.options.onLevelClick( $item, $item.children( 'a:first' ).text() );
+
-
} );
+
-
 
+
-
return false;
+
-
 
+
-
}
+
-
else {
+
-
self.options.onLinkClick( $item, event );
+
-
}
+
-
 
+
-
} );
+
-
 
+
-
this.$back.on( 'click.dlmenu', function( event ) {
+
-
+
-
var $this = $( this ),
+
-
$submenu = $this.parents( 'ul.dl-submenu:first' ),
+
-
$item = $submenu.parent(),
+
-
 
+
-
$flyin = $submenu.clone().insertAfter( self.$menu );
+
-
 
+
-
var onAnimationEndFn = function() {
+
-
self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin );
+
-
$flyin.remove();
+
-
};
+
-
 
+
-
setTimeout( function() {
+
-
$flyin.addClass( self.options.animationClasses.classout );
+
-
self.$menu.addClass( self.options.animationClasses.classin );
+
-
if( self.supportAnimations ) {
+
-
self.$menu.on( self.animEndEventName, onAnimationEndFn );
+
-
}
+
-
else {
+
-
onAnimationEndFn.call();
+
-
}
+
-
 
+
-
$item.removeClass( 'dl-subviewopen' );
+
-
+
-
var $subview = $this.parents( '.dl-subview:first' );
+
-
if( $subview.is( 'li' ) ) {
+
-
$subview.addClass( 'dl-subviewopen' );
+
-
}
+
-
$subview.removeClass( 'dl-subview' );
+
-
} );
+
-
 
+
-
return false;
+
-
 
+
-
} );
+
-
+
-
},
+
-
closeMenu : function() {
+
-
if( this.open ) {
+
-
this._closeMenu();
+
-
}
+
-
},
+
-
_closeMenu : function() {
+
-
var self = this,
+
-
onTransitionEndFn = function() {
+
-
self.$menu.off( self.transEndEventName );
+
-
self._resetMenu();
+
-
};
+
-
+
-
this.$menu.removeClass( 'dl-menuopen' );
+
-
this.$menu.addClass( 'dl-menu-toggle' );
+
-
this.$trigger.removeClass( 'dl-active' );
+
-
+
-
if( this.supportTransitions ) {
+
-
this.$menu.on( this.transEndEventName, onTransitionEndFn );
+
-
}
+
-
else {
+
-
onTransitionEndFn.call();
+
-
}
+
-
 
+
-
this.open = false;
+
-
},
+
-
openMenu : function() {
+
-
if( !this.open ) {
+
-
this._openMenu();
+
-
}
+
-
},
+
-
_openMenu : function() {
+
-
var self = this;
+
-
// clicking somewhere else makes the menu close
+
-
$body.off( 'click' ).on( 'click.dlmenu', function() {
+
-
//self._closeMenu() ;
+
-
} );
+
-
this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() {
+
-
$( this ).removeClass( 'dl-menu-toggle' );
+
-
} );
+
-
this.$trigger.addClass( 'dl-active' );
+
-
this.open = true;
+
-
},
+
-
// resets the menu to its original state (first level of options)
+
-
_resetMenu : function() {
+
-
this.$menu.removeClass( 'dl-subview' );
+
-
this.$menuitems.removeClass( 'dl-subview dl-subviewopen' );
+
-
}
+
-
};
+
-
 
+
-
var logError = function( message ) {
+
-
if ( window.console ) {
+
-
window.console.error( message );
+
-
}
+
-
};
+
-
 
+
-
$.fn.dlmenu = function( options ) {
+
-
if ( typeof options === 'string' ) {
+
-
var args = Array.prototype.slice.call( arguments, 1 );
+
-
this.each(function() {
+
-
var instance = $.data( this, 'dlmenu' );
+
-
if ( !instance ) {
+
-
logError( "cannot call methods on dlmenu prior to initialization; " +
+
-
"attempted to call method '" + options + "'" );
+
-
return;
+
-
}
+
-
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
+
-
logError( "no such method '" + options + "' for dlmenu instance" );
+
-
return;
+
-
}
+
-
instance[ options ].apply( instance, args );
+
-
});
+
-
}
+
-
else {
+
-
this.each(function() {
+
-
var instance = $.data( this, 'dlmenu' );
+
-
if ( instance ) {
+
-
instance._init();
+
-
}
+
-
else {
+
-
instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) );
+
-
}
+
-
});
+
-
}
+
-
return this;
+
-
};
+
-
 
+
-
} )( jQuery, window );
+

Latest revision as of 18:39, 16 October 2014

/* FlexNav.js 1.3.3

Created by Jason Weaver http://jasonweaver.name Released under http://unlicense.org/

//

  • /


(function() { 

 var $;

 $ = jQuery;

 $.fn.flexNav = function(options) {
   var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector;
   settings = $.extend({
     'animationSpeed': 250,
     'transitionOpacity': true,
     'buttonSelector': '.menu-button',
     'hoverIntent': false,
     'hoverIntentTimeout': 150,
     'calcItemWidths': false,
     'hover': true
   }, options);
   $nav = $(this);
   $nav.addClass('with-js');
   if (settings.transitionOpacity === true) {
     $nav.addClass('opacity');
   }
   $nav.find("li").each(function() {
     if ($(this).has("ul").length) {
       return $(this).addClass("item-with-ul").find("ul").hide();
     }
   });
   if (settings.calcItemWidths === true) {
     $top_nav_items = $nav.find('>li');
     count = $top_nav_items.length;
     nav_width = 100 / count;
     nav_percent = nav_width + "%";
   }
   if ($nav.data('breakpoint')) {
     breakpoint = $nav.data('breakpoint');
   }
   showMenu = function() {
     if ($nav.hasClass('lg-screen') === true && settings.hover === true) {
       if (settings.transitionOpacity === true) {
         return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
           height: ["toggle", "swing"],
           opacity: "toggle"
         }, settings.animationSpeed);
       } else {
         return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
           height: ["toggle", "swing"]
         }, settings.animationSpeed);
       }
     }
     flx = true;
   };
   resetMenu = function() {
     if ($nav.hasClass('lg-screen') === true && $(this).find('>ul').hasClass('flexnav-show') === true && settings.hover === true) {
       if (settings.transitionOpacity === true) {
         return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
           height: ["toggle", "swing"],
           opacity: "toggle"
         }, settings.animationSpeed);
       } else {
         return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
           height: ["toggle", "swing"]
         }, settings.animationSpeed);
       }
     }
   };
   resizer = function() {
     var selector;
     if ($(window).width() <= breakpoint) {
       $nav.removeClass("lg-screen").addClass("sm-screen");
       if (settings.calcItemWidths === true) {
         $top_nav_items.css('width', '100%');
       }
       selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
       $(selector).removeClass('active');
       return $('.one-page li a').on('click', function() {
         return $nav.removeClass('flexnav-show');
       });
     } else if ($(window).width() > breakpoint) {
       $nav.removeClass("sm-screen").addClass("lg-screen");
       if (settings.calcItemWidths === true) {
         $top_nav_items.css('width', nav_percent);
       }
       $nav.removeClass('flexnav-show').find('.item-with-ul').on();
       $('.item-with-ul').find('ul').removeClass('flexnav-show');
       resetMenu();
       if (settings.hoverIntent === true) {
         return $('.item-with-ul').hoverIntent({
           over: showMenu,
           out: resetMenu,
           timeout: settings.hoverIntentTimeout
         });
       } else if (settings.hoverIntent === false) {
         return $('.item-with-ul').on('mouseenter', showMenu).on('mouseleave', resetMenu);
       }
     }
   };
   $(settings['buttonSelector']).data('navEl', $nav);
   touch_selector = '.item-with-ul, ' + settings['buttonSelector'];
   $(touch_selector).append('▼');
   toggle_selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
   $(toggle_selector).on('click', function(e) {
     var $btnParent, $thisNav, bs;
     $(toggle_selector).toggleClass('active');
     e.preventDefault();
     e.stopPropagation();
     bs = settings['buttonSelector'];
     $btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs);
     $thisNav = $btnParent.data('navEl');
     return $thisNav.toggleClass('flexnav-show');
   });
   $('.touch-button').on('click', function(e) {
     var $sub, $touchButton;
     $sub = $(this).parent('.item-with-ul').find('>ul');
     $touchButton = $(this).parent('.item-with-ul').find('>span.touch-button');
     if ($nav.hasClass('lg-screen') === true) {
       $(this).parent('.item-with-ul').siblings().find('ul.flexnav-show').removeClass('flexnav-show').hide();
     }
     if ($sub.hasClass('flexnav-show') === true) {
       $sub.removeClass('flexnav-show').slideUp(settings.animationSpeed);
       return $touchButton.removeClass('active');
     } else if ($sub.hasClass('flexnav-show') === false) {
       $sub.addClass('flexnav-show').slideDown(settings.animationSpeed);
       return $touchButton.addClass('active');
     }
   });
   $nav.find('.item-with-ul *').focus(function() {
     $(this).parent('.item-with-ul').parent().find(".open").not(this).removeClass("open").hide();
     return $(this).parent('.item-with-ul').find('>ul').addClass("open").show();
   });
   resizer();
   return $(window).on('resize', resizer);
 };

}).call(this);

Retrieved from "http://2014.igem.org/Team:SYSU-China/js/jquery.dlmenu"