riojs 0.0.0

data/public/javascripts/components/tab_bar.js

@@ -0,0 +1,64 @@
+rio.Application.require("components/box");
+
+rio.components.TabBar = rio.Component.create(rio.components.Box, "TabBar", {
+	requireCss: "tab_bar",
+	attrReaders: [["tabs", []]],
+	attrHtmls: ["tabs"],
+	methods: {
+		buildHtml: function() {
+			var tabBarHtml = rio.Tag.ul(this.tabsHtml(), { className: "tabBar" });
+			var tabBarBottom = rio.Tag.div("", { className: "tabBarBottom" });
+			var html = rio.Tag.div([tabBarHtml, tabBarBottom], { className: "tabBarWrapper" });
+			html.applyStyle(this.boxStyles());
+			return html;
+		},
+		
+		buildTabsHtml: function() {
+			var tabs = this.getTabs();
+			tabs.each(function(tab) {
+				tab.selected.bind(function(selected) {
+					if (selected) {
+						tabs.without(tab).each(function(toDeselect) { toDeselect.setSelected(false); });
+					}
+				});
+			});
+			if (!tabs.any(function(tab) { return tab.getSelected();	})) {
+				tabs.first().setSelected(true);
+			}
+			return tabs.map(function(tab) { return tab.html(); });
+		},
+		
+		selectNext: function() {
+			this.getTabs()[(this.selectedIndex() + 1) % this.getTabs().length].setSelected(true);
+		},
+		
+		selectPrevious: function() {
+			this.getTabs()[(this.selectedIndex() - 1 + this.getTabs().length) % this.getTabs().length].setSelected(true);
+		},
+		
+		selectedIndex: function() {
+			return this.getTabs().indexOf(this.getTabs().detect(function(t) { return t.getSelected(); }));
+		}
+	}
+});
+
+rio.components.Tab = rio.Component.create("Tab", {
+	attrAccessors: ["name", ["selected", false]],
+	methods: {
+		buildHtml: function() {
+			
+			var html = rio.Tag.li("");
+			html.addHoverClass("tabHover");
+			this.name.bind(function(name) {
+				html.update(name);
+			});
+			this.selected.bind(function(selected) {
+				html.className = selected ? "tabSelected" : "tab";
+			}.bind(this));
+			
+			html.observe("click", this.setSelected.bind(this, true));
+
+			return html;
+		}
+	}
+});

data/public/javascripts/components/tab_panel.js

@@ -0,0 +1,57 @@
+rio.Application.require("components/box");
+
+rio.components.TabPanel = rio.Component.create(rio.components.Box, "TabPanel", {
+	require: ["components/panel", "components/tab_bar"],
+	requireCss: "tab_panel",
+	attrReaders: [
+		["resizable", false],
+		"maxWidth",
+		"minWidth",
+		"maxHeight",
+		"minHeight",
+		["layout", false],
+		["tabs", []],
+		"panel"
+	],
+	attrHtmls: ["tab"],
+	methods: {
+		initialize: function() {
+			this._panel = new rio.components.Panel({
+				resizable: this.getResizable(),
+				maxWidth: this.getMaxWidth(),
+				minWidth: this.getMinWidth(),
+				maxHeight: this.getMaxHeight(),
+				minHeight: this.getMinHeight(),
+				layout: this.getLayout(),
+				region: this.getRegion(),
+				className: "tabPanel"
+			});
+		},
+		
+		buildHtml: function() {
+			this.getPanel().buildTitleHtml = function() {
+				return this.tabHtml();
+			}.bind(this);
+			return this.getPanel().html();
+		},
+		
+		buildTabHtml: function() {
+			return new rio.components.TabBar({ 
+				className: "tabPanelTabBar",
+				tabs: this.getTabs().map(function(tab) {
+					var tabComponent = new rio.components.Tab({ name: tab.title, selected: tab.selected });
+					tabComponent.selected.bind(function(selected) {
+						if (selected) {
+							this.getPanel().setItems(tab.items);
+						}
+					}.bind(this));
+					return tabComponent;
+				}.bind(this))
+			}).html();
+		},
+
+		resize: function() {
+			this.getPanel().resize();
+		}
+	}
+});

data/public/javascripts/components/textarea.js

@@ -0,0 +1,223 @@
+rio.components.Textarea = rio.Component.create(rio.components.Base, "Textarea", {
+	requireCss: "textarea",
+	attrReaders: [
+		["className", "textarea"], 
+		["hoverClassName", ""],
+		["focusClassName", ""],
+		["sync", "blur"], // options are "blur", "type", "none", "always"
+		["typeSyncDelay", 250],
+		["tabIndex", 0],
+		["revertOnEscape", false],
+		["stopEnterEvent", false],
+		["autoGrow", false],
+		["rioUndo", false]
+	],
+	attrAccessors: [
+		["value", ""], 
+		["focus", false],
+		["readOnly", false]
+	],
+	attrEvents: ["enter", "keyPress", "keyDown", "keyUp", "focus", "blur", "resize"],
+	attrHtmls: ["textarea"],
+	styles: ["height"],
+	methods: {
+		buildHtml: function() {
+			var html = rio.Tag.div("", { 
+				className: this.getClassName(),
+				style: "padding-bottom: 1px"
+			});
+			html.addHoverClass(this.getHoverClassName());
+			html.insert(this.textareaHtml());
+			html.applyStyle({ height: this.height });
+			return html;
+		},
+		
+		buildTextareaHtml: function() {
+			var textareaHtml = rio.Tag.textarea("", {
+				href: "",
+				onclick: "return false;",
+				tabIndex: this.getTabIndex(),
+				rows: 1,
+				style: "backgroundColor: transparent; border: none; width: 100%;"
+			});
+			
+			this.readOnly.bind(function(readOnly) {
+				textareaHtml.readOnly = readOnly;
+			});
+			
+			var updateHeight = Prototype.emptyFunction;
+			if (this.getAutoGrow()) {
+				updateHeight = this.resize.bind(this, textareaHtml);
+				updateHeight.defer();
+				Event.observe(window, "resize", updateHeight);
+			} else {
+				textareaHtml.setStyle({ height: "100%" });
+			}
+			
+			this.bind("value", function(value) {
+				if (textareaHtml.value != value) {
+					textareaHtml.value = value;
+					updateHeight();
+				}
+			});
+			// this.cursorEnd.bind(this).defer();
+			this.bind("focus", function(focus){
+				if(focus){
+					if (!this._nativeFocus) {
+						textareaHtml.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) {
+						textareaHtml.blur();
+					}
+				}
+			}.bind(this));
+
+			textareaHtml.observe('blur', function(){
+				this.html().removeClassName(this.getFocusClassName());
+				this._nativeBlur = true;
+				this.setFocus(false);
+				this.fire("blur");
+				this._nativeBlur = false;
+				this._valueAtLastBlur = textareaHtml.value;
+			}.bind(this));
+			textareaHtml.observe('focus', function(){
+				this.html().addClassName(this.getFocusClassName());
+				this._nativeFocus = true;
+				this.setFocus(true);
+				this.fire("focus");
+				this._nativeFocus = false;
+			}.bind(this));
+
+			textareaHtml.observe('change', function() { 
+				if (this.getSync() != "none") {
+					this.setValue(textareaHtml.value);
+				}
+				updateHeight();
+				this.fire("change");
+			}.bind(this));
+			textareaHtml.observe('keypress', function(e) {
+				if (e.keyCode == Event.KEY_RETURN) {
+					this.fire('enter');
+					if (this.getStopEnterEvent()) { e.stop(); }
+				}
+				if (e.keyCode == Event.KEY_ESC && this.getRevertOnEscape()) {
+					this.revert();
+					textareaHtml.blur();
+				}
+				this.fire("keyPress", e);
+			}.bindAsEventListener(this));
+			
+			var undoKeyMap = rio.KeyMap.build([
+				{
+					mac: { meta: true, alt: false, shift: false, key: "z" },
+					win: { ctrl: true, alt: false, key: "z" },
+					handler: function(e) {
+						if (this.getRioUndo() && (this.getValue() == textareaHtml.value)) {
+							rio.Undo.undo();
+							e.stop();
+						}
+					}.bind(this)
+				},
+				{
+					mac: { meta: true, alt: false, shift: true, key: "z" },
+					win: { ctrl: true, alt: false, key: "y" },
+					handler: function(e) {
+						if (this.getRioUndo() && (this.getValue() == textareaHtml.value)) {
+							rio.Undo.redo();
+							e.stop();
+						}
+					}.bind(this)
+				}
+			]);
+			
+			textareaHtml.observe('keydown', function(e) {
+				if (!this.getReadOnly()) {
+					undoKeyMap.handle(e);
+				}
+				
+				if (this.getSync() == "type") {
+					if (!this._syncAfter) { this._syncAfter = new rio.DelayedTask(); }
+					this._syncAfter.delay(this.getTypeSyncDelay(), function() {
+						this.setValue(textareaHtml.value);
+					}, this);
+				} else if (this.getSync() == "always") {
+					(function() {
+						this.setValue(textareaHtml.value);
+					}.bind(this)).defer();
+				}
+				updateHeight();
+				this.fire("keyDown", e);
+			}.bindAsEventListener(this));
+			textareaHtml.observe('keyup', function() {
+				updateHeight();
+				this.fire("keyUp");
+			}.bind(this));
+			
+			return textareaHtml;			
+		},
+		clear: function() {
+			this.setValue("");
+		},
+		cursorEnd: function() {
+			this.setSelectionRange(this.getValue().length, this.getValue().length);
+		},
+		forceFocus: function() {
+			this.setFocus(true);
+			this.textareaHtml().focus();
+		},
+		revert: function() {
+			this.textareaHtml().value = this.getValue();
+		},
+		commit: function() {
+			this.setValue(this.textareaHtml().value);
+		},
+		resize: function(html) {
+			if (this.getAutoGrow()) {
+				var textareaHtml = html || this.textareaHtml();
+				if (!textareaHtml.rows || textareaHtml.rows < 1) { textareaHtml.rows = 1; }
+				var rowCount = textareaHtml.rows;
+			    while (textareaHtml.clientHeight >= textareaHtml.scrollHeight && textareaHtml.rows > 1) { textareaHtml.rows -= 1; }
+			    while (textareaHtml.clientHeight + 1 < textareaHtml.scrollHeight) { textareaHtml.rows += 1; }
+				if (textareaHtml.rows != rowCount) { 
+					this.fire("resize"); 
+				}
+			}
+		},
+		backingValue: function() {
+			return this.textareaHtml().value;
+		},
+		getCursorLocation: function() {
+			try {
+				return this.textareaHtml().selectionStart;
+			} catch(e) {
+				return 0;
+			}
+		},
+		setCursorLocation: function(location) {
+			return this.setSelectionRange(location, location);
+		},
+		hasSelectedText: function() {
+			return this.textareaHtml().selectionStart != this.textareaHtml().selectionEnd;
+		},
+		selectEnd: function() {
+			this.setCursorLocation(this.backingValue().length);
+		},
+		selectAll: function() {
+			this.setSelectionRange(0, this.textareaHtml().value.length);
+		},
+		setSelectionRange: function(selectionStart, selectionEnd) {
+			var input = this.textareaHtml();
+			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/toggle_button.js

@@ -0,0 +1,22 @@
+rio.components.ToggleButton = rio.Component.create(rio.components.Base, {
+	attrReaders: ["offImage", "onImage"],
+	attrAccessors: ["state"],
+	attrEvents: ["click"],
+	methods: {
+		buildHtml: function() {
+			var imgHtml = new rio.components.Image();
+			this.bind("state", function(state) {
+				imgHtml.setSrc(state ? this.getOnImage() : this.getOffImage());
+			}.bind(this));
+			var linkHtml = rio.Tag.a(imgHtml, {
+				href: "",
+				onclick: "return false;"
+			});
+			linkHtml.observe("click", function() {
+				this.setState(!this.getState());
+				this.fire("toggle");
+			}.bind(this));
+			return linkHtml;
+		}
+	}
+});

data/public/javascripts/components/tooltip.js

@@ -0,0 +1,80 @@
+rio.components.Tooltip = rio.Component.create("Tooltip", {
+	requireCss: "tooltip",
+	attrReaders: [
+		["offsetX", 12],
+		["offsetY", 8],
+		"elt",
+		["fixed", false]
+	],
+	attrAccessors: [
+		["tip", ""]
+	],
+	methods: {
+		initialize: function(options) {
+			
+			this._showAfter = new rio.DelayedTask();
+			
+			this.getElt().observe('mouseover', function() {
+				this._showAfter.delay(500, this.show.bind(this));
+			}.bind(this));
+			this.getElt().observe('mouseout', this.hide.bind(this));
+			this.getElt().observe('mousemove', this.move.bindAsEventListener(this));
+
+			Element.body().insert(this.html());
+		},
+	
+		buildHtml: function() {
+			var html = rio.Tag.div("", { className: "tooltip", style: "display: none" });
+			this.tip.bind(function(tip) {
+				html.update(tip);
+			});
+			return html;
+		},
+
+		show: function() {
+			if (this.blank()) { return; }
+			
+			if (this.getFixed()) {
+				var offset = this.getElt().viewportOffset();
+				this.html().setStyle({
+					top: offset.top + this.getElt().getHeight() + 5 + "px",
+					left: offset.left + (this.getElt().getWidth() / 2) + "px"
+				});
+			}
+
+			this.html().show();
+			this.resetHideDelay();
+		},
+
+		hide: function() {
+			if (this.blank()) { return; }
+			this._showAfter.cancel();
+			this.html().hide();
+		},
+		
+		blank: function() {
+			if (!this.getTip()) { return true; }
+			if (Object.isString(this.getTip())) {
+				if (this.getTip().blank()) { return true; }
+			}
+			return false;
+		},
+	
+		move: function(e) {
+			if (this.getFixed()) { return; }
+			this.html().setStyle({
+				left: e.pointerX() + this.getOffsetX() + 'px',
+				top: e.pointerY() + this.getOffsetY() + 'px'
+			});
+			this.resetHideDelay();
+		},
+	
+		resetHideDelay: function() {
+			if (!this._hideAfter) { this._hideAfter = new rio.DelayedTask(); }
+			this._hideAfter.delay(5000, function() {
+				this.hide();
+			}, this);
+		}
+	}
+});
+