riojs 0.0.0

data/public/javascripts/components/alert_box.js

@@ -0,0 +1,59 @@
+rio.components.AlertBox = rio.Component.create("AlertBox", {
+	require: ["components/lightbox", "components/button"],
+	requireCss: "alert_box",
+	attrReaders: [
+		"body", 
+		["title", "Alert"],
+		["buttonText", "OK"],
+		["deactivateOnEscape", true],
+		["deactivateOnClick", true]
+	],
+	attrHtmls: ["body"],
+	attrEvents: ["close"],
+	methods: {
+		initialize: function() {
+			this._lightbox = new rio.components.Lightbox({ 
+				content: this.bodyHtml(), 
+				deactivateOnClick: this.getDeactivateOnClick(),
+				deactivateOnEscape: this.getDeactivateOnEscape(),
+				deactivate: this.fire.bind(this, "close")
+			});
+			this._lightbox.activate();
+		},
+	
+		buildBodyHtml: function() {
+			var bodyHtml = rio.Tag.div("", { className: "alertBoxBody" });
+
+			bodyHtml.update(this.getBody());
+
+			var okButton = new rio.components.Button({ 
+				text: this.getButtonText(), 
+				useNative: false, 
+				onClick: this.close.bind(this) 
+			});
+
+			var okHtml = rio.Tag.div(okButton, { className: "ok" });
+			
+			var headerHtml = rio.Tag.div(this.getTitle(), {
+				className: "alertBoxTitle"
+			});
+			
+			var innerHtml = rio.Tag.div([
+				headerHtml,
+				bodyHtml, 
+				okHtml
+			], { 
+				className: "alertBoxInner" 
+			});
+
+			return rio.Tag.div(innerHtml, {
+				className: "alertBox"
+			});
+		},
+	
+		close: function() {
+			this._lightbox.deactivate();
+			this.fire("close");
+		}
+	}
+});

data/public/javascripts/components/base.js

@@ -0,0 +1,47 @@
+rio.components.Base = rio.Component.create("Base", {
+	attrReaders: [
+		["className", ""],
+		["seleniumId", ""]
+	],
+	styles: ["position", "top", "right", "bottom", "left", "display"],
+	methods: {
+		html: function() {
+			if (!this._html) { 
+				this._html = this.buildHtml();
+				this._html.addClassName(this.getClassName());
+				
+				if (rio.environment.supportSelenium) {
+					this._html.id = this.getSeleniumId();
+				}
+				
+				this._html.applyStyle({
+					position: this.position,
+					top: this.top,
+					right: this.right,
+					bottom: this.bottom,
+					left: this.left,
+					display: this.display
+				});
+			}
+			return this._html;
+		},
+		
+		addClassName: function(className) {
+			this.html().addClassName(className);
+			this._className = this.html().className;
+		},
+
+		removeClassName: function(className) {
+			this.html().removeClassName(className);
+			this._className = this.html().className;
+		},
+		
+		show: function() {
+			this.setDisplay("");
+		},
+		
+		hide: function() {
+			this.setDisplay("none");
+		}
+	}
+});

data/public/javascripts/components/box.js

@@ -0,0 +1,63 @@
+rio.components.Box = rio.Component.create(rio.components.Base, "Box", {
+	requireCss: "box",
+	attrAccessors: [
+		["showing", true]
+	],
+	attrReaders: ["region"],
+	attrHtmls: ["box"],
+	styles: [
+		"backgroundColor", 
+		"fontSize", "fontWeight",
+		"height", "width", 
+		"border", "borderTop", "borderRight", "borderBottom", "borderLeft",
+		"padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
+		"margin", "marginTop", "marginRight", "marginBottom", "marginLeft",
+		"overflow", "overflowX", "overflowY"
+	],
+	methods: {
+
+		buildHtml: function() {
+			return this.boxHtml();
+		},
+		
+		buildBoxHtml: function() {
+			this.showing.bind(function() {
+				rio.ContainerLayout.resize();
+			}, true);	
+			var boxHtml = rio.Tag.div("");
+			boxHtml.applyStyle(this.boxStyles());
+			return boxHtml;
+		},
+		
+		resize: function() {
+			// This method will be called when the layout manager resizes the Box
+		},
+		
+		boxStyles: function() {
+			return {
+				height: this.height,
+				width: this.width,
+				margin: this.margin,
+				marginTop: this.marginTop,
+				marginRight: this.marginRight,
+				marginBottom: this.marginBottom,
+				marginLeft: this.marginLeft,
+				paddingTop: this.paddingTop,
+				paddingRight: this.paddingRight,
+				paddingBottom: this.paddingBottom,
+				paddingLeft: this.paddingLeft,
+				padding: this.padding,
+				border: this.border,
+				borderTop: this.borderTop,
+				borderRight: this.borderRight,
+				borderBottom: this.borderBottom,
+				borderLeft: this.borderLeft,
+				backgroundColor: this.backgroundColor,
+				fontSize: this.fontSize,
+				overflow: this.overflow,
+				overflowX: this.overflowX,
+				overflowY: this.overflowY
+			};
+		}
+	}
+});

data/public/javascripts/components/button.js

@@ -0,0 +1,98 @@
+rio.components.Button = rio.Component.create(rio.components.Base, "Button", {
+	require: ["components/tooltip", "components/image"],
+	requireCss: "button",
+	attrAccessors: [
+		"text",
+		"tip",
+		"imageSrc", 
+		"hoverImageSrc",
+		"disabledImageSrc",
+		"iconSrc",
+		["enabled", true]
+	],
+	attrReaders: [
+		["useNative", true]
+	],
+	attrEvents: ["click"],
+	methods: {
+		buildHtml: function() {
+			var buttonHtml;
+			if (this.getImageSrc() != undefined) {
+				var image = new rio.components.Image({ src: this.getImageSrc() });
+				buttonHtml = image.html();
+
+				this.enabled.bind(function(enabled) {
+					buttonHtml.setStyle({ cursor: enabled ? "pointer" : "default" });
+					if (this.getDisabledImageSrc()) {
+						image.setSrc(enabled ? this.getImageSrc() : this.getDisabledImageSrc());
+					}
+				}.bind(this));
+				
+				if (this.getHoverImageSrc()) {
+					buttonHtml.observe("mouseover", function() {
+						if (this.getDisabledImageSrc() && !this.getEnabled()) { return; }
+						image.setSrc(this.getHoverImageSrc());
+					}.bind(this));
+					buttonHtml.observe("mouseout", function() {
+						if (this.getDisabledImageSrc() && !this.getEnabled()) { return; }
+						image.setSrc(this.getImageSrc());
+					}.bind(this));
+				}
+			} else {
+				if (this.getUseNative()) {
+					buttonHtml = rio.Tag.button("");
+					this.enabled.bind(function(enabled) {
+						buttonHtml.disabled = !enabled;
+					});
+					
+					this.bind("text", function(text) {
+						buttonHtml.update(text);
+					});
+				} else {
+					buttonHtml = rio.Tag.div("", { className: "button" });
+					buttonHtml.addHoverClass("buttonHover");
+					
+					var updateContent = function() {
+						var iconSrc = this.getIconSrc("/images/icons/plus.png");
+						buttonHtml.update();
+						if (iconSrc) {
+							buttonHtml.insert(rio.Tag.img("", { src: rio.url(iconSrc) }));
+						}
+						buttonHtml.insert(this.getText());
+					}.bind(this);
+					
+					this.text.bind(updateContent);
+					this.iconSrc.bind(updateContent);
+					
+					buttonHtml.observe("mousedown", function() {
+						buttonHtml.addClassName("buttonDown");
+					});
+					buttonHtml.observe("mouseup", function() {
+						buttonHtml.removeClassName("buttonDown");
+					});
+					buttonHtml.observe("mouseout", function() {
+						buttonHtml.removeClassName("buttonDown");
+					});
+					
+					this.enabled.bind(function(enabled) {
+						buttonHtml[enabled ? "removeClassName" : "addClassName"]("buttonDisabled");
+					});
+				}
+			}
+
+			this.bind("tip", function(tip) {
+				if (tip && !tip.blank() && !this._tooltip) {
+					new rio.components.Tooltip({ elt: buttonHtml, tip: this.tip, fixed: true });
+				}
+			}.bind(this));
+
+			buttonHtml.observe("click", function(e) {
+				if (!this.getEnabled()) { return; }
+				this.fire("click");
+				e.stop();
+			}.bindAsEventListener(this));
+
+			return buttonHtml;
+		}
+	}
+});

data/public/javascripts/components/checkbox.js

@@ -0,0 +1,44 @@
+rio.components.Checkbox = rio.Component.create(rio.components.Base, "Checkbox", {
+	require: ["components/label"],
+	requireCss: "checkbox",
+	attrAccessors: [
+		"checked", 
+		"label",
+		["disabled", false]
+	],
+	attrReaders: [],
+	attrEvents: ["click"],
+	methods: {
+		buildHtml: function() {
+			var randomId = "_rio_label_" + Math.random();
+
+			var checkboxHtml = rio.Tag.input("", {
+				id: randomId,
+				type: "checkbox"
+			});
+			var labelHtml = rio.Tag.label("", { 
+				htmlFor: randomId,
+				className: "checkboxLabel"
+			});
+			
+			this.label.bind(function(label) {
+				labelHtml.update(label);
+			});
+			
+			this.bind("checked", function(checked) {
+				checkboxHtml.checked = checked;
+			});
+			
+			this.bind("disabled", function(disabled) {
+				checkboxHtml.disabled = disabled;
+			});
+			
+			checkboxHtml.observe("click", function() {
+				this.setChecked(checkboxHtml.checked);
+				this.fire("click");
+			}.bind(this));
+			
+			return rio.Tag.span([checkboxHtml, labelHtml], { className: "checkbox" });
+		}
+	}
+});

data/public/javascripts/components/container.js

@@ -0,0 +1,265 @@
+rio.Application.require("components/box");
+
+rio.components.Container = rio.Component.create(rio.components.Box, "Container", {
+	requireCss: "container",
+	attrAccessors: [["items", []]],
+	attrReaders: [
+		["layout", false]
+	],
+	methods: {
+		buildHtml: function() {
+			var html = this.boxHtml();
+			
+			html.observe("selectstart", function(e) {
+				if (e.target == html) {
+					e.stop(); 
+				}
+			}.bindAsEventListener(this));
+			
+			html.addClassName("container");
+			
+			this.items.bind(function(items) {
+				items = [items].flatten();
+				html.update();
+				items.each(function(item) {
+					html.insert(item);
+				});
+				
+				if (this.getLayout()) {
+					html.setStyle({ overflow: "hidden" });
+					if (this.getLayout() == "fit") {
+						var fitLayout = new rio.FitLayout({
+							parent: html,
+							items: items
+						});
+						this._resize = fitLayout.resize.bind(fitLayout);
+					} else {
+						var containerLayout = new rio.ContainerLayout({
+							parent: html,
+							items: items
+						});
+						this._resize = containerLayout.resize.bind(containerLayout);
+					}
+				}
+			}.bind(this));
+			
+			return html;
+		},
+		
+		resize: function() {
+			if (this._resize) { this._resize(); }
+			if (!this.getLayout()) {
+				[this.getItems()].flatten().each(function(item) {
+					if (item.resize && !(item.getLayout && item.getLayout())) { 
+						item.resize();
+					}
+				});
+			}
+		}
+	}
+});
+
+rio.Layout = Class.create({
+	initialize: function(options) {
+		this.parent = options.parent;
+		this.items = options.items;
+		this.parent.setStyle({
+			position: "relative"
+		});
+		
+		$w("top left right bottom").each(function(key) { 
+	      this.parent[key] = this.padding(this.parent, key);
+	    }.bind(this));
+	},
+	
+	fullPadding: function(element, s) {   
+		return this.padding(element, s) + this.border(element, s) + this.margin(element, s);
+	},
+
+	border: function(element, s) {   
+		var border = parseInt(element.getStyle("border-" + s + "-width") || 0, 10);
+		if (isNaN(border)) { // Test for IE!!
+			border = 0;
+		}
+		return border;
+	},
+
+	padding: function(element, s) {   
+		var padding = parseInt(element.getStyle("padding-" + s) || 0, 10);
+		if (isNaN(padding)) {   // Test for IE!!
+			padding = 0;
+		}
+		return padding;
+	},
+
+	margin: function(element, s) {   
+		var margin = parseInt(element.getStyle("margin-" + s) || 0, 10);
+		if (isNaN(margin)) {  // Test for IE!!
+			margin = 0;
+		}
+		return margin;
+	},
+
+	setPositivePxValue:function(objet, key, value) {
+		objet[key] =  (value > 0 ? value : 0) + "px";
+	},
+	
+	setPixelMetrics: function(element) {
+		element.style.position = "absolute";
+		element.paddingWidth   = this.fullPadding(element, "left") + this.fullPadding(element, "right");
+		element.paddingHeight  = this.fullPadding(element, "top") + this.fullPadding(element, "bottom");
+		element.marginWidth    = this.margin(element, "left") + this.margin(element, "right");
+		element.marginHeight   = this.margin(element, "top") + this.margin(element, "bottom");
+	}
+});
+
+rio.FitLayout = Class.create(rio.Layout, {
+	initialize: function($super, options) {
+		$super(options);
+
+		if (this.items.length != 1) {
+			throw("Fit layouts require exactly one element");
+		}
+		this.setPixelMetrics(this.element());
+	},
+	
+	element: function() {
+		var item = this.items.first();
+		return item.html ? item.html() : item;
+	},
+	
+	resize: function() {
+		if (!Element.isRendered(this.parent)) { return; }
+		
+		var element = this.element();
+		var parent = this.parent;
+
+		var d = this.parent.getDimensions();
+
+		var leftOffset = this.padding(parent, "left") + this.border(parent, "left");
+		var rightOffset = this.padding(parent, "right") + this.border(parent, "right");
+		var topOffset = this.padding(parent, "top") + this.border(parent, "top");
+		var bottomOffset = this.padding(parent, "bottom") + this.border(parent, "bottom");
+		var w = d.width - leftOffset - rightOffset;
+		var h = d.height - topOffset - bottomOffset;
+		
+		var s = element.style;
+		s.top = topOffset + "px";
+		s.left = leftOffset + "px";
+		s.width = (w - element.horizontalMBP()) + "px";
+		s.height = (h - element.verticalMBP()) + "px";
+	}
+});
+
+rio.ContainerLayout = Class.create(rio.Layout, {
+	initialize: function($super, options) {
+		$super(options);
+		this.manageParentHeight = this.parent.getStyle("height") == "100%";
+
+		this.items.each(function(item) {
+	      	this.setPixelMetrics(item.html());
+			this[item.getRegion()] = item;
+		}.bind(this));
+
+		if (!rio.ContainerLayout._containers) { rio.ContainerLayout._containers = []; }
+		rio.ContainerLayout._containers.unshift(this);
+		rio.ContainerLayout.resize.bind(this).defer();
+	},
+	
+	// This method needs some serious refactoring.
+	resize: function() {
+		if (!Element.isRendered(this.parent)) { return; }
+		if (this.manageParentHeight) {
+			this.parent.setStyle({ 
+				height: this.parent.ancestors()[0].getHeight() - this.padding(this.parent, "bottom") + "px" 
+			});
+		}
+		
+		var d = this.parent.getDimensions();
+		var w = d.width - this.parent.left - this.border(this.parent, "left") - this.border(this.parent, "right") - this.padding(this.parent, "right");
+		var h = d.height - this.parent.top - this.parent.bottom  - this.border(this.parent, "top") - this.border(this.parent, "bottom") - this.padding(this.parent, "bottom") - this.padding(this.parent, "top");
+		var that = this; // To avoid too many binds
+
+		// Set position and size of all top elements  
+		var s;
+		var top = this.parent.top + this.padding(this.parent, "top");
+		var lessTop = (!this.north || this.north.getShowing()) ? 0 : this.north.html().getHeight();
+		if (this.north) {
+			s = this.north.html().style;   
+			that.setPositivePxValue(s, 'width', w - this.north.html().paddingWidth);
+			s.top = top - lessTop + "px";
+			top += this.north.html().getHeight() + this.north.html().marginHeight + this.border(this.north.html(), "top") + this.border(this.north.html(), "bottom");
+		}
+		h -= top - this.parent.top - this.padding(this.parent, "top");
+
+		// Set position and size of all bottom elements
+		var bottom = this.parent.bottom + this.padding(this.parent, "bottom");
+		var lessBottom = (!this.south || this.south.getShowing()) ? 0 : this.south.html().getHeight();
+		if (this.south) {
+			s = this.south.html().style;   
+			that.setPositivePxValue(s, 'width', w - this.south.html().paddingWidth);
+			s.bottom = bottom - lessBottom + "px";
+			bottom += this.south.html().getHeight() + this.south.html().marginHeight + this.border(this.south.html(), "top") + this.border(this.south.html(), "bottom");
+		}
+		h -= bottom - this.parent.bottom - this.padding(this.parent, "bottom");
+
+		// Set position and size of all left elements
+		var left = this.parent.left;
+		var lessLeft = (!this.west || this.west.getShowing()) ? 0 : this.west.html().getWidth();
+		if (this.west) {
+			s = this.west.html().style;  
+			that.setPositivePxValue(s, 'height', h - this.west.html().paddingHeight + lessTop + lessBottom);
+			s.top  = top - lessTop + "px";  
+			s.left = left - lessLeft + "px";  
+			left += this.west.html().getWidth() + this.west.html().marginWidth;
+		}
+		w -= left - this.padding(this.parent, "left");
+		
+		// Set position and size of all right elements
+		var right = this.parent.right;
+		var lessRight = (!this.east || this.east.getShowing()) ? 0 : this.east.html().getWidth() + this.margin(this.east.html(), "left") + this.margin(this.east.html(), "right");
+		if (this.east) {
+			s = this.east.html().style;
+			that.setPositivePxValue(s, 'height', h - this.east.html().paddingHeight + lessTop + lessBottom);
+			s.top   = top - lessTop + "px";
+			s.right = right - lessRight + "px";
+			right += this.east.html().getWidth() + this.east.html().marginWidth;
+		}
+		w -= right - this.padding(this.parent, "right");
+
+		// Set position and size of all center elements
+		// Only one center for this version
+		var center = this.center.html();
+		s = center.style;
+		s.top  = top - lessTop + "px";
+		s.left = left - lessLeft + "px";  
+
+		// var extra = 0;
+		this.setPositivePxValue(s, 'width', w - center.horizontalMBP() + lessLeft + lessRight);
+		this.setPositivePxValue(s, 'height', h - center.paddingHeight + lessTop + lessBottom);
+		
+		if(this.north) { this.north.resize(); }
+		if(this.south) { this.south.resize(); }
+		if(this.east) { this.east.resize(); }
+		if(this.west) { this.west.resize(); }
+		if(this.center) { this.center.resize(); }
+	}
+});
+
+rio.ContainerLayout.resize = function() {
+	if (rio.ContainerLayout._containers) {
+		rio.ContainerLayout._containers.invoke("resize");
+	}
+};
+Event.observe(window, "resize", rio.ContainerLayout.resize.bind(rio.ContainerLayout));
+Event.observe(window, "load", rio.ContainerLayout.resize.bind(rio.ContainerLayout));
+
+
+
+
+
+
+
+
+
+