Changeset 570
Changeset index | Previous changeset | Next changeset

add window iframeShim, add autocomplete unique option

Apr 14 2008 * 17:27 (7 months ago)
Committed by seb

Affected files:

trunk/src/auto_complete/auto_complete.js (Unified diff)

r569r570
1717 delay: 0.2, // Delay before running ajax request
1818 shadow: false, // Shadow theme name (false = no shadow)
1919 highlight: false, // Highlight search string in list
20 tokens: false // Tokens used to automatically adds a new entry (ex tokens:[',', ' '] for coma and spaces)
20 tokens: false, // Tokens used to automatically adds a new entry (ex tokens:[',', ' '] for coma and spaces)
21 unique: true // Do not display in suggestion a selected value
2122 },
2223
2324 initialize: function(element, options) {
------
8283 else
8384 this.hideAutocomplete().fire("input:empty");
8485
85 return this.fire("element:added", {element: li});
86 return this.fire("element:added", {element: li, text: text, value: value});
8687 },
8788
8889 remove: function(element) {
------
298299 this.autocompletionContainer.hide();
299300 this.fire("request:started");
300301
301 new Ajax.Request(this.options.url, {parameters: {search: search, max: this.options.max.selection}, onComplete: function(transport) {
302 new Ajax.Request(this.options.url, {parameters: {search: search, max: this.options.max.selection, "selected[]": this.selectedValues()},
onComplete: function(transport) {
302303 this.setAutocompleteList(transport.responseText.evalJSON());
303304 this.timer = null;
304305 this.fire("request:completed");
------
418419 this.message.hide();
419420 if (this.options.url)
420421 this.selectedList = this.list;
421 else
422 else {
422423 this.selectedList = this.list.findAll(function(entry) {return entry.text.match(value)}).slice(0, this.options.max.selection);
424 if (this.options.unique) {
425 var selected= this.selectedValues();
426 if (! selected.empty())
427 this.selectedList = this.selectedList.findAll(function(entry) {return !selected.include(entry.value)});
428 }
429 }
423430 this.autocompletionContainer.update("");
424431 if (this.selectedList.empty()) {
425432 this.hideAutocomplete().fire('selection:empty');
------
514521 updateHiddenField: function() {
515522 var separator = this.options.tokens ? this.options.tokens.first() : " ";
516523 this.hidden.value = this.selectedText ? $A([this.selectedText, this.input.value]).join(separator) : this.input.value;
524 },
525
526 selectedValues: function() {
527 var selected = this.container.select("li." + this.getClassName("box"));
528 return selected.collect(function(element) {return element.readAttribute("pui-autocomplete:value")});
517529 }
518530 });
519531
Back to top

trunk/src/shadow/shadow.js (Unified diff)

r533r570
1515 options: {
1616 theme: "mac_shadow",
1717 focus: false,
18 zIndex: 100
18 zIndex: 100,
19 withIFrameShim: true
1920 },
2021
2122 /*
------
3839
3940 this.element = $(element);
4041 this.create();
41 this.iframe = Prototype.Browser.IE ? new UI.IframeShim() : null;
42 this.iframe = Prototype.Browser.IE && this.options.withIFrameShim ? new UI.IframeShim() : null;
4243
4344 if (Object.isElement(this.element.parentNode))
4445 this.render();
------
101102 this.shadowContents.each(function(item){ item.style.width = w});
102103 if (this.iframe)
103104 this.iframe.setSize(width + this.shadowSize.width - this.shadowShift.width, height + this.shadowSize.height - this.shadowShift.height);
104
105105 }
106106 catch(e) {
107107 // IE could throw an exception if called to early
Back to top

trunk/src/util/iframe_shim.js (Unified diff)

r533r570
3939 */
4040 initialize: function() {
4141 this.element = new Element('iframe', {
42 style: 'position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);display:none',
42 style: 'position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=1);',
4343 src: 'javascript:false;',
4444 frameborder: 0
4545 });
Back to top

trunk/src/window/shadow.js (Unified diff)

r498r570
99 if (this.shadow) {
1010 this.shadow.hide();
1111 this.effect('show', this.shadow.shadow);
12 }
12 }
13 if (this.iframe)
14 this.iframe.show();
1315 },
1416
1517 hideShadow: function() {
1618 if (this.shadow)
1719 this.effect('hide', this.shadow.shadow);
20 if (this.iframe)
21 this.iframe.hide();
1822 },
1923
2024 removeShadow: function() {
------
4347 .observe('blurred', this.blurShadow);
4448
4549 if (this.options.shadow)
46 this.shadow = new UI.Shadow(this.element, {theme: this.getShadowTheme()});
50 this.shadow = new UI.Shadow(this.element, {theme: this.getShadowTheme(), withIFrameShim: false});
51 this.iframe = Prototype.Browser.IE ? new UI.IframeShim() : null;
4752 },
4853
4954 addElementsWithShadow: function() {
------
6974 var pos = this.getPosition();
7075 this.shadow.setPosition(pos.top, pos.left);
7176 }
77 if (this.iframe) {
78 var pos = this.getPosition();
79 this.iframe.setPosition(pos.top, pos.left);
80 }
7281 return this;
7382 },
7483
------
7887 var size = this.getSize();
7988 this.shadow.setSize(size.width, size.height);
8089 }
90 if (this.iframe) {
91 var size = this.getSize();
92 this.iframe.setSize(size.width, size.height);
93 }
8194 return this;
8295 },
8396
------
8598 this.setBoundsWithoutShadow(bounds, innerSize);
8699 if (this.shadow)
87100 this.shadow.setBounds(this.getBounds());
101 if (this.iframe)
102 this.iframe.setBounds(this.getBounds());
88103 }
89104 });
Back to top

trunk/test/functional/auto_complete/test_auto_complete.html (Unified diff)

r568r570
77
88 <script src="../../../lib/prototype.js" type="text/javascript"></script>
99 <script src="../../../lib/effects.js" type="text/javascript"></script>
10 <script src="../../../test/lib/unittest.js" type="text/javascript"></script>
1110 <script src="../../../dist/prototype-ui.js" type="text/javascript"></script>
1211 <link href="../../../themes/auto_complete/mac_os_x.css" rel="stylesheet" type="text/css" />
1312 <link href="../../../themes/shadow/auto_complete.css" rel="stylesheet" type="text/css">
------
4443 <script type="text/javascript">
4544 document.whenReady(function() {
4645 ac = new UI.AutoComplete('pui-demo', { shadow: "auto_complete"});
47 ac.observe('input:empty', function() {ac.showMessage("Type a user name")})
48 .observe('selection:empty', function() {ac.showMessage("Nothing found")});
46 ac.observe('input:empty', function(event) {event.memo.autocomplete.showMessage("Type a user name")})
47 .observe('selection:empty', function(event) {event.memo.autocomplete.showMessage("Nothing found")});
4948
5049 ac.setAutocompleteList([{text:"Sébastien", value:1},
5150 {text:"Samuel", value:2},
Back to top

trunk/test/functional/auto_complete/test_auto_complete_ajax.html (Unified diff)

r569r570
1919
2020 <body id="test">
2121 <h1>Prototype UI autocomplete Demo (Ajax)</h1>
22 Ajax requests are simulated by stubbing Ajax.Request#onComplete and may not work on some browser (like IE)<br>
23 One second delay is set to simulate also internet traffic<br><br>
2224 Type "e" for example to see autocompletion.<br/><br/>
2325 <form action="test_submit" method="get" accept-charset="utf-8">
2426 <div id="input-text">
------
3638 <button onclick="return false;">Submit</button>
3739 <script type="text/javascript">
3840
39
41 // Simulate AJAX response from server. It filters response values with input search string and handles unique options
4042 Ajax.Request.prototype.originalInitialize = Ajax.Request.prototype.initialize;
4143 Ajax.Request.prototype.initialize = function(url, options) {
44 var unique = ac.options.unique;
45
4246 options.onComplete = options.onComplete.wrap(function(proceed, request, json) {
43 //console.log(request.responseText)
4447 var list = request.responseText.evalJSON();
45 var value = $("pui-demo").value;
46 list = list.findAll(function(entry) {return entry.text.match(value)});
47 proceed.curry(request, json).delay(0.1);
48 });
48 // Simulate a search on server
49 list = list.findAll(function(entry) {return entry.text.match(this.search)}.bind(this));
50 if (unique && !this.selected.empty())
51 list = list.findAll(function(entry) {return !this.selected.include(entry.value)}.bind(this));
52 request.responseText = list.toJSON()
53 proceed.curry(request, json).delay(1);
54 }.bind(this));
55 this.search = options.parameters.search;
56 this.selected = options.parameters.selected;
4957 this.originalInitialize(url, options);
5058 }
5159
------
5462 Event.observe(window, "load", function() {
5563 ac = new UI.AutoComplete('pui-demo', { url: "../../fixtures/auto_complete.json",
5664 shadow: "drop_shadow"
65
5766 });
58 ac.observe('input:empty', function() {ac.showMessage("Type a user name")})
59 .observe('request:started', function() {ac.showMessage("Please wait...")})
60 .observe('selection:empty', function() {ac.showMessage("Nothing found")});
67 ac.observe('input:empty', function(event) {event.memo.autocomplete.showMessage("Type a user name")})
68 .observe('request:started', function(event) {event.memo.autocomplete.showMessage("Please wait...")})
69 .observe('selection:empty', function(event) {event.memo.autocomplete.showMessage("Nothing found")});
6170 });
6271 </script>
6372 </body>
Back to top

trunk/test/functional/auto_complete/test_auto_complete_in_window.html (Unified diff)

r568r570
5656 win.content.insert($('autocomplete'));
5757 win.observe("shown", function() {
5858 ac = new UI.AutoComplete('pui-demo', { shadow: "auto_complete" });
59 ac.observe('input:empty', function() {ac.showMessage("Type a user name")})
60 .observe('selection:empty', function() {ac.showMessage("Nothing found")});
59 ac.observe('input:empty', function(event) {event.memo.autocomplete.showMessage("Type a user name")})
60 .observe('selection:empty', function(event) {event.memo.autocompleteac.showMessage("Nothing found")});
61
6162 ac.setAutocompleteList([{text:"Sébastien", value:1},
6263 {text:"Samuel", value:2},
6364 {text:"Vincent", value:3},
Back to top

trunk/test/functional/auto_complete/test_auto_complete_token.html (Unified diff)

r569r570
2323 Type "e" for example to see autocompletion.<br/><br/>
2424 <form action="test_submit" accept-charset="utf-8" id="test-form">
2525 Tags: <div id="input-text">
26 <input type="text" value="Ruby, Apple" id="pui-demo" name="taglist" />
26 <input type="text" value="" id="pui-demo" name="taglist" />
2727 </div>
2828 <br/>
2929 <input type=submit onclick="console.log($('test-form').serialize());return false;" value="Submit"/>
Back to top

trunk/test/functional/window/test.html (Unified diff)

r567r570
55 <title>Test PWC</title>
66 <script src="../../../lib/prototype.js" type="text/javascript"></script>
77 <script src="../../../lib/effects.js" type="text/javascript"></script>
8 <script src="../../../dist/prototype-ui.packed.js" type="text/javascript"></script>
8 <script src="../../../dist/prototype-ui.js" type="text/javascript"></script>
99
1010 <link href="../../../themes/window/window.css" rel="stylesheet" type="text/css">
1111 <link href="../../../themes/window/mac_os_x.css" rel="stylesheet" type="text/css">
------
2020 </head>
2121 <body>
2222 <a href="#" onclick="openWindow(); return false;">Open window</a>
23 <br/>
24 Add Select box for testing iFrameShim on IE<br/>
25 <select>
26 <option>option 1</option>
27 <option>option 2</option>
28 <option>option 3</option>
29 </select>
30 <br/>
31 <select>
32 <option>option 1</option>
33 <option>option 2</option>
34 <option>option 3</option>
35 </select>
2336
2437 <script type="text/javascript">
2538 function runTest() {
Back to top