src/third_party/trace-viewer/trace_viewer/base/ui/list_and_associated_view.html

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