OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview | 6 * @fileoverview |
7 * Class representing an entry in the host-list portion of the home screen. | 7 * Class representing an entry in the host-list portion of the home screen. |
8 */ | 8 */ |
9 | 9 |
10 'use strict'; | 10 'use strict'; |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
56 * @param {function(remoting.HostTableEntry):void} onDelete Callback for | 56 * @param {function(remoting.HostTableEntry):void} onDelete Callback for |
57 * delete operations. | 57 * delete operations. |
58 */ | 58 */ |
59 remoting.HostTableEntry.prototype.init = function(host, onRename, onDelete) { | 59 remoting.HostTableEntry.prototype.init = function(host, onRename, onDelete) { |
60 this.host = host; | 60 this.host = host; |
61 this.onRename_ = onRename; | 61 this.onRename_ = onRename; |
62 | 62 |
63 /** @type {remoting.HostTableEntry} */ | 63 /** @type {remoting.HostTableEntry} */ |
64 var that = this; | 64 var that = this; |
65 | 65 |
66 this.tableRow = document.createElement('div'); | 66 this.tableRow = /** @type {HTMLElement} */ document.createElement('div'); |
67 addClass(this.tableRow, 'section-row'); | 67 this.tableRow.classList.add('section-row'); |
68 | 68 |
69 // Create the host icon cell. | 69 // Create the host icon cell. |
70 var hostIcon = document.createElement('img'); | 70 var hostIcon = /** @type {HTMLElement} */ document.createElement('img'); |
71 hostIcon.src = 'icon_host.png'; | 71 hostIcon.src = 'icon_host.png'; |
72 addClass(hostIcon, 'host-list-main-icon'); | 72 hostIcon.classList.add('host-list-main-icon'); |
73 this.tableRow.appendChild(hostIcon); | 73 this.tableRow.appendChild(hostIcon); |
74 | 74 |
75 // Create the host name cell. | 75 // Create the host name cell. |
76 this.hostNameCell_ = document.createElement('div'); | 76 this.hostNameCell_ = /** @type {HTMLElement} */ document.createElement('div'); |
77 addClass(this.hostNameCell_, 'box-spacer'); | 77 this.hostNameCell_.classList.add('box-spacer'); |
78 this.setHostName_(); | 78 this.setHostName_(); |
79 this.tableRow.appendChild(this.hostNameCell_); | 79 this.tableRow.appendChild(this.hostNameCell_); |
80 | 80 |
81 // Create the host status cell. | 81 // Create the host status cell. |
82 if (host.status == 'ONLINE') { | 82 if (host.status == 'ONLINE') { |
83 var hostUrl = chrome.extension.getURL('main.html') + | 83 var hostUrl = chrome.extension.getURL('main.html') + |
84 '?mode=me2me&hostId=' + encodeURIComponent(host.hostId); | 84 '?mode=me2me&hostId=' + encodeURIComponent(host.hostId); |
85 var startMe2Me = function() { window.location.replace(hostUrl); }; | 85 var startMe2Me = function() { window.location.replace(hostUrl); }; |
86 this.hostNameCell_.addEventListener('click', startMe2Me, false); | 86 this.hostNameCell_.addEventListener('click', startMe2Me, false); |
87 hostIcon.addEventListener('click', startMe2Me, false); | 87 hostIcon.addEventListener('click', startMe2Me, false); |
88 addClass(this.tableRow, 'clickable'); | 88 this.tableRow.classList.add('clickable'); |
89 addClass(this.tableRow, 'host-online'); | 89 this.tableRow.classList.add('host-online'); |
90 this.tableRow.title = chrome.i18n.getMessage( | 90 this.tableRow.title = chrome.i18n.getMessage( |
91 /*i18n-content*/'TOOLTIP_CONNECT', host.hostName); | 91 /*i18n-content*/'TOOLTIP_CONNECT', host.hostName); |
92 } else { | 92 } else { |
93 addClass(this.tableRow, 'host-offline'); | 93 this.tableRow.classList.add('host-offline'); |
94 } | 94 } |
95 | 95 |
96 // Create the host rename cell. | 96 // Create the host rename cell. |
97 var editButton = document.createElement('img'); | 97 var editButton = /** @type {HTMLElement} */ document.createElement('img'); |
98 var beginRename = function() { that.beginRename_(); }; | 98 var beginRename = function() { that.beginRename_(); }; |
99 editButton.addEventListener('click', beginRename, true); | 99 editButton.addEventListener('click', beginRename, true); |
100 addClass(editButton, 'clickable'); | 100 editButton.classList.add('clickable'); |
101 addClass(editButton, 'host-list-edit'); | 101 editButton.classList.add('host-list-edit'); |
102 editButton.src = 'icon_pencil.png'; | 102 editButton.src = 'icon_pencil.png'; |
103 addClass(editButton, 'host-list-rename-icon'); | 103 editButton.classList.add('host-list-rename-icon'); |
104 editButton.title = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_RENAME'); | 104 editButton.title = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_RENAME'); |
105 this.tableRow.appendChild(editButton); | 105 this.tableRow.appendChild(editButton); |
106 | 106 |
107 // Create the host delete cell. | 107 // Create the host delete cell. |
108 var deleteButton = document.createElement('div'); | 108 var deleteButton = /** @type {HTMLElement} */ document.createElement('div'); |
109 deleteButton.addEventListener('click', function() { onDelete(that); }, false); | 109 deleteButton.addEventListener('click', function() { onDelete(that); }, false); |
110 addClass(deleteButton, 'clickable'); | 110 deleteButton.classList.add('clickable'); |
111 addClass(deleteButton, 'host-list-edit'); | 111 deleteButton.classList.add('host-list-edit'); |
112 var crossImage = document.createElement('img'); | 112 var crossImage = /** @type {HTMLElement} */ document.createElement('img'); |
113 crossImage.src = 'icon_cross.png'; | 113 crossImage.src = 'icon_cross.png'; |
114 addClass(crossImage, 'host-list-remove-icon'); | 114 crossImage.classList.add('host-list-remove-icon'); |
115 deleteButton.appendChild(crossImage); | 115 deleteButton.appendChild(crossImage); |
116 deleteButton.title = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_DELETE'); | 116 deleteButton.title = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_DELETE'); |
117 this.tableRow.appendChild(deleteButton); | 117 this.tableRow.appendChild(deleteButton); |
118 }; | 118 }; |
119 | 119 |
120 /** | 120 /** |
121 * Prepare the host for renaming by replacing its name with an edit box. | 121 * Prepare the host for renaming by replacing its name with an edit box. |
122 * @return {void} Nothing. | 122 * @return {void} Nothing. |
123 * @private | 123 * @private |
124 */ | 124 */ |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
166 var editBox = this.hostNameCell_.querySelector('input'); | 166 var editBox = this.hostNameCell_.querySelector('input'); |
167 if (editBox) { | 167 if (editBox) { |
168 // onblur will fire when the edit box is removed, so remove the hook. | 168 // onblur will fire when the edit box is removed, so remove the hook. |
169 editBox.removeEventListener('blur', this.onBlurReference_, false); | 169 editBox.removeEventListener('blur', this.onBlurReference_, false); |
170 } | 170 } |
171 this.hostNameCell_.innerHTML = ''; // Remove the edit box. | 171 this.hostNameCell_.innerHTML = ''; // Remove the edit box. |
172 this.setHostName_(); | 172 this.setHostName_(); |
173 }; | 173 }; |
174 | 174 |
175 remoting.HostTableEntry.prototype.setHostName_ = function() { | 175 remoting.HostTableEntry.prototype.setHostName_ = function() { |
176 var hostNameNode = document.createElement('span'); | 176 var hostNameNode = /** @type {HTMLElement} */ document.createElement('span'); |
177 if (this.host.status == 'ONLINE') { | 177 if (this.host.status == 'ONLINE') { |
178 hostNameNode.innerText = this.host.hostName; | 178 hostNameNode.innerText = this.host.hostName; |
179 } else { | 179 } else { |
180 hostNameNode.innerText = chrome.i18n.getMessage(/*i18n-content*/'OFFLINE', | 180 hostNameNode.innerText = chrome.i18n.getMessage(/*i18n-content*/'OFFLINE', |
181 this.host.hostName); | 181 this.host.hostName); |
182 } | 182 } |
183 addClass(hostNameNode, 'host-list-label'); | 183 hostNameNode.classList.add('host-list-label'); |
184 this.hostNameCell_.appendChild(hostNameNode); | 184 this.hostNameCell_.appendChild(hostNameNode); |
185 }; | 185 }; |
186 | 186 |
187 /** | 187 /** |
188 * Handle a key event while the user is typing a host name | 188 * Handle a key event while the user is typing a host name |
189 * @param {Event} event The keyboard event. | 189 * @param {Event} event The keyboard event. |
190 * @return {void} Nothing. | 190 * @return {void} Nothing. |
191 * @private | 191 * @private |
192 */ | 192 */ |
193 remoting.HostTableEntry.prototype.onKeydown_ = function(event) { | 193 remoting.HostTableEntry.prototype.onKeydown_ = function(event) { |
194 if (event.which == 27) { // Escape | 194 if (event.which == 27) { // Escape |
195 this.removeEditBox_(); | 195 this.removeEditBox_(); |
196 } else if (event.which == 13) { // Enter | 196 } else if (event.which == 13) { // Enter |
197 this.commitRename_(); | 197 this.commitRename_(); |
198 } | 198 } |
199 }; | 199 }; |
OLD | NEW |