aboutsummaryrefslogtreecommitdiff
path: root/js/components/hintable.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/hintable.reel')
-rw-r--r--js/components/hintable.reel/hintable.js72
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,
256 keys = this.keyActions; 256