Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. | 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 | 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 var BookmarksStore = Polymer({ | 5 var BookmarksStore = Polymer({ |
| 6 is: 'bookmarks-store', | 6 is: 'bookmarks-store', |
| 7 | 7 |
| 8 properties: { | 8 properties: { |
| 9 /** @type {BookmarkTreeNode} */ | 9 /** @type {BookmarkTreeNode} */ |
| 10 rootNode: { | 10 rootNode: { |
| (...skipping 19 matching lines...) Expand all Loading... | |
| 30 * This updates to either the result of a search or the contents of the | 30 * This updates to either the result of a search or the contents of the |
| 31 * selected folder. | 31 * selected folder. |
| 32 * @type {Array<BookmarkTreeNode>} | 32 * @type {Array<BookmarkTreeNode>} |
| 33 */ | 33 */ |
| 34 displayedList: { | 34 displayedList: { |
| 35 type: Array, | 35 type: Array, |
| 36 notify: true, | 36 notify: true, |
| 37 readOnly: true, | 37 readOnly: true, |
| 38 }, | 38 }, |
| 39 | 39 |
| 40 /** @type {Object<?string, !BookmarkTreeNode>} */ | |
| 40 idToNodeMap_: Object, | 41 idToNodeMap_: Object, |
| 42 | |
| 43 /** @type {?number} */ | |
| 44 anchorIndex_: Number, | |
| 45 | |
| 46 /** @type {Set<string>} */ | |
| 47 searchResultSet_: Object, | |
| 41 }, | 48 }, |
| 42 | 49 |
| 43 /** @private {Object} */ | 50 /** @private {Object} */ |
| 44 documentListeners_: null, | 51 documentListeners_: null, |
| 45 | 52 |
| 46 /** @override */ | 53 /** @override */ |
| 47 attached: function() { | 54 attached: function() { |
| 48 this.documentListeners_ = { | 55 this.documentListeners_ = { |
| 49 'selected-folder-changed': this.onSelectedFolderChanged_.bind(this), | |
| 50 'folder-open-changed': this.onFolderOpenChanged_.bind(this), | 56 'folder-open-changed': this.onFolderOpenChanged_.bind(this), |
| 51 'search-term-changed': this.onSearchTermChanged_.bind(this), | 57 'search-term-changed': this.onSearchTermChanged_.bind(this), |
| 58 'select-item': this.onItemSelected_.bind(this), | |
| 59 'selected-folder-changed': this.onSelectedFolderChanged_.bind(this), | |
| 52 }; | 60 }; |
| 53 for (var event in this.documentListeners_) | 61 for (var event in this.documentListeners_) |
| 54 document.addEventListener(event, this.documentListeners_[event]); | 62 document.addEventListener(event, this.documentListeners_[event]); |
| 55 }, | 63 }, |
| 56 | 64 |
| 57 /** @override */ | 65 /** @override */ |
| 58 detached: function() { | 66 detached: function() { |
| 59 for (var event in this.documentListeners_) | 67 for (var event in this.documentListeners_) |
| 60 document.removeEventListener(event, this.documentListeners_[event]); | 68 document.removeEventListener(event, this.documentListeners_[event]); |
| 61 }, | 69 }, |
| (...skipping 28 matching lines...) Expand all Loading... | |
| 90 // Initialize the store's fields from the router. | 98 // Initialize the store's fields from the router. |
| 91 if (this.$.router.searchTerm) | 99 if (this.$.router.searchTerm) |
| 92 this.searchTerm = this.$.router.searchTerm; | 100 this.searchTerm = this.$.router.searchTerm; |
| 93 else | 101 else |
| 94 this.fire('selected-folder-changed', this.$.router.selectedId); | 102 this.fire('selected-folder-changed', this.$.router.selectedId); |
| 95 }, | 103 }, |
| 96 | 104 |
| 97 /** @private */ | 105 /** @private */ |
| 98 deselectFolders_: function() { | 106 deselectFolders_: function() { |
| 99 this.unlinkPaths('displayedList'); | 107 this.unlinkPaths('displayedList'); |
| 100 this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false); | 108 this.set( |
| 109 this.idToNodeMap_[this.selectedId].path + '.isSelectedFolder', false); | |
| 101 this.selectedId = null; | 110 this.selectedId = null; |
| 102 }, | 111 }, |
| 103 | 112 |
| 104 /** | 113 /** |
| 105 * @param {BookmarkTreeNode} folder | 114 * @param {BookmarkTreeNode} folder |
| 106 * @private | 115 * @private |
| 107 * @return {boolean} | 116 * @return {boolean} |
| 108 */ | 117 */ |
| 109 isAncestorOfSelected_: function(folder) { | 118 isAncestorOfSelected_: function(folder) { |
| 110 if (!this.selectedId) | 119 if (!this.selectedId) |
| 111 return false; | 120 return false; |
| 112 | 121 |
| 113 var selectedNode = this.idToNodeMap_[this.selectedId]; | 122 var selectedNode = this.idToNodeMap_[this.selectedId]; |
| 114 return selectedNode.path.startsWith(folder.path); | 123 return selectedNode.path.startsWith(folder.path); |
| 115 }, | 124 }, |
| 116 | 125 |
| 117 /** @private */ | 126 /** @private */ |
| 118 updateSearchDisplay_: function() { | 127 updateSearchDisplay_: function() { |
| 119 if (!this.rootNode) | 128 if (!this.rootNode) |
| 120 return; | 129 return; |
| 121 | 130 |
| 122 if (!this.searchTerm) { | 131 if (!this.searchTerm) { |
| 123 this.fire('selected-folder-changed', this.rootNode.children[0].id); | 132 this.fire('selected-folder-changed', this.rootNode.children[0].id); |
| 124 } else { | 133 } else { |
| 125 chrome.bookmarks.search(this.searchTerm, function(results) { | 134 chrome.bookmarks.search(this.searchTerm, function(results) { |
| 135 this.anchorIndex_ = null; | |
| 136 this.clearSelectedItems_(); | |
| 137 this.searchResultSet_ = new Set(); | |
| 138 | |
| 126 if (this.selectedId) | 139 if (this.selectedId) |
| 127 this.deselectFolders_(); | 140 this.deselectFolders_(); |
| 128 | 141 |
| 129 this._setDisplayedList(results); | 142 this.setupSearchResults_(results); |
| 143 | |
| 144 this.set( | |
|
tsergeant
2017/02/02 00:16:03
Does this line ever do anything useful? Can it be
jiaxi
2017/02/02 04:11:55
Done.
| |
| 145 'displayedList.#' + this.anchorIndex_ + '.isSelectedItem', true); | |
| 130 }.bind(this)); | 146 }.bind(this)); |
| 131 } | 147 } |
| 132 }, | 148 }, |
| 133 | 149 |
| 134 /** @private */ | 150 /** @private */ |
| 135 updateSelectedDisplay_: function() { | 151 updateSelectedDisplay_: function() { |
| 136 // Don't change to the selected display if ID was cleared. | 152 // Don't change to the selected display if ID was cleared. |
| 137 if (!this.selectedId) | 153 if (!this.selectedId) |
| 138 return; | 154 return; |
| 139 | 155 |
| 156 this.clearSelectedItems_(); | |
| 157 this.anchorIndex_ = null; | |
| 158 | |
| 140 var selectedNode = this.idToNodeMap_[this.selectedId]; | 159 var selectedNode = this.idToNodeMap_[this.selectedId]; |
| 141 this.linkPaths('displayedList', selectedNode.path + '.children'); | 160 this.linkPaths('displayedList', selectedNode.path + '.children'); |
| 142 this._setDisplayedList(selectedNode.children); | 161 this._setDisplayedList( |
| 162 /** @type {Array<BookmarkTreeNode>} */ (selectedNode.children)); | |
| 143 }, | 163 }, |
| 144 | 164 |
| 145 /** | 165 /** |
| 146 * Remove all descendants of a given node from the map. | 166 * Remove all descendants of a given node from the map. |
| 147 * @param {string} id | 167 * @param {string} id |
| 148 * @private | 168 * @private |
| 149 */ | 169 */ |
| 150 removeDescendantsFromMap_: function(id) { | 170 removeDescendantsFromMap_: function(id) { |
| 151 var node = this.idToNodeMap_[id]; | 171 var node = this.idToNodeMap_[id]; |
| 152 if (!node) | 172 if (!node) |
| 153 return; | 173 return; |
| 154 | 174 |
| 155 if (node.children) { | 175 if (node.children) { |
| 156 for (var i = 0; i < node.children.length; i++) | 176 for (var i = 0; i < node.children.length; i++) |
| 157 this.removeDescendantsFromMap_(node.children[i].id); | 177 this.removeDescendantsFromMap_(node.children[i].id); |
| 158 } | 178 } |
| 159 delete this.idToNodeMap_[id]; | 179 delete this.idToNodeMap_[id]; |
| 160 }, | 180 }, |
| 161 | 181 |
| 182 /** | |
| 183 * Remove all selected items in the list. | |
| 184 * @private | |
| 185 */ | |
| 186 clearSelectedItems_: function() { | |
| 187 if (!this.displayedList) | |
| 188 return; | |
| 189 | |
| 190 for (var i = 0; i < this.displayedList.length; i++) { | |
| 191 if (!this.displayedList[i].isSelectedItem) | |
| 192 continue; | |
| 193 | |
| 194 this.set('displayedList.#' + i + '.isSelectedItem', false); | |
| 195 } | |
| 196 }, | |
| 197 | |
| 198 /** | |
| 199 * Return the index in the search result of an item. | |
| 200 * @param {BookmarkTreeNode} item | |
| 201 * @return {number} | |
| 202 * @private | |
| 203 */ | |
| 204 getIndexInList_: function(item) { | |
| 205 return this.searchTerm ? item.searchResultIndex : item.index; | |
| 206 }, | |
| 207 | |
| 208 /** | |
| 209 * @param {string} id | |
| 210 * @return {boolean} | |
| 211 * @private | |
| 212 */ | |
| 213 wasInDisplayedList_: function(id) { | |
| 214 return this.searchTerm ? this.searchResultSet_.has(id) : | |
| 215 this.idToNodeMap_[id].parentId == this.selectedId; | |
| 216 }, | |
| 217 | |
| 218 /** | |
| 219 * Initializes the search results returned by the API as follows: | |
| 220 * - Populates |searchResultSet_| with a mapping of all result ids to | |
| 221 * their corresponding result. | |
| 222 * - Sets up the |searchResultIndex|. | |
| 223 * @param {Array<BookmarkTreeNode>} results | |
| 224 * @private | |
| 225 */ | |
| 226 setupSearchResults_: function(results) { | |
| 227 for (var i = 0; i < results.length; i++) { | |
| 228 results[i].searchResultIndex = i; | |
| 229 results[i].isSelectedItem = false; | |
| 230 this.searchResultSet_.add(results[i].id); | |
| 231 } | |
| 232 | |
| 233 this._setDisplayedList(results); | |
| 234 }, | |
| 235 | |
| 236 /** | |
| 237 * Select multiple items based on |anchorIndex_| and the selected | |
| 238 * item. If |anchorIndex_| is not set, single select the item. | |
| 239 * @param {BookmarkTreeNode} item | |
| 240 * @private | |
| 241 */ | |
| 242 selectRange_: function(item) { | |
| 243 var startIndex, endIndex; | |
| 244 if (this.anchorIndex_ == null) { | |
| 245 this.anchorIndex_ = this.getIndexInList_(item); | |
| 246 startIndex = this.anchorIndex_; | |
| 247 endIndex = this.anchorIndex_; | |
| 248 } else { | |
| 249 var selectedIndex = this.getIndexInList_(item); | |
| 250 startIndex = Math.min(this.anchorIndex_, selectedIndex); | |
| 251 endIndex = Math.max(this.anchorIndex_, selectedIndex); | |
| 252 } | |
| 253 for (var i = startIndex; i <= endIndex; i++) | |
| 254 this.set('displayedList.#' + i + '.isSelectedItem', true); | |
| 255 }, | |
| 256 | |
| 257 /** | |
| 258 * Selects a single item in the displayedList. | |
| 259 * @param {BookmarkTreeNode} item | |
| 260 * @private | |
| 261 */ | |
| 262 selectItem_: function(item) { | |
| 263 this.anchorIndex_ = this.getIndexInList_(item); | |
| 264 this.set('displayedList.#' + this.anchorIndex_ + '.isSelectedItem', true); | |
| 265 }, | |
| 266 | |
| 162 ////////////////////////////////////////////////////////////////////////////// | 267 ////////////////////////////////////////////////////////////////////////////// |
| 163 // bookmarks-store, bookmarks API event listeners: | 268 // bookmarks-store, bookmarks API event listeners: |
| 164 | 269 |
| 165 /** | 270 /** |
| 166 * Callback for when a bookmark node is removed. | 271 * Callback for when a bookmark node is removed. |
| 167 * If a folder is selected or is an ancestor of a selected folder, the parent | 272 * If a folder is selected or is an ancestor of a selected folder, the parent |
| 168 * of the removed folder will be selected. | 273 * of the removed folder will be selected. |
| 169 * @param {string} id The id of the removed bookmark node. | 274 * @param {string} id The id of the removed bookmark node. |
| 170 * @param {!{index: number, | 275 * @param {!{index: number, |
| 171 * parentId: string, | 276 * parentId: string, |
| 172 * node: BookmarkTreeNode}} removeInfo | 277 * node: BookmarkTreeNode}} removeInfo |
| 173 */ | 278 */ |
| 174 onBookmarkRemoved_: function(id, removeInfo) { | 279 onBookmarkRemoved_: function(id, removeInfo) { |
| 175 if (this.isAncestorOfSelected_(this.idToNodeMap_[id])) { | 280 chrome.bookmarks.getSubTree(removeInfo.parentId, function(parentNodes) { |
| 176 this.fire('selected-folder-changed', removeInfo.parentId); | 281 var parentNode = parentNodes[0]; |
| 177 } | 282 var isAncestor = this.isAncestorOfSelected_(this.idToNodeMap_[id]); |
| 283 var wasInDisplayedList = this.wasInDisplayedList_(id); | |
| 178 | 284 |
| 179 var parentNode = this.idToNodeMap_[removeInfo.parentId]; | 285 // Refresh the parent node's data from the backend as its children's |
| 180 this.splice(parentNode.path + '.children', removeInfo.index, 1); | 286 // indexes will have changed and Polymer doesn't update them. |
| 181 this.removeDescendantsFromMap_(id); | 287 this.removeDescendantsFromMap_(id); |
| 182 BookmarksStore.generatePaths(parentNode, removeInfo.index); | 288 parentNode.path = this.idToNodeMap_[parentNode.id].path; |
| 289 BookmarksStore.generatePaths(parentNode, 0); | |
| 290 BookmarksStore.initNodes(parentNode, this.idToNodeMap_); | |
| 291 this.set(parentNode.path, parentNode); | |
| 183 | 292 |
| 184 // Regenerate the search list if its displayed. | 293 // Updates selectedId if the removed node is an ancestor of the current |
| 185 if (this.searchTerm) | 294 // selected node. |
| 186 this.updateSearchDisplay_(); | 295 if (isAncestor) |
| 296 this.fire('selected-folder-changed', removeInfo.parentId); | |
| 297 | |
| 298 // Only update the displayedList if the removed node is in the | |
| 299 // displayedList. | |
| 300 if (!wasInDisplayedList) | |
| 301 return; | |
| 302 | |
| 303 this.anchorIndex_ = null; | |
| 304 | |
| 305 // Update the currently displayed list. | |
| 306 if (this.searchTerm) { | |
| 307 this.updateSearchDisplay_(); | |
| 308 } else { | |
| 309 if (!isAncestor) | |
| 310 this.fire('selected-folder-changed', this.selectedId); | |
| 311 | |
| 312 this._setDisplayedList(parentNode.children); | |
| 313 } | |
| 314 }.bind(this)); | |
| 187 }, | 315 }, |
| 188 | 316 |
| 189 /** | 317 /** |
| 190 * Called when the title of a bookmark changes. | 318 * Called when the title of a bookmark changes. |
| 191 * @param {string} id The id of changed bookmark node. | 319 * @param {string} id The id of changed bookmark node. |
| 192 * @param {!Object} changeInfo | 320 * @param {!Object} changeInfo |
| 193 */ | 321 */ |
| 194 onBookmarkChanged_: function(id, changeInfo) { | 322 onBookmarkChanged_: function(id, changeInfo) { |
| 195 if (changeInfo.title) | 323 if (changeInfo.title) |
| 196 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title); | 324 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title); |
| (...skipping 19 matching lines...) Expand all Loading... | |
| 216 * Selects the folder specified by the event and deselects the previously | 344 * Selects the folder specified by the event and deselects the previously |
| 217 * selected folder. | 345 * selected folder. |
| 218 * @param {CustomEvent} e | 346 * @param {CustomEvent} e |
| 219 * @private | 347 * @private |
| 220 */ | 348 */ |
| 221 onSelectedFolderChanged_: function(e) { | 349 onSelectedFolderChanged_: function(e) { |
| 222 if (this.searchTerm) | 350 if (this.searchTerm) |
| 223 this.searchTerm = ''; | 351 this.searchTerm = ''; |
| 224 | 352 |
| 225 // Deselect the old folder if defined. | 353 // Deselect the old folder if defined. |
| 226 if (this.selectedId) | 354 if (this.selectedId && this.idToNodeMap_[this.selectedId]) |
| 227 this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false); | 355 this.set( |
| 356 this.idToNodeMap_[this.selectedId].path + '.isSelectedFolder', false); | |
| 228 | 357 |
| 229 // Check if the selected id is that of a defined folder. | 358 // Check if the selected id is that of a defined folder. |
| 230 var id = /** @type {string} */ (e.detail); | 359 var id = /** @type {string} */ (e.detail); |
| 231 if (!this.idToNodeMap_[id] || this.idToNodeMap_[id].url) | 360 if (!this.idToNodeMap_[id] || this.idToNodeMap_[id].url) |
| 232 id = this.rootNode.children[0].id; | 361 id = this.rootNode.children[0].id; |
| 233 | 362 |
| 234 var newFolder = this.idToNodeMap_[id]; | 363 var newFolder = this.idToNodeMap_[id]; |
| 235 this.set(newFolder.path + '.isSelected', true); | 364 this.set(newFolder.path + '.isSelectedFolder', true); |
| 236 this.selectedId = id; | 365 this.selectedId = id; |
| 237 }, | 366 }, |
| 238 | 367 |
| 239 /** | 368 /** |
| 240 * Handles events that open and close folders. | 369 * Handles events that open and close folders. |
| 241 * @param {CustomEvent} e | 370 * @param {CustomEvent} e |
| 242 * @private | 371 * @private |
| 243 */ | 372 */ |
| 244 onFolderOpenChanged_: function(e) { | 373 onFolderOpenChanged_: function(e) { |
| 245 var folder = this.idToNodeMap_[e.detail.id]; | 374 var folder = this.idToNodeMap_[e.detail.id]; |
| 246 this.set(folder.path + '.isOpen', e.detail.open); | 375 this.set(folder.path + '.isOpen', e.detail.open); |
| 247 if (!folder.isOpen && this.isAncestorOfSelected_(folder)) | 376 if (!folder.isOpen && this.isAncestorOfSelected_(folder)) |
| 248 this.fire('selected-folder-changed', folder.id); | 377 this.fire('selected-folder-changed', folder.id); |
| 249 }, | 378 }, |
| 379 | |
| 380 /** | |
| 381 * Selects items according to keyboard behaviours. | |
| 382 * @param {CustomEvent} e | |
| 383 * @private | |
| 384 */ | |
| 385 onItemSelected_: function(e) { | |
| 386 if (!e.detail.add) | |
| 387 this.clearSelectedItems_(); | |
| 388 | |
| 389 if (e.detail.range) | |
| 390 this.selectRange_(e.detail.item); | |
| 391 else | |
| 392 this.selectItem_(e.detail.item); | |
| 393 }, | |
| 250 }); | 394 }); |
| 251 | 395 |
| 252 //////////////////////////////////////////////////////////////////////////////// | 396 //////////////////////////////////////////////////////////////////////////////// |
| 253 // bookmarks-store, static methods: | 397 // bookmarks-store, static methods: |
| 254 | 398 |
| 255 /** | 399 /** |
| 256 * Stores the path from the store to a node inside the node. | 400 * Stores the path from the store to a node inside the node. |
| 257 * @param {BookmarkTreeNode} bookmarkNode | 401 * @param {BookmarkTreeNode} bookmarkNode |
| 258 * @param {number} startIndex | 402 * @param {number} startIndex |
| 259 */ | 403 */ |
| 260 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) { | 404 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) { |
| 261 if (!bookmarkNode.children) | 405 if (!bookmarkNode.children) |
| 262 return; | 406 return; |
| 263 | 407 |
| 264 for (var i = startIndex; i < bookmarkNode.children.length; i++) { | 408 for (var i = startIndex; i < bookmarkNode.children.length; i++) { |
| 265 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i; | 409 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i; |
| 266 BookmarksStore.generatePaths(bookmarkNode.children[i], 0); | 410 BookmarksStore.generatePaths(bookmarkNode.children[i], 0); |
| 267 } | 411 } |
| 268 }; | 412 }; |
| 269 | 413 |
| 270 /** | 414 /** |
| 271 * Initializes the nodes in the bookmarks tree as follows: | 415 * Initializes the nodes in the bookmarks tree as follows: |
| 272 * - Populates |idToNodeMap_| with a mapping of all node ids to their | 416 * - Populates |idToNodeMap_| with a mapping of all node ids to their |
| 273 * corresponding BookmarkTreeNode. | 417 * corresponding BookmarkTreeNode. |
| 274 * - Sets all the nodes to not selected and open by default. | 418 * - Sets all the nodes to not selected and open by default. |
| 275 * @param {BookmarkTreeNode} bookmarkNode | 419 * @param {BookmarkTreeNode} bookmarkNode |
| 276 * @param {Object=} idToNodeMap | 420 * @param {Object=} idToNodeMap |
| 277 */ | 421 */ |
| 278 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) { | 422 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) { |
| 423 bookmarkNode.isSelectedItem = false; | |
| 279 if (idToNodeMap) | 424 if (idToNodeMap) |
| 280 idToNodeMap[bookmarkNode.id] = bookmarkNode; | 425 idToNodeMap[bookmarkNode.id] = bookmarkNode; |
| 281 | 426 |
| 282 if (bookmarkNode.url) | 427 if (bookmarkNode.url) |
| 283 return; | 428 return; |
| 284 | 429 |
| 285 bookmarkNode.isSelected = false; | 430 bookmarkNode.isSelectedFolder = false; |
| 286 bookmarkNode.isOpen = true; | 431 bookmarkNode.isOpen = true; |
| 287 for (var i = 0; i < bookmarkNode.children.length; i++) | 432 for (var i = 0; i < bookmarkNode.children.length; i++) |
| 288 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap); | 433 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap); |
| 289 }; | 434 }; |
| OLD | NEW |