riojs 0.0.4 → 0.0.5

data/public/javascripts/components/list_view.js

@@ -77,11 +77,11 @@ rio.components.ListView = rio.Component.create(rio.components.Box, "ListView", {
 				}
 			}.bind(this));
 			
-			listItem.observe("click", function() {
+			listItem.observe("click", function(e) {
 				if (this.getHandleClickSelection()) {
 					this.setSelectedItem(listItem.getItem());
 				}
-				this.fire("itemClick", listItem.getItem());
+				this.fire("itemClick", listItem.getItem(), e);
 			}.bind(this));
 			listItem.observe("scrollTo", function() {
 				var listItemHtml = listItem.html();

data/public/javascripts/components/menu.js

@@ -3,87 +3,130 @@ rio.components.Menu = rio.Component.create("Menu", {
 	
 	attrAccessors: [
 		["items", []],
-		["left", 0],
+		"menuItems",
+		"left",
+		"right",
 		["top", 0]
 	],
-	
-	attrHtmls: ["overlay"],
-	
+	attrReaders: [
+		"className"
+	],
 	methods: {
+		initialize: function() {
+			this.setMenuItems(this.getItems().map(function(item) {
+				var menuItem = new rio.components.MenuItem(Object.extend(item, { menuClassName: this.getClassName() }));
+				
+				menuItem.observe("privateClick", function() {
+					this.fire("privateClick");
+					this.close();
+				}.bind(this));
+				menuItem.observe("hideDescendantSubMenus", this.hideDescendantSubMenus.bind(this));
+				
+				return menuItem;
+			}.bind(this)));
+		},
+
 		buildHtml: function() {
 			var menuHtml = rio.Tag.div("", { className: "menu" });
-			
-			menuHtml.setStyle({
-				left: this.getLeft() + "px",
-				top: this.getTop() + "px"
-			});
-			
-			var insertItem = function(item) {
-				menuHtml.insert(item.html());
-				item.observe("click", this.click.bind(this));
-			}.bind(this);
-			
-			var removeItem = function(item) {
-				item.html().remove();
-			}.bind(this);
-			
-			this.bind("items", {
-				set: function(items) {
-					if (items) {
-						items.each(function(item) {
-							insertItem(item);
-						}.bind(this));
-					}
-				}.bind(this),
+			menuHtml.addClassName(this.getClassName());
 
-				insert: insertItem,
-				remove: removeItem
-			});
+			var position = { top: parseInt(this.getTop(), 10) + "px" };
+
+			if (this.getRight()) {
+				position.right = parseInt(this.getRight(), 10) + "px";
+			} else {
+				position.left = (parseInt(this.getLeft(), 10) || 0) + "px";
+			}
+			menuHtml.setStyle(position);
+			
+			this.getMenuItems().each(function(menuItem) {
+				menuHtml.insert(menuItem);
+			}.bind(this));
 			
 			return menuHtml;
 		},
 		
-		buildOverlayHtml: function() {
-			var overlayHtml = rio.Tag.div("", { className: "menuOverlay" });
-			Event.observe(overlayHtml, "mousedown", this.click.bind(this));
-			return overlayHtml;
+		hideDescendantSubMenus: function(noDelay) {
+			this.getMenuItems().each(function(menuItem) {
+				menuItem.hideDescendantSubMenus(noDelay);
+			});
 		},
 		
 		render: function() {
-			Element.body().insert(this.overlayHtml());
-			Element.body().insert(this.html());
+			this.popup().activate();
 		},
 		
-		click: function() {
-			this.close();
+		popup: function() {
+			if (!this._popup) {
+				this._popup = new rio.components.Popup({
+					content: this.html(),
+					autoCenter: false,
+					wrapContent: false,
+					opacity: 0.01,
+					animateOverlay: false
+				});
+			}
+			return this._popup;
 		},
 		
 		close: function() {
-			this.html().remove();
-			this.overlayHtml().remove();
+			this.popup().deactivate();
 		}
 	}
 });
 
 rio.components.MenuItem = rio.Component.create("MenuItem", {
-	attrAccessors: ["text"],
+	attrAccessors: ["label", "iconSrc", ["items", []]],
+	attrReaders: ["menuClassName"],
 	attrEvents: ["click"],
 	methods: {
 		buildHtml: function() {
-			var itemHtml = rio.Tag.div("", { className: "menuItem" });
-			itemHtml.addHoverClass("menuItemHover");
+			var content = [this.getLabel()];
+			if (this.getIconSrc()) {
+				content.unshift(new rio.components.Image({ src: this.getIconSrc(), className: "menuIcon" }));
+			}
+			var itemHtml = rio.Tag.div(content, { className: "menuItem" });
 
-			this.bind("text", function(text) {
-				itemHtml.update(text);
-			});
+			var hasSubMenu = !this.getItems().empty();
+			if (hasSubMenu) {
+				this._subMenu = new rio.components.Menu({
+					className: this.getMenuClassName(),
+					items: this.getItems(),
+					top: -2
+				});
+				this._subMenu.observe("privateClick", this.fire.bind(this, "privateClick"));
 
-			itemHtml.observe("click", this.click.bind(this));
+				var subMenuHtml = this._subMenu.html();
+				subMenuHtml.hide();
+				itemHtml.insert(subMenuHtml);
+				itemHtml.insert(new rio.components.Image({ src: "/images/sub-menu-indicator.png", className: "subMenuIndicator" }));
+			}
+			itemHtml.observe("mouseover", function() {
+				if (this._subMenu) {
+					this.fire("hideDescendantSubMenus");
+					var subMenuHtml = this._subMenu.html();
+					subMenuHtml.setStyle({ left: itemHtml.getWidth() + "px" });
+					subMenuHtml.show();
+				} else {
+					this.fire("hideDescendantSubMenus");
+				}
+			}.bind(this));
+
+			itemHtml.observe("click", function() {
+				if (!hasSubMenu) {
+					this.fire("privateClick");
+				}
+				this.fire("click");
+			}.bind(this));
 
 			return itemHtml;
 		},
 		
-		click: function() {
-			this.fire("click");
+		hideDescendantSubMenus: function() {
+			if (this._subMenu) {
+				this._subMenu.hideDescendantSubMenus();
+				this._subMenu.html().hide();
+			}
 		}
 	}
-});
+});

data/public/javascripts/components/overlay.js

@@ -1,134 +1,133 @@
 // Copyright 2008, Thinklink
-rio.components.Overlay = rio.Component.create();
+rio.components.Overlay = rio.Component.create("Overlay", {
+	requireCss: "overlay",
+	attrAccessors: [["active", false]],
+	attrReaders: [
+		["opacity", 0.8],
+		["deactivateOnEscape", true],
+		["deactivateOnClick", true]
+	],
+	attrHtmls: ["overlay"],
+	methods: {
+		yPos : 0,
+		xPos : 0,
 
-rio.components.Overlay.requireCss("overlay");
+		initialize: function(options) {
+			this._ie = Prototype.Browser.IE;
+			this._keyDown = this.keyDown.bind(this);
+		},
 
-rio.components.Overlay.attrReader("opacity", 0.8);
-rio.components.Overlay.attrReader("deactivateOnEscape", true);
-rio.components.Overlay.attrReader("deactivateOnClick", true);
-rio.components.Overlay.attrAccessor("active", false);
+		activate: function() {
+			this.setActive(true);
+			if (this.isIE()){
+				this.getScroll();
 
-rio.components.Overlay.attrHtml("overlay");
-
-rio.Component.extend(rio.components.Overlay, {
-	yPos : 0,
-	xPos : 0,
+				this._initialStyle = {
+					height: Element.body().style.height || "auto",
+					overflow: Element.body().style.overflow || "auto"
+				};
+				this.prepareIE('100%', 'hidden');
+				this.setScroll(0,0);
+				this.hideSelects('hidden');
+			}
+			Event.observe(document, 'keydown', this._keyDown);
+			if (this.getDeactivateOnClick()) {
+				Event.observe(this.overlayHtml(), 'click', this._deactivate);
+			}
 
-	initialize: function(options) {
-		this._ie = Prototype.Browser.IE;
-		this._keyDown = this.keyDown.bind(this);
-	},
+			Element.setOpacity(this.overlayHtml(), this.getOpacity());
 
-	activate: function() {
-		this.setActive(true);
-		if (this.isIE()){
-			this.getScroll();
+			if (this.isIE()) {
+				this.overlayHtml().show();
+			} else {
+				this.overlayHtml().appear({
+					from: 0.0,
+					to: this.getOpacity(),
+					duration: 0.5
+				});
+			}
+		},
 
-			this._initialStyle = {
-				height: Element.body().style.height || "auto",
-				overflow: Element.body().style.overflow || "auto"
-			};
-			this.prepareIE('100%', 'hidden');
-			this.setScroll(0,0);
-			this.hideSelects('hidden');
-		}
-		Event.observe(document, 'keydown', this._keyDown);
-		if (this.getDeactivateOnClick()) {
-			Event.observe(this.overlayHtml(), 'click', this._deactivate);
-		}
+		deactivate: function(skipFade) {
+			if (this.isIE()){
+				this.setScroll(0,this.yPos);
+				var managingLayout = (rio.app.getCurrentPage() && rio.app.getCurrentPage().isManagingLayout());
+				if (managingLayout) {
+					this.prepareIE("100%", "hidden");
+				} else {
+					this.prepareIE(this._initialStyle.height, this._initialStyle.overflow);
+				}
+				this.hideSelects("visible");
+			}
+			Event.stopObserving(document, 'keydown', this._keyDown);
+			if (this.getDeactivateOnClick()) {
+				Event.stopObserving(this.overlayHtml(), 'click', this._deactivate);
+			}
 
-		Element.setOpacity(this.overlayHtml(), this.getOpacity());
-		
-		if (this.isIE()) {
-			this.overlayHtml().show();
-		} else {
-			this.overlayHtml().appear({
-				from: 0.0,
-				to: this.getOpacity(),
-				duration: 0.5
-			});
-		}
-	},
-	
-	deactivate: function(skipFade) {
-		if (this.isIE()){
-			this.setScroll(0,this.yPos);
-			var managingLayout = (rio.app.getCurrentPage() && rio.app.getCurrentPage().isManagingLayout());
-			if (managingLayout) {
-				this.prepareIE("100%", "hidden");
+			if (skipFade || this.isIE()) {
+				this.overlayHtml().hide();
 			} else {
-				this.prepareIE(this._initialStyle.height, this._initialStyle.overflow);
+				this.overlayHtml().fade({
+					from: this.getOpacity(),
+					to: 0.0,
+					duration: 0.5
+				});
 			}
-			this.hideSelects("visible");
-		}
-		Event.stopObserving(document, 'keydown', this._keyDown);
-		if (this.getDeactivateOnClick()) {
-			Event.stopObserving(this.overlayHtml(), 'click', this._deactivate);
-		}
+			this.setActive(false);
+		},
 
-		if (skipFade || this.isIE()) {
-			this.overlayHtml().hide();
-		} else {
-			this.overlayHtml().fade({
-				from: this.getOpacity(),
-				to: 0.0,
-				duration: 0.5
+		// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
+		getScroll: function() {
+			if (self.pageYOffset) {
+				this.yPos = self.pageYOffset;
+			} else if (document.documentElement && document.documentElement.scrollTop){
+				this.yPos = document.documentElement.scrollTop; 
+			} else if (document.body) {
+				this.yPos = document.body.scrollTop;
+			}
+		},
+
+		setScroll: function(x, y) {
+			window.scrollTo(x, y); 
+		},
+
+		// In IE, select elements hover on top of the lightbox
+		hideSelects: function(visibility){
+			selects = document.getElementsByTagName('select');
+			for(i = 0; i < selects.length; i++) {
+				selects[i].style.visibility = visibility;
+			}
+		},
+
+		// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
+		prepareIE: function(height, overflow) {
+			Element.body().setStyle({
+				height: height,
+				overflow: overflow
 			});
-		}
-		this.setActive(false);
-	},
-	
-	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
-	getScroll: function() {
-		if (self.pageYOffset) {
-			this.yPos = self.pageYOffset;
-		} else if (document.documentElement && document.documentElement.scrollTop){
-			this.yPos = document.documentElement.scrollTop; 
-		} else if (document.body) {
-			this.yPos = document.body.scrollTop;
-		}
-	},
-	
-	setScroll: function(x, y) {
-		window.scrollTo(x, y); 
-	},
-	
-	// In IE, select elements hover on top of the lightbox
-	hideSelects: function(visibility){
-		selects = document.getElementsByTagName('select');
-		for(i = 0; i < selects.length; i++) {
-			selects[i].style.visibility = visibility;
-		}
-	},
-	
-	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
-	prepareIE: function(height, overflow) {
-		Element.body().setStyle({
-			height: height,
-			overflow: overflow
-		});
 
-		Element.html().setStyle({
-			height: height,
-			overflow: overflow
-		});
-	},
-	
-	keyDown: function(e) {
-		if (this.isDeactivateOnEscape() && e.keyCode == Event.KEY_ESC) {
-			this.deactivate();
-			e.stop();
+			Element.html().setStyle({
+				height: height,
+				overflow: overflow
+			});
+		},
+
+		keyDown: function(e) {
+			if (this.isDeactivateOnEscape() && e.keyCode == Event.KEY_ESC) {
+				this.deactivate();
+				e.stop();
+			}
+		},
+
+		buildOverlayHtml: function() {
+			var position = Prototype.Browser.IE ? "absolute" : "fixed";
+			var overlay = rio.Tag.div('', { className: 'overlay', style: 'display: none; position: ' + position });
+			Element.insert(Element.body(), { bottom: overlay });
+			return overlay;
+		},
+
+		isIE: function() {
+			return this._ie;
 		}
-	},
-	
-	buildOverlayHtml: function() {
-		var position = Prototype.Browser.IE ? "absolute" : "fixed";
-		var overlay = rio.Tag.div('', { className: 'overlay', style: 'display: none; position: ' + position });
-		Element.insert(Element.body(), { bottom: overlay });
-		return overlay;
-	},
-	
-	isIE: function() {
-		return this._ie;
 	}
 });

data/public/javascripts/components/popup.js

@@ -0,0 +1,213 @@
+$$('.popupOverlay').invoke("remove");
+rio.components.Popup = rio.Component.create("Popup", {
+	requireCss: "popup",
+	attrAccessors: [
+		"content",
+		["deactivateOnEscape", true],
+		["deactivateOnClick", true],
+		["opacity", 0.8],
+		["autoCenter", true],
+		["wrapContent", true],
+		["animateOverlay", true]
+	],
+	attrReaders: [],
+	attrHtmls: ["overlay"],
+	attrEvents: ["deactivate"],
+	methods: {
+		buildHtml: function() {
+			if (this.getWrapContent()) {
+				return rio.Tag.div(this.getContent(), { className: "popupContent" });
+			} else {
+				return this.getContent();
+			}
+		},
+		
+		buildOverlayHtml: function() {
+			this._overlayHtml = rio.Tag.div("", { className: "popupOverlay", style: "display: none" });
+
+			if (this.getDeactivateOnClick()) {
+				this._overlayHtml.observe("click", function() {
+					this.deactivate();
+				}.bind(this));
+				this._overlayHtml.observe("contextmenu", function(e) {
+					this.deactivate();
+					e.stop();
+				}.bind(this));
+			}
+
+			return this._overlayHtml;
+		},
+		
+		activate: function() {
+			rio.components.Popup.activate(this);
+		},
+		
+		deactivate: function(skipAnimation) {
+			rio.components.Popup.deactivate(this, skipAnimation);
+			this.fire("deactivate");
+		},
+		
+		resize: function() {
+			if (!this.getAutoCenter()) { return; }
+
+			var pHeight = this.html().getHeight();
+			var pWidth = this.html().getWidth();
+			var wHeight = document.viewport.getHeight();
+			var wWidth = document.viewport.getWidth();
+	
+			this.html().setStyle({
+				top: Math.max(wHeight - pHeight, 0) / 2 + "px",
+				left: Math.max(wWidth - pWidth, 0) / 2 + "px"
+			});
+		}
+	},
+	classMethods: {
+		_activePopups: [],
+		_activeAnimations: [],
+	
+		activate: function(popup) {
+			this.cancelActiveAnimations();
+
+			this._activePopups.push(popup);
+			this.updateZIndices();
+			
+			this.resetOverlay(!popup.getAnimateOverlay());
+
+			Element.body().insert(popup.html());
+			Element.body().insert(popup.overlayHtml());
+
+			popup.resize();
+			this.addObservers();
+		},
+		
+		deactivate: function(popup, forceSkipAnimation) {
+			try {
+				popup.html().remove();
+
+				this._activePopups.splice(this._activePopups.indexOf(popup), 1);
+				this.updateZIndices();
+				var popupOverlay = popup.overlayHtml();
+				if (popup.getAnimateOverlay() && !forceSkipAnimation) {
+					this._activeAnimations.push(new Effect.Fade(popupOverlay, {
+						from: popupOverlay.getStyle("opacity"),
+						to: 0.0,
+						duration: 0.5,
+						afterFinish: function() {
+							popupOverlay.remove();
+						}
+					}));
+
+					this.resetOverlay();
+				} else {
+					popupOverlay.remove();
+					this.resetOverlay(true);
+				}
+			} catch(e) {
+				try {
+					popupOverlay.remove();
+					popup.remove();
+				} catch(e2) {}
+
+				throw(e);
+			}
+		},
+		
+		cancelActiveAnimations: function() {
+			// this._activeAnimations.invoke("cancel");
+			// TODO: We need a reliable way of handling simultaneous popup activations/deactivations
+			this._activeAnimations.clear();
+		},
+		
+		updateZIndices: function() {
+			var existingPopups = this._activePopups;
+			for (var i=0, length=this._activePopups.length; i<length; i++) {
+				this._activePopups[i].overlayHtml().setStyle({ zIndex: 5000 + i * 2 });
+				this._activePopups[i].html().setStyle({ zIndex: 5000 + i * 2 + 1 });
+			}
+		},
+		
+		resize: function() {
+			if (this.activePopup()) { this.activePopup().resize(); }
+		},
+		
+		resetOverlay: function(skipAnimation) {
+			if (!this.activePopup()) { return; }
+
+			var i;
+			var totalOpacity = this._activePopups.max(function(p) { return p.getOpacity(); });
+
+			var foregroundOpacity = this.activePopup().getOpacity();
+			if (totalOpacity > foregroundOpacity) {
+				
+				for (i = 0; i<this._activePopups.length-2; i++) {
+					this._activePopups[i].overlayHtml().setStyle({ opacity: 0.0 });
+				}
+
+				var nextPopup = this._activePopups[this._activePopups.length - 2];
+				nextPopup.overlayHtml().setStyle({ opacity: totalOpacity });
+				
+				var backgroundOpacity = 1 - (1 - totalOpacity)/(1 - foregroundOpacity);
+				if (skipAnimation) {
+					nextPopup.overlayHtml().setStyle({ opacity: backgroundOpacity });
+				} else {
+					this._activeAnimations.push(new Effect.Appear(nextPopup.overlayHtml(), {
+						from: totalOpacity,
+						to: backgroundOpacity,
+						duration: 0.5
+					}));
+				}
+			} else {
+				var opacity, p;
+				for (i=0; i<this._activePopups.length - 1; i++) {
+					p = this._activePopups[i];
+					opacity = p.overlayHtml().getStyle("opacity");
+					if (opacity > 0.0) {
+						if (skipAnimation) {
+							p.overlayHtml().setStyle({ opacity: 0.0 });
+						} else {
+							this._activeAnimations.push(new Effect.Fade(p.overlayHtml(), {
+								from: opacity,
+								to: 0.0,
+								duration: 0.5
+							}));
+						}
+					}
+				}
+			}
+			if (this.activePopup().overlayHtml().getStyle("display") == "none") {
+				this.activePopup().overlayHtml().setStyle({ opacity: 0.0 });
+			}
+
+			if (skipAnimation) {
+				this.activePopup().overlayHtml().show();
+				this.activePopup().overlayHtml().setStyle({ opacity: foregroundOpacity });
+			} else {
+				this._activeAnimations.push(new Effect.Appear(this.activePopup().overlayHtml(), {
+					from: this.activePopup().overlayHtml().getStyle("opacity"),
+					to: foregroundOpacity,
+					duration: 0.5
+				}));
+			}
+		},
+		
+		activePopup: function() {
+			return this._activePopups.last();
+		},
+		
+		addObservers: function() {
+			
+			if (this._hasObservers) { return; }
+			document.observe("keydown", function(e) {
+				if (e.keyCode == Event.KEY_ESC && this.activePopup() && this.activePopup().getDeactivateOnEscape() && e.target.tagName.toLowerCase() != "input") {
+					this.activePopup().deactivate();
+				}
+			}.bindAsEventListener(this));
+			
+			Event.observe(window, "resize", this.resize.bind(this));
+			
+			this._hasObservers = true;
+		}
+	}
+});
+
+