| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2014 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <link rel="import" href="/base/events.html"> |
| <link rel="import" href="/base/utils.html"> |
| <link rel="import" href="/base/ui.html"> |
| <link rel="import" href="/base/ui/container_that_decorates_its_children.html"> |
| <link rel="stylesheet" href="/base/ui/list_view.css"> |
| <script> |
| 'use strict'; |
| |
| /** |
| * @fileoverview Simple list view. |
| */ |
| tr.exportTo('tr.b.ui', function() { |
| /** |
| * @constructor |
| */ |
| var ListView = tr.b.ui.define( |
| 'x-list-view', tr.b.ui.ContainerThatDecoratesItsChildren); |
| |
| ListView.prototype = { |
| __proto__: tr.b.ui.ContainerThatDecoratesItsChildren.prototype, |
| |
| decorate: function() { |
| tr.b.ui.ContainerThatDecoratesItsChildren.prototype.decorate.call(this); |
| |
| this.classList.add('x-list-view'); |
| this.onItemClicked_ = this.onItemClicked_.bind(this); |
| this.onKeyDown_ = this.onKeyDown_.bind(this); |
| this.tabIndex = 0; |
| this.addEventListener('keydown', this.onKeyDown_); |
| |
| this.selectionChanged_ = false; |
| }, |
| |
| decorateChild_: function(item) { |
| item.classList.add('list-item'); |
| item.addEventListener('click', this.onItemClicked_, true); |
| |
| var listView = this; |
| Object.defineProperty( |
| item, |
| 'selected', { |
| configurable: true, |
| set: function(value) { |
| var oldSelection = listView.selectedElement; |
| if (oldSelection && oldSelection != this && value) |
| listView.selectedElement.removeAttribute('selected'); |
| if (value) |
| this.setAttribute('selected', 'selected'); |
| else |
| this.removeAttribute('selected'); |
| var newSelection = listView.selectedElement; |
| if (newSelection != oldSelection) |
| tr.b.dispatchSimpleEvent(listView, 'selection-changed', false); |
| }, |
| get: function() { |
| return this.hasAttribute('selected'); |
| } |
| }); |
| }, |
| |
| undecorateChild_: function(item) { |
| this.selectionChanged_ |= item.selected; |
| |
| item.classList.remove('list-item'); |
| item.removeEventListener('click', this.onItemClicked_); |
| delete item.selected; |
| }, |
| |
| beginDecorating_: function() { |
| this.selectionChanged_ = false; |
| }, |
| |
| doneDecoratingForNow_: function() { |
| if (this.selectionChanged_) |
| tr.b.dispatchSimpleEvent(this, 'selection-changed', false); |
| }, |
| |
| get selectedElement() { |
| var el = this.querySelector('.list-item[selected]'); |
| if (!el) |
| return undefined; |
| return el; |
| }, |
| |
| set selectedElement(el) { |
| if (!el) { |
| if (this.selectedElement) |
| this.selectedElement.selected = false; |
| return; |
| } |
| |
| if (el.parentElement != this) |
| throw new Error( |
| 'Can only select elements that are children of this list view'); |
| el.selected = true; |
| }, |
| |
| getElementByIndex: function(index) { |
| return this.querySelector('.list-item:nth-child(' + index + ')'); |
| }, |
| |
| clear: function() { |
| var changed = this.selectedElement !== undefined; |
| tr.b.ui.ContainerThatDecoratesItsChildren.prototype.clear.call(this); |
| if (changed) |
| tr.b.dispatchSimpleEvent(this, 'selection-changed', false); |
| }, |
| |
| onItemClicked_: function(e) { |
| var currentSelectedElement = this.selectedElement; |
| if (currentSelectedElement) |
| currentSelectedElement.removeAttribute('selected'); |
| var element = e.target; |
| while (element.parentElement != this) |
| element = element.parentElement; |
| if (element !== currentSelectedElement) |
| element.setAttribute('selected', 'selected'); |
| tr.b.dispatchSimpleEvent(this, 'selection-changed', false); |
| }, |
| |
| onKeyDown_: function(e) { |
| if (this.selectedElement === undefined) |
| return; |
| |
| if (e.keyCode == 38) { // Up arrow. |
| var prev = this.selectedElement.previousSibling; |
| if (prev) { |
| prev.selected = true; |
| tr.b.scrollIntoViewIfNeeded(prev); |
| e.preventDefault(); |
| return true; |
| } |
| } else if (e.keyCode == 40) { // Down arrow. |
| var next = this.selectedElement.nextSibling; |
| if (next) { |
| next.selected = true; |
| tr.b.scrollIntoViewIfNeeded(next); |
| e.preventDefault(); |
| return true; |
| } |
| } |
| }, |
| |
| addItem: function(textContent) { |
| var item = document.createElement('div'); |
| item.textContent = textContent; |
| this.appendChild(item); |
| return item; |
| } |
| |
| }; |
| |
| return { |
| ListView: ListView |
| }; |
| |
| }); |
| </script> |
