Home | History | Annotate | Download | only in ui 
      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  */
     11 base.require('ui');
     12 base.require('ui.list_view');
     13 base.requireStylesheet('ui.list_and_associated_view');
     14 base.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