| 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 cr.define('options.browser_options', function() { | 5 cr.define('options.browser_options', function() { |
| 6 const AutocompleteList = cr.ui.AutocompleteList; | 6 const AutocompleteList = cr.ui.AutocompleteList; |
| 7 const InlineEditableItem = options.InlineEditableItem; | 7 const InlineEditableItem = options.InlineEditableItem; |
| 8 const InlineEditableItemList = options.InlineEditableItemList; | 8 const InlineEditableItemList = options.InlineEditableItemList; |
| 9 | 9 |
| 10 /** | 10 /** |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 62 titleEl.title = pageInfo['tooltip']; | 62 titleEl.title = pageInfo['tooltip']; |
| 63 } | 63 } |
| 64 | 64 |
| 65 this.contentElement.appendChild(titleEl); | 65 this.contentElement.appendChild(titleEl); |
| 66 | 66 |
| 67 var urlEl = this.createEditableTextCell(pageInfo['url']); | 67 var urlEl = this.createEditableTextCell(pageInfo['url']); |
| 68 urlEl.className = 'url'; | 68 urlEl.className = 'url'; |
| 69 urlEl.classList.add('weakrtl'); | 69 urlEl.classList.add('weakrtl'); |
| 70 this.contentElement.appendChild(urlEl); | 70 this.contentElement.appendChild(urlEl); |
| 71 | 71 |
| 72 var urlField = urlEl.querySelector('input') | 72 var urlField = urlEl.querySelector('input'); |
| 73 urlField.required = true; | 73 urlField.required = true; |
| 74 urlField.className = 'weakrtl'; | 74 urlField.className = 'weakrtl'; |
| 75 urlField.placeholder = localStrings.getString('startupPagesPlaceholder'); | 75 urlField.placeholder = localStrings.getString('startupPagesPlaceholder'); |
| 76 this.urlField_ = urlField; | 76 this.urlField_ = urlField; |
| 77 | 77 |
| 78 this.addEventListener('commitedit', this.onEditCommitted_); | 78 this.addEventListener('commitedit', this.onEditCommitted_); |
| 79 | 79 |
| 80 var self = this; | 80 var self = this; |
| 81 urlField.addEventListener('focus', function(event) { | 81 urlField.addEventListener('focus', function(event) { |
| 82 self.parentNode.autocompleteList.attachToInput(urlField); | 82 self.parentNode.autocompleteList.attachToInput(urlField); |
| (...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 147 var item = new StartupPageListItem(pageInfo); | 147 var item = new StartupPageListItem(pageInfo); |
| 148 item.urlField_.disabled = this.disabled; | 148 item.urlField_.disabled = this.disabled; |
| 149 return item; | 149 return item; |
| 150 }, | 150 }, |
| 151 | 151 |
| 152 /** @inheritDoc */ | 152 /** @inheritDoc */ |
| 153 deleteItemAtIndex: function(index) { | 153 deleteItemAtIndex: function(index) { |
| 154 chrome.send('removeStartupPages', [String(index)]); | 154 chrome.send('removeStartupPages', [String(index)]); |
| 155 }, | 155 }, |
| 156 | 156 |
| 157 /* | 157 /** |
| 158 * Computes the target item of drop event. | 158 * Computes the target item of drop event. |
| 159 * @param {Event} e The drop or dragover event. | 159 * @param {Event} e The drop or dragover event. |
| 160 * @private | 160 * @private |
| 161 */ | 161 */ |
| 162 getTargetFromDropEvent_ : function(e) { | 162 getTargetFromDropEvent_: function(e) { |
| 163 var target = e.target; | 163 var target = e.target; |
| 164 // e.target may be an inner element of the list item | 164 // e.target may be an inner element of the list item |
| 165 while (target != null && !(target instanceof StartupPageListItem)) { | 165 while (target != null && !(target instanceof StartupPageListItem)) { |
| 166 target = target.parentNode; | 166 target = target.parentNode; |
| 167 } | 167 } |
| 168 return target; | 168 return target; |
| 169 }, | 169 }, |
| 170 | 170 |
| 171 /* | 171 /** |
| 172 * Handles the dragstart event. | 172 * Handles the dragstart event. |
| 173 * @param {Event} e The dragstart event. | 173 * @param {Event} e The dragstart event. |
| 174 * @private | 174 * @private |
| 175 */ | 175 */ |
| 176 handleDragStart_: function(e) { | 176 handleDragStart_: function(e) { |
| 177 // Prevent dragging if the list is disabled. | 177 // Prevent dragging if the list is disabled. |
| 178 if (this.disabled) { | 178 if (this.disabled) { |
| 179 e.preventDefault(); | 179 e.preventDefault(); |
| 180 return false; | 180 return false; |
| 181 } | 181 } |
| (...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 241 var newIndex = this.dataModel.indexOf(dropTarget.pageInfo_); | 241 var newIndex = this.dataModel.indexOf(dropTarget.pageInfo_); |
| 242 if (this.dropPos == 'below') | 242 if (this.dropPos == 'below') |
| 243 newIndex += 1; | 243 newIndex += 1; |
| 244 | 244 |
| 245 var selected = this.selectionModel.selectedIndexes; | 245 var selected = this.selectionModel.selectedIndexes; |
| 246 var stringized_selected = []; | 246 var stringized_selected = []; |
| 247 for (var j = 0; j < selected.length; j++) | 247 for (var j = 0; j < selected.length; j++) |
| 248 stringized_selected.push(String(selected[j])); | 248 stringized_selected.push(String(selected[j])); |
| 249 | 249 |
| 250 chrome.send('dragDropStartupPage', | 250 chrome.send('dragDropStartupPage', |
| 251 [String(newIndex), stringized_selected] ); | 251 [String(newIndex), stringized_selected]); |
| 252 }, | 252 }, |
| 253 | 253 |
| 254 /* | 254 /** |
| 255 * Handles the dragleave event. | 255 * Handles the dragleave event. |
| 256 * @param {Event} e The dragleave event | 256 * @param {Event} e The dragleave event. |
| 257 * @private | 257 * @private |
| 258 */ | 258 */ |
| 259 handleDragLeave_: function(e) { | 259 handleDragLeave_: function(e) { |
| 260 this.hideDropMarker_(); | 260 this.hideDropMarker_(); |
| 261 }, | 261 }, |
| 262 | 262 |
| 263 /** | 263 /** |
| 264 * Handles the dragend event. | 264 * Handles the dragend event. |
| 265 * @param {Event} e The dragend event | 265 * @param {Event} e The dragend event. |
| 266 * @private | 266 * @private |
| 267 */ | 267 */ |
| 268 handleDragEnd_: function(e) { | 268 handleDragEnd_: function(e) { |
| 269 this.draggedItem.editable = true; | 269 this.draggedItem.editable = true; |
| 270 this.draggedItem.updateEditState(); | 270 this.draggedItem.updateEditState(); |
| 271 }, | 271 }, |
| 272 | 272 |
| 273 /* | 273 /** |
| 274 * Shows and positions the marker to indicate the drop target. | 274 * Shows and positions the marker to indicate the drop target. |
| 275 * @param {HTMLElement} target The current target list item of drop | 275 * @param {HTMLElement} target The current target list item of drop. |
| 276 * @param {string} pos 'below' or 'above' | 276 * @param {string} pos 'below' or 'above'. |
| 277 * @private | 277 * @private |
| 278 */ | 278 */ |
| 279 showDropMarker_ : function(target, pos) { | 279 showDropMarker_: function(target, pos) { |
| 280 window.clearTimeout(this.hideDropMarkerTimer_); | 280 window.clearTimeout(this.hideDropMarkerTimer_); |
| 281 var marker = $('startupPagesListDropmarker'); | 281 var marker = $('startupPagesListDropmarker'); |
| 282 var rect = target.getBoundingClientRect(); | 282 var rect = target.getBoundingClientRect(); |
| 283 var markerHeight = 6; | 283 var markerHeight = 6; |
| 284 if (pos == 'above') { | 284 if (pos == 'above') { |
| 285 marker.style.top = (rect.top - markerHeight/2) + 'px'; | 285 marker.style.top = (rect.top - markerHeight / 2) + 'px'; |
| 286 } else { | 286 } else { |
| 287 marker.style.top = (rect.bottom - markerHeight/2) + 'px'; | 287 marker.style.top = (rect.bottom - markerHeight / 2) + 'px'; |
| 288 } | 288 } |
| 289 marker.style.width = rect.width + 'px'; | 289 marker.style.width = rect.width + 'px'; |
| 290 marker.style.left = rect.left + 'px'; | 290 marker.style.left = rect.left + 'px'; |
| 291 marker.style.display = 'block'; | 291 marker.style.display = 'block'; |
| 292 }, | 292 }, |
| 293 | 293 |
| 294 /* | 294 /** |
| 295 * Hides the drop marker. | 295 * Hides the drop marker. |
| 296 * @private | 296 * @private |
| 297 */ | 297 */ |
| 298 hideDropMarker_ : function() { | 298 hideDropMarker_: function() { |
| 299 // Hide the marker in a timeout to reduce flickering as we move between | 299 // Hide the marker in a timeout to reduce flickering as we move between |
| 300 // valid drop targets. | 300 // valid drop targets. |
| 301 window.clearTimeout(this.hideDropMarkerTimer_); | 301 window.clearTimeout(this.hideDropMarkerTimer_); |
| 302 this.hideDropMarkerTimer_ = window.setTimeout(function() { | 302 this.hideDropMarkerTimer_ = window.setTimeout(function() { |
| 303 $('startupPagesListDropmarker').style.display = ''; | 303 $('startupPagesListDropmarker').style.display = ''; |
| 304 }, 100); | 304 }, 100); |
| 305 }, | 305 }, |
| 306 }; | 306 }; |
| 307 | 307 |
| 308 return { | 308 return { |
| 309 StartupPageList: StartupPageList | 309 StartupPageList: StartupPageList |
| 310 }; | 310 }; |
| 311 }); | 311 }); |
| OLD | NEW |