src/third_party/trace-viewer/trace_viewer/base/ui/list_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/events.html">
   8 <link rel="import" href="/base/utils.html">
   9 <link rel="import" href="/base/ui.html">
  10 <link rel="import" href="/base/ui/container_that_decorates_its_children.html">
  11 <link rel="stylesheet" href="/base/ui/list_view.css">
  12 <script>
  13 'use strict';
  14
  15 /**
  16  * @fileoverview Simple list view.
  17  */
  18 tv.exportTo('tv.ui', function() {
  19   /**
  20    * @constructor
  21    */
  22   var ListView = tv.ui.define(
  23       'x-list-view', tv.ui.ContainerThatDecoratesItsChildren);
  24
  25   ListView.prototype = {
  26     __proto__: tv.ui.ContainerThatDecoratesItsChildren.prototype,
  27
  28     decorate: function() {
  29       tv.ui.ContainerThatDecoratesItsChildren.prototype.decorate.call(this);
  30
  31       this.classList.add('x-list-view');
  32       this.onItemClicked_ = this.onItemClicked_.bind(this);
  33       this.onKeyDown_ = this.onKeyDown_.bind(this);
  34       this.tabIndex = 0;
  35       this.addEventListener('keydown', this.onKeyDown_);
  36
  37       this.selectionChanged_ = false;
  38     },
  39
  40     decorateChild_: function(item) {
  41       item.classList.add('list-item');
  42       item.addEventListener('click', this.onItemClicked_, true);
  43
  44       var listView = this;
  45       Object.defineProperty(
  46           item,
  47           'selected', {
  48             configurable: true,
  49             set: function(value) {
  50               var oldSelection = listView.selectedElement;
  51               if (oldSelection && oldSelection != this && value)
  52                 listView.selectedElement.removeAttribute('selected');
  53               if (value)
  54                 this.setAttribute('selected', 'selected');
  55               else
  56                 this.removeAttribute('selected');
  57               var newSelection = listView.selectedElement;
  58               if (newSelection != oldSelection)
  59                 tv.dispatchSimpleEvent(listView, 'selection-changed', false);
  60             },
  61             get: function() {
  62               return this.hasAttribute('selected');
  63             }
  64           });
  65     },
  66
  67     undecorateChild_: function(item) {
  68       this.selectionChanged_ |= item.selected;
  69
  70       item.classList.remove('list-item');
  71       item.removeEventListener('click', this.onItemClicked_);
  72       delete item.selected;
  73     },
  74
  75     beginDecorating_: function() {
  76       this.selectionChanged_ = false;
  77     },
  78
  79     doneDecoratingForNow_: function() {
  80       if (this.selectionChanged_)
  81         tv.dispatchSimpleEvent(this, 'selection-changed', false);
  82     },
  83
  84     get selectedElement() {
  85       var el = this.querySelector('.list-item[selected]');
  86       if (!el)
  87         return undefined;
  88       return el;
  89     },
  90
  91     set selectedElement(el) {
  92       if (!el) {
  93         if (this.selectedElement)
  94           this.selectedElement.selected = false;
  95         return;
  96       }
  97
  98       if (el.parentElement != this)
  99         throw new Error(
 100             'Can only select elements that are children of this list view');
 101       el.selected = true;
 102     },
 103
 104     getElementByIndex: function(index) {
 105       return this.querySelector('.list-item:nth-child(' + index + ')');
 106     },
 107
 108     clear: function() {
 109       var changed = this.selectedElement !== undefined;
 110       tv.ui.ContainerThatDecoratesItsChildren.prototype.clear.call(this);
 111       if (changed)
 112         tv.dispatchSimpleEvent(this, 'selection-changed', false);
 113     },
 114
 115     onItemClicked_: function(e) {
 116       var currentSelectedElement = this.selectedElement;
 117       if (currentSelectedElement)
 118         currentSelectedElement.removeAttribute('selected');
 119       var element = e.target;
 120       while (element.parentElement != this)
 121         element = element.parentElement;
 122       element.setAttribute('selected', 'selected');
 123       tv.dispatchSimpleEvent(this, 'selection-changed', false);
 124     },
 125
 126     onKeyDown_: function(e) {
 127       if (this.selectedElement === undefined)
 128         return;
 129
 130       if (e.keyCode == 38) { // Up arrow.
 131         var prev = this.selectedElement.previousSibling;
 132         if (prev) {
 133           prev.selected = true;
 134           tv.scrollIntoViewIfNeeded(prev);
 135           e.preventDefault();
 136           return true;
 137         }
 138       } else if (e.keyCode == 40) { // Down arrow.
 139         var next = this.selectedElement.nextSibling;
 140         if (next) {
 141           next.selected = true;
 142           tv.scrollIntoViewIfNeeded(next);
 143           e.preventDefault();
 144           return true;
 145         }
 146       }
 147     },
 148
 149     addItem: function(textContent) {
 150       var item = document.createElement('div');
 151       item.textContent = textContent;
 152       this.appendChild(item);
 153       return item;
 154     }
 155
 156   };
 157
 158   return {
 159     ListView: ListView
 160   };
 161
 162 });
 163 </script>