src/third_party/trace-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
   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 });