riojs 0.0.0

data/public/javascripts/components/grid_view.js

@@ -0,0 +1,107 @@
+rio.Application.require("components/list_view");
+
+rio.components.GridView = rio.Component.create(rio.components.ListView, "GridView", {
+	requireCss: "grid_view",
+	attrAccessors: [
+		["columns", []] // e.g. [{ header: "Name", renderer: function... }, { header: "Description", renderer: function... }]
+	],
+	attrReaders: [
+		["header", true],
+		["rowClassName", ""],
+		["rowHoverClassName", "gridItemHover"],
+		["rowSelectedClassName", "gridItemSelected"]
+	],
+	attrHtmls: ["header"],
+	styles: ["headerColor", "headerBackgroundColor", "headerPadding", "headerFontWeight"],
+	methods: {
+		initialize: function($super, options) {
+			$super(options);
+			this._listItemBuilder = function(item, renderer) {
+				return new rio.components.GridItem({
+					item: item,
+					columns: this.getColumns(),
+					rowClassName: this.getRowClassName(),
+					hoverClassName: this.getRowHoverClassName(),
+					selectedClassName: this.getRowSelectedClassName()
+				});
+			}.bind(this);
+		},
+
+
+		buildHtml: function() {
+			var boxHtml = this.boxHtml();
+			var gridBody = rio.Tag.tbody();
+			var gridHtml = rio.Tag.table([gridBody], { className: "listView", style: "width: 100%" });
+			
+			this.addBindings(gridBody);
+			if (this.getHeader()) {
+				var gridHead = rio.Tag.thead();
+				gridHtml.insert({ top: gridHead });
+				gridHead.insert(this.headerHtml());
+			}
+
+			boxHtml.insert(gridHtml);
+			
+			boxHtml.addClassName("gridView");
+			
+			return boxHtml;
+		},
+		
+		buildHeaderHtml: function() {
+			return rio.Tag.tr(
+				this.getColumns().map(function(column) {
+					var header = rio.Tag.td(column.header);
+					// header.applyStyle({
+						// color: this.headerColor,
+						// width: column.width,
+						// backgroundColor: this.headerBackgroundColor,
+						// padding: this.headerPadding,
+						// fontWeight: this.headerFontWeight,
+						// border: "1px solid #888"
+					// });
+					return header;
+				}.bind(this)),
+				{ className: "gridViewHeaderRow" }
+			);
+		}
+	}
+});
+
+
+rio.components.GridItem = rio.Component.create(rio.components.ListItem, "GridItem", {
+	attrAccessors: [["columns", []], ["selected", false]],
+	attrReaders: ["rowClassName"],
+	attrEvents: ["click"],
+	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()));
+					cell.setStyle({
+						width: column.width,
+						textAlign: column.align || "left",
+						padding: (column.padding != undefined) ? column.padding : this.padding
+					});
+					return cell;
+				}.bind(this)),
+				{
+					className: className
+				}
+			);
+			
+			html.addHoverClass(this.getHoverClassName());
+			html.observe("click", function() {
+				this.fire("click");
+			}.bind(this));
+			
+			this.bind("selected", function(selected) {
+				html[selected ? "addClassName" : "removeClassName"](this.getSelectedClassName());
+			}.bind(this));
+			
+			
+			return html;
+		}
+	}
+});

data/public/javascripts/components/image.js

@@ -0,0 +1,19 @@
+rio.components.Image = new rio.Component.create(rio.components.Base, "Image", {
+	attrAccessors: ["src", "title"],
+	attrEvents: ["click"],
+	methods: {
+		buildHtml: function() {
+			var imgHtml = rio.Tag.img("");
+			this.src.bind(function(src) { 
+				imgHtml.src = rio.url(src);
+			});
+			this.title.bind(function(title) {
+				imgHtml.title = title;
+			});
+			imgHtml.observe("click", function() {
+				this.fire("click");
+			}.bind(this));
+			return imgHtml;
+		}
+	}
+});

data/public/javascripts/components/input.js

@@ -0,0 +1,171 @@
+rio.Application.require("components/box");
+
+rio.components.Input = rio.Component.create(rio.components.Box, "Input", {
+	requireCss: "input",
+	attrReaders: [
+		["className", ""], 
+		["hoverClassName", ""],
+		["focusClassName", ""],
+		["placeHolderClassName", "inputPlaceHolder"],
+		["sync", "blur"], // options are "blur", "type", "none"
+		["typeSyncDelay", 250],
+		["tabIndex", 0],
+		["blurOnEnter", true],
+		["revertOnEscape", false],
+		["password", false],
+		["rioUndo", false],
+		["readOnly", false],
+		"placeHolderText"
+	],
+	attrAccessors: [
+		["value", ""], 
+		["focus", false],
+		["enabled", true]
+	],
+	attrEvents: ["enter", "keyPress", "keyDown", "keyUp", "focus", "blur"],
+	methods: {
+		buildHtml: function() {
+			var inputHtml = rio.Tag.input("", {
+				href: "",
+				onclick: "return false;",
+				tabIndex: this.getTabIndex(),
+				className: "input",
+				type: this.getPassword() ? "password" : "text"
+			});
+
+			inputHtml.addHoverClass(this.getHoverClassName(), this.getFocusClassName());
+			
+			this.readOnly.bind(function(readOnly) {
+				inputHtml.readOnly = readOnly;
+			});
+			
+			var placeHolderApplies = function() {
+				return this.getPlaceHolderText() && (this.getValue() == undefined || this.getValue() == "");
+			}.bind(this);
+			
+			var addPlaceHolderIfNeeded = function() {
+				if (placeHolderApplies()) {
+					inputHtml.addClassName("inputPlaceHolder");
+					inputHtml.value = this.getPlaceHolderText();
+				}
+			}.bind(this);
+			
+			
+			this.bind("value", function(value) {
+				inputHtml.value = value;
+			});
+
+			addPlaceHolderIfNeeded();
+
+			this.bind("focus", function(focus){
+				if(focus){
+					if (!this._nativeFocus) {
+						inputHtml.focus();
+					}
+				} else {
+					// if this is a native blur we shouldn't follow it up with another call to blur.  It will result in weird behavior.
+					if (!this._nativeBlur) {
+						inputHtml.blur();
+					}
+				}
+			}.bind(this));
+			this.bind("enabled", function(enabled) {
+				inputHtml.disabled = !enabled;
+			});
+
+			inputHtml.observe('blur', function() {
+				addPlaceHolderIfNeeded();
+				this._nativeBlur = true;
+				this.setFocus(false);
+				this._nativeBlur = false;
+				this.fire("blur");
+			}.bind(this));
+			inputHtml.observe('focus', function(){
+				if (placeHolderApplies()) {
+					inputHtml.value = "";
+					inputHtml.removeClassName("inputPlaceHolder");
+				}
+				this._nativeFocus = true;
+				this.setFocus(true);
+				this._nativeFocus = false;
+				this.fire("focus");
+			}.bind(this));
+
+			inputHtml.observe('change', function() { 
+				if (this.getSync() != "none") {
+					this.setValue(inputHtml.value);
+				}
+				this.fire("change");
+			}.bind(this));
+			inputHtml.observe('keypress', function(e) {
+				if (e.keyCode == Event.KEY_RETURN) {
+					if(this.getBlurOnEnter()) {
+						inputHtml.blur();
+					}
+					this.fire('enter');
+				}
+				if (e.keyCode == Event.KEY_ESC && this.getRevertOnEscape()) {
+					inputHtml.value = this.getValue();
+					inputHtml.blur();
+				}
+				this.fire("keyPress", e);
+			}.bindAsEventListener(this));
+			inputHtml.observe('keydown', function(e) {
+				if (e.keyCode == 90 && e.metaKey && !this.getReadOnly()) {
+					if (this.getRioUndo() && (this.getValue() == inputHtml.value)) {
+						if (e.shiftKey) {
+							rio.Undo.redo();
+						} else {
+							rio.Undo.undo();
+						}
+						e.stop();
+					}
+				}
+
+				if (this.getSync() == "type") {
+					if (!this._syncAfter) { this._syncAfter = new rio.DelayedTask(); }
+					this._syncAfter.delay(this.getTypeSyncDelay(), function() {
+						this.setValue(inputHtml.value);
+					}, this);
+				}
+				this.fire("keyDown", e);
+			}.bindAsEventListener(this));
+			inputHtml.observe('keyup', function(e) {
+				this.fire("keyUp", e);
+			}.bindAsEventListener(this));
+			
+			
+			inputHtml.applyStyle(this.boxStyles());
+			
+			return inputHtml;
+		},
+		forceFocus: function() {
+			this.setFocus(true);
+			this.html().focus();
+		},
+		clear: function() {
+			this.setValue("");
+		},
+		cursorEnd: function() {
+			this.setSelectionRange(this.getValue().length, this.getValue().length);
+		},
+
+		focusAndHighlight: function() {
+			this.setFocus(true);
+			this.setSelectionRange(0, (this.getValue() || "").length);
+		},
+		
+		setSelectionRange: function(selectionStart, selectionEnd) {
+			var input = this.html();
+			if (input.setSelectionRange) {
+				input.setSelectionRange(selectionStart, selectionEnd);
+			} else if (input.createTextRange) {
+				var range = input.createTextRange();
+				range.collapse(true);
+				range.moveEnd('character', selectionEnd);
+				range.moveStart('character', selectionStart);
+				range.select();
+			}
+		}
+	}
+});

data/public/javascripts/components/label.js

@@ -0,0 +1,15 @@
+rio.components.Label = rio.Component.create(rio.components.Base, {
+	requireCss: "label",
+	attrAccessors: ["content"],
+	attrEvents: ["dblClick"],
+	methods: {
+		buildHtml: function() {
+			var labelHtml = rio.Tag.span();
+			this.content.bind(function(content) {
+				labelHtml.update(content);
+			});
+			labelHtml.observe("dblclick", this.fire.curry("dblClick").bind(this));
+			return labelHtml;
+		}
+	}
+});

data/public/javascripts/components/lightbox.js

@@ -0,0 +1,160 @@
+// Copyright 2008, Thinklink
+// Adapted from:
+//  - lightbox.js by Chris Cambell
+
+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; };
+		}
+
+		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"
+		});
+	},
+	
+	// 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(); }
+	}
+});
+
+Object.extend(rio.components.Lightbox, {
+	deactivateCurrentLightbox: function() {
+		if (this.currentLightbox) { this.currentLightbox.deactivate(); }
+	},
+	
+	registerClassName: function(className) {
+		lbox = $$('.' + className).each(function(a) {
+			new rio.components.Lightbox({ ctrl: a });
+		});
+	}
+});
+
+/*-----------------------------------------------------------------------------------------------*/
+
+Event.observe(window, 'load', function() { rio.components.Lightbox.registerClassName('lbOn'); });