Team:UCL/Template:SCJwheelmenu.js

From 2014.igem.org

Latest revision as of 03:47, 11 October 2014

/* ===========================================================

* jquery-wheelmenu.js v1
* ===========================================================
* Copyright 2013 Pete Rojwongsuriya.
* http://www.thepetedesign.com
*
* A small jQuery plugin that adds a beautiful
* Path-like menu button to your website
* https://github.com/peachananr/wheel-menu
*
* ========================================================== */

!function($){

 var defaults = {

trigger: "click", animation: "fade", angle: [0,360], animationSpeed: "medium" };

$.fn.centerAround = function (button) {

   var offset = button.offset(),
       width = button.outerWidth(),
       height = button.outerHeight(),
       buttonX = (offset.left - $(document).scrollLeft() ) + width / 2,
       buttonY = (offset.top -  $(document).scrollTop() ) + height / 2,
       objectOffset = this.offset();
   this.css("position","fixed");
   this.css("top", buttonY  - (this.outerHeight() / 2)  + "px");
   this.css("left", buttonX - (this.outerWidth() / 2)   + "px");
   return this;
 }
 
 $.fn.flyIn = function (el, button, width, height, angle, step, radius, settings) {
   var d = 0;
   this.stop(true,true);
   this.each(function(index) {
     angle = (settings.angle[0] + (step * index)) * (Math.PI/180); 
     var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).find("a").outerWidth()/2),
         y = Math.round(height/2 + radius * Math.sin(angle) - $(this).find("a").outerHeight()/2);
     $(this).animateRotate(360).css({
         position: 'absolute',
         opacity: 0,
         left: "50%",
         top: "50%",
         marginLeft: "-" + $(this).outerWidth() / 2,
         marginTop: "-" + $(this).outerHeight() / 2
     }).delay(d).animate({
       opacity:1,
       left: x + 'px',
       top: y + 'px'
     }, settings.animationSpeed[1]);
     d += settings.animationSpeed[0];
   });
 }
 
 $.fn.flyOut = function (el, button) {
   var d = 0;
   this.stop(true,true);
   $(this.get().reverse()).each(function() {

$(this).animateRotate(-360).delay(d).animate({ opacity:0, left: el.outerWidth() / 2 + "px",

       top: el.outerHeight() / 2 + "px"

}, 150);

     d += 15;

}).promise().done( function() {

     el.removeClass("active").css("visibility", "hidden").hide();
     button.removeClass("active")
   });
 }
 
 $.fn.fadeInIcon = function (el, button, width, height, angle, step, radius, settings) {
   var d = 0;
   this.stop(true,true);
   this.each(function(index) {
     angle = (settings.angle[0] + (step * index)) * (Math.PI/180); 
     var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).find("a").outerWidth()/2),
         y = Math.round(height/2 + radius * Math.sin(angle) - $(this).find("a").outerHeight()/2);
     $(this).css({
         position: 'absolute',
         left: x + 'px',
         top: y + 'px',
         opacity: 0
     }).delay(d).animate({opacity:1}, settings.animationSpeed[1]);
     
     d += settings.animationSpeed[0];
   });
 }
 
 $.fn.fadeOutIcon = function (el, button) {
   var d = 0;
   this.stop(true,true);
   
   $(this.get().reverse()).each(function() {

$(this).delay(d).animate({opacity:0}, 150);

     d += 15;

}).promise().done( function() {

     el.removeClass("active").css("visibility", "hidden").hide();
     button.removeClass("active")
   });
 }

$.fn.hideIcon = function (button, settings) { var fields = this.find(".item"), el = this; switch (settings.animation) {

     case 'fade': 
       fields.fadeOutIcon(el, button)
       break; 
   
     case 'fly': 
       fields.flyOut(el, button)
       break; 
   }

}

$.fn.showIcon = function (button, settings) { var el = this, zindex = '6'; if (settings.trigger == "hover") { var zindex = '3';

   }

button.addClass("active").css({

     'z-index': zindex
   });
   
   
   

el.show().css({

       position: 'absolute',
       'z-index': '5',
       'padding': '30px' // add safe zone for mouseover
   }).centerAround(button); 
   el.addClass("wheel active").css("visibility", "visible").show();

if (el.attr('data-angle')) {

     settings.angle = el.attr('data-angle')
   }
   
   settings = predefineAngle(settings);

var radius = el.width() / 2,

     fields = el.find(".item"),
     container = el,
     width = container.innerWidth(),
     height = container.innerHeight(),
     angle =  0,
     step = (settings.angle[1] - settings.angle[0]) / fields.length;
    
    
     switch (settings.animation) { 
       case 'fade': 
         fields.fadeInIcon(el, button, width, height, angle, step, radius, settings)
         break; 
         
       case 'fly': 
         fields.flyIn(el, button, width, height, angle, step, radius, settings)
         break; 
     }
   

}

$.fn.animateRotate = function(angle, duration, easing, complete) {

     return this.each(function() {
         var $elem = $(this);

         $({deg: 0}).animate({deg: angle}, {
             duration: duration,
             easing: easing,
             step: function(now) {
                 $elem.css({
                     transform: 'rotate(' + now + 'deg)'
                 });
             },
             complete: complete || $.noop
         });
     });
 };
 

function predefineAngle (settings) { var convert = false if ($.type(settings.angle) == "string") { try {

       if (eval(settings.angle).length > 1) convert = true
     }
     catch(err) {
       convert = false
     }

if (convert == true) { settings.angle = JSON.parse(settings.angle); } else { switch (settings.angle) {

         case 'N':
           settings.angle = [180,380]
           break;
         case 'NE':
           settings.angle = [270,380]
           break;
         case 'E':
           settings.angle = [270,470]
           break;
         case 'SE':
           settings.angle = [360,470]
           break;
         case 'S':
           settings.angle = [360,560]
           break;
         case 'SW':
           settings.angle = [90,200]
           break;
         case 'W':
           settings.angle = [90,290]
           break;
         case 'NW':
           settings.angle = [180,290]
           break;
         case 'all':
           settings.angle = [0,360]
           break;
       }

}

   }
   return settings;

}

function predefineSpeed(settings) { if ($.type(settings.animationSpeed) == "string") {

     switch (settings.animationSpeed) { 
       case 'slow':
         settings.animationSpeed = [75,700]
         break;
       case 'medium':
         settings.animationSpeed = [50,500]
         break;
       case 'fast':
         settings.animationSpeed = [25,250]
         break;
       case 'instant':
         settings.animationSpeed = [0,0]
         break;
     }
   }
   return settings;

}

 $.fn.wheelmenu = function(options){
   var settings = $.extend({}, defaults, options);
   
   settings = predefineSpeed(settings);
   
   return this.each(function(){
     var button = $(this)
     var el = $($(this).attr("href"));
     el.addClass("wheel");
     
     button.css("opacity", 0).animate({
       opacity: 1
     })
     if (settings.trigger == "hover") {

       button.bind({
         mouseenter: function() {
           el.showIcon(button, settings);
         }
       });
       
       el.bind({
         mouseleave: function() {
           el.hideIcon(button, settings);
         }
       });
       
     } else {
       button.click( function() {
         if (el.css('visibility') == "visible") {
           el.hideIcon(button, settings);
         } else {
           el.showIcon(button, settings);
         }
       });
     }
   });
 }
 

}(window.jQuery);