OLD | NEW |
(Empty) | |
| 1 // Copyright 2016 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 /** |
| 6 * Javascript for DeviceTable UI, served from |
| 7 * chrome://bluetooth-internals/. |
| 8 */ |
| 9 |
| 10 cr.define('device_table', function() { |
| 11 var REMOVED_CSS = 'removed'; |
| 12 |
| 13 /** |
| 14 * A table that lists the devices and responds to changes in the given |
| 15 * DeviceCollection. |
| 16 * @constructor |
| 17 * @extends {HTMLTableElement} |
| 18 */ |
| 19 var DeviceTable = cr.ui.define(function() { |
| 20 this.devices_ = null; |
| 21 |
| 22 return document.importNode($('table-template').content.children[0], |
| 23 true /* deep */); |
| 24 }); |
| 25 DeviceTable.prototype = { |
| 26 __proto__: HTMLTableElement.prototype, |
| 27 |
| 28 /** |
| 29 * Decorates an element as a UI element class. Caches references to the |
| 30 * table body and headers. |
| 31 */ |
| 32 decorate: function() { |
| 33 this.body_ = this.tBodies[0]; |
| 34 this.headers_ = this.tHead.rows[0].cells; |
| 35 }, |
| 36 |
| 37 /** |
| 38 * Sets the tables device collection. |
| 39 * @param {!device_collection.DeviceCollection} deviceCollection |
| 40 */ |
| 41 setDevices: function(deviceCollection) { |
| 42 assert(!this.devices_, 'Devices can only be set once.'); |
| 43 |
| 44 this.devices_ = deviceCollection; |
| 45 this.devices_.addEventListener('sorted', this.redraw_.bind(this)); |
| 46 this.devices_.addEventListener('change', this.handleChange_.bind(this)); |
| 47 this.devices_.addEventListener('splice', this.handleSplice_.bind(this)); |
| 48 |
| 49 this.redraw_(); |
| 50 }, |
| 51 |
| 52 /** |
| 53 * Updates table row on change event of the device collection. |
| 54 * @param {!Event} event |
| 55 */ |
| 56 handleChange_: function(event) { |
| 57 this.updateRow_(this.devices_.item(event.index), event.index); |
| 58 }, |
| 59 |
| 60 /** |
| 61 * Updates table row on splice event of the device collection. |
| 62 * @param {!Event} event |
| 63 */ |
| 64 handleSplice_: function(event) { |
| 65 event.removed.forEach(function() { |
| 66 this.body_.deleteRow(event.index); |
| 67 }, this); |
| 68 |
| 69 event.added.forEach(function(device, index) { |
| 70 this.newRowForDevice_(device, event.index + index); |
| 71 }, this); |
| 72 }, |
| 73 |
| 74 /** |
| 75 * Inserts a new row at |index| and updates it with info from |device|. |
| 76 * @param {!device_collection.Device} device |
| 77 * @param {?number} index |
| 78 */ |
| 79 newRowForDevice_: function(device, index) { |
| 80 var row = this.body_.insertRow(index); |
| 81 row.id = device.info.address; |
| 82 |
| 83 for (var i = 0; i < this.headers_.length; i++) { |
| 84 row.insertCell(); |
| 85 } |
| 86 |
| 87 this.updateRow_(device, row.sectionRowIndex); |
| 88 }, |
| 89 |
| 90 /** |
| 91 * Deletes and recreates the table using the cached |devices_|. |
| 92 */ |
| 93 redraw_: function() { |
| 94 this.removeChild(this.body_); |
| 95 this.appendChild(document.createElement('tbody')); |
| 96 this.body_ = this.tBodies[0]; |
| 97 this.body_.classList.add('table-body'); |
| 98 |
| 99 for (var i = 0; i < this.devices_.length; i++) { |
| 100 this.newRowForDevice_(this.devices_.item(i)); |
| 101 } |
| 102 }, |
| 103 |
| 104 /** |
| 105 * Updates the row at |index| with the info from |device|. |
| 106 * @param {!device_collection.Device} device |
| 107 * @param {!number} index |
| 108 */ |
| 109 updateRow_: function(device, index) { |
| 110 var row = this.body_.rows[index]; |
| 111 |
| 112 if (device.removed) { |
| 113 row.classList.add(REMOVED_CSS); |
| 114 } else { |
| 115 row.classList.remove(REMOVED_CSS); |
| 116 } |
| 117 |
| 118 // Update the properties based on the header field path. |
| 119 for (var i = 0; i < this.headers_.length; i++) { |
| 120 var header = this.headers_[i]; |
| 121 var propName = header.dataset.field; |
| 122 |
| 123 var parts = propName.split('.'); |
| 124 var obj = device.info; |
| 125 while (obj != null && parts.length > 0) { |
| 126 var part = parts.shift(); |
| 127 obj = obj[part]; |
| 128 } |
| 129 |
| 130 var cell = row.cells[i]; |
| 131 cell.textContent = obj || 'Unknown'; |
| 132 cell.dataset.label = header.innerText; |
| 133 } |
| 134 }, |
| 135 }; |
| 136 |
| 137 return { |
| 138 DeviceTable: DeviceTable, |
| 139 }; |
| 140 }); |
OLD | NEW |