changeset 534 . prototype ui

Changeset 534

add distrib for autocomplete

Feb 22 2008 * 11:23 (10 months ago)
Committed by seb

Affected files:

r524	r534
6	6	PUI_VERSION = 'trunk'
7	7
8	8	PUI_DEPENDENCIES = {
9		:core => nil,
10		:window => [ :core, :util, :shadow ],
11		:carousel => :core,
12		:dock => :core,
13		:shadow => [:core, :util],
14		:util => :core,
15		:context_menu => [ :shadow, :"util/iframe_shim.js"],
	9	:core => nil,
	10	:window => [ :core, :util, :shadow ],
	11	:carousel => :core,
	12	:dock => :core,
	13	:shadow => [:core, :util],
	14	:util => :core,
	15	:context_menu => [ :shadow, :"util/iframe_shim.js"],
	16	:auto_complete => [ :shadow, :"util/iframe_shim.js"],
16	17	}
17	18
18	19	PUI_COMPONENTS = PUI_DEPENDENCIES.keys

r530	r534
2	2
3	3
4	4	Title: Prototype-UI
5		SubTitle: 523:524
	5	SubTitle: 523:530
6	6
7	7	# You can add a footer to your documentation like this:
8	8	# Footer: [text]
---	---
66	66	File: Dialog (window/dialog.js)
67	67	} # Group: Window
68	68
	69	File: auto_complete/auto_complete.js (auto_complete/auto_complete.js)
69	70	File: ContextMenu (context_menu/context_menu.js)
70	71	File: Dock (dock/dock.js)
71	72	File: Shadow (shadow/shadow.js)
---	---
77	78	Function Index: Functions
78	79	Interface Index: Interfaces
79	80	Property Index: Properties
	81	File Index: Files
80	82	} # Group: Index
81	83

r533	r534
187	187	var current = null;
188	188	// Seletc first
189	189	if (!this.current)
190		current = this.autocompletionContainer.firstDescendant()
191		else if (element == "next")
	190	current = this.autocompletionContainer.firstDescendant();
	191	else if (element == "next") {
192	192	current = this.current[element]() \|\| this.autocompletionContainer.firstDescendant();
193		else if (element == "previous")
	193	}
	194	else if (element == "previous") {
194	195	current = this.current[element]() \|\| this.autocompletionContainer.childElements().last();
	196	}
195	197	else
196	198	current = element;
197	199
---	---
201	203	this.current = current;
202	204
203	205	if (this.current)
204		this.current.addClassName(this.getClassName("current"));;
	206	this.current.addClassName(this.getClassName("current"));
205	207	},
206	208
207	209	// Add current selected element from completion to input
---	---
394	396	.observe("keyup", this.keyup.bind(this))
395	397	.observe("keydown", this.keydown.bind(this));
396	398	this.container = new Element('ul', {className: this.getClassName("holder")})
397		.insert(new Element("li", {className: this.getClassName("input")}).insert(this.input))
	399	.insert(new Element("li", {className: this.getClassName("input")}).insert(this.input));
398	400
399	401	this.element.insert({before: this.container});
400	402	this.autocompletion.style.width = this.container.getWidth() - this.container.getBorderDimensions().width + "px";

r533	r534
7	7
8	8	<script src="../../../lib/prototype.js" type="text/javascript"></script>
9	9	<script src="../../../lib/effects.js" type="text/javascript"></script>
10		<script src="../../../dist/prototype-ui.js" type="text/javascript"></script>
11		<script src="../../../src/auto_complete/auto_complete.js" type="text/javascript"></script>
	10	<script src="../../../dist/auto_complete.js" type="text/javascript"></script>
12	11	<link href="../../../themes/auto_complete/mac_os_x.css" rel="stylesheet" type="text/css" />
13	12	<link href="../../../themes/shadow/auto_complete.css" rel="stylesheet" type="text/css">
14	13	<style>
---	---
19	18	</head>
20	19
21	20	<body id="test">
22		<h1>Prototype UI autocomplete Demo</h1>
	21	<h1>Prototype UI autocomplete Demo</h1>
	22	Type "e" for example to see autocompletion.<br/><br/>
23	23	<form action="test_submit" method="get" accept-charset="utf-8">
24	24	<div id="input-text">
25	25	<input type="text" value="" id="pui-demo" />
---	---
44	44	<button onclick="tlist2.update(); alert($F('facebook-demo'));return false;">Submit</button>
45	45	<script type="text/javascript">
46	46	Event.observe(window, "load", function() {
47		pui = new UI.AutoComplete('pui-demo', { infoMessage: "Type a user name",
	47	pui = new UI.AutoComplete('pui-demo', { infoMessage: "Type a user name",
	48	noMatchMessage: "Nothing found",
48	49	shadow: "auto_complete"
49	50	});
50	51	pui.setAutocompleteList([{text:"Sébastien", value:1},

r533	r534
3	3	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4	4	<head>
5	5	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6		<title>Prototype UI : functional test : AutoComplete</title>
	6	<title>Prototype UI : functional test : AutoComplete Ajax mode</title>
7	7
8	8	<script src="../../../lib/prototype.js" type="text/javascript"></script>
9	9	<script src="../../../lib/effects.js" type="text/javascript"></script>
10		<script src="../../../dist/prototype-ui.js" type="text/javascript"></script>
11		<script src="../../../src/auto_complete/auto_complete.js" type="text/javascript"></script>
	10	<script src="../../../dist/auto_complete.js" type="text/javascript"></script>
12	11	<link href="../../../themes/auto_complete/default.css" rel="stylesheet" type="text/css" />
13	12	<link href="../../../themes/shadow/drop_shadow.css" rel="stylesheet" type="text/css">
14	13	<style>
---	---
19	18	</head>
20	19
21	20	<body id="test">
22		<h1>Prototype UI autocomplete Demo</h1>
	21	<h1>Prototype UI autocomplete Demo (Ajax)</h1>
	22	Type "e" for example to see autocompletion.<br/><br/>
23	23	<form action="test_submit" method="get" accept-charset="utf-8">
24	24	<div id="input-text">
25	25	<input type="text" value="" id="pui-demo" />