riojs 0.0.0

data/public/javascripts/components/link.js

@@ -0,0 +1,43 @@
+rio.components.Link = rio.Component.create(rio.components.Base, "Link", {
+	requireCss: "link",
+	attrAccessors: ["content", "href"],
+	attrReaders: ["className", ["realLink", false]],
+	attrEvents: ["click"],
+	styles: ["color"],
+	methods: {
+		buildHtml: function() {
+			var linkHtml = rio.Tag.a("", {
+				href: "",
+				className: this.getClassName() || "link"
+			});
+
+			this.bind("href", function(href) {
+				linkHtml.href = href || "";
+			});
+
+			this.bind("content", function(content) {
+				if (Object.isArray(content)) {
+					linkHtml.update();
+					for (var i=0, length=content.length; i<length; i++) {
+						linkHtml.insert(content[i]);
+					}
+				} else {
+					linkHtml.update(content);
+				}
+			}.bind(this));
+
+			linkHtml.observe("click", function(e) {
+				this.fire("click");
+				if(this.getRealLink()) {
+					rio.Utils.navigateTo(this.getHref());
+				} else {
+					e.stop();
+				}
+			}.bindAsEventListener(this));
+			
+			linkHtml.applyStyle({ color: this.color });
+
+			return linkHtml;
+		}
+	}
+});

data/public/javascripts/components/list_item.js

@@ -0,0 +1,44 @@
+rio.components.ListItem = rio.Component.create(rio.components.Base, "ListItem", {
+	attrAccessors: [["selected", false]],
+	attrReaders: [
+		"item", 
+		"renderer",
+		["className", "listItem"],
+		["hoverClassName", "listItemHover"],
+		["selectedClassName", "listItemSelected"],
+		["stopClickPropogation", false]
+	],
+	attrEvents: ["click"],
+	methods: {
+		buildHtml: function() {
+			var listItemHtml = this.getRenderer()(this.getItem());
+
+			listItemHtml.observe("mouseover", function() {
+				listItemHtml.addClassName(this.getHoverClassName());
+			}.bind(this));
+			listItemHtml.observe("mouseout", function() {
+				listItemHtml.removeClassName(this.getHoverClassName());
+			}.bind(this));
+			listItemHtml.observe("click", function(e) { 
+				this.click();
+				if (this.getStopClickPropogation()) {
+					e.stop();
+				}
+			}.bindAsEventListener(this));
+			
+			this.bind("selected", function(selected) {
+				listItemHtml[selected ? "addClassName" : "removeClassName"](this.getSelectedClassName());
+			}.bind(this));
+			
+			return listItemHtml;
+		},
+		
+		click: function() {
+			this.fire("click");	
+		},
+		
+		scrollTo: function() {
+			this.fire("scrollTo");
+		}
+	}
+});

data/public/javascripts/components/list_view.js

@@ -0,0 +1,192 @@
+rio.Application.require("components/box");
+rio.Application.require("components/list_item");
+
+rio.components.ListView = rio.Component.create(rio.components.Box, "ListView", {
+	requireCss: "list_view",
+	attrAccessors: [
+		"items",
+		"selectedItem",
+		["listItems", []],
+		["overflow", "auto"]
+	],
+	attrReaders: [
+		['className', 'listView'],
+		["itemRenderer", function(val) { return rio.Tag.div(val); }],
+		["listItemBuilder", function(item, renderer){ return new rio.components.ListItem({item: item, renderer: renderer}); }],
+		["autoSelectFirstItem", false]
+	],
+	attrEvents: ["selectNext", "selectPrevious", "itemClick"],
+	methods: {
+		buildHtml: function() {
+			var listHtml = this.boxHtml();
+			// listHtml.addClassName("listView");
+			this.addBindings(listHtml);
+		
+			return listHtml;
+		},
+		
+		addBindings: function(listHtml) {
+			if (!this._unbindings) { this._unbindings = []; }
+			var unbindItems = this.bind("items", {
+				set: function(items) {
+					listHtml.update();
+					this.setListItems([]);
+					if (items) {
+						for (var i=0, len=items.length; i < len; i++) {
+							this.insertItem(items[i], this.getListItems().size(), listHtml);
+						}
+					}
+				}.bind(this),
+				insert: function(val, atIndex) {
+					this.insertItem(val, atIndex, listHtml);
+				}.bind(this),
+				remove: function(val) {
+					this.removeItem(val, listHtml);
+				}.bind(this)
+			});
+			this._unbindings.push(unbindItems);
+			
+			this.bind("selectedItem", function(item) {
+				if(item) {
+					this.getListItems().each(function(li) { 
+						if (li.getItem() != item) {
+							li.setSelected(false);
+						}
+					});
+					if(this.getListItemForItem(item)){
+						this.getListItemForItem(item).setSelected(true);
+					}
+				}
+			}.bind(this));
+		},
+		
+		insertItem: function(val, atIndex, insertInto) {
+			insertInto = insertInto || this.html();
+			var listItem = this.getListItemBuilder()(val, this.getItemRenderer());
+			if (this.getSelectedItem() == listItem.getItem()) {
+				listItem.setSelected(true);
+			}
+			listItem.bind("selected", function(selected) {
+				if (selected) {
+					this.setSelectedItem(listItem.getItem());
+				} else {
+					if (listItem.getItem() == this.getSelectedItem()) {
+						this.setSelectedItem(null);
+					}
+				}
+			}.bind(this));
+			
+			listItem.observe("click", function() {
+				this.setSelectedItem(listItem.getItem());
+				this.fire("itemClick", listItem.getItem());
+			}.bind(this));
+			listItem.observe("scrollTo", function() {
+				var listItemHtml = listItem.html();
+				var listItemTop = listItemHtml.positionedOffset().top;
+				var listItemBottom = listItemTop + listItemHtml.getDimensions().height;
+				var bottomOfList = insertInto.scrollTop + insertInto.getDimensions().height;
+				if (bottomOfList < listItemBottom || listItemTop < insertInto.scrollTop) {
+					insertInto.scrollTop = listItemTop;
+				}
+			}.bind(this));
+			
+			if (atIndex == 0) {
+				if (this.getListItems().size() == 0) {
+					insertInto.insert(listItem);
+				} else {
+					this.getListItems()[atIndex].html().insert({ before: listItem.html() });
+				}
+			} else {
+				this.getListItems()[atIndex - 1].html().insert({ after: listItem.html() });
+			}
+
+			this.getListItems().splice(atIndex, 0, listItem);
+			
+			if (this.getAutoSelectFirstItem() && this.getListItems().size() == 1) {
+				this.setSelectedItem(listItem.getItem());
+			}
+		},
+		
+		removeItem: function(val, removeFrom) {
+			removeFrom = removeFrom || this.html();
+			var foundItem = this.getListItems().detect(function(listItem) { return listItem.getItem() == val; });
+			if (foundItem) {
+				var index = this.getListItems().indexOf(foundItem);
+				if (foundItem.html().parentNode == removeFrom) {
+					var foundWasSelected = this.getSelectedIndex() == index;
+					foundItem.html().remove();
+					if(foundWasSelected) {
+						this.pendingSelect(index);
+					}
+				}
+				this.getListItems().splice(index, 1);
+			}
+		},
+		
+		pendingSelect: function(index) {
+			this._pendingId = (function() { 
+				this.selectIndex(index); 
+				delete this._pendingId;
+			}.bind(this)).defer();
+		},
+		
+		clearPendingSelect: function() {
+			if (this._pendingId != undefined) {
+				clearTimeout(this._pendingId);
+			}
+		},
+		
+		getSelectedIndex: function(){
+			return this.getListItems().indexOf(this.getSelectedListItem());
+		},
+		
+		selectNext: function(){
+			this.selectIndex(this.getSelectedIndex() + 1);
+		},
+		
+		selectLast: function() {
+			this.selectIndex(this.getListItems().length - 1);
+		},
+		
+		selectFirst: function() {
+			this.selectIndex(0);
+		},
+		
+		selectAfterItem: function(item) {
+			this.selectIndex(this.getIndexOfItem(item) + 1);
+		},
+		
+		selectPrevious: function(){
+			this.selectIndex(this.getSelectedIndex() - 1);
+		},
+		
+		selectIndex: function(indexToSelect){
+			if(this.getListItems().length == 0){return;}
+			if(indexToSelect < 0){
+				this.fire("selectPrevious");
+				return;
+			}
+			if(indexToSelect >= this.getListItems().length){
+				this.fire("selectNext");
+				return;
+			}
+			
+			this.setSelectedItem(this.getListItems()[indexToSelect].getItem());
+		},
+		getIndexOfItem: function(item){
+			return this.getListItems().indexOf(this.getListItemForItem(item));
+		},
+		getIndexOfListItem: function(listItem){
+			return this.getListItems().indexOf(listItem);
+		},
+		getSelectedListItem: function(){
+			return this.getListItemForItem(this.getSelectedItem());
+		},
+		getListItemForItem: function(item){
+			return this.getListItems().detect(function(listItem){
+				return listItem.getItem() == item;
+			});
+		}
+	}
+});
+

data/public/javascripts/components/marquee.js

@@ -0,0 +1,131 @@
+rio.components.Marquee = rio.Component.create();
+
+rio.components.Marquee.requireCss("marquee");
+
+rio.components.Marquee.attrReader("initLeft");
+rio.components.Marquee.attrReader("initTop");
+rio.components.Marquee.attrReader("backgroundColor", "#669");
+rio.components.Marquee.attrReader("onComplete", Prototype.emptyFunction);
+
+rio.components.Marquee.attrHtml("background", "antsTop", "antsLeft", "antsBottom", "antsRight");
+
+rio.Component.extend(rio.components.Marquee, {
+	initialize: function(options) {
+		this._marqueeMove = this.marqueeMove.bindAsEventListener(this);
+		this._marqueeComplete = this.marqueeComplete.bindAsEventListener(this);
+		this._keyPress = this.keyPress.bindAsEventListener(this);
+		
+		Event.observe(document, "mousemove", this._marqueeMove);
+		Event.observe(document, "mouseup", this._marqueeComplete);
+		Event.observe(document, "keypress", this._keyPress);
+
+		var bod = Element.body();
+		bod.insert(this.html());
+	},
+	
+	buildHtml: function() {
+		return rio.Tag.div([this.antsTopHtml(), this.antsLeftHtml(), this.antsBottomHtml(), this.antsRightHtml(), this.backgroundHtml()], {
+			style: "z-index: 9999; left: " + this.getInitLeft() + "px; top: " + this.getInitTop() + "px; width: 0px; height: 0px; font-size: 0px;",
+			className: "marquee"
+		});
+	},
+	
+	buildBackgroundHtml: function() {
+		return rio.Tag.div('', { 
+			className: "marqueeBackground",
+			style: "background-color: " + this.getBackgroundColor()
+		});
+	},
+	
+	buildAntsHtml: function(pos) {
+		return rio.Tag.span('', { className: pos + "Ants" });
+	},
+
+	buildAntsTopHtml: function() { return this.buildAntsHtml("top"); },
+	buildAntsLeftHtml: function() { return this.buildAntsHtml("left"); },
+	buildAntsBottomHtml: function() { return this.buildAntsHtml("bottom"); },
+	buildAntsRightHtml: function() { return this.buildAntsHtml("right"); },
+	
+	marqueeMove: function(e) {
+		var offsets = document.viewport.getScrollOffsets();
+		var x = e.clientX + offsets[0];
+		var y = e.clientY + offsets[1];
+		var initLeft = this.getInitLeft();
+		var initTop = this.getInitTop();
+
+		if (initLeft < x) {
+			this.setLeft(initLeft);
+			this.setWidth(x - initLeft);
+		} else {
+			this.setLeft(x);
+			this.setWidth(initLeft - x);
+		}
+		
+		if (initTop < y) {
+			this.setTop(initTop);
+			this.setHeight(y - initTop);
+		} else {
+			this.setTop(y);
+			this.setHeight(initTop - y);
+		}
+	},
+	
+	setLeft: function(newLeft) {
+		this.html().style.left = newLeft + "px";
+	},
+
+	getLeft: function() {
+		return this.html().cumulativeOffset()[0];
+	},
+	
+	setTop: function(newTop) {
+		this.html().style.top = newTop + "px";
+	},
+
+	getTop: function() {
+		return this.html().cumulativeOffset()[1];
+	},
+	
+	getWidth: function() {
+		return this.html().getWidth();
+	},
+
+	setWidth: function(newWidth) {
+		this.html().style.width = newWidth + "px";
+		this.backgroundHtml().style.width = newWidth + "px";
+	},
+
+	getHeight: function() {
+		return this.html().getHeight();
+	},
+
+	setHeight: function(newHeight) {
+		this.html().style.height = newHeight + "px";
+		this.backgroundHtml().style.height = newHeight + "px";
+	},
+
+	marqueeComplete: function(e) {
+		this.getOnComplete()({
+			left: this.getLeft(),
+			top: this.getTop(),
+			width: this.getWidth(),
+			height: this.getHeight()
+		});
+		this.killMarquee();
+	},
+	
+	killMarquee: function() {
+		Event.stopObserving(document, "mousemove", this._marqueeMove);
+		Event.stopObserving(document, "mouseup", this._marqueeComplete);
+		Event.stopObserving(document, "keypress", this._keyPress);
+
+		this.html().remove();
+	},
+	
+	keyPress: function(e) {
+		if (e.keyCode == Event.KEY_ESC) {
+			this.killMarquee();
+			e.stop();
+		}
+	}
+});

data/public/javascripts/components/menu.js

@@ -0,0 +1,89 @@
+rio.components.Menu = rio.Component.create("Menu", {
+	requireCss: "menu",
+	
+	attrAccessors: [
+		["items", []],
+		["left", 0],
+		["top", 0]
+	],
+	
+	attrHtmls: ["overlay"],
+	
+	methods: {
+		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),
+
+				insert: insertItem,
+				remove: removeItem
+			});
+			
+			return menuHtml;
+		},
+		
+		buildOverlayHtml: function() {
+			var overlayHtml = rio.Tag.div("", { className: "menuOverlay" });
+			Event.observe(overlayHtml, "mousedown", this.click.bind(this));
+			return overlayHtml;
+		},
+		
+		render: function() {
+			Element.body().insert(this.overlayHtml());
+			Element.body().insert(this.html());
+		},
+		
+		click: function() {
+			this.close();
+		},
+		
+		close: function() {
+			this.html().remove();
+			this.overlayHtml().remove();
+		}
+	}
+});
+
+rio.components.MenuItem = rio.Component.create("MenuItem", {
+	attrAccessors: ["text"],
+	attrEvents: ["click"],
+	methods: {
+		buildHtml: function() {
+			var itemHtml = rio.Tag.div("", { className: "menuItem" });
+			itemHtml.addHoverClass("menuItemHover");
+
+			this.bind("text", function(text) {
+				itemHtml.update(text);
+			});
+
+			itemHtml.observe("click", this.click.bind(this));
+
+			return itemHtml;
+		},
+		
+		click: function() {
+			this.fire("click");
+		}
+	}
+});