Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(493)

Side by Side Diff: chrome/browser/resources/md_bookmarks/store.js

Issue 2639453002: [MD Bookmarks] Add Select for Bookmarks. (Closed)
Patch Set: fixed some comments Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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 };
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_bookmarks/sidebar.html ('k') | chrome/test/data/webui/md_bookmarks/item_test.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698