Commits

megamahi committed 7e64d62 Merge

Edited samples.

Comments (0)

Files changed (5)

tw2/jqplugins/fg/samples.py

 
 import tw2.jqplugins.ui
 from widgets import MenuWidget
+import tw2.core as twc
 
 some_items = [
     {'name' : "Breaking News",
         'backLink' : False,
         'maxHeight' : 300,
         'width' : 250,
+        'onClick' : twc.JSSymbol("""
+            function() {
+                alert("You selected: " + $(this).text());
+            }
+        """)
     }
     child = tw2.jqplugins.ui.ButtonWidget(
         options={

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

 		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',
-		onClick: null
+        onClick: null
 	}, options);
 	
 	var killAllMenus = function(){
 	this.chooseItem = function(item){
 		fgmenu.kill();
 		// edit this for your own custom function/callback:
-		$('#fgmenuSelection').text($(item).text());
+		// $('#fgmenuSelection').text($(item).text());
 		if (options.onClick != null) {
-			options.onClick(item);
+            options.onClick.call(item);
+        } else {	
+		    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;    		
+    			});
 		}
-		
+		// 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;
+};

tw2/jqplugins/fg/templates/recursive_menu.html

 
 <li xmlns:py="http://genshi.edgewall.org/"
     xmlns:xi="http://www.w3.org/2001/XInclude">
-    <a href="${item.get('href', '#')}">${item.get('name', None)}</a>
+    <a href="${item.get('href', '#')}" id="${w.attrs['id']}:target:${item.get('key', '')}">${item.get('name', None)}</a>
     <ul py:if="len(item.get('children', [])) > 0">
     <py:for each="child in item.get('children', [])">
         <xi:include href="recursive_menu.html" py:with="item=child;" />

tw2/jqplugins/fg/templates/recursive_menu.mak

 <%page args="item"/>
 <li>
-    <a href="${item.get('href', '#')}">${item.get('name', 'foo')}</a>
+    <a href="${item.get('href', '#')}" id="${w.attrs['id']}:target:${item.get('key', '')}">${item.get('name', 'foo')}</a>
 	% if len(item.get('children', [])) > 0:
     <ul>
 	% for child in item.get('children', []):

tw2/jqplugins/fg/widgets.py

         topLinkText: 'All' - text for the first breadcrumb that navigates back to the start of the ipod-style menu
         
         nextCrumbLink: 'ui-icon-carat-1-e' - class for setting the background image that follows each breadcrumb link (currently a carat)
+    
+        onClick: null - Callback for when an item is clicked. If not defined and item has a link defined, clicking will goto that link.
     """
     resources = [
         fgbase.jquery_js,
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.