radmenu.js

/*!
 * jQuery Radmenu (Radial Menu) Plugin
 * version: 1.0.0 (14-MAY-2011)
 * @requires v1.4.2 or later
 * 
 * Author: Nirvana Tikku - ntikku@gmail.com - @ntikku
 * Documentation:
 * 		http://www.tikku.com/jquery-radmenu-plugin
 * 
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html 
 * 
 */

;(function($){
	
	// radmenu namespace
	
	var RADMENU = ".radmenu", // events are radmenu.{event} - guarantee no NS collision
	
		OPTS = "options"+RADMENU,
		
		PREVOPTS = "prevoptions"+RADMENU,
		
		RADMENU_CLASS = "ui-radmenu-parent"; 
		
	// private defaults
	var defaults = {
		
		// radial menu container properties
		
		listClass: "list",
		
		itemClass: "item",
		
		activeItemClass: "active",
		
		// active item selection properties
		
		selectEvent: null, // click, mouseenter etc
		
		onSelect: function($selected){},
		
		// initial setup properties
		
		radius: 10, // in pixels
		
		angleOffset: 0, // in degrees
		
		centerX: 0,
		
		centerY: 0,
		
		// animation properties
		
		animSpeed: 500,
		
		animEasing: "swing",
		
		// scaling properties and method
		
		initialScale: 1,
		
		scaleAnimSpeed: 0,
		
		scaleAnimEasing: "swing",
		
		scaleAnimOpts: {},
		
		// example onScaleItem: $item.css("font-size", factor+"em");
		onScaleItem: function($item, factor, coords){},
		
		// public events 
		
		afterAnimation: function($m){},
		
		onShow: function($items){$items.show();},
		
		onHide: function($items){$items.hide();},
		
		onNext: function($items){return true;},
		
		onPrev: function($items){return true;},
		
		// rotation property and fine-tuning event 
		
		rotate: false,
		
		getRotation: function(degrees, index, numItems){return degrees;}
		
	};

	// radial menu container setup defaults
	$.radmenu = {
		
		container: {
			
			html: "<div></div>",
			
			css: { "position": "relative" },
			
			clz: "radial_div",
			
			itemClz: "radial_div_item"
			
		}
		
	};
	
	/**
	 * jQuery Radmenu Plugin
	 * 	@params 
	 * 		> input, dealt with by type
	 * 	if empty - assumes initialization
	 * 	if object - assumes initialization
	 * 	if string - assumes trigger method
	 * 	if number - select a particular menu item
	 */ 
	$.fn.radmenu = function(input, param){
		
		try {
			
			var $this = $(this);
			
			var type = typeof input;
			
			if(arguments.length==0 || type=="object") 
			
				return init($this, input);
				
			else if(type=="string")
			
				return (input=="items" || input=="opts") ?
					$this.triggerHandler(input+RADMENU) :
					$this.trigger(input+RADMENU, param || null);
					
			else if(type=="number")
				
				return $this.trigger("select"+RADMENU,input);
				
		} catch (e) { 
			
			return "error : "+e; 
			
		}
		
	};
	
	/**
	 * private :: init fn
	 * @params
	 * 	$menu - the jQuery obj / array w/ menu target
	 *  opts - options object, to be merged with defaults
	 */
	function init($menu, opts){
		
		var o = $.extend({}, defaults, opts);
		
		return $menu.each(function(m){
			
			var $this = $(this);
			
			if(!$this.hasClass(RADMENU_CLASS)) {
			
				var $list = $this.find("."+o.listClass);
			
				$list.find("."+o.itemClass).hide(); // ensure its hidden
			
				// set the options within the data for the elem & bind evts
				$this.data(OPTS, updateRadius(o, o.initialScale, o.radius));
			
				for(e in MENU) 
					$this.bind(e+RADMENU, $this, MENU[e]);
				
				$this.addClass(RADMENU_CLASS);
			
			}
			
		});
		
	};

	/**
	 * selects a menu item - this method provides
	 * functionality for nested radial menus
	 * @param 
	 * 	evt - the event object
	 * triggers select event on radmenu container
	 * 	using the index of the 'target object'
	 */
	function selectMenuitem(evt){ 
		
		var $this = $(this);
		
		var $element = $(evt.target);
		
		var container = $.radmenu.container;
		
		if(!$element.hasClass(container.itemClz))
			$element = $element.closest("."+container.itemClz);
			
		var isInNested = $element.parents("."+container.itemClz).length>0;
		
		var index = $element.index();
		
		if(!isInNested)
			$this.parents("."+container.clz).radmenu(index);
			
		else 
			$this.radmenu(index);
			
		cancelBubble(evt);
		
	};
	
	/**
	 * cancel event bubbling - x-browser friendly
	 * @param
	 * 	evt - the event object
	 */
	function cancelBubble(evt){
		
		if(!$.support.opacity) 
			window.event.cancelBubble = true;
			
		else 
			evt.stopPropagation();
			
	};
	
	/**
	 * All the events bound to the radial menu instance
	 */
	var MENU = {
		opts: function(evt) { 
			
			return getMenu(evt).opts;
			
		},
		show: function(evt, fn){ // fn = user input onshow
			
			var $m = getMenu(evt);
			
			var container = $.radmenu.container;
			
			// clear any existing radial menus within the menu
			$m.menu.find("."+container.clz).remove();
			
			// grab the desired menu items to be used in building the radmenu
			var $menuitems = $m.menu.find("."+$m.opts.itemClass);
			
			// create a div that will be the radmenu & create the HTML for the items
			var $radialMenu = $(container.html)
								.addClass(container.clz)
								.css(container.css)
								.html(buildMenuHTML($menuitems, $m.opts));
				
			// assign a selection event if the user has specified something
			var $menuitems = $radialMenu.find("."+container.itemClz);
			
			if($m.opts.selectEvent!=null)
				$menuitems.bind($m.opts.selectEvent,selectMenuitem);
				
			// append the radmenu items inside the menu 
			$radialMenu.appendTo($m.menu);
			
			if(typeof(fn) == "function") 
				fn($menuitems); // allow passing in a method
				
			else
				$m.opts.onShow($menuitems); // user can do what they want
			
			cancelBubble(evt);
			
		},
		hide: function(evt){ 
			
			var $m = getMenu(evt);
			
			// remove the radmenu that was built and appended inside the menu
			var $menu = $m.menu.find("."+$.radmenu.container.clz);
			
			$m.opts.onHide($menu.find("."+$.radmenu.container.itemClz));
			
			$menu.remove();
			
			cancelBubble(evt);
			
		},
		select: function(evt, selectIndex){
			
			var $m = getMenu(evt);
			
			// with a specific index specified, grab the item
			var $selected = $($m.raditems().get(selectIndex));
			
			// remove the active class on the elements siblings
			$selected.siblings().removeClass($m.opts.activeItemClass);
			
			// add the active class on the selected item
			$selected.addClass($m.opts.activeItemClass);
			
			// pass the selected item to a customizable function
			$m.opts.onSelect($selected);
			
			cancelBubble(evt);
			
		},
		next: function(evt){ // clockwise
			
			var $m = getMenu(evt);
			
			if( !$m.opts.onNext($m) ) return;
			
			// switch the first and last items and then animate
			switchItems($m, $m.raditems().length-1, 0);
			
		},
		prev: function(evt){ // anticlockwise
			
			var $m = getMenu(evt);
			
			if( !$m.opts.onPrev($m) ) return;
			
			// switch the last and first items and then animate
			switchItems($m, 0, $m.raditems().length-1);
			
		},
		shuffle: function(evt){
			
			var $m = getMenu(evt);
			
			var len = $m.raditems().length;
			
			// swap some random item with another random item, and add some shuffling effects
			switchItems($m, rnd(len), rnd(len));
			
		},
		destroy: function(evt){
			
			var $m = getMenu(evt);
			
			$m.menu.data(OPTS, null)
				.data(PREVOPTS, null)
				.removeClass(RADMENU_CLASS)
				.unbind(RADMENU);
			
			return $m.menu;
			
		},
		items: function(evt){
			
			return getMenu(evt).raditems();
			
		},
		scale: function(evt, factor){
			
			var $m = getMenu(evt);
			
			if(factor){
				
				var o = $m.opts;
				
				var container = $.radmenu.container;
				
				var prevOpts = $m.menu.data(PREVOPTS);
				
				if(!prevOpts) $m.menu.data(PREVOPTS, prevOpts=o);
				
				// get the radial menu items
				var $items = $m.menu.find("."+container.itemClz);
				
				var updatedRadiusOpts = updateRadius(o, factor, prevOpts.radius);
				
				$m.menu.data(OPTS, updatedRadiusOpts); // save the radius for anim purposes
				
				$items.each(function(i){ // for each item update the x,y + css
					
					var $this = $(this);
					
					var coords = getCoords(i, $items.length, updatedRadiusOpts);
					
					var animOpts = {
						
						top: coords.top,
						
						left: coords.left
						
					};
					
					if(typeof(o.scaleAnimOpts) == "object") {
						
						animOpts = $.extend({}, o.scaleAnimOpts, animOpts);
						
					}
					
					$this.animate(animOpts, o.scaleAnimSpeed, o.scaleAnimEasing);
					
					$m.opts.onScaleItem($this, factor, coords);
					
				});
				
			}
			
			return $m.menu;
		}
	};
	
	// simply multiples the radius by a factor
	function updateRadius(opts, radius, factor){
		
		return $.extend({},opts,{radius:(factor*radius)});
		
	};
	
	// random int offset 
	function rnd(i){
		
		return parseInt( Math.random() * i );
		
	};
	
	/**
	 * getMenu - this is a method that returns all
	 *	the required objects within a given method
	 *	that is subscribed to the radmenu object.
	 *	
	 * @params
	 * 	evt - the event object
	 * @return
	 * 	Object
	 * 		> menu - jQueryfied menu
	 * 		> opts - the options
	 * 		> raditems - the radial menu items
	 */
	function getMenu(evt){
		
		var $menu = evt.data;
		
		return {
			
			menu: $menu, 
			
			opts: $menu.data(OPTS),
			
			raditems: function(){
				
				// you will want to trigger raditems() if the contents get modified
				return $menu.find("."+$.radmenu.container.itemClz);
				
			}
			
		};
	};
	
	/**
	 * Switch Items -- this method is used in re-evaluating the (x,y) coords
	 * 	as a result of swapping the position of items. The intent with this
	 * 	is that the plugin will reoganize the items (in the container, 
	 *	as opposed to the original dom elements) such that the elements
	 *	positions, when selected, remains fixed around the circle.
	 *	Based on given indexes the items are swapped and then animated. The 
	 *	most typical case involves removing the first and swapping the last
	 *	and vice versa.
	 * 
	 * @params
	 * 	$m - the menu package
	 * 	remove - the index of the menuitem to replace in the swap
	 * 	add - the index of the menuitem to use in the swap (a placeholder)
	 */
	function switchItems($m, remove, add){
		
		if(remove==add) add = remove - 1; // ensure that we don't lose any items
		
		var $remove = $($m.raditems()[remove]); // grab the replacement item
		
		var toAddto = $m.raditems()[add]; // grab the placeholder 
		
		// insertion is dependent on index of items
		if(remove>add) 
			$remove.insertBefore(toAddto);
			
		else
		 	$remove.insertAfter(toAddto);
		
		animateWheel($m, (remove<add)); // posOffset = 5:neat, 10:fireworksesque, 15:subtleish
		
	};
	
	/**
	 * buildMenuHTML - returns string instead of objects
	 * 		for performance 
	 * 
	 * @params
	 * 	$menuitems - the jQueryified menu items
	 * 	opts - the radial menu's options
	 * @return
	 * 	String
	 * 		> each item is wrapped with an 
	 * 			absolute positioned div at an
	 * 			offset determined by it's location
	 * 			on a circle
	 */
	function buildMenuHTML($menuitems, opts){
		
		var ret = [];
		
		$menuitems.each(function(i){ // for each item we will want to build the HTML
			
			var $this = $(this);
			
			var coords = getCoords(i, $menuitems.length, opts); // each item has a position
			
			var rotationHTML = "transform:rotate("+coords.angle+"deg); ";
			
			ret.push("<div class='"+$.radmenu.container.itemClz+"' "); // outer container for the div
			
			// after getting the coordinates, absolute position element at (x,y)
			ret.push("style='");
			ret.push("position:absolute;display:none;");
			ret.push("left:"+coords.left+"px;");
			ret.push("top:"+coords.top+"px;");

			if(opts.rotate) {
				
				for(rot in XForm.opts)
					ret.push(XForm.opts[rot]+rotationHTML);
					
			}
			
			ret.push("'>");
		
			ret.push($this.html()); // append the HTML _within_ the user's defined 'item'
		
			ret.push("</div>");
			
		});
		
		return ret.join("");
		
	};
	
	/**
	 * Get the radians value of an angle given a 
	 * particular slice of the selection
	 * 
	 * 	@params
	 * 		iIdx - the instance index
	 * 		iNum - the number of menu items
	 */
	function getAngleAtIndex(iIdx, iNum){
		
		return 2 * Math.PI * parseFloat(iIdx/iNum); // radians

	};
	
	/**
	 * getCoords - returns coordinates for menuitems, as 
	 * 	well as an animation object with the appropriate rotation
	 *	as per config
	 * 
	 * 	@params
	 * 		iIdx - the instance index (1st, 2nd, 3rd, etc..)
	 * 		iNum - the number of menuitems to distribute
	 * 		oOpts - the options provided by the user customizations
	 * 		bClockwise - a flag for the animation object 
	 * 	@return
	 * 		Object - (x, y) coords & the angle in degrees
	 */
	function getCoords(iIdx, iNum, oOpts, bClockwise){
		
		var radius = oOpts.radius; // user specified radius
		
		var angle = getAngleAtIndex(iIdx, iNum);
		
		angle += toRadians(oOpts.angleOffset); // provide flexibility of angle
		
		//	assuming: hypotenuse (hyp) = radius
		//
		//	opposite	|\	hypotenuse
		//				| \
		//		90deg	|__\	(*theta* - angle)
		//				adjacent
		//
		//	x-axis offset: cos(theta) = adjacent / hypotenuse
		//		==> adjacent = left = cos(theta) * radius
		//	y-axis offset: sin(theta) = opposite / hypotenuse
		//		==> opposite = top = sin(theta) * radius
		
		var l = oOpts.centerX + ( Math.cos( angle ) * radius ), // "left"
			// angle is rounded to 2dp to fix a bug
			t = oOpts.centerY + ( Math.sin( parseInt(angle*100)/100 ) * radius ); // "top"
			
		var degrees = oOpts.rotate ? oOpts.getRotation( angle * 180 / Math.PI, iIdx, iNum ) : 0;

		// NOTE: why not just simply rotate to the angle? buggy
		// the element that gets shifted cycles through an unnecessary revolution 
		// i.e. >360deg -> >0 deg
		var slice = oOpts.rotate ? ( getAngleAtIndex(1, iNum) * 180 / Math.PI ) : 0;

		var rotation = ( bClockwise==true ? "-=" : "+=" ) + slice;
		
		return {
			
			left: l, 
			
			top: t, 
			
			angle: degrees, 
			
			animObj:{
				
				left: l, 
				
				top: t, 
				
				radrotate: rotation
			
			} 
			
		}; // return the x,y coords
		
	};
	
	/**
	 * simple method to convert degrees to radians
	 */
	function toRadians(degrees){
		
		return degrees * Math.PI / 180;
		
	};
	
	/**
	 * animateWheel - performs animation on menu items within 
	 *	the container elements
	 * 
	 * @params
	 * 	$m - object holding menu & options
	 * 	iPosOffset - the position offset for the initial menuitem
	 * 	bClockwise - for the animation, clockwise or counter
	 */
	function animateWheel($m, bClockwise){
		
		// get the menu from the $m menu package
		var $menuitems = $m.raditems();
		
		// get a handle on the number of items
		var len = $menuitems.length;
		
		// for each item, we're going to animate left/top attributes
		$menuitems.each(function(i){
			
			var $this = $(this);
			
			// establish the new coordinates with a customizable offset
			var coords = getCoords(i, len, $m.opts, bClockwise);
			
			// playing with this is fun - this basically just
			// performs the animation with new coordinates 
			
			$this.animate(
				coords.animObj, 
				$m.opts.animSpeed, 
				$m.opts.animEasing, 
				function(){
					if(i==(len-1) ){
						// allow the user to do something after completing an animation
						$m.opts.afterAnimation($m);
					}
				}
			);
		});
	};
	
	/**
	 * Transform Utils
	 */
	var XForm = {};
	
	// local cache of the appropriate transform to use
	XForm.attr = undefined;
	
	// Safari, Chrome, FF 3.5+, IE 9+, and Opera 11+
	XForm.opts = ["","-webkit-","-moz-","-ms-","-o-"];
	XForm.cssattrs = ["","Webkit","Moz","ms","O"];
	
	/**
	 * Get the relevant CSS attr and cache it 
	 */
	XForm.getCSSAttr = function($elm){ 
		
		if( this.attr ) 
			return this.attr;
			
		return this.attr = (function(){
			
			for(var ii=0; ii<XForm.cssattrs.length; ii++){
				
				var opt = XForm.cssattrs[ii]+"Transform";
				
				if( $elm[0].style[opt] )
					return opt;
				
			}
			
			return "transform";
			
		})();
	
	};
	
	/**
	 * Deduce which transform is applicable
	 * and extract the attr's value
	 * 	@params
	 * 	  $elm - jQuerified element which the 
	 * 		css attribute is evaluated against
	 */
	XForm.getTransformValue = function($elm){
		
		return jQuery.style( $elm[0], XForm.getCSSAttr($elm) );
	
	};
	
	/**
	 * jQuery Proxy object
	 */
	var _ = {};

	_.cur = $.fx.prototype.cur;
	
	/**
	 * jQuery Proxy Method: 
	 * 	We need to override this method in order for the "rotate([x]deg)" 
	 * 	css value to be parsed and passed through to the step fn numerically 
	 * 
	 * Credit due: Zachary Johnson www.zachstronaut.com 
	 * 		from https://github.com/zachstronaut/jquery-animate-css-rotate-scale
	 */
    $.fx.prototype.cur = function() {
	
        if ( this.prop == "radrotate" ) {
	
			var $elm = $(this.elem);
	
			var style = XForm.getTransformValue($elm) || 'none';
			
	        if (style) {
		
                var m = style.match(/rotate\(([^)]+)\)/);

                if (m && m[1])	{
	
					return parseFloat( m[1] );
					
				}

            }

            return 0;

        }

        return _.cur.apply(this, arguments);

    };	

	//
	// use a custom animation property - radrotate
	//
	$.fx.step.radrotate = function(fx) {
			
		var $elm = $(fx.elem);
		
        $elm.css(XForm.getCSSAttr($elm), "rotate("+ fx.now +"deg)");
		
    };
	
})(jQuery);