riojs 0.0.0

data/public/javascripts/components/notification.js

@@ -0,0 +1,75 @@
+rio.components.Notification = rio.Component.create(rio.components.Base, "Notification", {
+	requireCss: "notification",
+	attrReaders: [
+		"body", 
+		"iconSrc",
+		["duration", 5]
+	],
+	methods: {
+		initialize: function() {
+			rio.components.Notification.show(this);
+		},
+
+		buildHtml: function() {
+			var bodyHtml = rio.Tag.div("", { className: "notificationBody" });
+
+			bodyHtml.update(this.getBody());
+
+			var innerContents = bodyHtml;
+			if (this.getIconSrc()) {
+				bodyHtml.addClassName('notificationBodyWithIcon');
+				innerContents = [
+					new rio.components.Image({src: this.getIconSrc(), className: "notificationIcon" }),
+					bodyHtml
+				];
+			}
+
+			var innerHtml = rio.Tag.div(innerContents, { 
+				className: "notificationInner" 
+			});
+
+			return rio.Tag.div(innerHtml, {
+				className: "notification"
+			});
+		},
+		
+		hide: function() {
+			this.html().fade();
+		}
+	},
+	
+	classMethods: {
+		notifications: [],
+		show: function(notification) {
+			this.notifications.push(notification);
+
+			var html = notification.html();
+
+			Element.body().insert(html);
+			
+			var totalHeight = html.getHeight() + html.verticalMBP();
+			var totalWidth = html.getWidth() + html.horizontalMBP();
+			
+			html.setStyle({
+				top: -1 * totalHeight + "px",
+				left: Element.body().getWidth() - totalWidth - 15 + "px"
+			});
+			
+			this.slideDownBy(totalHeight + 15);
+
+			notification.hide.bind(notification).delay(notification.getDuration());
+		},
+		
+		slideDownBy: function(pixels) {
+			this.notifications.each(function(notification) {
+				var html = notification.html();
+				new Effect.Move(html, {
+					y: pixels,
+					afterFinish: function() {
+						this.notifications.splice(this.notifications.indexOf(notification));
+					}
+				});
+			});
+		}
+	}
+});

data/public/javascripts/components/overlay.js

@@ -0,0 +1,134 @@
+// Copyright 2008, Thinklink
+rio.components.Overlay = rio.Component.create();
+
+rio.components.Overlay.requireCss("overlay");
+
+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);
+
+rio.components.Overlay.attrHtml("overlay");
+
+rio.Component.extend(rio.components.Overlay, {
+	yPos : 0,
+	xPos : 0,
+
+	initialize: function(options) {
+		this._ie = Prototype.Browser.IE;
+		this._keyDown = this.keyDown.bind(this);
+	},
+
+	activate: function() {
+		this.setActive(true);
+		if (this.isIE()){
+			this.getScroll();
+
+			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);
+		}
+
+		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");
+			} 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);
+		}
+
+		if (skipFade || this.isIE()) {
+			this.overlayHtml().hide();
+		} else {
+			this.overlayHtml().fade({
+				from: this.getOpacity(),
+				to: 0.0,
+				duration: 0.5
+			});
+		}
+		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();
+		}
+	},
+	
+	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/panel.js

@@ -0,0 +1,146 @@
+rio.Application.require("components/box");
+
+rio.components.Panel = rio.Component.create(rio.components.Box, "Panel", {
+	require: ["components/splitter", "components/container"],
+	requireCss: "panel",
+	attrAccessors: [
+		["items", []]
+	],
+	attrReaders: [
+		["resizable", false],
+		"maxWidth",
+		"minWidth",
+		"maxHeight",
+		"minHeight",
+		"splitterImage",
+		["invisible", false],
+		["layout", false],
+		"title"
+	],
+	attrHtmls: ["inner", "outer", "title"],
+	methods: {
+		buildHtml: function() {
+			var html = this.boxHtml();
+			
+			html.addClassName("panel");
+			if (this.getInvisible()) {
+				html.addClassName("invisiblePanel");
+			}
+			
+			var outerHtml = this.outerHtml();
+			
+			var region = this.getRegion();
+			if (this.getResizable() && region && region != "center") {
+				var dimension = (region == "east" || region == "west") ? "width" : "height";
+				var placements = (region == "east" || region == "west") ? ["left", "right"] : ["top", "bottom"];
+				var primaryPosition = region == "west" || region == "north";
+				
+				var originalSize = this[("get-" + dimension).camelize()]().stripPx();
+				var splitterOptions = {
+					horizontal: dimension == "width",
+					position: "absolute",
+					splitterImage: this.getSplitterImage()
+				};
+
+				var maxSize = this[("getMax-" + dimension).camelize()]();
+				if (maxSize) {
+					maxSize = maxSize.stripPx();
+					if (primaryPosition) {
+						splitterOptions.maxDelta = maxSize - originalSize;
+					} else {
+						splitterOptions.minDelta = originalSize - maxSize;
+					}
+				}
+				var minSize = this[("getMin-" + dimension).camelize()]();
+				if (minSize) {
+					minSize = minSize.stripPx();
+					if (primaryPosition) {
+						splitterOptions.minDelta = minSize - originalSize;
+					} else {
+						splitterOptions.maxDelta = originalSize - minSize;
+					}
+				}
+				var splitter = new rio.components.Splitter(splitterOptions);
+
+				splitter.delta.bind(function(delta) {
+					var style = {};
+					style[dimension] = (primaryPosition ? originalSize + delta : originalSize - delta) + "px";
+					html.setStyle(style);
+					rio.ContainerLayout.resize();
+				}.bind(this));
+				
+				html.insert(outerHtml);
+				html.insert(splitter);
+				var outerHtmlStyle = {};
+				
+				// Instead of using 8px we should add a size attr to splitter and use that here.
+				outerHtmlStyle[("margin-" + placements[primaryPosition ? 1 : 0]).camelize()] = "8px";
+				outerHtml.setStyle(outerHtmlStyle);
+				
+				var splitterStyle = {};
+				splitterStyle[placements[primaryPosition ? 1 : 0]] = "0px";
+				if (dimension == "width") {
+					splitterStyle.top = "0px";
+				}
+				splitter.html().setStyle(splitterStyle);
+			} else {
+				html.insert(outerHtml);
+			}
+			
+			return html;
+		},
+		
+		buildTitleHtml: function() {
+			if (this.getTitle()) {
+				return rio.Tag.div(this.getTitle(), { className: "panelTitle" });
+			} else {
+				return rio.Tag.span();
+			}
+		},
+		
+		buildInnerHtml: function() {
+			var container = new rio.components.Container({
+				items: this.items,
+				layout: this.getLayout(),
+				height: "100%"
+			});
+			var html = rio.Tag.div(container, { className: "panelInside" });
+			if (this.getInvisible()) {
+				html.addClassName("invisiblePanelInside");
+			}
+			return html;
+		},
+		
+		buildOuterHtml: function() {
+			var html = rio.Tag.div([this.titleHtml(), this.innerHtml()], { className: "panelOutside" });
+			if (this.getInvisible()) {
+				html.addClassName("invisiblePanelOutside");
+			}
+			return html;
+		},
+		
+		resize: function() {
+			var region = this.getRegion();
+			if (region) {
+				this.outerHtml().setStyle({ height: "auto" });
+				var otherHeight = this.html().verticalMBP() + this.outerHtml().verticalMBP();
+
+				this.outerHtml().setStyle({
+					height: (this.html().getHeight() - otherHeight) + "px"
+				});
+				
+				this.innerHtml().setStyle({
+					height: (this.html().getHeight() - this.titleHtml().getHeight() - this.innerHtml().verticalMBP() - this.outerHtml().verticalMBP()) + "px"
+				});
+			} 
+			if (region && (region == "west" || region == "east")) {
+				this.outerHtml().setStyle({ width: "auto" });
+				
+				var otherWidth = this.outerHtml().horizontalMBP();
+				this.outerHtml().setStyle({
+					width: (this.html().getWidth() - otherWidth) + "px"
+				});
+			}
+		}
+	}
+});

data/public/javascripts/components/radio.js

@@ -0,0 +1,46 @@
+rio.components.Radio = rio.Component.create(rio.components.Base, "Radio", {
+	require: ["components/label"],
+	requireCss: "radio",
+	attrAccessors: ["checked", "label"],
+	attrReaders: ["name"],
+	attrEvents: ["click"],
+	methods: {
+		buildHtml: function() {
+			var randomId = "_rio_radio_" + Math.random();
+			
+			var radioHtml = rio.Tag.input("", {
+				id: randomId,
+				type: "radio",
+				name: this.getName()
+			});
+			
+			var labelHtml = rio.Tag.label("", { 
+				htmlFor: randomId,
+				className: "radioLabel"
+			});
+			
+			this.bind("checked", function(checked) {
+				radioHtml.checked = checked;
+			});
+			
+			this.label.bind(function(label) {
+				labelHtml.update(label);
+			});
+
+			radioHtml.observe("change", function() {
+				this.setChecked(radioHtml.checked);
+			}.bind(this));
+
+			radioHtml.observe("click", function() {
+				this.setChecked(radioHtml.checked);
+				this.fire("click");
+			}.bind(this));
+			
+			this.getChecked = function() {
+				return radioHtml.checked;
+			};
+			
+			return rio.Tag.span([radioHtml, labelHtml], { className: "radio" });
+		}
+	}
+});

data/public/javascripts/components/splitter.js

@@ -0,0 +1,65 @@
+rio.components.Splitter = rio.Component.create(rio.components.Base, "Splitter", {
+	requireCss: "splitter",
+	attrReaders: [
+		["horizontal", true],
+		"minDelta",
+		"maxDelta",
+		"splitterImage"
+	],
+	attrAccessors: [
+		["delta", 0]
+	],
+	methods: {
+		buildHtml: function() {
+			var horizontal = this.getHorizontal();
+			var html = rio.Tag.div("", { className: horizontal ? "splitterH" : "splitterV" });
+			
+			var defaultSplitterImage = horizontal ? "/images/splitter-handle-horizontal.png" : "/images/splitter-handle-vertical.png";
+			var handleImage = new rio.components.Image({ src: this.getSplitterImage() || defaultSplitterImage });
+			var handle = handleImage.html();
+			var handleWrapper = rio.Tag.div(handle);
+			
+			var stopEvent = function(e) { e.stop(); return false; }.bindAsEventListener(this);
+			handle.observe("dragstart", stopEvent);
+
+			var dragging = false;
+			var dragStart = 0;
+			var deltaStart = 0;
+			html.observe("mousedown", function(e) {
+				dragging = true;
+				dragStart = e[horizontal ? "pointerX" : "pointerY"]();
+				deltaStart = this.getDelta();
+				
+				e.stop();
+			}.bindAsEventListener(this));
+			
+			var updateDelta = function(pointer) {
+				var newDelta = deltaStart + (pointer - dragStart);
+				if (this.getMinDelta() != undefined) {
+					newDelta = Math.max(newDelta, this.getMinDelta());
+				}
+				if (this.getMaxDelta() != undefined) {
+					newDelta = Math.min(newDelta, this.getMaxDelta());
+				}
+				this.setDelta(newDelta);
+			}.bind(this);
+			
+			document.observe("mousemove", function(e) {
+				if (dragging) {
+					updateDelta(e[horizontal ? "pointerX" : "pointerY"]());
+				}
+			}.bindAsEventListener(this));
+			
+			document.observe("mouseup", function(e) {
+				if (dragging) {
+					updateDelta(e[horizontal ? "pointerX" : "pointerY"]());
+					dragging = false;
+				}
+			}.bindAsEventListener(this));
+			
+			html.insert(handleWrapper);
+			
+			return html;
+		}
+	}
+});