diff options
Diffstat (limited to 'js/components/hintable.reel')
-rw-r--r-- | js/components/hintable.reel/hintable.js | 72 |
1 files changed, 36 insertions, 36 deletions
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js index 1e7cc069..563206e4 100644 --- a/js/components/hintable.reel/hintable.js +++ b/js/components/hintable.reel/hintable.js | |||
@@ -40,7 +40,7 @@ EDITABLE - Methods | |||
40 | - startEdit | 40 | - startEdit |
41 | - stopEdit | 41 | - stopEdit |
42 | - value | 42 | - value |
43 | - | 43 | - |
44 | - _suggest | 44 | - _suggest |
45 | - _suggestNext | 45 | - _suggestNext |
46 | - _suggestPrev | 46 | - _suggestPrev |
@@ -56,7 +56,7 @@ exports.Hintable = Montage.create(Editable, { | |||
56 | inheritsFrom : { value : Editable }, | 56 | inheritsFrom : { value : Editable }, |
57 | _matchIndex : { value : 0 }, | 57 | _matchIndex : { value : 0 }, |
58 | matches : { value : [] }, | 58 | matches : { value : [] }, |
59 | 59 | ||
60 | _hint : { value : null }, | 60 | _hint : { value : null }, |
61 | hint : { | 61 | hint : { |
62 | get : function() { | 62 | get : function() { |
@@ -64,7 +64,7 @@ exports.Hintable = Montage.create(Editable, { | |||
64 | }, | 64 | }, |
65 | set : function(hint) { | 65 | set : function(hint) { |
66 | hint = hint || ''; | 66 | hint = hint || ''; |
67 | 67 | ||
68 | ///// Set the hint element's text | 68 | ///// Set the hint element's text |
69 | this._getFirstTextNode(this.hintElement).textContent = hint; | 69 | this._getFirstTextNode(this.hintElement).textContent = hint; |
70 | ///// if hintElement was removed from the DOM, the object still | 70 | ///// if hintElement was removed from the DOM, the object still |
@@ -76,14 +76,14 @@ exports.Hintable = Montage.create(Editable, { | |||
76 | this._hint = hint; | 76 | this._hint = hint; |
77 | } | 77 | } |
78 | }, | 78 | }, |
79 | 79 | ||
80 | _hintElement : { value : null }, | 80 | _hintElement : { value : null }, |
81 | hintElement : { | 81 | hintElement : { |
82 | get : function() { | 82 | get : function() { |
83 | if(!this._hintElement) { | 83 | if(!this._hintElement) { |
84 | /// Remove the phantom "<BR>" element that is generated when | 84 | /// Remove the phantom "<BR>" element that is generated when |
85 | /// content editable element is empty | 85 | /// content editable element is empty |
86 | this._children(this._element, function(item) { | 86 | this._children(this._element, function(item) { |
87 | return item.nodeName === 'BR'; | 87 | return item.nodeName === 'BR'; |
88 | }).forEach(function(item) { | 88 | }).forEach(function(item) { |
89 | this._element.removeChild(item); | 89 | this._element.removeChild(item); |
@@ -91,17 +91,17 @@ exports.Hintable = Montage.create(Editable, { | |||
91 | 91 | ||
92 | this._hintElement = document.createElement('span'); | 92 | this._hintElement = document.createElement('span'); |
93 | this._hintElement.classList.add(this.hintClass); | 93 | this._hintElement.classList.add(this.hintClass); |
94 | 94 | ||
95 | this._element.appendChild(this._hintElement); | 95 | this._element.appendChild(this._hintElement); |
96 | } | 96 | } |
97 | 97 | ||
98 | return this._hintElement; | 98 | return this._hintElement; |
99 | }, | 99 | }, |
100 | set : function(el) { | 100 | set : function(el) { |
101 | this._hintElement = el; | 101 | this._hintElement = el; |
102 | } | 102 | } |
103 | }, | 103 | }, |
104 | 104 | ||
105 | _getHintDifference : { | 105 | _getHintDifference : { |
106 | value : function() { | 106 | value : function() { |
107 | if(!this.matches[this._matchIndex]) { | 107 | if(!this.matches[this._matchIndex]) { |
@@ -110,12 +110,12 @@ exports.Hintable = Montage.create(Editable, { | |||
110 | return this.matches[this._matchIndex].substr(this.value.length); | 110 | return this.matches[this._matchIndex].substr(this.value.length); |
111 | } | 111 | } |
112 | }, | 112 | }, |
113 | 113 | ||
114 | hintNext : { | 114 | hintNext : { |
115 | value : function(e) { | 115 | value : function(e) { |
116 | if(e) { e.preventDefault(); } | 116 | if(e) { e.preventDefault(); } |
117 | //console.log('next1'); | 117 | //console.log('next1'); |
118 | 118 | ||
119 | if(this._matchIndex < this.matches.length - 1) { | 119 | if(this._matchIndex < this.matches.length - 1) { |
120 | //console.log('next'); | 120 | //console.log('next'); |
121 | ++this._matchIndex; | 121 | ++this._matchIndex; |
@@ -143,7 +143,7 @@ exports.Hintable = Montage.create(Editable, { | |||
143 | var fullText = this._hint; | 143 | var fullText = this._hint; |
144 | this.hint = null; | 144 | this.hint = null; |
145 | this.value += fullText; | 145 | this.value += fullText; |
146 | 146 | ||
147 | if(!preserveCaretPosition) { | 147 | if(!preserveCaretPosition) { |
148 | this.setCursor('end'); | 148 | this.setCursor('end'); |
149 | } | 149 | } |
@@ -154,13 +154,13 @@ exports.Hintable = Montage.create(Editable, { | |||
154 | revert : { | 154 | revert : { |
155 | value : function(e, forceRevert) { | 155 | value : function(e, forceRevert) { |
156 | this.hint = null; | 156 | this.hint = null; |
157 | 157 | ||
158 | if(this.isEditable || forceRevert) { | 158 | if(this.isEditable || forceRevert) { |
159 | /// revert to old value | 159 | /// revert to old value |
160 | this.value = (this._preEditValue); | 160 | this.value = (this._preEditValue); |
161 | this._sendEvent('revert'); | 161 | this._sendEvent('revert'); |
162 | //console.log('reverting'); | 162 | //console.log('reverting'); |
163 | 163 | ||
164 | } | 164 | } |
165 | } | 165 | } |
166 | }, | 166 | }, |
@@ -169,30 +169,30 @@ exports.Hintable = Montage.create(Editable, { | |||
169 | value : function handleKeydown(e) { | 169 | value : function handleKeydown(e) { |
170 | var k = e.keyCode, | 170 | var k = e.keyCode, |
171 | isCaretAtEnd, selection, text; | 171 | isCaretAtEnd, selection, text; |
172 | 172 | ||
173 | this._super(arguments); | 173 | this._super(arguments); |
174 | 174 | ||
175 | /// Remove the phantom "<BR>" element that is generated when | 175 | /// Remove the phantom "<BR>" element that is generated when |
176 | /// content editable element is empty | 176 | /// content editable element is empty |
177 | this._children(this._element, function(item) { | 177 | this._children(this._element, function(item) { |
178 | return item.nodeName === 'BR'; | 178 | return item.nodeName === 'BR'; |
179 | }).forEach(function(item) { | 179 | }).forEach(function(item) { |
180 | this._element.removeChild(item); | 180 | this._element.removeChild(item); |
181 | }, this); | 181 | }, this); |
182 | 182 | ||
183 | if(k === 39) { | 183 | if(k === 39) { |
184 | selection = window.getSelection(); | 184 | selection = window.getSelection(); |
185 | text = selection.baseNode.textContent; | 185 | text = selection.baseNode.textContent; |
186 | isCaretAtEnd = (selection.anchorOffset === text.length); | 186 | isCaretAtEnd = (selection.anchorOffset === text.length); |
187 | } | 187 | } |
188 | 188 | ||
189 | if(this.hint && isCaretAtEnd) { | 189 | if(this.hint && isCaretAtEnd) { |
190 | ///// Advance the cursor | 190 | ///// Advance the cursor |
191 | this.hint = this.hint.substr(0, 1); | 191 | this.hint = this.hint.substr(0, 1); |
192 | this.accept(e); | 192 | this.accept(e); |
193 | this.handleInput(); | 193 | this.handleInput(); |
194 | } | 194 | } |
195 | 195 | ||
196 | this._execKeyAction(e); | 196 | this._execKeyAction(e); |
197 | } | 197 | } |
198 | }, | 198 | }, |
@@ -208,25 +208,25 @@ exports.Hintable = Montage.create(Editable, { | |||
208 | if(this.hints && this.hints.length) { | 208 | if(this.hints && this.hints.length) { |
209 | 209 | ||
210 | if(val.length > 0) { // content is not empty | 210 | if(val.length > 0) { // content is not empty |
211 | 211 | ||
212 | this._matchIndex = 0; | 212 | this._matchIndex = 0; |
213 | this.matches = this.hints.filter(function(h) { | 213 | this.matches = this.hints.filter(function(h) { |
214 | if(!h) { return false; } | 214 | if(!h) { return false; } |
215 | return h.indexOf(val) === 0; | 215 | return h.indexOf(val) === 0; |
216 | }).sort(); | 216 | }).sort(); |
217 | 217 | ||
218 | ///// If there are no matches, or the new value doesn't match all the | 218 | ///// If there are no matches, or the new value doesn't match all the |
219 | ///// previous matches, then get new list of matches | 219 | ///// previous matches, then get new list of matches |
220 | if(!this.matches.length || !this._matchesAll(val)) { | 220 | if(!this.matches.length || !this._matchesAll(val)) { |
221 | } | 221 | } |
222 | 222 | ||
223 | if(this.matches.length) { // match(es) found | 223 | if(this.matches.length) { // match(es) found |
224 | if(this.matches[this._matchIndex] !== val) { | 224 | if(this.matches[this._matchIndex] !== val) { |
225 | // Suggest the matched hint, subtracting the typed-in string | 225 | // Suggest the matched hint, subtracting the typed-in string |
226 | // Only if the hint is not was the user has typed already | 226 | // Only if the hint is not was the user has typed already |
227 | this.hint = this._getHintDifference(); | 227 | this.hint = this._getHintDifference(); |
228 | } else { | 228 | } else { |
229 | this.hint = null; | 229 | this.hint = null; |
230 | } | 230 | } |
231 | } else { // no matches found | 231 | } else { // no matches found |
232 | this.hint = null; | 232 | this.hint = null; |
@@ -254,7 +254,7 @@ exports.Hintable = Montage.create(Editable, { | |||
254 | value : function(e) { | 254 | value : function(e) { |
255 | var key = e.keyCode, | 255 | var key = e.keyCode, |