Commits

megamahi committed 100d46d

This needs some correction. It is too limiting to force filamentgroup to only be used for link redirection (ie, dropdowns, filtering with ajax).

Comments (0)

Files changed (1)

tw2/jqplugins/fg/static/jquery/fg/js/fg.menu.js

 		flyOutOnState: 'ui-state-default',
 		nextMenuLink: 'ui-icon-triangle-1-e', // class to style the link (specifically, a span within the link) used in the multi-level fgmenu to show the next level
 		topLinkText: 'All',
-		nextCrumbLink: 'ui-icon-carat-1-e'	
+		nextCrumbLink: 'ui-icon-carat-1-e',
+		onClick: null
 	}, options);
 	
 	var killAllMenus = function(){
 	this.chooseItem = function(item){
 		fgmenu.kill();
 		// edit this for your own custom function/callback:
-		$('#fgmenuSelection').text($(item).text());	
-		location.href = $(item).attr('href');
-	};
-};
-
-Menu.prototype.flyout = function(container, options) {
-	var fgmenu = this;
-	
-	this.resetFlyoutMenu = function(){
-		var allLists = container.find('ul ul');
-		allLists.removeClass('ui-widget-content').hide();	
-	};
-	
-	container.addClass('fg-menu-flyout').find('li:has(ul)').each(function(){
-		var linkWidth = container.width();
-		var showTimer, hideTimer;
-		var allSubLists = $(this).find('ul');		
-		
-		allSubLists.css({ left: linkWidth, width: linkWidth }).hide();
-			
-		$(this).find('a:eq(0)').addClass('fg-menu-indicator').html('<span>' + $(this).find('a:eq(0)').text() + '</span><span class="ui-icon '+options.nextMenuLink+'"></span>').hover(
-			function(){
-				clearTimeout(hideTimer);
-				var subList = $(this).next();
-				if (!fitVertical(subList, $(this).offset().top)) { subList.css({ top: 'auto', bottom: 0 }); };
-				if (!fitHorizontal(subList, $(this).offset().left + 100)) { subList.css({ left: 'auto', right: linkWidth, 'z-index': 999 }); };
-				showTimer = setTimeout(function(){
-					subList.addClass('ui-widget-content').show(options.showSpeed).attr('aria-expanded', 'true');	
-				}, 300);	
-			},
-			function(){
-				clearTimeout(showTimer);
-				var subList = $(this).next();
-				hideTimer = setTimeout(function(){
-					subList.removeClass('ui-widget-content').hide(options.showSpeed).attr('aria-expanded', 'false');
-				}, 400);	
-			}
-		);
-
-		$(this).find('ul a').hover(
-			function(){
-				clearTimeout(hideTimer);
-				if ($(this).parents('ul').prev().is('a.fg-menu-indicator')) {
-					$(this).parents('ul').prev().addClass(options.flyOutOnState);
-				}
-			},
-			function(){
-				hideTimer = setTimeout(function(){
-					allSubLists.hide(options.showSpeed);
-					container.find(options.flyOutOnState).removeClass(options.flyOutOnState);
-				}, 500);	
-			}
-		);	
-	});
-	
-	container.find('a').click(function(){
-		fgmenu.chooseItem(this);
-		return false;
-	});
-};
-
-
-Menu.prototype.drilldown = function(container, options) {
-	var fgmenu = this;	
-	var topList = container.find('.fg-menu');	
-	var breadcrumb = $('<ul class="fg-menu-breadcrumb ui-widget-header ui-corner-all ui-helper-clearfix"></ul>');
-	var crumbDefaultHeader = $('<li class="fg-menu-breadcrumb-text">'+options.crumbDefaultText+'</li>');
-	var firstCrumbText = (options.backLink) ? options.backLinkText : options.topLinkText;
-	var firstCrumbClass = (options.backLink) ? 'fg-menu-prev-list' : 'fg-menu-all-lists';
-	var firstCrumbLinkClass = (options.backLink) ? 'ui-state-default ui-corner-all' : '';
-	var firstCrumbIcon = (options.backLink) ? '<span class="ui-icon ui-icon-triangle-1-w"></span>' : '';
-	var firstCrumb = $('<li class="'+firstCrumbClass+'"><a href="#" class="'+firstCrumbLinkClass+'">'+firstCrumbIcon+firstCrumbText+'</a></li>');
-	
-	container.addClass('fg-menu-ipod');
-	
-	if (options.backLink) { breadcrumb.addClass('fg-menu-footer').appendTo(container).hide(); }
-	else { breadcrumb.addClass('fg-menu-header').prependTo(container); };
-	breadcrumb.append(crumbDefaultHeader);
-	
-	var checkMenuHeight = function(el){
-		if (el.height() > options.maxHeight) { el.addClass('fg-menu-scroll') };	
-		el.css({ height: options.maxHeight });
-	};
-	
-	var resetChildMenu = function(el){ el.removeClass('fg-menu-scroll').removeClass('fg-menu-current').height('auto'); };
-	
-	this.resetDrilldownMenu = function(){
-		$('.fg-menu-current').removeClass('fg-menu-current');
-		topList.animate({ left: 0 }, options.crossSpeed, function(){
-			$(this).find('ul').each(function(){
-				$(this).hide();
-				resetChildMenu($(this));				
-			});
-			topList.addClass('fg-menu-current');			
-		});		
-		$('.fg-menu-all-lists').find('span').remove();	
-		breadcrumb.empty().append(crumbDefaultHeader);		
-		$('.fg-menu-footer').empty().hide();	
-		checkMenuHeight(topList);		
-	};
-	
-	topList
-		.addClass('fg-menu-content fg-menu-current ui-widget-content ui-helper-clearfix')
-		.css({ width: container.width() })
-		.find('ul')
-			.css({ width: container.width(), left: container.width() })
-			.addClass('ui-widget-content')
-			.hide();		
-	checkMenuHeight(topList);	
-	
-	topList.find('a').each(function(){
-		// if the link opens a child fgmenu:
-		if ($(this).next().is('ul')) {
-			$(this)
-				.addClass('fg-menu-indicator')
-				.each(function(){ $(this).html('<span>' + $(this).text() + '</span><span class="ui-icon '+options.nextMenuLink+'"></span>'); })
-				.click(function(){ // ----- show the next fgmenu			
-					var nextList = $(this).next();
-		    		var parentUl = $(this).parents('ul:eq(0)');   		
-		    		var parentLeft = (parentUl.is('.fg-menu-content')) ? 0 : parseFloat(topList.css('left'));    		
-		    		var nextLeftVal = Math.round(parentLeft - parseFloat(container.width()));
-		    		var footer = $('.fg-menu-footer');
-		    		
-		    		// show next fgmenu   		
-		    		resetChildMenu(parentUl);
-		    		checkMenuHeight(nextList);
-					topList.animate({ left: nextLeftVal }, options.crossSpeed);						
-		    		nextList.show().addClass('fg-menu-current').attr('aria-expanded', 'true');    
-		    		
-		    		var setPrevMenu = function(backlink){
-		    			var b = backlink;
-		    			var c = $('.fg-menu-current');
-			    		var prevList = c.parents('ul:eq(0)');
-			    		c.hide().attr('aria-expanded', 'false');
-		    			resetChildMenu(c);
-		    			checkMenuHeight(prevList);
-			    		prevList.addClass('fg-menu-current').attr('aria-expanded', 'true');
-			    		if (prevList.hasClass('fg-menu-content')) { b.remove(); footer.hide(); };
-		    		};		
-		
-					// initialize "back" link
-					if (options.backLink) {
-						if (footer.find('a').size() == 0) {
-							footer.show();
-							$('<a href="#"><span class="ui-icon ui-icon-triangle-1-w"></span> <span>Back</span></a>')
-								.appendTo(footer)
-								.click(function(){ // ----- show the previous fgmenu
-									var b = $(this);
-						    		var prevLeftVal = parseFloat(topList.css('left')) + container.width();		    						    		
-						    		topList.animate({ left: prevLeftVal },  options.crossSpeed, function(){
-						    			setPrevMenu(b);
-						    		});			
-									return false;
-								});
-						}
-					}
-					// or initialize top breadcrumb
-		    		else { 
-		    			if (breadcrumb.find('li').size() == 1){				
-							breadcrumb.empty().append(firstCrumb);
-							firstCrumb.find('a').click(function(){
-								fgmenu.resetDrilldownMenu();
-								return false;
-							});
-						}
-						$('.fg-menu-current-crumb').removeClass('fg-menu-current-crumb');
-						var crumbText = $(this).find('span:eq(0)').text();
-						var newCrumb = $('<li class="fg-menu-current-crumb"><a href="javascript://" class="fg-menu-crumb">'+crumbText+'</a></li>');	
-						newCrumb
-							.appendTo(breadcrumb)
-							.find('a').click(function(){
-								if ($(this).parent().is('.fg-menu-current-crumb')){
-									fgmenu.chooseItem(this);
-								}
-								else {
-									var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180;
-									topList.animate({ left: newLeftVal }, options.crossSpeed, function(){
-										setPrevMenu();
-									});
-								
-									// make this the current crumb, delete all breadcrumbs after this one, and navigate to the relevant fgmenu
-									$(this).parent().addClass('fg-menu-current-crumb').find('span').remove();
-									$(this).parent().nextAll().remove();									
-								};
-								return false;
-							});
-						newCrumb.prev().append(' <span class="ui-icon '+options.nextCrumbLink+'"></span>');
-		    		};			
-		    		return false;    		
-    			});
+		$('#fgmenuSelection').text($(item).text());
+		if (options.onClick != null) {
+			options.onClick(item);
 		}
-		// if the link is a leaf node (doesn't open a child fgmenu)
-		else {
-			$(this).click(function(){
-				fgmenu.chooseItem(this);
-				return false;
-			});
-		};
-	});
-};
-
-
-/* Menu.prototype.setPosition parameters (defaults noted with *):
-	referrer = the link (or other element) used to show the overlaid object 
-	settings = can override the defaults:
-		- posX/Y: where the top left corner of the object should be positioned in relation to its referrer.
-				X: left*, center, right
-				Y: top, center, bottom*
-		- offsetX/Y: the number of pixels to be offset from the x or y position.  Can be a positive or negative number.
-		- directionH/V: where the entire fgmenu should appear in relation to its referrer.
-				Horizontal: left*, right
-				Vertical: up, down*
-		- detectH/V: detect the viewport horizontally / vertically
-		- linkToFront: copy the fgmenu link and place it on top of the fgmenu (visual effect to make it look like it overlaps the object) */
-
-Menu.prototype.setPosition = function(widget, caller, options) { 
-	var el = widget;
-	var referrer = caller;
-	var dims = {
-		refX: referrer.offset().left,
-		refY: referrer.offset().top,
-		refW: referrer.getTotalWidth(),
-		refH: referrer.getTotalHeight()
-	};	
-	var options = options;
-	var xVal, yVal;
-	
-	var helper = $('<div class="positionHelper"></div>');
-	helper.css({ position: 'absolute', left: dims.refX, top: dims.refY, width: dims.refW, height: dims.refH });
-	el.wrap(helper);
-	
-	// get X pos
-	switch(options.positionOpts.posX) {
-		case 'left': 	xVal = 0; 
-			break;				
-		case 'center': xVal = dims.refW / 2;
-			break;				
-		case 'right': xVal = dims.refW;
-			break;
-	};
-	
-	// get Y pos
-	switch(options.positionOpts.posY) {
-		case 'top': 	yVal = 0;
-			break;				
-		case 'center': yVal = dims.refH / 2;
-			break;				
-		case 'bottom': yVal = dims.refH;
-			break;
-	};
-	
-	// add the offsets (zero by default)
-	xVal += options.positionOpts.offsetX;
-	yVal += options.positionOpts.offsetY;
-	
-	// position the object vertically
-	if (options.positionOpts.directionV == 'up') {
-		el.css({ top: 'auto', bottom: yVal });
-		if (options.positionOpts.detectV && !fitVertical(el)) {
-			el.css({ bottom: 'auto', top: yVal });
-		}
-	} 
-	else {
-		el.css({ bottom: 'auto', top: yVal });
-		if (options.positionOpts.detectV && !fitVertical(el)) {
-			el.css({ top: 'auto', bottom: yVal });
-		}
-	};
-	
-	// and horizontally
-	if (options.positionOpts.directionH == 'left') {
-		el.css({ left: 'auto', right: xVal });
-		if (options.positionOpts.detectH && !fitHorizontal(el)) {
-			el.css({ right: 'auto', left: xVal });
-		}
-	} 
-	else {
-		el.css({ right: 'auto', left: xVal });
-		if (options.positionOpts.detectH && !fitHorizontal(el)) {
-			el.css({ left: 'auto', right: xVal });
-		}
-	};
-	
-	// if specified, clone the referring element and position it so that it appears on top of the fgmenu
-	if (options.positionOpts.linkToFront) {
-		referrer.clone().addClass('linkClone').css({
-			position: 'absolute', 
-			top: 0, 
-			right: 'auto', 
-			bottom: 'auto', 
-			left: 0, 
-			width: referrer.width(), 
-			height: referrer.height()
-		}).insertAfter(el);
-	};
-};
-
-
-/* Utilities to sort and find viewport dimensions */
-
-function sortBigToSmall(a, b) { return b - a; };
-
-jQuery.fn.getTotalWidth = function(){
-	return $(this).width() + parseInt($(this).css('paddingRight')) + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('borderRightWidth')) + parseInt($(this).css('borderLeftWidth'));
-};
-
-jQuery.fn.getTotalHeight = function(){
-	return $(this).height() + parseInt($(this).css('paddingTop')) + parseInt($(this).css('paddingBottom')) + parseInt($(this).css('borderTopWidth')) + parseInt($(this).css('borderBottomWidth'));
-};
-
-function getScrollTop(){
-	return self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-};
-
-function getScrollLeft(){
-	return self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
-};
-
-function getWindowHeight(){
-	var de = document.documentElement;
-	return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
-};
-
-function getWindowWidth(){
-	var de = document.documentElement;
-	return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
-};
-
-/* Utilities to test whether an element will fit in the viewport
-	Parameters:
-	el = element to position, required
-	leftOffset / topOffset = optional parameter if the offset cannot be calculated (i.e., if the object is in the DOM but is set to display: 'none') */
-	
-function fitHorizontal(el, leftOffset){
-	var leftVal = parseInt(leftOffset) || $(el).offset().left;
-	return (leftVal + $(el).width() <= getWindowWidth() + getScrollLeft() && leftVal - getScrollLeft() >= 0);
-};
-
-function fitVertical(el, topOffset){
-	var topVal = parseInt(topOffset) || $(el).offset().top;
-	return (topVal + $(el).height() <= getWindowHeight() + getScrollTop() && topVal - getScrollTop() >= 0);
-};
-
-/*-------------------------------------------------------------------- 
- * javascript method: "pxToEm"
- * by:
-   Scott Jehl (scott@filamentgroup.com) 
-   Maggie Wachs (maggie@filamentgroup.com)
-   http://www.filamentgroup.com
- *
- * Copyright (c) 2008 Filament Group
- * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
- *
- * Description: Extends the native Number and String objects with pxToEm method. pxToEm converts a pixel value to ems depending on inherited font size.  
- * Article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/
- * Demo: http://www.filamentgroup.com/examples/pxToEm/	 	
- *							
- * Options:  	 								
- 		scope: string or jQuery selector for font-size scoping
- 		reverse: Boolean, true reverses the conversion to em-px
- * Dependencies: jQuery library						  
- * Usage Example: myPixelValue.pxToEm(); or myPixelValue.pxToEm({'scope':'#navigation', reverse: true});
- *
- * Version: 2.0, 08.01.2008 
- * Changelog:
- *		08.02.2007 initial Version 1.0
- *		08.01.2008 - fixed font-size calculation for IE
---------------------------------------------------------------------*/
-
-Number.prototype.pxToEm = String.prototype.pxToEm = function(settings){
-	//set defaults
-	settings = jQuery.extend({
-		scope: 'body',
-		reverse: false
-	}, settings);
-	
-	var pxVal = (this == '') ? 0 : parseFloat(this);
-	var scopeVal;
-	var getWindowWidth = function(){
-		var de = document.documentElement;
-		return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
-	};	
-	
-	/* When a percentage-based font-size is set on the body, IE returns that percent of the window width as the font-size. 
-		For example, if the body font-size is 62.5% and the window width is 1000px, IE will return 625px as the font-size. 	
-		When this happens, we calculate the correct body font-size (%) and multiply it by 16 (the standard browser font size) 
-		to get an accurate em value. */
-				
-	if (settings.scope == 'body' && $.browser.msie && (parseFloat($('body').css('font-size')) / getWindowWidth()).toFixed(1) > 0.0) {
-		var calcFontSize = function(){		
-			return (parseFloat($('body').css('font-size'))/getWindowWidth()).toFixed(3) * 16;
-		};
-		scopeVal = calcFontSize();
-	}
-	else { scopeVal = parseFloat(jQuery(settings.scope).css("font-size")); };
-			
-	var result = (settings.reverse == true) ? (pxVal * scopeVal).toFixed(2) + 'px' : (pxVal / scopeVal).toFixed(2) + 'em';
-	return result;
-};
+