Skip to content

Instantly share code, notes, and snippets.

@srobbin
Created July 1, 2014 21:12
Show Gist options
  • Save srobbin/de25b66c72cef96eb9d1 to your computer and use it in GitHub Desktop.
Save srobbin/de25b66c72cef96eb9d1 to your computer and use it in GitHub Desktop.
/*
* 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