riojs 0.0.4 → 0.0.5

data/VERSION

@@ -1 +1 @@
-0.0.4
+0.0.5

data/public/javascripts/components/alert_box.js

@@ -1,38 +1,42 @@
 rio.components.AlertBox = rio.Component.create("AlertBox", {
-	require: ["components/lightbox", "components/button"],
+	require: ["components/popup", "components/button"],
 	requireCss: "alert_box",
 	attrReaders: [
-		"body", 
+		"content", 
 		["title", "Alert"],
-		["buttonText", "OK"],
+		["buttons", [{ text: "OK" }]],
 		["deactivateOnEscape", true],
-		["deactivateOnClick", true]
+		["deactivateOnClick", true],
+		"width"
 	],
-	attrHtmls: ["body"],
+	attrHtmls: ["content"],
 	attrEvents: ["close"],
 	methods: {
 		initialize: function() {
-			this._lightbox = new rio.components.Lightbox({ 
-				content: this.bodyHtml(), 
+			this._popup = new rio.components.Popup({ 
+				content: this.contentHtml(), 
 				deactivateOnClick: this.getDeactivateOnClick(),
 				deactivateOnEscape: this.getDeactivateOnEscape(),
-				deactivate: this.fire.bind(this, "close")
+				onDeactivate: this.fire.bind(this, "close")
 			});
-			this._lightbox.activate();
+			this._popup.activate();
 		},
 	
-		buildBodyHtml: function() {
-			var bodyHtml = rio.Tag.div("", { className: "alertBoxBody" });
+		buildContentHtml: function() {
+			var contentHtml = rio.Tag.div("", { className: "alertBoxBody" });
 
-			bodyHtml.update(this.getBody());
+			contentHtml.update(this.getContent());
 
-			var okButton = new rio.components.Button({ 
-				text: this.getButtonText(), 
-				useNative: false, 
-				onClick: this.close.bind(this) 
-			});
+			var buttons = this.getButtons().map(function(b) {
+				return new rio.components.Button({ 
+					text: b.text, 
+					iconSrc: b.iconSrc,
+					useNative: false, 
+					onClick: this.close.bind(this, b.value) 
+				});
+			}.bind(this));
 
-			var okHtml = rio.Tag.div(okButton, { className: "ok" });
+			var buttonsHtml = rio.Tag.div(buttons, { className: "alertButtons" });
 			
 			var headerHtml = rio.Tag.div(this.getTitle(), {
 				className: "alertBoxTitle"
@@ -40,20 +44,26 @@ rio.components.AlertBox = rio.Component.create("AlertBox", {
 			
 			var innerHtml = rio.Tag.div([
 				headerHtml,
-				bodyHtml, 
-				okHtml
+				contentHtml, 
+				buttonsHtml
 			], { 
 				className: "alertBoxInner" 
 			});
 
-			return rio.Tag.div(innerHtml, {
+			var html = rio.Tag.div(innerHtml, {
 				className: "alertBox"
 			});
+			
+			if (this.getWidth()) {
+				html.setStyle({ width: this.getWidth() });
+			}
+			
+			return html;
 		},
 	
-		close: function() {
-			this._lightbox.deactivate();
-			this.fire("close");
+		close: function(value) {
+			this._popup.deactivate();
+			this.fire("close", value);
 		}
 	}
 });

data/public/javascripts/components/grid_view.js

@@ -9,20 +9,29 @@ rio.components.GridView = rio.Component.create(rio.components.ListView, "GridVie
 		["header", true],
 		["rowClassName", ""],
 		["rowHoverClassName", "gridItemHover"],
-		["rowSelectedClassName", "gridItemSelected"]
+		["rowSelectedClassName", "gridItemSelected"],
+		["handleContextMenu", false]
 	],
 	attrHtmls: ["header"],
+	attrEvents: ["contextMenu"],
 	methods: {
 		initialize: function($super, options) {
 			$super(options);
 			this._listItemBuilder = function(item, renderer) {
-				return new rio.components.GridItem({
+				var gridItem = new rio.components.GridItem({
 					item: item,
 					columns: this.getColumns(),
 					rowClassName: this.getRowClassName(),
 					hoverClassName: this.getRowHoverClassName(),
-					selectedClassName: this.getRowSelectedClassName()
+					selectedClassName: this.getRowSelectedClassName(),
+					handleContextMenu: this.getHandleContextMenu()
 				});
+				
+				if (this.getHandleContextMenu()) {
+					gridItem.observe("contextMenu", this.fire.bind(this, "contextMenu"));
+				}
+				
+				return gridItem;
 			}.bind(this);
 		},
 
@@ -49,7 +58,13 @@ rio.components.GridView = rio.Component.create(rio.components.ListView, "GridVie
 		buildHeaderHtml: function() {
 			return rio.Tag.tr(
 				this.getColumns().map(function(column) {
-					return rio.Tag.td(column.header);
+					var td = rio.Tag.td(column.header);
+					if (column.width) {
+						td.setStyle({
+							width: column.width
+						});
+					}
+					return td;
 				}.bind(this)),
 				{ className: "gridViewHeaderRow" }
 			);
@@ -60,15 +75,15 @@ rio.components.GridView = rio.Component.create(rio.components.ListView, "GridVie
 
 rio.components.GridItem = rio.Component.create(rio.components.ListItem, "GridItem", {
 	attrAccessors: [["columns", []], ["selected", false]],
-	attrReaders: ["rowClassName"],
-	attrEvents: ["click"],
+	attrReaders: ["rowClassName", "handleContextMenu"],
+	attrEvents: ["click", "contextMenu"],
 	methods: {
 		buildHtml: function() {
 			var rowClassName = this.getRowClassName();
 			var className = Object.isFunction(rowClassName) ? rowClassName(this.getItem()) : rowClassName;
 			var html = rio.Tag.tr(
 				this.getColumns().map(function(column) {
-					var cell = rio.Tag.td(column.renderer(this.getItem()));
+					var cell = rio.Tag.td(column.renderer(this.getItem(), this));
 					cell.setStyle({
 						width: column.width,
 						textAlign: column.align || "left",
@@ -82,9 +97,16 @@ rio.components.GridItem = rio.Component.create(rio.components.ListItem, "GridIte
 			);
 			
 			html.addHoverClass(this.getHoverClassName());
-			html.observe("click", function() {
-				this.fire("click");
-			}.bind(this));
+			html.observe("click", function(e) {
+				this.fire("click", e);
+			}.bindAsEventListener(this));
+			
+			if (this.getHandleContextMenu()) {
+				html.observe("contextmenu", function(e) {
+					this.fire("contextMenu", this, e);
+					e.stop();
+				}.bindAsEventListener(this));
+			}
 			
 			this.bind("selected", function(selected) {
 				html[selected ? "addClassName" : "removeClassName"](this.getSelectedClassName());

data/public/javascripts/components/input.js

@@ -130,6 +130,12 @@ rio.components.Input = rio.Component.create(rio.components.Box, "Input", {
 						this.setValue(inputHtml.value);
 					}, this);
 				}
+				
+				if (e.keyCode == Event.KEY_ESC && this.getRevertOnEscape()) {
+					inputHtml.value = this.getValue();
+					inputHtml.blur();
+				}
+				
 				this.fire("keyDown", e);
 			}.bindAsEventListener(this));
 			inputHtml.observe('keyup', function(e) {

data/public/javascripts/components/lightbox.js

@@ -4,154 +4,150 @@
 
 rio.Application.require("components/overlay");
 
-rio.components.Lightbox = rio.Component.create(rio.components.Overlay);
-
-rio.components.Lightbox.requireCss("lightbox");
-
-rio.components.Lightbox.attrAccessor("contentUrl");
-rio.components.Lightbox.attrReader("content");
-
-rio.components.Lightbox.attrHtml("outer", "lightbox", "loading");
-
-rio.components.Lightbox.attrEvent("deactivate");
-
-rio.Component.extend(rio.components.Lightbox, {
-	initialize: function($super, options) {
-		$super(options);
-		
-		this._keyDown = this.keyDown.bindAsEventListener(this);
-		this._deactivate = this.deactivate.bind(this);
-		this._outerLigthboxClick = this.outerLightboxClick.bindAsEventListener(this);
-		this._resize = this.resize.bindAsEventListener(this);
-		
-		if (options.ctrl) {
-			options.ctrl = $(options.ctrl);
-			Event.observe(options.ctrl, 'click', this.activate.bindAsEventListener(this), false);
-			options.ctrl.onclick = function(){ return false; };
-		}
+rio.components.Lightbox = rio.Component.create(rio.components.Overlay, "Lightbox", {
+	requireCss: "lightbox",
+	attrAccessors: ["contentUrl"],
+	attrReaders: ["content"],
+	attrHtmls: ["outer", "lightbox", "loading"],
+	attrEvents: ["deactivate"],
+	methods: {
+		initialize: function($super, options) {
+			$super(options);
 
-		if (!this._content) {
-			this._contentUrl = options.url || options.ctrl.href;
-		}
-	},
+			this._keyDown = this.keyDown.bindAsEventListener(this);
+			this._deactivate = this.deactivate.bind(this);
+			this._outerLigthboxClick = this.outerLightboxClick.bindAsEventListener(this);
+			this._resize = this.resize.bindAsEventListener(this);
 
-	buildOuterHtml: function() {
-		var position = Prototype.Browser.IE ? "absolute" : "fixed";
-		var outerHtml = rio.Tag.div([this.loadingHtml(), this.lightboxHtml()], {className: "lightboxOuter", style: "display: none; position: " + position});
-		Element.insert(Element.body(), outerHtml);
-		return outerHtml;
-	},
-	
-	buildLightboxHtml: function() {
-		return rio.Tag.div('', { className: 'lightbox' });
-	},
-	
-	buildLoadingHtml: function() {
-		var position = Prototype.Browser.IE ? "absolute" : "fixed";
-		return rio.Tag.div(rio.Tag.img('', { src: "/images/lightbox-loading.gif" }), { className: 'lightboxLoading', style: "display: none; position: " + position });
-	},
-	
-	// Turn everything on - mainly the IE fixes
-	activate: function($super){
-		if (this.isActive()) { return; }
-		
-		if (rio.components.Lightbox.currentLightbox) { rio.components.Lightbox.deactivateCurrentLightbox(); }
-		
-		$super();
-		rio.components.Lightbox.currentLightbox = this;
-		Event.observe(this.outerHtml(), 'click', this._outerLigthboxClick);
-		Element.show(this.outerHtml());
-		Element.show(this.loadingHtml());
-		this.loadInfo();
-	},
-	
-	outerLightboxClick: function(e) {
-		if (this.getDeactivateOnClick() && !Element.descendantOf(e.element(), this.lightboxHtml())) { 
-			this._deactivate();
-		}
-	},
-	
-	// Begin Ajax request based off of the href of the clicked linked
-	loadInfo: function() {
-		if (this.getContent()) {
-			this.processInfo(this.getContent());
-		} else {
-			new Ajax.Request(this.getContentUrl(), {
-				method: 'get', 
-				parameters: "",
-				onComplete: function(response) {
-					this.processInfo(response.responseText);
-				}.bind(this)
+			if (options.ctrl) {
+				options.ctrl = $(options.ctrl);
+				Event.observe(options.ctrl, 'click', this.activate.bindAsEventListener(this), false);
+				options.ctrl.onclick = function(){ return false; };
+			}
+
+			if (!this._content) {
+				this._contentUrl = options.url || options.ctrl.href;
+			}
+		},
+
+		buildOuterHtml: function() {
+			var position = Prototype.Browser.IE ? "absolute" : "fixed";
+			var outerHtml = rio.Tag.div([this.loadingHtml(), this.lightboxHtml()], {className: "lightboxOuter", style: "display: none; position: " + position});
+			Element.insert(Element.body(), outerHtml);
+			return outerHtml;
+		},
+
+		buildLightboxHtml: function() {
+			return rio.Tag.div('', { className: 'lightbox' });
+		},
+
+		buildLoadingHtml: function() {
+			var position = Prototype.Browser.IE ? "absolute" : "fixed";
+			return rio.Tag.div(rio.Tag.img('', { src: "/images/lightbox-loading.gif" }), { className: 'lightboxLoading', style: "display: none; position: " + position });
+		},
+
+		// Turn everything on - mainly the IE fixes
+		activate: function($super){
+			if (this.isActive()) { return; }
+
+			if (rio.components.Lightbox.currentLightbox) { rio.components.Lightbox.deactivateCurrentLightbox(); }
+
+			$super();
+			rio.components.Lightbox.currentLightbox = this;
+			Event.observe(this.outerHtml(), 'click', this._outerLigthboxClick);
+			Element.show(this.outerHtml());
+			Element.show(this.loadingHtml());
+			this.loadInfo();
+		},
+
+		outerLightboxClick: function(e) {
+			if (this.getDeactivateOnClick() && !Element.descendantOf(e.element(), this.lightboxHtml())) { 
+				this._deactivate();
+			}
+		},
+
+		// Begin Ajax request based off of the href of the clicked linked
+		loadInfo: function() {
+			if (this.getContent()) {
+				this.processInfo(this.getContent());
+			} else {
+				new Ajax.Request(this.getContentUrl(), {
+					method: 'get', 
+					parameters: "",
+					onComplete: function(response) {
+						this.processInfo(response.responseText);
+					}.bind(this)
+				});
+			}
+		},
+
+		// Display Ajax response
+		processInfo: function(content){
+			this._contentHtml = rio.Tag.div('', { style: "visibility: hidden" });
+			Element.insert(this._contentHtml, content);
+			Element.insert(this.lightboxHtml(), this._contentHtml);
+
+			this.actions();
+			Event.observe(window, "resize", this._resize);
+
+			(function() {
+					this._contentHtml.style.visibility = "visible";
+					Element.hide(this.loadingHtml());
+					this.resize();
+			}.bind(this)).defer();
+		},
+
+		resize: function(e) {
+			var lbHeight = Element.getHeight(this.lightboxHtml());
+			var lbWidth = Element.getWidth(this.lightboxHtml());
+			var wHeight = document.viewport.getHeight();
+			var wWidth = document.viewport.getWidth();
+
+			Element.setStyle(this.lightboxHtml(), {
+				top: Math.max(wHeight - lbHeight, 0) / 2 + "px",
+				left: Math.max(wWidth - lbWidth, 0) / 2 + "px"
 			});
-		}
-	},
-	
-	// Display Ajax response
-	processInfo: function(content){
-		this._contentHtml = rio.Tag.div('', { style: "visibility: hidden" });
-		Element.insert(this._contentHtml, content);
-		Element.insert(this.lightboxHtml(), this._contentHtml);
-
-		this.actions();
-		Event.observe(window, "resize", this._resize);
-
-		(function() {
-				this._contentHtml.style.visibility = "visible";
-				Element.hide(this.loadingHtml());
-				this.resize();
-		}.bind(this)).defer();
-	},
-	
-	resize: function(e) {
-		var lbHeight = Element.getHeight(this.lightboxHtml());
-		var lbWidth = Element.getWidth(this.lightboxHtml());
-		var wHeight = document.viewport.getHeight();
-		var wWidth = document.viewport.getWidth();
-		
-		Element.setStyle(this.lightboxHtml(), {
-			top: Math.max(wHeight - lbHeight, 0) / 2 + "px",
-			left: Math.max(wWidth - lbWidth, 0) / 2 + "px"
-		});
-	},
-	
-	// Search through new links within the lightbox, and attach click event
-	actions: function(){
-		$$('.lbAction').each(function(a) {
-			Event.observe(a, 'click', this[a.rel].bindAsEventListener(this));
-			a.onclick = function(){ return false; };
-		}.bind(this));
-	},
-	
-	// Example of creating your own functionality once lightbox is initiated
-	deactivate: function($super, skipFade){
-		if (Element.isRendered(this._contentHtml)) {
-			Element.remove(this._contentHtml);
-		}
+		},
 
-		$super(skipFade);
-		Element.hide(this.outerHtml());
-		Event.stopObserving(window, "resize", this._resize);
-		Event.stopObserving(this.lightboxHtml(), 'click', this._markLightboxEvent);
-		Event.stopObserving(this.outerHtml(), 'click', this._outerLigthboxClick);
-		if (rio.components.Lightbox.currentLightbox == this) { rio.components.Lightbox.currentLightbox = null; }
-		
-		this.fire("deactivate");
-	},
-	
-	toggle: function() {
-		if (this.isActive()) { this.deactivate(); } else { this.activate(); }
-	}
-});
+		// Search through new links within the lightbox, and attach click event
+		actions: function(){
+			$$('.lbAction').each(function(a) {
+				Event.observe(a, 'click', this[a.rel].bindAsEventListener(this));
+				a.onclick = function(){ return false; };
+			}.bind(this));
+		},
+
+		// Example of creating your own functionality once lightbox is initiated
+		deactivate: function($super, skipFade){
+			if (Element.isRendered(this._contentHtml)) {
+				Element.remove(this._contentHtml);
+			}
 
-Object.extend(rio.components.Lightbox, {
-	deactivateCurrentLightbox: function() {
-		if (this.currentLightbox) { this.currentLightbox.deactivate(); }
+			$super(skipFade);
+			Element.hide(this.outerHtml());
+			Event.stopObserving(window, "resize", this._resize);
+			Event.stopObserving(this.lightboxHtml(), 'click', this._markLightboxEvent);
+			Event.stopObserving(this.outerHtml(), 'click', this._outerLigthboxClick);
+			if (rio.components.Lightbox.currentLightbox == this) { rio.components.Lightbox.currentLightbox = null; }
+
+			this.fire("deactivate");
+		},
+
+		toggle: function() {
+			if (this.isActive()) { this.deactivate(); } else { this.activate(); }
+		}
 	},
 	
-	registerClassName: function(className) {
-		lbox = $$('.' + className).each(function(a) {
-			new rio.components.Lightbox({ ctrl: a });
-		});
+	classMethods: {
+		deactivateCurrentLightbox: function() {
+			if (this.currentLightbox) { this.currentLightbox.deactivate(); }
+		},
+
+		registerClassName: function(className) {
+			lbox = $$('.' + className).each(function(a) {
+				new rio.components.Lightbox({ ctrl: a });
+			});
+		}
 	}
 });