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