OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 cr.define('cr.ui', function() { | 5 cr.define('cr.ui', function() { |
6 // require cr.ui.define | 6 // require cr.ui.define |
7 // require cr.ui.limitInputWidth | 7 // require cr.ui.limitInputWidth |
8 | 8 |
9 /** | 9 /** |
10 * The number of pixels to indent per level. | 10 * The number of pixels to indent per level. |
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
57 this.addEventListener('mousedown', this.handleMouseDown); | 57 this.addEventListener('mousedown', this.handleMouseDown); |
58 this.addEventListener('dblclick', this.handleDblClick); | 58 this.addEventListener('dblclick', this.handleDblClick); |
59 this.addEventListener('keydown', this.handleKeyDown); | 59 this.addEventListener('keydown', this.handleKeyDown); |
60 | 60 |
61 this.setAttribute('role', 'group'); | 61 this.setAttribute('role', 'group'); |
62 }, | 62 }, |
63 | 63 |
64 /** | 64 /** |
65 * Returns the tree item that are children of this tree. | 65 * Returns the tree item that are children of this tree. |
66 */ | 66 */ |
67 get items() { | 67 get items() { return this.children; }, |
68 return this.children; | |
69 }, | |
70 | 68 |
71 /** | 69 /** |
72 * Adds a tree item to the tree. | 70 * Adds a tree item to the tree. |
73 * @param {!cr.ui.TreeItem} treeItem The item to add. | 71 * @param {!cr.ui.TreeItem} treeItem The item to add. |
74 */ | 72 */ |
75 add: function(treeItem) { | 73 add: function(treeItem) { this.addAt(treeItem, 0xffffffff); }, |
76 this.addAt(treeItem, 0xffffffff); | |
77 }, | |
78 | 74 |
79 /** | 75 /** |
80 * Adds a tree item at the given index. | 76 * Adds a tree item at the given index. |
81 * @param {!cr.ui.TreeItem} treeItem The item to add. | 77 * @param {!cr.ui.TreeItem} treeItem The item to add. |
82 * @param {number} index The index where we want to add the item. | 78 * @param {number} index The index where we want to add the item. |
83 */ | 79 */ |
84 addAt: function(treeItem, index) { | 80 addAt: function(treeItem, index) { |
85 this.insertBefore(treeItem, this.children[index]); | 81 this.insertBefore(treeItem, this.children[index]); |
86 treeItem.setDepth_(this.depth + 1); | 82 treeItem.setDepth_(this.depth + 1); |
87 }, | 83 }, |
88 | 84 |
89 /** | 85 /** |
90 * Removes a tree item child. | 86 * Removes a tree item child. |
91 * | 87 * |
92 * TODO(dbeam): this method now conflicts with HTMLElement#remove(), which | 88 * TODO(dbeam): this method now conflicts with HTMLElement#remove(), which |
93 * is why the @param is optional. Rename. | 89 * is why the @param is optional. Rename. |
94 * | 90 * |
95 * @param {!cr.ui.TreeItem=} treeItem The tree item to remove. | 91 * @param {!cr.ui.TreeItem=} treeItem The tree item to remove. |
96 */ | 92 */ |
97 remove: function(treeItem) { | 93 remove: function(treeItem) { |
98 this.removeChild(/** @type {!cr.ui.TreeItem} */(treeItem)); | 94 this.removeChild(/** @type {!cr.ui.TreeItem} */ (treeItem)); |
99 }, | 95 }, |
100 | 96 |
101 /** | 97 /** |
102 * The depth of the node. This is 0 for the tree itself. | 98 * The depth of the node. This is 0 for the tree itself. |
103 * @type {number} | 99 * @type {number} |
104 */ | 100 */ |
105 get depth() { | 101 get depth() { return 0; }, |
106 return 0; | |
107 }, | |
108 | 102 |
109 /** | 103 /** |
110 * Handles click events on the tree and forwards the event to the relevant | 104 * Handles click events on the tree and forwards the event to the relevant |
111 * tree items as necesary. | 105 * tree items as necesary. |
112 * @param {Event} e The click event object. | 106 * @param {Event} e The click event object. |
113 */ | 107 */ |
114 handleClick: function(e) { | 108 handleClick: function(e) { |
115 var treeItem = findTreeItem(/** @type {!Node} */(e.target)); | 109 var treeItem = findTreeItem(/** @type {!Node} */ (e.target)); |
116 if (treeItem) | 110 if (treeItem) |
117 treeItem.handleClick(e); | 111 treeItem.handleClick(e); |
118 }, | 112 }, |
119 | 113 |
120 handleMouseDown: function(e) { | 114 handleMouseDown: function(e) { |
121 if (e.button == 2) // right | 115 if (e.button == 2) // right |
122 this.handleClick(e); | 116 this.handleClick(e); |
123 }, | 117 }, |
124 | 118 |
125 /** | 119 /** |
126 * Handles double click events on the tree. | 120 * Handles double click events on the tree. |
127 * @param {Event} e The dblclick event object. | 121 * @param {Event} e The dblclick event object. |
128 */ | 122 */ |
129 handleDblClick: function(e) { | 123 handleDblClick: function(e) { |
130 var treeItem = findTreeItem(/** @type {!Node} */(e.target)); | 124 var treeItem = findTreeItem(/** @type {!Node} */ (e.target)); |
131 if (treeItem) | 125 if (treeItem) |
132 treeItem.expanded = !treeItem.expanded; | 126 treeItem.expanded = !treeItem.expanded; |
133 }, | 127 }, |
134 | 128 |
135 /** | 129 /** |
136 * Handles keydown events on the tree and updates selection and exanding | 130 * Handles keydown events on the tree and updates selection and exanding |
137 * of tree items. | 131 * of tree items. |
138 * @param {Event} e The click event object. | 132 * @param {Event} e The click event object. |
139 */ | 133 */ |
140 handleKeyDown: function(e) { | 134 handleKeyDown: function(e) { |
141 var itemToSelect; | 135 var itemToSelect; |
142 if (e.ctrlKey) | 136 if (e.ctrlKey) |
143 return; | 137 return; |
144 | 138 |
145 var item = this.selectedItem; | 139 var item = this.selectedItem; |
146 if (!item) | 140 if (!item) |
147 return; | 141 return; |
148 | 142 |
149 var rtl = getComputedStyle(item).direction == 'rtl'; | 143 var rtl = getComputedStyle(item).direction == 'rtl'; |
150 | 144 |
151 switch (e.key) { | 145 switch (e.key) { |
152 case 'ArrowUp': | 146 case 'ArrowUp': |
153 itemToSelect = item ? getPrevious(item) : | 147 itemToSelect = |
154 this.items[this.items.length - 1]; | 148 item ? getPrevious(item) : this.items[this.items.length - 1]; |
155 break; | 149 break; |
156 case 'ArrowDown': | 150 case 'ArrowDown': |
157 itemToSelect = item ? getNext(item) : | 151 itemToSelect = item ? getNext(item) : this.items[0]; |
158 this.items[0]; | |
159 break; | 152 break; |
160 case 'ArrowLeft': | 153 case 'ArrowLeft': |
161 case 'ArrowRight': | 154 case 'ArrowRight': |
162 // Don't let back/forward keyboard shortcuts be used. | 155 // Don't let back/forward keyboard shortcuts be used. |
163 if (!cr.isMac && e.altKey || cr.isMac && e.metaKey) | 156 if (!cr.isMac && e.altKey || cr.isMac && e.metaKey) |
164 break; | 157 break; |
165 | 158 |
166 if (e.key == 'ArrowLeft' && !rtl || e.key == 'ArrowRight' && rtl) { | 159 if (e.key == 'ArrowLeft' && !rtl || e.key == 'ArrowRight' && rtl) { |
167 if (item.expanded) | 160 if (item.expanded) |
168 item.expanded = false; | 161 item.expanded = false; |
(...skipping 17 matching lines...) Expand all Loading... |
186 if (itemToSelect) { | 179 if (itemToSelect) { |
187 itemToSelect.selected = true; | 180 itemToSelect.selected = true; |
188 e.preventDefault(); | 181 e.preventDefault(); |
189 } | 182 } |
190 }, | 183 }, |
191 | 184 |
192 /** | 185 /** |
193 * The selected tree item or null if none. | 186 * The selected tree item or null if none. |
194 * @type {cr.ui.TreeItem} | 187 * @type {cr.ui.TreeItem} |
195 */ | 188 */ |
196 get selectedItem() { | 189 get selectedItem() { return this.selectedItem_ || null; }, |
197 return this.selectedItem_ || null; | |
198 }, | |
199 set selectedItem(item) { | 190 set selectedItem(item) { |
200 var oldSelectedItem = this.selectedItem_; | 191 var oldSelectedItem = this.selectedItem_; |
201 if (oldSelectedItem != item) { | 192 if (oldSelectedItem != item) { |
202 // Set the selectedItem_ before deselecting the old item since we only | 193 // Set the selectedItem_ before deselecting the old item since we only |
203 // want one change when moving between items. | 194 // want one change when moving between items. |
204 this.selectedItem_ = item; | 195 this.selectedItem_ = item; |
205 | 196 |
206 if (oldSelectedItem) | 197 if (oldSelectedItem) |
207 oldSelectedItem.selected = false; | 198 oldSelectedItem.selected = false; |
208 | 199 |
209 if (item) { | 200 if (item) { |
210 item.selected = true; | 201 item.selected = true; |
211 if (item.id) | 202 if (item.id) |
212 this.setAttribute('aria-activedescendant', item.id); | 203 this.setAttribute('aria-activedescendant', item.id); |
213 } else { | 204 } else { |
214 this.removeAttribute('aria-activedescendant'); | 205 this.removeAttribute('aria-activedescendant'); |
215 } | 206 } |
216 cr.dispatchSimpleEvent(this, 'change'); | 207 cr.dispatchSimpleEvent(this, 'change'); |
217 } | 208 } |
218 }, | 209 }, |
219 | 210 |
220 /** | 211 /** |
221 * @return {!ClientRect} The rect to use for the context menu. | 212 * @return {!ClientRect} The rect to use for the context menu. |
222 */ | 213 */ |
223 getRectForContextMenu: function() { | 214 getRectForContextMenu: function() { |
224 // TODO(arv): Add trait support so we can share more code between trees | 215 // TODO(arv): Add trait support so we can share more code between trees |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
275 return treeItem; | 266 return treeItem; |
276 }); | 267 }); |
277 | 268 |
278 TreeItem.prototype = { | 269 TreeItem.prototype = { |
279 __proto__: HTMLElement.prototype, | 270 __proto__: HTMLElement.prototype, |
280 | 271 |
281 /** | 272 /** |
282 * Initializes the element. | 273 * Initializes the element. |
283 */ | 274 */ |
284 decorate: function() { | 275 decorate: function() { |
285 var labelId = 'tree-item-label-autogen-id-' + | 276 var labelId = |
286 treeItemAutoGeneratedIdCounter; | 277 'tree-item-label-autogen-id-' + treeItemAutoGeneratedIdCounter; |
287 this.labelElement.id = labelId; | 278 this.labelElement.id = labelId; |
288 this.setAttribute('aria-labelledby', labelId); | 279 this.setAttribute('aria-labelledby', labelId); |
289 }, | 280 }, |
290 | 281 |
291 /** | 282 /** |
292 * The tree items children. | 283 * The tree items children. |
293 */ | 284 */ |
294 get items() { | 285 get items() { return this.lastElementChild.children; }, |
295 return this.lastElementChild.children; | |
296 }, | |
297 | 286 |
298 /** | 287 /** |
299 * The depth of the tree item. | 288 * The depth of the tree item. |
300 * @type {number} | 289 * @type {number} |
301 */ | 290 */ |
302 depth_: 0, | 291 depth_: 0, get depth() { return this.depth_; }, |
303 get depth() { | |
304 return this.depth_; | |
305 }, | |
306 | 292 |
307 /** | 293 /** |
308 * Sets the depth. | 294 * Sets the depth. |
309 * @param {number} depth The new depth. | 295 * @param {number} depth The new depth. |
310 * @private | 296 * @private |
311 */ | 297 */ |
312 setDepth_: function(depth) { | 298 setDepth_: function(depth) { |
313 if (depth != this.depth_) { | 299 if (depth != this.depth_) { |
314 this.rowElement.style.WebkitPaddingStart = Math.max(0, depth - 1) * | 300 this.rowElement.style.WebkitPaddingStart = |
315 INDENT + 'px'; | 301 Math.max(0, depth - 1) * INDENT + 'px'; |
316 this.depth_ = depth; | 302 this.depth_ = depth; |
317 var items = this.items; | 303 var items = this.items; |
318 for (var i = 0, item; item = items[i]; i++) { | 304 for (var i = 0, item; item = items[i]; i++) { |
319 item.setDepth_(depth + 1); | 305 item.setDepth_(depth + 1); |
320 } | 306 } |
321 } | 307 } |
322 }, | 308 }, |
323 | 309 |
324 /** | 310 /** |
325 * Adds a tree item as a child. | 311 * Adds a tree item as a child. |
326 * @param {!cr.ui.TreeItem} child The child to add. | 312 * @param {!cr.ui.TreeItem} child The child to add. |
327 */ | 313 */ |
328 add: function(child) { | 314 add: function(child) { this.addAt(child, 0xffffffff); }, |
329 this.addAt(child, 0xffffffff); | |
330 }, | |
331 | 315 |
332 /** | 316 /** |
333 * Adds a tree item as a child at a given index. | 317 * Adds a tree item as a child at a given index. |
334 * @param {!cr.ui.TreeItem} child The child to add. | 318 * @param {!cr.ui.TreeItem} child The child to add. |
335 * @param {number} index The index where to add the child. | 319 * @param {number} index The index where to add the child. |
336 */ | 320 */ |
337 addAt: function(child, index) { | 321 addAt: function(child, index) { |
338 this.lastElementChild.insertBefore(child, this.items[index]); | 322 this.lastElementChild.insertBefore(child, this.items[index]); |
339 if (this.items.length == 1) | 323 if (this.items.length == 1) |
340 this.hasChildren = true; | 324 this.hasChildren = true; |
341 child.setDepth_(this.depth + 1); | 325 child.setDepth_(this.depth + 1); |
342 }, | 326 }, |
343 | 327 |
344 /** | 328 /** |
345 * Removes a child. | 329 * Removes a child. |
346 * @param {!cr.ui.TreeItem=} child The tree item child to remove. | 330 * @param {!cr.ui.TreeItem=} child The tree item child to remove. |
347 * @override | 331 * @override |
348 */ | 332 */ |
349 remove: function(child) { | 333 remove: function(child) { |
350 // If we removed the selected item we should become selected. | 334 // If we removed the selected item we should become selected. |
351 var tree = this.tree; | 335 var tree = this.tree; |
352 var selectedItem = tree.selectedItem; | 336 var selectedItem = tree.selectedItem; |
353 if (selectedItem && child.contains(selectedItem)) | 337 if (selectedItem && child.contains(selectedItem)) |
354 this.selected = true; | 338 this.selected = true; |
355 | 339 |
356 this.lastElementChild.removeChild(/** @type {!cr.ui.TreeItem} */(child)); | 340 this.lastElementChild.removeChild(/** @type {!cr.ui.TreeItem} */ (child)); |
357 if (this.items.length == 0) | 341 if (this.items.length == 0) |
358 this.hasChildren = false; | 342 this.hasChildren = false; |
359 }, | 343 }, |
360 | 344 |
361 /** | 345 /** |
362 * The parent tree item. | 346 * The parent tree item. |
363 * @type {!cr.ui.Tree|cr.ui.TreeItem} | 347 * @type {!cr.ui.Tree|cr.ui.TreeItem} |
364 */ | 348 */ |
365 get parentItem() { | 349 get parentItem() { |
366 var p = this.parentNode; | 350 var p = this.parentNode; |
(...skipping 12 matching lines...) Expand all Loading... |
379 while (t && !(t instanceof Tree)) { | 363 while (t && !(t instanceof Tree)) { |
380 t = t.parentItem; | 364 t = t.parentItem; |
381 } | 365 } |
382 return t; | 366 return t; |
383 }, | 367 }, |
384 | 368 |
385 /** | 369 /** |
386 * Whether the tree item is expanded or not. | 370 * Whether the tree item is expanded or not. |
387 * @type {boolean} | 371 * @type {boolean} |
388 */ | 372 */ |
389 get expanded() { | 373 get expanded() { return this.hasAttribute('expanded'); }, |
390 return this.hasAttribute('expanded'); | |
391 }, | |
392 set expanded(b) { | 374 set expanded(b) { |
393 if (this.expanded == b) | 375 if (this.expanded == b) |
394 return; | 376 return; |
395 | 377 |
396 var treeChildren = this.lastElementChild; | 378 var treeChildren = this.lastElementChild; |
397 | 379 |
398 if (b) { | 380 if (b) { |
399 if (this.mayHaveChildren_) { | 381 if (this.mayHaveChildren_) { |
400 this.setAttribute('expanded', ''); | 382 this.setAttribute('expanded', ''); |
401 this.setAttribute('aria-expanded', 'true'); | 383 this.setAttribute('aria-expanded', 'true'); |
(...skipping 26 matching lines...) Expand all Loading... |
428 while (pi && !(pi instanceof Tree)) { | 410 while (pi && !(pi instanceof Tree)) { |
429 pi.expanded = true; | 411 pi.expanded = true; |
430 pi = pi.parentItem; | 412 pi = pi.parentItem; |
431 } | 413 } |
432 }, | 414 }, |
433 | 415 |
434 /** | 416 /** |
435 * The element representing the row that gets highlighted. | 417 * The element representing the row that gets highlighted. |
436 * @type {!HTMLElement} | 418 * @type {!HTMLElement} |
437 */ | 419 */ |
438 get rowElement() { | 420 get rowElement() { return this.firstElementChild; }, |
439 return this.firstElementChild; | |
440 }, | |
441 | 421 |
442 /** | 422 /** |
443 * The element containing the label text and the icon. | 423 * The element containing the label text and the icon. |
444 * @type {!HTMLElement} | 424 * @type {!HTMLElement} |
445 */ | 425 */ |
446 get labelElement() { | 426 get labelElement() { return this.firstElementChild.lastElementChild; }, |
447 return this.firstElementChild.lastElementChild; | |
448 }, | |
449 | 427 |
450 /** | 428 /** |
451 * The label text. | 429 * The label text. |
452 * @type {string} | 430 * @type {string} |
453 */ | 431 */ |
454 get label() { | 432 get label() { return this.labelElement.textContent; }, |
455 return this.labelElement.textContent; | 433 set label(s) { this.labelElement.textContent = s; }, |
456 }, | |
457 set label(s) { | |
458 this.labelElement.textContent = s; | |
459 }, | |
460 | 434 |
461 /** | 435 /** |
462 * The URL for the icon. | 436 * The URL for the icon. |
463 * @type {string} | 437 * @type {string} |
464 */ | 438 */ |
465 get icon() { | 439 get icon() { |
466 return getComputedStyle(this.labelElement).backgroundImage.slice(4, -1); | 440 return getComputedStyle(this.labelElement).backgroundImage.slice(4, -1); |
467 }, | 441 }, |
468 set icon(icon) { | 442 set icon(icon) { |
469 return this.labelElement.style.backgroundImage = url(icon); | 443 return this.labelElement.style.backgroundImage = url(icon); |
470 }, | 444 }, |
471 | 445 |
472 /** | 446 /** |
473 * Whether the tree item is selected or not. | 447 * Whether the tree item is selected or not. |
474 * @type {boolean} | 448 * @type {boolean} |
475 */ | 449 */ |
476 get selected() { | 450 get selected() { return this.hasAttribute('selected'); }, |
477 return this.hasAttribute('selected'); | |
478 }, | |
479 set selected(b) { | 451 set selected(b) { |
480 if (this.selected == b) | 452 if (this.selected == b) |
481 return; | 453 return; |
482 var rowItem = this.firstElementChild; | 454 var rowItem = this.firstElementChild; |
483 var tree = this.tree; | 455 var tree = this.tree; |
484 if (b) { | 456 if (b) { |
485 this.setAttribute('selected', ''); | 457 this.setAttribute('selected', ''); |
486 rowItem.setAttribute('selected', ''); | 458 rowItem.setAttribute('selected', ''); |
487 this.reveal(); | 459 this.reveal(); |
488 this.labelElement.scrollIntoViewIfNeeded(false); | 460 this.labelElement.scrollIntoViewIfNeeded(false); |
489 if (tree) | 461 if (tree) |
490 tree.selectedItem = this; | 462 tree.selectedItem = this; |
491 } else { | 463 } else { |
492 this.removeAttribute('selected'); | 464 this.removeAttribute('selected'); |
493 rowItem.removeAttribute('selected'); | 465 rowItem.removeAttribute('selected'); |
494 if (tree && tree.selectedItem == this) | 466 if (tree && tree.selectedItem == this) |
495 tree.selectedItem = null; | 467 tree.selectedItem = null; |
496 } | 468 } |
497 }, | 469 }, |
498 | 470 |
499 /** | 471 /** |
500 * Whether the tree item has children. | 472 * Whether the tree item has children. |
501 * @type {boolean} | 473 * @type {boolean} |
502 */ | 474 */ |
503 get mayHaveChildren_() { | 475 get mayHaveChildren_() { return this.hasAttribute('may-have-children'); }, |
504 return this.hasAttribute('may-have-children'); | |
505 }, | |
506 set mayHaveChildren_(b) { | 476 set mayHaveChildren_(b) { |
507 var rowItem = this.firstElementChild; | 477 var rowItem = this.firstElementChild; |
508 if (b) { | 478 if (b) { |
509 this.setAttribute('may-have-children', ''); | 479 this.setAttribute('may-have-children', ''); |
510 rowItem.setAttribute('may-have-children', ''); | 480 rowItem.setAttribute('may-have-children', ''); |
511 } else { | 481 } else { |
512 this.removeAttribute('may-have-children'); | 482 this.removeAttribute('may-have-children'); |
513 rowItem.removeAttribute('may-have-children'); | 483 rowItem.removeAttribute('may-have-children'); |
514 } | 484 } |
515 }, | 485 }, |
516 | 486 |
517 /** | 487 /** |
518 * Whether the tree item has children. | 488 * Whether the tree item has children. |
519 * @type {boolean} | 489 * @type {boolean} |
520 */ | 490 */ |
521 get hasChildren() { | 491 get hasChildren() { return !!this.items[0]; }, |
522 return !!this.items[0]; | |
523 }, | |
524 | 492 |
525 /** | 493 /** |
526 * Whether the tree item has children. | 494 * Whether the tree item has children. |
527 * @type {boolean} | 495 * @type {boolean} |
528 */ | 496 */ |
529 set hasChildren(b) { | 497 set hasChildren(b) { |
530 var rowItem = this.firstElementChild; | 498 var rowItem = this.firstElementChild; |
531 this.setAttribute('has-children', b); | 499 this.setAttribute('has-children', b); |
532 rowItem.setAttribute('has-children', b); | 500 rowItem.setAttribute('has-children', b); |
533 if (b) { | 501 if (b) { |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
566 // Handles enter and escape which trigger reset and commit respectively. | 534 // Handles enter and escape which trigger reset and commit respectively. |
567 function handleKeydown(e) { | 535 function handleKeydown(e) { |
568 // Make sure that the tree does not handle the key. | 536 // Make sure that the tree does not handle the key. |
569 e.stopPropagation(); | 537 e.stopPropagation(); |
570 | 538 |
571 // Calling tree.focus blurs the input which will make the tree item | 539 // Calling tree.focus blurs the input which will make the tree item |
572 // non editable. | 540 // non editable. |
573 switch (e.key) { | 541 switch (e.key) { |
574 case 'Escape': | 542 case 'Escape': |
575 input.value = text; | 543 input.value = text; |
576 // fall through | 544 // fall through |
577 case 'Enter': | 545 case 'Enter': |
578 self.tree.focus(); | 546 self.tree.focus(); |
579 } | 547 } |
580 } | 548 } |
581 | 549 |
582 function stopPropagation(e) { | 550 function stopPropagation(e) { e.stopPropagation(); } |
583 e.stopPropagation(); | |
584 } | |
585 | 551 |
586 if (editing) { | 552 if (editing) { |
587 this.selected = true; | 553 this.selected = true; |
588 this.setAttribute('editing', ''); | 554 this.setAttribute('editing', ''); |
589 this.draggable = false; | 555 this.draggable = false; |
590 | 556 |
591 // We create an input[type=text] and copy over the label value. When | 557 // We create an input[type=text] and copy over the label value. When |
592 // the input loses focus we set editing to false again. | 558 // the input loses focus we set editing to false again. |
593 input = this.ownerDocument.createElement('input'); | 559 input = this.ownerDocument.createElement('input'); |
594 input.value = text; | 560 input.value = text; |
595 if (labelEl.firstChild) | 561 if (labelEl.firstChild) |
596 labelEl.replaceChild(input, labelEl.firstChild); | 562 labelEl.replaceChild(input, labelEl.firstChild); |
597 else | 563 else |
598 labelEl.appendChild(input); | 564 labelEl.appendChild(input); |
599 | 565 |
600 input.addEventListener('keydown', handleKeydown); | 566 input.addEventListener('keydown', handleKeydown); |
601 input.addEventListener('blur', (function() { | 567 input.addEventListener( |
602 this.editing = false; | 568 'blur', (function() { this.editing = false; }).bind(this)); |
603 }).bind(this)); | |
604 | 569 |
605 // Make sure that double clicks do not expand and collapse the tree | 570 // Make sure that double clicks do not expand and collapse the tree |
606 // item. | 571 // item. |
607 var eventsToStop = ['mousedown', 'mouseup', 'contextmenu', 'dblclick']; | 572 var eventsToStop = ['mousedown', 'mouseup', 'contextmenu', 'dblclick']; |
608 eventsToStop.forEach(function(type) { | 573 eventsToStop.forEach(function(type) { |
609 input.addEventListener(type, stopPropagation); | 574 input.addEventListener(type, stopPropagation); |
610 }); | 575 }); |
611 | 576 |
612 // Wait for the input element to recieve focus before sizing it. | 577 // Wait for the input element to recieve focus before sizing it. |
613 var rowElement = this.rowElement; | 578 var rowElement = this.rowElement; |
(...skipping 17 matching lines...) Expand all Loading... |
631 } else { | 596 } else { |
632 labelEl.textContent = value; | 597 labelEl.textContent = value; |
633 if (value != this.oldLabel_) { | 598 if (value != this.oldLabel_) { |
634 cr.dispatchSimpleEvent(this, 'rename', true); | 599 cr.dispatchSimpleEvent(this, 'rename', true); |
635 } | 600 } |
636 } | 601 } |
637 delete this.oldLabel_; | 602 delete this.oldLabel_; |
638 } | 603 } |
639 }, | 604 }, |
640 | 605 |
641 get editing() { | 606 get editing() { return this.hasAttribute('editing'); } |
642 return this.hasAttribute('editing'); | |
643 } | |
644 }; | 607 }; |
645 | 608 |
646 /** | 609 /** |
647 * Helper function that returns the next visible tree item. | 610 * Helper function that returns the next visible tree item. |
648 * @param {cr.ui.TreeItem} item The tree item. | 611 * @param {cr.ui.TreeItem} item The tree item. |
649 * @return {cr.ui.TreeItem} The found item or null. | 612 * @return {cr.ui.TreeItem} The found item or null. |
650 */ | 613 */ |
651 function getNext(item) { | 614 function getNext(item) { |
652 if (item.expanded) { | 615 if (item.expanded) { |
653 var firstChild = item.items[0]; | 616 var firstChild = item.items[0]; |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
695 if (!item) | 658 if (!item) |
696 return null; | 659 return null; |
697 if (item.expanded && item.hasChildren) { | 660 if (item.expanded && item.hasChildren) { |
698 var lastChild = item.items[item.items.length - 1]; | 661 var lastChild = item.items[item.items.length - 1]; |
699 return getLastHelper(lastChild); | 662 return getLastHelper(lastChild); |
700 } | 663 } |
701 return item; | 664 return item; |
702 } | 665 } |
703 | 666 |
704 // Export | 667 // Export |
705 return { | 668 return {Tree: Tree, TreeItem: TreeItem}; |
706 Tree: Tree, | |
707 TreeItem: TreeItem | |
708 }; | |
709 }); | 669 }); |
OLD | NEW |