Template:Team:Bonn:MenuJS

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <!-- JavaScript for our global menu --> <script type="text/javascript" src="http://igem13.uni-bonn.de/shared/superfish/js/jquery-1.9.1.min.js"></script> <script type="text...")
 
(6 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<!-- JavaScript for our global menu -->
<!-- JavaScript for our global menu -->
-
<script type="text/javascript" src="http://igem13.uni-bonn.de/shared/superfish/js/jquery-1.9.1.min.js"></script>
+
 
-
<script type="text/javascript" src="http://igem13.uni-bonn.de/shared/superfish/js/hoverIntent.js"></script>
+
<!-- #################################### -->
-
<script type="text/javascript" src="http://igem13.uni-bonn.de/shared/superfish/js/superfish.js"></script>
+
<!-- HoverIntent -->
 +
<script type="text/javascript">
 +
/**
 +
* hoverIntent is similar to jQuery's built-in "hover" method except that
 +
* instead of firing the handlerIn function immediately, hoverIntent checks
 +
* to see if the user's mouse has slowed down (beneath the sensitivity
 +
* threshold) before firing the event. The handlerOut function is only
 +
* called after a matching handlerIn.
 +
*
 +
* hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
 +
* http://cherne.net/brian/resources/jquery.hoverIntent.html
 +
*
 +
* You may use hoverIntent under the terms of the MIT license. Basically that
 +
* means you are free to use hoverIntent as long as this header is left intact.
 +
* Copyright 2007, 2013 Brian Cherne
 +
*
 +
* // basic usage ... just like .hover()
 +
* .hoverIntent( handlerIn, handlerOut )
 +
* .hoverIntent( handlerInOut )
 +
*
 +
* // basic usage ... with event delegation!
 +
* .hoverIntent( handlerIn, handlerOut, selector )
 +
* .hoverIntent( handlerInOut, selector )
 +
*
 +
* // using a basic configuration object
 +
* .hoverIntent( config )
 +
*
 +
* @param  handlerIn  function OR configuration object
 +
* @param  handlerOut  function OR selector for delegation OR undefined
 +
* @param  selector    selector OR undefined
 +
* @author Brian Cherne <brian(at)cherne(dot)net>
 +
**/
 +
(function($) {
 +
    $.fn.hoverIntent = function(handlerIn,handlerOut,selector) {
 +
 
 +
        // default configuration values
 +
        var cfg = {
 +
            interval: 100,
 +
            sensitivity: 7,
 +
            timeout: 0
 +
        };
 +
 
 +
        if ( typeof handlerIn === "object" ) {
 +
            cfg = $.extend(cfg, handlerIn );
 +
        } else if ($.isFunction(handlerOut)) {
 +
            cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
 +
        } else {
 +
            cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
 +
        }
 +
 
 +
        // instantiate variables
 +
        // cX, cY = current X and Y position of mouse, updated by mousemove event
 +
        // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
 +
        var cX, cY, pX, pY;
 +
 
 +
        // A private function for getting mouse position
 +
        var track = function(ev) {
 +
            cX = ev.pageX;
 +
            cY = ev.pageY;
 +
        };
 +
 
 +
        // A private function for comparing current and previous mouse position
 +
        var compare = function(ev,ob) {
 +
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
 +
            // compare mouse positions to see if they've crossed the threshold
 +
            if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
 +
                $(ob).off("mousemove.hoverIntent",track);
 +
                // set hoverIntent state to true (so mouseOut can be called)
 +
                ob.hoverIntent_s = 1;
 +
                return cfg.over.apply(ob,[ev]);
 +
            } else {
 +
                // set previous coordinates for next time
 +
                pX = cX; pY = cY;
 +
                // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
 +
                ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
 +
            }
 +
        };
 +
 
 +
        // A private function for delaying the mouseOut function
 +
        var delay = function(ev,ob) {
 +
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
 +
            ob.hoverIntent_s = 0;
 +
            return cfg.out.apply(ob,[ev]);
 +
        };
 +
 
 +
        // A private function for handling mouse 'hovering'
 +
        var handleHover = function(e) {
 +
            // copy objects to be passed into t (required for event object to be passed in IE)
 +
            var ev = jQuery.extend({},e);
 +
            var ob = this;
 +
 
 +
            // cancel hoverIntent timer if it exists
 +
            if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
 +
 
 +
            // if e.type == "mouseenter"
 +
            if (e.type == "mouseenter") {
 +
                // set "previous" X and Y position based on initial entry point
 +
                pX = ev.pageX; pY = ev.pageY;
 +
                // update "current" X and Y position based on mousemove
 +
                $(ob).on("mousemove.hoverIntent",track);
 +
                // start polling interval (self-calling timeout) to compare mouse coordinates over time
 +
                if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
 +
 
 +
                // else e.type == "mouseleave"
 +
            } else {
 +
                // unbind expensive mousemove event
 +
                $(ob).off("mousemove.hoverIntent",track);
 +
                // if hoverIntent state is true, then call the mouseOut function after the specified delay
 +
                if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
 +
            }
 +
        };
 +
 
 +
        // listen for mouseenter and mouseleave
 +
        return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
 +
    };
 +
})(jQuery);
 +
</script>
 +
 
 +
<!-- #################################### -->
 +
<!-- SuperFish -->
 +
<script type="text/javascript">
 +
/*
 +
* Superfish v1.7.3 - jQuery menu widget
 +
* Copyright (c) 2013 Joel Birch
 +
*
 +
* Dual licensed under the MIT and GPL licenses:
 +
* http://www.opensource.org/licenses/mit-license.php
 +
* http://www.gnu.org/licenses/gpl.html
 +
*/
 +
 
 +
;(function($) {
 +
"use strict";
 +
 
 +
var methods = (function(){
 +
// private properties and methods go here
 +
var c = {
 +
bcClass: 'sf-breadcrumb',
 +
menuClass: 'sf-js-enabled',
 +
anchorClass: 'sf-with-ul',
 +
menuArrowClass: 'sf-arrows'
 +
},
 +
ios = (function(){
 +
var ios = /iPhone|iPad|iPod/i.test(navigator.userAgent);
 +
if (ios) {
 +
// iOS clicks only bubble as far as body children
 +
$(window).load(function() {
 +
$('body').children().on('click', $.noop);
 +
});
 +
}
 +
return ios;
 +
})(),
 +
wp7 = (function() {
 +
var style = document.documentElement.style;
 +
                                if ('behavior' in style)
 +
                                  if ('fill' in style)
 +
                                    if (/iemobile/i.test(navigator.userAgent))
 +
                                      return true;
 +
return false;
 +
})(),
 +
toggleMenuClasses = function($menu, o) {
 +
var classes = c.menuClass;
 +
if (o.cssArrows) {
 +
classes += ' ' + c.menuArrowClass;
 +
}
 +
$menu.toggleClass(classes);
 +
},
 +
setPathToCurrent = function($menu, o) {
 +
return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels)
 +
.addClass(o.hoverClass + ' ' + c.bcClass)
 +
.filter(function() {
 +
return ($(this).children(o.popUpSelector).hide().show().length);
 +
}).removeClass(o.pathClass);
 +
},
 +
toggleAnchorClass = function($li) {
 +
$li.children('a').toggleClass(c.anchorClass);
 +
},
 +
toggleTouchAction = function($menu) {
 +
var touchAction = $menu.css('ms-touch-action');
 +
touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y';
 +
$menu.css('ms-touch-action', touchAction);
 +
},
 +
applyHandlers = function($menu,o) {
 +
var targets = 'li:has(' + o.popUpSelector + ')';
 +
if ($.fn.hoverIntent)
 +
                                  if (!o.disableHI) {
 +
$menu.hoverIntent(over, out, targets);
 +
}
 +
else {
 +
$menu
 +
.on('mouseenter.superfish', targets, over)
 +
.on('mouseleave.superfish', targets, out);
 +
}
 +
var touchevent = 'MSPointerDown.superfish';
 +
if (!ios) {
 +
touchevent += ' touchend.superfish';
 +
}
 +
if (wp7) {
 +
touchevent += ' mousedown.superfish';
 +
}
 +
$menu
 +
.on('focusin.superfish', 'li', over)
 +
.on('focusout.superfish', 'li', out)
 +
.on(touchevent, 'a', o, touchHandler);
 +
},
 +
touchHandler = function(e) {
 +
var $this = $(this),
 +
$ul = $this.siblings(e.data.popUpSelector);
 +
 
 +
if ($ul.length > 0)
 +
                                  if ($ul.is(':hidden')) {
 +
$this.one('click.superfish', false);
 +
if (e.type === 'MSPointerDown') {
 +
$this.trigger('focus');
 +
} else {
 +
$.proxy(over, $this.parent('li'))();
 +
}
 +
}
 +
},
 +
over = function() {
 +
var $this = $(this),
 +
o = getOptions($this);
 +
clearTimeout(o.sfTimer);
 +
$this.siblings().superfish('hide').end().superfish('show');
 +
},
 +
out = function() {
 +
var $this = $(this),
 +
o = getOptions($this);
 +
if (ios) {
 +
$.proxy(close, $this, o)();
 +
}
 +
else {
 +
clearTimeout(o.sfTimer);
 +
o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay);
 +
}
 +
},
 +
close = function(o) {
 +
o.retainPath = ( $.inArray(this[0], o.$path) > -1);
 +
this.superfish('hide');
 +
 
 +
if (!this.parents('.' + o.hoverClass).length) {
 +
o.onIdle.call(getMenu(this));
 +
if (o.$path.length) {
 +
$.proxy(over, o.$path)();
 +
}
 +
}
 +
},
 +
getMenu = function($el) {
 +
return $el.closest('.' + c.menuClass);
 +
},
 +
getOptions = function($el) {
 +
return getMenu($el).data('sf-options');
 +
};
 +
 
 +
return {
 +
// public methods
 +
hide: function(instant) {
 +
if (this.length) {
 +
var $this = this,
 +
o = getOptions($this);
 +
if (!o) {
 +
return this;
 +
}
 +
var not = (o.retainPath === true) ? o.$path : '',
 +
$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector),
 +
speed = o.speedOut;
 +
 
 +
if (instant) {
 +
$ul.show();
 +
speed = 0;
 +
}
 +
o.retainPath = false;
 +
o.onBeforeHide.call($ul);
 +
$ul.stop(true, true).animate(o.animationOut, speed, function() {
 +
var $this = $(this);
 +
o.onHide.call($this);
 +
});
 +
}
 +
return this;
 +
},
 +
show: function() {
 +
var o = getOptions(this);
 +
if (!o) {
 +
return this;
 +
}
 +
var $this = this.addClass(o.hoverClass),
 +
$ul = $this.children(o.popUpSelector);
 +
 
 +
o.onBeforeShow.call($ul);
 +
$ul.stop(true, true).animate(o.animation, o.speed, function() {
 +
o.onShow.call($ul);
 +
});
 +
return this;
 +
},
 +
destroy: function() {
 +
return this.each(function(){
 +
var $this = $(this),
 +
o = $this.data('sf-options'),
 +
$hasPopUp;
 +
if (!o) {
 +
return false;
 +
}
 +
$hasPopUp = $this.find(o.popUpSelector).parent('li');
 +
clearTimeout(o.sfTimer);
 +
toggleMenuClasses($this, o);
 +
toggleAnchorClass($hasPopUp);
 +
toggleTouchAction($this);
 +
// remove event handlers
 +
$this.off('.superfish').off('.hoverIntent');
 +
// clear animation's inline display style
 +
$hasPopUp.children(o.popUpSelector).attr('style', function(i, style){
 +
return style.replace(/display[^;]+;?/g, '');
 +
});
 +
// reset 'current' path classes
 +
o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass);
 +
$this.find('.' + o.hoverClass).removeClass(o.hoverClass);
 +
o.onDestroy.call($this);
 +
$this.removeData('sf-options');
 +
});
 +
},
 +
init: function(op){
 +
return this.each(function() {
 +
var $this = $(this);
 +
if ($this.data('sf-options')) {
 +
return false;
 +
}
 +
var o = $.extend({}, $.fn.superfish.defaults, op),
 +
$hasPopUp = $this.find(o.popUpSelector).parent('li');
 +
o.$path = setPathToCurrent($this, o);
 +
 
 +
$this.data('sf-options', o);
 +
 
 +
toggleMenuClasses($this, o);
 +
toggleAnchorClass($hasPopUp);
 +
toggleTouchAction($this);
 +
applyHandlers($this, o);
 +
 
 +
$hasPopUp.not('.' + c.bcClass).superfish('hide',true);
 +
 
 +
o.onInit.call(this);
 +
});
 +
}
 +
};
 +
})();
 +
 
 +
$.fn.superfish = function(method, args) {
 +
if (methods[method]) {
 +
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 +
}
 +
else if (typeof method === 'object' || ! method) {
 +
return methods.init.apply(this, arguments);
 +
}
 +
else {
 +
return $.error('Method ' +  method + ' does not exist on jQuery.fn.superfish');
 +
}
 +
};
 +
 
 +
$.fn.superfish.defaults = {
 +
popUpSelector: 'ul,.sf-mega', // within menu context
 +
hoverClass: 'sfHover',
 +
pathClass: 'overrideThisToUse',
 +
pathLevels: 1,
 +
delay: 800,
 +
animation: {opacity:'show'},
 +
animationOut: {opacity:'hide'},
 +
speed: 'normal',
 +
speedOut: 'fast',
 +
cssArrows: true,
 +
disableHI: false,
 +
onInit: $.noop,
 +
onBeforeShow: $.noop,
 +
onShow: $.noop,
 +
onBeforeHide: $.noop,
 +
onHide: $.noop,
 +
onIdle: $.noop,
 +
onDestroy: $.noop
 +
};
 +
 
 +
// soon to be deprecated
 +
$.fn.extend({
 +
hideSuperfishUl: methods.hide,
 +
showSuperfishUl: methods.show
 +
});
 +
 
 +
})(jQuery);
 +
</script>
 +
 
</html>
</html>

Latest revision as of 08:01, 4 October 2013

Retrieved from "http://2013.igem.org/Template:Team:Bonn:MenuJS"