tools/cc-frame-viewer/src/ui/list_and_associated_view.js

   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 });