diff options
Diffstat (limited to 'node_modules/montage/ui/autocomplete')
7 files changed, 628 insertions, 0 deletions
diff --git a/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.css b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.css new file mode 100644 index 00000000..972c41f5 --- /dev/null +++ b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.css | |||
@@ -0,0 +1,12 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | .montage-autocomplete { | ||
7 | padding-right: 20px; | ||
8 | } | ||
9 | .montage-autocomplete-loading { | ||
10 | background: url('loading.gif') no-repeat; | ||
11 | background-position: right; | ||
12 | } \ No newline at end of file | ||
diff --git a/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.html b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.html new file mode 100644 index 00000000..256804c7 --- /dev/null +++ b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.html | |||
@@ -0,0 +1,10 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <html> | ||
3 | <head> | ||
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
5 | <title>Autocomplete Template</title> | ||
6 | <link rel="stylesheet" type="text/css" href="autocomplete.css"> | ||
7 | </head> | ||
8 | <body> | ||
9 | </body> | ||
10 | </html> | ||
diff --git a/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js new file mode 100644 index 00000000..0ce1ab85 --- /dev/null +++ b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js | |||
@@ -0,0 +1,498 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | var Montage = require("montage").Montage, | ||
7 | Component = require("ui/component").Component, | ||
8 | TextInput = require("ui/text-input").TextInput, | ||
9 | logger = require("core/logger").logger("autocomplete"), | ||
10 | ResultsList = require("ui/autocomplete/results-list.reel/results-list").ResultsList, | ||
11 | ArrayController = require("ui/controller/array-controller").ArrayController, | ||
12 | Popup = require("ui/popup/popup.reel").Popup, | ||
13 | PressComposer = require("ui/composer/press-composer").PressComposer; | ||
14 | |||
15 | var KEY_UP = 38, | ||
16 | KEY_DOWN = 40, | ||
17 | KEY_RIGHT = 39, | ||
18 | KEY_ENTER = 13, | ||
19 | KEY_ESC = 27; | ||
20 | |||
21 | var getElementPosition = function(obj) { | ||
22 | var curleft = 0, curtop = 0, curHt = 0, curWd = 0; | ||
23 | if (obj.offsetParent) { | ||
24 | do { | ||
25 | curleft += obj.offsetLeft; | ||
26 | curtop += obj.offsetTop; | ||
27 | curHt += obj.offsetHeight; | ||
28 | curWd += obj.offsetWidth; | ||
29 | } while ((obj = obj.offsetParent)); | ||
30 | } | ||
31 | return { | ||
32 | top: curtop, | ||
33 | left: curleft, | ||
34 | height: curHt, | ||
35 | width: curWd | ||
36 | }; | ||
37 | }; | ||
38 | |||
39 | /** | ||
40 | * The Autocomplete input | ||
41 | */ | ||
42 | var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { | ||
43 | |||
44 | didCreate: { | ||
45 | value: function() { | ||
46 | this.delay = 500; | ||
47 | this.minLength = 2; | ||
48 | } | ||
49 | }, | ||
50 | |||
51 | hasTemplate: {value: true}, | ||
52 | |||
53 | delegate: { | ||
54 | value: null | ||
55 | }, | ||
56 | |||
57 | separator: { | ||
58 | value: ',', | ||
59 | distinct: true | ||
60 | }, | ||
61 | |||
62 | _delay: {value: null}, | ||
63 | delay: { | ||
64 | distinct: true, | ||
65 | get: function(){ | ||
66 | return this._delay; | ||
67 | }, | ||
68 | set: function(value) { | ||
69 | if(value !== this._delay) { | ||
70 | if(String.isString(value)) { | ||
71 | value = parseInt(value, 10); | ||
72 | } | ||
73 | this._delay = value; | ||
74 | } | ||
75 | } | ||
76 | }, | ||
77 | |||
78 | /** | ||
79 | * Number of characters the user must type before the suggest query is fired | ||
80 | * Default = 2 | ||
81 | */ | ||
82 | minLength: { | ||
83 | value: null | ||
84 | }, | ||
85 | |||
86 | _tokens: {value: null}, | ||
87 | tokens: { | ||
88 | get: function() { | ||
89 | return this._tokens; | ||
90 | }, | ||
91 | set: function(value) { | ||
92 | this._tokens = value; | ||
93 | this._valueSyncedWithInputField = false; | ||
94 | this.needsDraw = true; | ||
95 | }, | ||
96 | modify: function(v) { | ||
97 | this._tokens = v; | ||
98 | }, | ||
99 | distinct: true | ||
100 | }, | ||
101 | |||
102 | // overridden here to get the substring/searchString | ||
103 | value: { | ||
104 | get: function() { | ||
105 | return this._value; | ||
106 | //var arr = this.tokens; | ||
107 | //return (arr ? arr.join(',') : this._value); | ||
108 | }, | ||
109 | set: function(newValue, fromInput) { | ||
110 | this._value = newValue ? newValue.trim() : ''; | ||
111 | |||
112 | // get the entered text after the separator | ||
113 | var value = this._value; | ||
114 | |||
115 | |||
116 | if(fromInput) { | ||
117 | this._valueSyncedWithInputField = true; | ||
118 | if(value) { | ||
119 | var arr = value.split(this.separator).map(function(item) { | ||
120 | return item.trim(); | ||
121 | }); | ||
122 | this.activeTokenIndex = this._findActiveTokenIndex(this.tokens, arr); | ||
123 | this._tokens = value.split(this.separator).map(function(item) { | ||
124 | return item.trim(); | ||
125 | }); | ||
126 | if(this._tokens.length && this._tokens.length > 0) { | ||
127 | var searchTerm = this._tokens[this.activeTokenIndex]; | ||
128 | searchTerm = searchTerm ? searchTerm.trim() : ''; | ||
129 | if(searchTerm.length >= this.minLength) { | ||
130 | var self = this; | ||
131 | clearTimeout(this.delayTimer); | ||
132 | this.delayTimer = setTimeout(function() { | ||
133 | self.delayTimer = null; | ||
134 | if (logger.isDebug) { | ||
135 | logger.debug('SEARCH for ', searchTerm); | ||
136 | } | ||
137 | self.performSearch(searchTerm); | ||
138 | }, this.delay); | ||
139 | } else { | ||
140 | this.showPopup = false; | ||
141 | } | ||
142 | } else { | ||
143 | this.showPopup = false; | ||
144 | } | ||
145 | } | ||
146 | } else { | ||
147 | this.activeTokenIndex = 0; | ||
148 | this._tokens = []; | ||
149 | this.showPopup = false; | ||
150 | |||
151 | this._valueSyncedWithInputField = false; | ||
152 | this.needsDraw = true; | ||
153 | } | ||
154 | } | ||
155 | }, | ||
156 | |||
157 | |||
158 | |||
159 | //---- Private | ||
160 | |||
161 | // width of the popup | ||
162 | overlayWidth: { | ||
163 | value: null, | ||
164 | enumerable: false | ||
165 | }, | ||
166 | |||
167 | delayTimer: { | ||
168 | value: null, | ||
169 | enumerable: false | ||
170 | }, | ||
171 | |||
172 | // valid values are 'loading', 'complete' and 'timeout' | ||