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); |
130 }.bind(this)); | 143 }.bind(this)); |
131 } | 144 } |
132 }, | 145 }, |
133 | 146 |
134 /** @private */ | 147 /** @private */ |
135 updateSelectedDisplay_: function() { | 148 updateSelectedDisplay_: function() { |
136 // Don't change to the selected display if ID was cleared. | 149 // Don't change to the selected display if ID was cleared. |
137 if (!this.selectedId) | 150 if (!this.selectedId) |
138 return; | 151 return; |
139 | 152 |
| 153 this.clearSelectedItems_(); |
| 154 this.anchorIndex_ = null; |
| 155 |
140 var selectedNode = this.idToNodeMap_[this.selectedId]; | 156 var selectedNode = this.idToNodeMap_[this.selectedId]; |
141 this.linkPaths('displayedList', selectedNode.path + '.children'); | 157 this.linkPaths('displayedList', selectedNode.path + '.children'); |
142 this._setDisplayedList(selectedNode.children); | 158 this._setDisplayedList( |
| 159 /** @type {Array<BookmarkTreeNode>} */ (selectedNode.children)); |
143 }, | 160 }, |
144 | 161 |
145 /** | 162 /** |
146 * Remove all descendants of a given node from the map. | 163 * Remove all descendants of a given node from the map. |
147 * @param {string} id | 164 * @param {string} id |
148 * @private | 165 * @private |
149 */ | 166 */ |
150 removeDescendantsFromMap_: function(id) { | 167 removeDescendantsFromMap_: function(id) { |
151 var node = this.idToNodeMap_[id]; | 168 var node = this.idToNodeMap_[id]; |
152 if (!node) | 169 if (!node) |
153 return; | 170 return; |
154 | 171 |
155 if (node.children) { | 172 if (node.children) { |
156 for (var i = 0; i < node.children.length; i++) | 173 for (var i = 0; i < node.children.length; i++) |
157 this.removeDescendantsFromMap_(node.children[i].id); | 174 this.removeDescendantsFromMap_(node.children[i].id); |
158 } | 175 } |
159 delete this.idToNodeMap_[id]; | 176 delete this.idToNodeMap_[id]; |
160 }, | 177 }, |
161 | 178 |
| 179 /** |
| 180 * Remove all selected items in the list. |
| 181 * @private |
| 182 */ |
| 183 clearSelectedItems_: function() { |
| 184 if (!this.displayedList) |
| 185 return; |
| 186 |
| 187 for (var i = 0; i < this.displayedList.length; i++) { |
| 188 if (!this.displayedList[i].isSelectedItem) |
| 189 continue; |
| 190 |
| 191 this.set('displayedList.#' + i + '.isSelectedItem', false); |
| 192 } |
| 193 }, |
| 194 |
| 195 /** |
| 196 * Return the index in the search result of an item. |
| 197 * @param {BookmarkTreeNode} item |
| 198 * @return {number} |
| 199 * @private |
| 200 */ |
| 201 getIndexInList_: function(item) { |
| 202 return this.searchTerm ? item.searchResultIndex : item.index; |
| 203 }, |
| 204 |
| 205 /** |
| 206 * @param {string} id |
| 207 * @return {boolean} |
| 208 * @private |
| 209 */ |
| 210 isInDisplayedList_: function(id) { |
| 211 return this.searchTerm ? this.searchResultSet_.has(id) : |
| 212 this.idToNodeMap_[id].parentId == this.selectedId; |
| 213 }, |
| 214 |
| 215 /** |
| 216 * Initializes the search results returned by the API as follows: |
| 217 * - Populates |searchResultSet_| with a mapping of all result ids to |
| 218 * their corresponding result. |
| 219 * - Sets up the |searchResultIndex|. |
| 220 * @param {Array<BookmarkTreeNode>} results |
| 221 * @private |
| 222 */ |
| 223 setupSearchResults_: function(results) { |
| 224 for (var i = 0; i < results.length; i++) { |
| 225 results[i].searchResultIndex = i; |
| 226 results[i].isSelectedItem = false; |
| 227 this.searchResultSet_.add(results[i].id); |
| 228 } |
| 229 |
| 230 this._setDisplayedList(results); |
| 231 }, |
| 232 |
| 233 /** |
| 234 * Select multiple items based on |anchorIndex_| and the selected |
| 235 * item. If |anchorIndex_| is not set, single select the item. |
| 236 * @param {BookmarkTreeNode} item |
| 237 * @private |
| 238 */ |
| 239 selectRange_: function(item) { |
| 240 var startIndex, endIndex; |
| 241 if (this.anchorIndex_ == null) { |
| 242 this.anchorIndex_ = this.getIndexInList_(item); |
| 243 startIndex = this.anchorIndex_; |
| 244 endIndex = this.anchorIndex_; |
| 245 } else { |
| 246 var selectedIndex = this.getIndexInList_(item); |
| 247 startIndex = Math.min(this.anchorIndex_, selectedIndex); |
| 248 endIndex = Math.max(this.anchorIndex_, selectedIndex); |
| 249 } |
| 250 for (var i = startIndex; i <= endIndex; i++) |
| 251 this.set('displayedList.#' + i + '.isSelectedItem', true); |
| 252 }, |
| 253 |
| 254 /** |
| 255 * Selects a single item in the displayedList. |
| 256 * @param {BookmarkTreeNode} item |
| 257 * @private |
| 258 */ |
| 259 selectItem_: function(item) { |
| 260 this.anchorIndex_ = this.getIndexInList_(item); |
| 261 this.set('displayedList.#' + this.anchorIndex_ + '.isSelectedItem', true); |
| 262 }, |
| 263 |
162 ////////////////////////////////////////////////////////////////////////////// | 264 ////////////////////////////////////////////////////////////////////////////// |
163 // bookmarks-store, bookmarks API event listeners: | 265 // bookmarks-store, bookmarks API event listeners: |
164 | 266 |
165 /** | 267 /** |
166 * Callback for when a bookmark node is removed. | 268 * Callback for when a bookmark node is removed. |
167 * If a folder is selected or is an ancestor of a selected folder, the parent | 269 * If a folder is selected or is an ancestor of a selected folder, the parent |
168 * of the removed folder will be selected. | 270 * of the removed folder will be selected. |
169 * @param {string} id The id of the removed bookmark node. | 271 * @param {string} id The id of the removed bookmark node. |
170 * @param {!{index: number, | 272 * @param {!{index: number, |
171 * parentId: string, | 273 * parentId: string, |
172 * node: BookmarkTreeNode}} removeInfo | 274 * node: BookmarkTreeNode}} removeInfo |
173 */ | 275 */ |
174 onBookmarkRemoved_: function(id, removeInfo) { | 276 onBookmarkRemoved_: function(id, removeInfo) { |
175 if (this.isAncestorOfSelected_(this.idToNodeMap_[id])) | 277 chrome.bookmarks.getSubTree(removeInfo.parentId, function(parentNodes) { |
176 this.fire('selected-folder-changed', removeInfo.parentId); | 278 var parentNode = parentNodes[0]; |
| 279 var isAncestor = this.isAncestorOfSelected_(this.idToNodeMap_[id]); |
| 280 var wasInDisplayedList = this.isInDisplayedList_(id); |
177 | 281 |
178 var parentNode = this.idToNodeMap_[removeInfo.parentId]; | 282 // Refresh the parent node's data from the backend as its children's |
179 this.splice(parentNode.path + '.children', removeInfo.index, 1); | 283 // indexes will have changed and Polymer doesn't update them. |
180 this.removeDescendantsFromMap_(id); | 284 this.removeDescendantsFromMap_(id); |
181 BookmarksStore.generatePaths(parentNode, removeInfo.index); | 285 parentNode.path = this.idToNodeMap_[parentNode.id].path; |
| 286 BookmarksStore.generatePaths(parentNode, 0); |
| 287 BookmarksStore.initNodes(parentNode, this.idToNodeMap_); |
| 288 this.set(parentNode.path, parentNode); |
182 | 289 |
183 // Regenerate the search list if its displayed. | 290 // Updates selectedId if the removed node is an ancestor of the current |
184 if (this.searchTerm) | 291 // selected node. |
185 this.updateSearchDisplay_(); | 292 if (isAncestor) |
| 293 this.fire('selected-folder-changed', removeInfo.parentId); |
| 294 |
| 295 // Only update the displayedList if the removed node is in the |
| 296 // displayedList. |
| 297 if (!wasInDisplayedList) |
| 298 return; |
| 299 |
| 300 this.anchorIndex_ = null; |
| 301 |
| 302 // Update the currently displayed list. |
| 303 if (this.searchTerm) { |
| 304 this.updateSearchDisplay_(); |
| 305 } else { |
| 306 if (!isAncestor) |
| 307 this.fire('selected-folder-changed', this.selectedId); |
| 308 |
| 309 this._setDisplayedList(parentNode.children); |
| 310 } |
| 311 }.bind(this)); |
186 }, | 312 }, |
187 | 313 |
188 /** | 314 /** |
189 * Called when the title of a bookmark changes. | 315 * Called when the title of a bookmark changes. |
190 * @param {string} id The id of changed bookmark node. | 316 * @param {string} id The id of changed bookmark node. |
191 * @param {!Object} changeInfo | 317 * @param {!Object} changeInfo |
192 */ | 318 */ |
193 onBookmarkChanged_: function(id, changeInfo) { | 319 onBookmarkChanged_: function(id, changeInfo) { |
194 if (changeInfo.title) | 320 if (changeInfo.title) |
195 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title); | 321 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title); |
(...skipping 19 matching lines...) Expand all Loading... |
215 * Selects the folder specified by the event and deselects the previously | 341 * Selects the folder specified by the event and deselects the previously |
216 * selected folder. | 342 * selected folder. |
217 * @param {CustomEvent} e | 343 * @param {CustomEvent} e |
218 * @private | 344 * @private |
219 */ | 345 */ |
220 onSelectedFolderChanged_: function(e) { | 346 onSelectedFolderChanged_: function(e) { |
221 if (this.searchTerm) | 347 if (this.searchTerm) |
222 this.searchTerm = ''; | 348 this.searchTerm = ''; |
223 | 349 |
224 // Deselect the old folder if defined. | 350 // Deselect the old folder if defined. |
225 if (this.selectedId) | 351 if (this.selectedId && this.idToNodeMap_[this.selectedId]) |
226 this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false); | 352 this.set( |
| 353 this.idToNodeMap_[this.selectedId].path + '.isSelectedFolder', false); |
227 | 354 |
228 // Check if the selected id is that of a defined folder. | 355 // Check if the selected id is that of a defined folder. |
229 var id = /** @type {string} */ (e.detail); | 356 var id = /** @type {string} */ (e.detail); |
230 if (!this.idToNodeMap_[id] || this.idToNodeMap_[id].url) | 357 if (!this.idToNodeMap_[id] || this.idToNodeMap_[id].url) |
231 id = this.rootNode.children[0].id; | 358 id = this.rootNode.children[0].id; |
232 | 359 |
233 var newFolder = this.idToNodeMap_[id]; | 360 var newFolder = this.idToNodeMap_[id]; |
234 this.set(newFolder.path + '.isSelected', true); | 361 this.set(newFolder.path + '.isSelectedFolder', true); |
235 this.selectedId = id; | 362 this.selectedId = id; |
236 }, | 363 }, |
237 | 364 |
238 /** | 365 /** |
239 * Handles events that open and close folders. | 366 * Handles events that open and close folders. |
240 * @param {CustomEvent} e | 367 * @param {CustomEvent} e |
241 * @private | 368 * @private |
242 */ | 369 */ |
243 onFolderOpenChanged_: function(e) { | 370 onFolderOpenChanged_: function(e) { |
244 var folder = this.idToNodeMap_[e.detail.id]; | 371 var folder = this.idToNodeMap_[e.detail.id]; |
245 this.set(folder.path + '.isOpen', e.detail.open); | 372 this.set(folder.path + '.isOpen', e.detail.open); |
246 if (!folder.isOpen && this.isAncestorOfSelected_(folder)) | 373 if (!folder.isOpen && this.isAncestorOfSelected_(folder)) |
247 this.fire('selected-folder-changed', folder.id); | 374 this.fire('selected-folder-changed', folder.id); |
248 }, | 375 }, |
| 376 |
| 377 /** |
| 378 * Selects items according to keyboard behaviours. |
| 379 * @param {CustomEvent} e |
| 380 * @private |
| 381 */ |
| 382 onItemSelected_: function(e) { |
| 383 if (!e.detail.add) |
| 384 this.clearSelectedItems_(); |
| 385 |
| 386 if (e.detail.range) |
| 387 this.selectRange_(e.detail.item); |
| 388 else |
| 389 this.selectItem_(e.detail.item); |
| 390 }, |
249 }); | 391 }); |
250 | 392 |
251 //////////////////////////////////////////////////////////////////////////////// | 393 //////////////////////////////////////////////////////////////////////////////// |
252 // bookmarks-store, static methods: | 394 // bookmarks-store, static methods: |
253 | 395 |
254 /** | 396 /** |
255 * Stores the path from the store to a node inside the node. | 397 * Stores the path from the store to a node inside the node. |
256 * @param {BookmarkTreeNode} bookmarkNode | 398 * @param {BookmarkTreeNode} bookmarkNode |
257 * @param {number} startIndex | 399 * @param {number} startIndex |
258 */ | 400 */ |
259 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) { | 401 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) { |
260 if (!bookmarkNode.children) | 402 if (!bookmarkNode.children) |
261 return; | 403 return; |
262 | 404 |
263 for (var i = startIndex; i < bookmarkNode.children.length; i++) { | 405 for (var i = startIndex; i < bookmarkNode.children.length; i++) { |
264 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i; | 406 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i; |
265 BookmarksStore.generatePaths(bookmarkNode.children[i], 0); | 407 BookmarksStore.generatePaths(bookmarkNode.children[i], 0); |
266 } | 408 } |
267 }; | 409 }; |
268 | 410 |
269 /** | 411 /** |
270 * Initializes the nodes in the bookmarks tree as follows: | 412 * Initializes the nodes in the bookmarks tree as follows: |
271 * - Populates |idToNodeMap_| with a mapping of all node ids to their | 413 * - Populates |idToNodeMap_| with a mapping of all node ids to their |
272 * corresponding BookmarkTreeNode. | 414 * corresponding BookmarkTreeNode. |
273 * - Sets all the nodes to not selected and open by default. | 415 * - Sets all the nodes to not selected and open by default. |
274 * @param {BookmarkTreeNode} bookmarkNode | 416 * @param {BookmarkTreeNode} bookmarkNode |
275 * @param {Object=} idToNodeMap | 417 * @param {Object=} idToNodeMap |
276 */ | 418 */ |
277 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) { | 419 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) { |
| 420 bookmarkNode.isSelectedItem = false; |
278 if (idToNodeMap) | 421 if (idToNodeMap) |
279 idToNodeMap[bookmarkNode.id] = bookmarkNode; | 422 idToNodeMap[bookmarkNode.id] = bookmarkNode; |
280 | 423 |
281 if (bookmarkNode.url) | 424 if (bookmarkNode.url) |
282 return; | 425 return; |
283 | 426 |
284 bookmarkNode.isSelected = false; | 427 bookmarkNode.isSelectedFolder = false; |
285 bookmarkNode.isOpen = true; | 428 bookmarkNode.isOpen = true; |
286 for (var i = 0; i < bookmarkNode.children.length; i++) | 429 for (var i = 0; i < bookmarkNode.children.length; i++) |
287 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap); | 430 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap); |
288 }; | 431 }; |
OLD | NEW |