OLD | NEW |
| (Empty) |
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 | |
3 // found in the LICENSE file. | |
4 'use strict'; | |
5 | |
6 /** | |
7 * @fileoverview Simple list view. | |
8 */ | |
9 base.require('ui'); | |
10 base.requireStylesheet('ui.list_view'); | |
11 base.exportTo('ui', function() { | |
12 | |
13 /** | |
14 * @constructor | |
15 */ | |
16 var ListView = ui.define('x-list-view'); | |
17 | |
18 ListView.prototype = { | |
19 __proto__: HTMLUnknownElement.prototype, | |
20 | |
21 decorate: function() { | |
22 this.onItemClicked_ = this.onItemClicked_.bind(this); | |
23 this.onKeyDown_ = this.onKeyDown_.bind(this); | |
24 this.observer_ = new WebKitMutationObserver(this.didMutate_.bind(this)); | |
25 this.observer_.observe(this, { childList: true }); | |
26 this.tabIndex = 0; | |
27 this.addEventListener('keydown', this.onKeyDown_); | |
28 }, | |
29 | |
30 appendChild: function(x) { | |
31 HTMLUnknownElement.prototype.appendChild.call(this, x); | |
32 this.didMutate_(this.observer_.takeRecords()); | |
33 }, | |
34 | |
35 insertBefore: function(x, y) { | |
36 HTMLUnknownElement.prototype.insertBefore.call(this, x, y); | |
37 this.didMutate_(this.observer_.takeRecords()); | |
38 }, | |
39 | |
40 removeChild: function(x) { | |
41 HTMLUnknownElement.prototype.removeChild.call(this, x); | |
42 this.didMutate_(this.observer_.takeRecords()); | |
43 }, | |
44 | |
45 replaceChild: function(x, y) { | |
46 HTMLUnknownElement.prototype.replaceChild.call(this, x, y); | |
47 this.didMutate_(this.observer_.takeRecords()); | |
48 }, | |
49 | |
50 didMutate_: function(records) { | |
51 var selectionChanged = false; | |
52 for (var i = 0; i < records.length; i++) { | |
53 var addedNodes = records[i].addedNodes; | |
54 if (addedNodes) { | |
55 for (var j = 0; j < addedNodes.length; j++) | |
56 this.decorateItem_(addedNodes[j]); | |
57 } | |
58 var removedNodes = records[i].removedNodes; | |
59 if (removedNodes) { | |
60 for (var j = 0; j < removedNodes.length; j++) { | |
61 selectionChanged |= removedNodes[j].selected; | |
62 this.undecorateItem_(removedNodes[j]); | |
63 } | |
64 } | |
65 } | |
66 if (selectionChanged) | |
67 base.dispatchSimpleEvent(this, 'selection-changed', false); | |
68 }, | |
69 | |
70 decorateItem_: function(item) { | |
71 item.classList.add('list-item'); | |
72 item.addEventListener('click', this.onItemClicked_); | |
73 | |
74 var listView = this; | |
75 Object.defineProperty( | |
76 item, | |
77 "selected", { | |
78 configurable: true, | |
79 set: function(value) { | |
80 var oldSelection = listView.selectedElement; | |
81 if (oldSelection && oldSelection != this && value) | |
82 listView.selectedElement.removeAttribute('selected'); | |
83 if (value) | |
84 this.setAttribute('selected', 'selected'); | |
85 else | |
86 this.removeAttribute('selected'); | |
87 var newSelection = listView.selectedElement; | |
88 if (newSelection != oldSelection) | |
89 base.dispatchSimpleEvent(listView, 'selection-changed', false); | |
90 }, | |
91 get: function() { | |
92 return this.hasAttribute('selected'); | |
93 } | |
94 }); | |
95 }, | |
96 | |
97 undecorateItem_: function(item) { | |
98 item.classList.remove('list-item'); | |
99 item.removeEventListener('click', this.onItemClicked_); | |
100 delete item.selected; | |
101 }, | |
102 | |
103 get selectedElement() { | |
104 var el = this.querySelector('.list-item[selected]'); | |
105 if (!el) | |
106 return undefined; | |
107 return el; | |
108 }, | |
109 | |
110 set selectedElement(el) { | |
111 if (!el) { | |
112 if (this.selectedElement) | |
113 this.selectedElement.selected = false; | |
114 return; | |
115 } | |
116 | |
117 if (el.parentElement != this) | |
118 throw new Error( | |
119 'Can only select elements that are children of this list view'); | |
120 el.selected = true; | |
121 }, | |
122 | |
123 clear: function() { | |
124 var changed = this.selectedElement !== undefined; | |
125 this.textContent = ''; | |
126 if (changed) | |
127 base.dispatchSimpleEvent(this, 'selection-changed', false); | |
128 }, | |
129 | |
130 onItemClicked_: function(e) { | |
131 var currentSelectedElement = this.selectedElement; | |
132 if (currentSelectedElement) | |
133 currentSelectedElement.removeAttribute('selected'); | |
134 e.target.setAttribute('selected', 'selected'); | |
135 base.dispatchSimpleEvent(this, 'selection-changed', false); | |
136 }, | |
137 | |
138 onKeyDown_: function(e) { | |
139 if (e.keyCode == 38) { // Up arrow. | |
140 var prev = this.selectedElement.previousSibling; | |
141 if (prev) { | |
142 prev.selected = true; | |
143 prev.scrollIntoView(false); | |
144 e.preventDefault(); | |
145 return true; | |
146 } | |
147 } else if(e.keyCode == 40) { // Down arrow. | |
148 var next = this.selectedElement.nextSibling; | |
149 if (next) { | |
150 next.selected = true; | |
151 next.scrollIntoView(false); | |
152 e.preventDefault(); | |
153 return true; | |
154 } | |
155 } | |
156 }, | |
157 | |
158 addItem: function(textContent) { | |
159 var item = document.createElement('div'); | |
160 item.textContent = textContent; | |
161 this.appendChild(item); | |
162 return item; | |
163 }, | |
164 | |
165 }; | |
166 | |
167 return { | |
168 ListView: ListView | |
169 }; | |
170 | |
171 }); | |
OLD | NEW |