Created
July 1, 2014 21:12
-
-
Save srobbin/de25b66c72cef96eb9d1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Flower - jQuery plugin for pie menus | |
* | |
* Author: Aza Raskin | |
* | |
* Dual licensed under the MIT and GPL licenses: | |
* http://www.opensource.org/licenses/mit-license.php | |
* http://www.gnu.org/licenses/gpl.html | |
*/ | |
(function($) { | |
var active = false; | |
var state = ""; | |
var className = "pie_menu"; | |
var uniqueId = ""; | |
var uniqueTarget; | |
var clickStyle = "za-song-click"; | |
$.fn.flower = function(e, optionDict) { | |
/* All of these are optional. | |
{ | |
click: func(state), | |
image: "pict.png", | |
indicate: func(event, state), | |
leave: func( event, hideFunc ) | |
} | |
*/ | |
var randNum = Math.floor( Math.random() * 10000 ); | |
uniqueId = "pie_" + randNum.toString(); | |
display(this, optionDict, e, e.target); | |
}; | |
var i = 0; | |
function setStateFromEvent( event ){ | |
var x = event.offsetX ? event.offsetX : event.pageX - $(this).offset().left; | |
var y = event.offsetY ? event.offsetY : event.pageY - $(this).offset().top; | |
x -= $(this).width()/2; | |
y -= $(this).height()/2; | |
magnitude = Math.sqrt( x*x + y*y ); | |
if( x == 0 ) x = 0.001; | |
x = x/magnitude; | |
y = y/magnitude; | |
var angle = 180 * Math.atan(y/x) / Math.PI; | |
if(x > 0) angle = angle*-1; | |
if(y > 0) angle = angle*-1; | |
var newState = ""; | |
if( magnitude > 15 ){ | |
if( angle > 62 ){ | |
if( y < 0 ){ newState = "up"; } | |
else{ newState = "down"; } | |
} | |
if( angle < 33 ){ | |
if( x > 0 ){ newState = "right"; } | |
else{ newState = "left"; } | |
} | |
} | |
$(this).attr( "className", className ); | |
if( newState ) $(this).addClass( "hover_" + newState ); | |
// Trigger the the indicate event and pass in (event, state); | |
if( newState != state ){ | |
$(this).trigger( "indicate", [newState, uniqueTarget] ); | |
state = newState; | |
} | |
} | |
function display(trigger, optionDict, e, target) { | |
active = true; // context active | |
uniqueTarget = target; | |
state = ""; | |
div = document.createElement( "div" ); | |
$(div).attr({ className:className, id:uniqueId }) | |
// If there is an image to update... | |
if( optionDict.image ){ | |
$(div).css( | |
"background-image", | |
"url(%s)".replace("%s", optionDict.image) | |
); | |
} | |
if( optionDict.leave ) $(div).bind( "leave", optionDict.leave ); | |
// Don't use jQuery onmousemove events in Firefox. It eats up 100% CPU | |
// there, but in no other browser. | |
if( $.browser.msie ) | |
$(div).mousemove( setStateFromEvent ); | |
else | |
$(div).get(0).onmousemove = setStateFromEvent; | |
$(div).mouseout( function(event){ | |
if( optionDict.leave ) $(div).trigger( "leave", [event.relatedTarget, hide] ); | |
else hide(); | |
}); | |
$(div).mouseup( function(){ | |
// Hide the pie menu if the click callback returns true. | |
if( optionDict.click(state, target) ){ hide(); } | |
}); | |
if( optionDict.indicate ){ | |
$(div).bind( "indicate", optionDict.indicate ) | |
} | |
// If a click style was applied, do it now | |
if( optionDict.clickstyle ) { | |
clickStyle = optionDict.clickstyle; | |
$(uniqueTarget).addClass(clickStyle); | |
} | |
// Display the div | |
$("body").append(div); | |
x = e.pageX; | |
y = e.pageY; | |
width = $(div).width(); | |
height = $(div).height(); | |
// IE crashes when I try to get the width and height from an | |
// object before it has been added to a page. | |
$(div).css({top: y-width/2, left: x-height/2}); | |
// Add a class to the parent element, so that the user knows which one the flower is attached to | |
$(target).parent().addClass(clickStyle); | |
return false; | |
} | |
function hide(target) { | |
// Remove the song-click class from the parent target | |
$(uniqueTarget).parent().removeClass(clickStyle); | |
$('.'+className).fadeOut("fast", function(){ remove();} ); | |
return false; | |
} | |
function remove(){ | |
$('div').remove('.'+className); | |
active = false; | |
return false; | |
} | |
})(jQuery); | |
(function($) { | |
$.fn.partOf = function( expr ){ | |
return this.is( expr ) || this.parents( expr ).length > 0 | |
} | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment