diff options
Diffstat (limited to 'js/components/hintable.reel')
-rw-r--r-- | js/components/hintable.reel/hintable.js | 95 |
1 files changed, 48 insertions, 47 deletions
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js index 1e7cc069..69631838 100644 --- a/js/components/hintable.reel/hintable.js +++ b/js/components/hintable.reel/hintable.js | |||
@@ -1,24 +1,25 @@ | |||
1 | /* <copyright> | 1 | /* <copyright> |
2 | Copyright (c) 2012, Motorola Mobility, Inc | 2 | Copyright (c) 2012, Motorola Mobility LLC. |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
5 | 4 | ||
6 | Redistribution and use in source and binary forms, with or without | 5 | Redistribution and use in source and binary forms, with or without |
7 | modification, are permitted provided that the following conditions are met: | 6 | modification, are permitted provided that the following conditions are met: |
8 | 7 | ||
9 | - Redistributions of source code must retain the above copyright notice, | 8 | * Redistributions of source code must retain the above copyright notice, |
10 | this list of conditions and the following disclaimer. | 9 | this list of conditions and the following disclaimer. |
11 | - Redistributions in binary form must reproduce the above copyright | 10 | |
12 | notice, this list of conditions and the following disclaimer in the | 11 | * Redistributions in binary form must reproduce the above copyright notice, |
13 | documentation and/or other materials provided with the distribution. | 12 | this list of conditions and the following disclaimer in the documentation |
14 | - Neither the name of Motorola Mobility nor the names of its contributors | 13 | and/or other materials provided with the distribution. |
15 | may be used to endorse or promote products derived from this software | 14 | |
16 | without specific prior written permission. | 15 | * Neither the name of Motorola Mobility LLC nor the names of its |
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
17 | 18 | ||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | 22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE |
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
@@ -40,7 +41,7 @@ EDITABLE - Methods | |||
40 | - startEdit | 41 | - startEdit |
41 | - stopEdit | 42 | - stopEdit |
42 | - value | 43 | - value |
43 | - | 44 | - |
44 | - _suggest | 45 | - _suggest |
45 | - _suggestNext | 46 | - _suggestNext |
46 | - _suggestPrev | 47 | - _suggestPrev |
@@ -56,7 +57,7 @@ exports.Hintable = Montage.create(Editable, { | |||
56 | inheritsFrom : { value : Editable }, | 57 | inheritsFrom : { value : Editable }, |
57 | _matchIndex : { value : 0 }, | 58 | _matchIndex : { value : 0 }, |
58 | matches : { value : [] }, | 59 | matches : { value : [] }, |
59 | 60 | ||
60 | _hint : { value : null }, | 61 | _hint : { value : null }, |
61 | hint : { | 62 | hint : { |
62 | get : function() { | 63 | get : function() { |
@@ -64,7 +65,7 @@ exports.Hintable = Montage.create(Editable, { | |||
64 | }, | 65 | }, |
65 | set : function(hint) { | 66 | set : function(hint) { |
66 | hint = hint || ''; | 67 | hint = hint || ''; |
67 | 68 | ||
68 | ///// Set the hint element's text | 69 | ///// Set the hint element's text |
69 | this._getFirstTextNode(this.hintElement).textContent = hint; | 70 | this._getFirstTextNode(this.hintElement).textContent = hint; |
70 | ///// if hintElement was removed from the DOM, the object still | 71 | ///// if hintElement was removed from the DOM, the object still |
@@ -76,14 +77,14 @@ exports.Hintable = Montage.create(Editable, { | |||
76 | this._hint = hint; | 77 | this._hint = hint; |
77 | } | 78 | } |
78 | }, | 79 | }, |
79 | 80 | ||
80 | _hintElement : { value : null }, | 81 | _hintElement : { value : null }, |
81 | hintElement : { | 82 | hintElement : { |
82 | get : function() { | 83 | get : function() { |
83 | if(!this._hintElement) { | 84 | if(!this._hintElement) { |
84 | /// Remove the phantom "<BR>" element that is generated when | 85 | /// Remove the phantom "<BR>" element that is generated when |
85 | /// content editable element is empty | 86 | /// content editable element is empty |
86 | this._children(this._element, function(item) { | 87 | this._children(this._element, function(item) { |
87 | return item.nodeName === 'BR'; | 88 | return item.nodeName === 'BR'; |
88 | }).forEach(function(item) { | 89 | }).forEach(function(item) { |
89 | this._element.removeChild(item); | 90 | this._element.removeChild(item); |
@@ -91,17 +92,17 @@ exports.Hintable = Montage.create(Editable, { | |||
91 | 92 | ||
92 | this._hintElement = document.createElement('span'); | 93 | this._hintElement = document.createElement('span'); |
93 | this._hintElement.classList.add(this.hintClass); | 94 | this._hintElement.classList.add(this.hintClass); |
94 | 95 | ||
95 | this._element.appendChild(this._hintElement); | 96 | this._element.appendChild(this._hintElement); |
96 | } | 97 | } |
97 | 98 | ||
98 | return this._hintElement; | 99 | return this._hintElement; |
99 | }, | 100 | }, |
100 | set : function(el) { | 101 | set : function(el) { |
101 | this._hintElement = el; | 102 | this._hintElement = el; |
102 | } | 103 | } |
103 | }, | 104 | }, |
104 | 105 | ||
105 | _getHintDifference : { | 106 | _getHintDifference : { |
106 | value : function() { | 107 | value : function() { |
107 | if(!this.matches[this._matchIndex]) { | 108 | if(!this.matches[this._matchIndex]) { |
@@ -110,12 +111,12 @@ exports.Hintable = Montage.create(Editable, { | |||
110 | return this.matches[this._matchIndex].substr(this.value.length); | 111 | return this.matches[this._matchIndex].substr(this.value.length); |
111 | } | 112 | } |
112 | }, | 113 | }, |
113 | 114 | ||
114 | hintNext : { | 115 | hintNext : { |
115 | value : function(e) { | 116 | value : function(e) { |
116 | if(e) { e.preventDefault(); } | 117 | if(e) { e.preventDefault(); } |
117 | //console.log('next1'); | 118 | //console.log('next1'); |
118 | 119 | ||
119 | if(this._matchIndex < this.matches.length - 1) { | 120 | if(this._matchIndex < this.matches.length - 1) { |
120 | //console.log('next'); | 121 | //console.log('next'); |
121 | ++this._matchIndex; | 122 | ++this._matchIndex; |
@@ -143,7 +144,7 @@ exports.Hintable = Montage.create(Editable, { | |||
143 | var fullText = this._hint; | 144 | var fullText = this._hint; |
144 | this.hint = null; | 145 | this.hint = null; |
145 | this.value += fullText; | 146 | this.value += fullText; |
146 | 147 | ||
147 | if(!preserveCaretPosition) { | 148 | if(!preserveCaretPosition) { |
148 | this.setCursor('end'); | 149 | this.setCursor('end'); |
149 | } | 150 | } |
@@ -154,13 +155,13 @@ exports.Hintable = Montage.create(Editable, { | |||
154 | revert : { | 155 | revert : { |
155 | value : function(e, forceRevert) { | 156 | value : function(e, forceRevert) { |
156 | this.hint = null; | 157 | this.hint = null; |
157 | 158 | ||
158 | if(this.isEditable || forceRevert) { | 159 | if(this.isEditable || forceRevert) { |
159 | /// revert to old value | 160 | /// revert to old value |
160 | this.value = (this._preEditValue); | 161 | this.value = (this._preEditValue); |
161 | this._sendEvent('revert'); | 162 | this._sendEvent('revert'); |
162 | //console.log('reverting'); | 163 | //console.log('reverting'); |
163 | 164 | ||
164 | } | 165 | } |
165 | } | 166 | } |
166 | }, | 167 | }, |
@@ -169,30 +170,30 @@ exports.Hintable = Montage.create(Editable, { | |||
169 | value : function handleKeydown(e) { | 170 | value : function handleKeydown(e) { |
170 | var k = e.keyCode, | 171 | var k = e.keyCode, |
171 | isCaretAtEnd, selection, text; | 172 | isCaretAtEnd, selection, text; |
172 | 173 | ||
173 | this._super(arguments); | 174 | this._super(arguments); |
174 | 175 | ||
175 | /// Remove the phantom "<BR>" element that is generated when | 176 | /// Remove the phantom "<BR>" element that is generated when |
176 | /// content editable element is empty | 177 | /// content editable element is empty |
177 | this._children(this._element, function(item) { | 178 | this._children(this._element, function(item) { |
178 | return item.nodeName === 'BR'; | 179 | return item.nodeName === 'BR'; |
179 | }).forEach(function(item) { | 180 | }).forEach(function(item) { |
180 | this._element.removeChild(item); | 181 | this._element.removeChild(item); |
181 | }, this); | 182 | }, this); |
182 | 183 | ||
183 | if(k === 39) { | 184 | if(k === 39) { |
184 | selection = window.getSelection(); | 185 | selection = window.getSelection(); |
185 | text = selection.baseNode.textContent; | 186 | text = selection.baseNode.textContent; |
186 | isCaretAtEnd = (selection.anchorOffset === text.length); | 187 | isCaretAtEnd = (selection.anchorOffset === text.length); |
187 | } | 188 | } |
188 | 189 | ||
189 | if(this.hint && isCaretAtEnd) { | 190 | if(this.hint && isCaretAtEnd) { |
190 | ///// Advance the cursor | 191 | ///// Advance the cursor |
191 | this.hint = this.hint.substr(0, 1); | 192 | this.hint = this.hint.substr(0, 1); |
192 | this.accept(e); | 193 | this.accept(e); |
193 | this.handleInput(); | 194 | this.handleInput(); |
194 | } | 195 | } |
195 | 196 | ||
196 | this._execKeyAction(e); | 197 | this._execKeyAction(e); |
197 | } | 198 | } |
198 | }, | 199 | }, |
@@ -208,25 +209,25 @@ exports.Hintable = Montage.create(Editable, { | |||
208 | if(this.hints && this.hints.length) { | 209 | if(this.hints && this.hints.length) { |
209 | 210 | ||