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 A list of things, and a viewer for the currently selected | |
8 * thing. | |
9 */ | |
10 base.require('ui'); | |
11 base.require('ui.list_view'); | |
12 base.requireStylesheet('ui.list_and_associated_view'); | |
13 base.exportTo('ui', function() { | |
14 | |
15 /** | |
16 * @constructor | |
17 */ | |
18 var ListAndAssociatedView = ui.define('x-list-and-associated-view'); | |
19 ListAndAssociatedView.prototype = { | |
20 __proto__: HTMLUnknownElement.prototype, | |
21 | |
22 decorate: function() { | |
23 this.list_ = undefined; | |
24 this.listProperty_ = undefined; | |
25 this.view_ = undefined; | |
26 this.viewProperty_ = undefined; | |
27 this.listView_ = new ui.ListView(); | |
28 this.listView_.addEventListener('selection-changed', | |
29 this.onSelectionChanged_.bind(this)); | |
30 this.placeholder_ = document.createElement('div'); | |
31 this.appendChild(this.listView_); | |
32 this.appendChild(this.placeholder_); | |
33 }, | |
34 | |
35 get listView() { | |
36 return this.listView_; | |
37 }, | |
38 | |
39 get list() { | |
40 return this.list_; | |
41 }, | |
42 | |
43 set list(list) { | |
44 this.list_ = list; | |
45 this.updateChildren_(); | |
46 }, | |
47 | |
48 get listProperty() { | |
49 return this.listProperty_; | |
50 }, | |
51 | |
52 set listProperty(listProperty) { | |
53 this.listProperty_ = listProperty; | |
54 this.updateChildren_(); | |
55 }, | |
56 | |
57 get view() { | |
58 return this.view_; | |
59 }, | |
60 | |
61 set view(view) { | |
62 this.view_ = view; | |
63 this.updateChildren_(); | |
64 }, | |
65 | |
66 get viewProperty() { | |
67 return this.viewProperty_; | |
68 }, | |
69 | |
70 set viewProperty(viewProperty) { | |
71 this.viewProperty_ = viewProperty; | |
72 this.updateChildren_(); | |
73 }, | |
74 | |
75 updateChildren_: function() { | |
76 var complete = this.list_ && | |
77 this.listProperty_ && | |
78 this.view_ && | |
79 this.viewProperty_; | |
80 if (!complete) { | |
81 this.replaceChild(this.placeholder_, | |
82 this.children[1]); | |
83 return; | |
84 } | |
85 | |
86 for (var i = 0; i < this.list_.length; i++) { | |
87 var itemEl; | |
88 if (i >= this.listView_.children.length) { | |
89 itemEl = document.createElement('div'); | |
90 this.listView_.appendChild(itemEl); | |
91 } else { | |
92 itemEl = this.listView_.children[i]; | |
93 } | |
94 itemEl.item = this.list_[i]; | |
95 var getter = this.list_[i].__lookupGetter__(this.listProperty_); | |
96 if (getter) | |
97 itemEl.textContent = getter.call(this.list_[i]); | |
98 else | |
99 itemEl.textContent = this.list_[i][this.listProperty_]; | |
100 } | |
101 | |
102 if (this.children[1] == this.placeholder_) { | |
103 this.replaceChild(this.view_, | |
104 this.children[1]); | |
105 } | |
106 if (this.listView_.children.length && | |
107 !this.listView_.selectedElement) | |
108 this.listView_.selectedElement = this.listView_.children[0]; | |
109 }, | |
110 | |
111 onSelectionChanged_: function(e) { | |
112 var setter = this.view_.__lookupSetter__(this.viewProperty_); | |
113 if (!setter) { | |
114 var prop = this.viewProperty_; | |
115 setter = function(value) { this[prop] = value; } | |
116 } | |
117 if (this.listView_.selectedElement) { | |
118 setter.call(this.view_, | |
119 this.listView_.selectedElement.item); | |
120 } else { | |
121 setter.call(this.view_, | |
122 undefined); | |
123 } | |
124 } | |
125 }; | |
126 | |
127 return { | |
128 ListAndAssociatedView: ListAndAssociatedView | |
129 }; | |
130 }); | |
OLD | NEW |