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

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

Issue 2639453002: [MD Bookmarks] Add Select for Bookmarks. (Closed)
Patch Set: restructure 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>} */
tsergeant 2017/01/30 06:39:47 Space after type: @type {} (sorry, I typoed this
jiaxi 2017/01/31 00:37:42 Done.
40 idToNodeMap_: Object, 41 idToNodeMap_: Object,
42
43 anchorIndex_: Number,
44
45 /** @type{Object<string, !boolean>} */
tsergeant 2017/01/30 06:39:47 Space after type here, too
jiaxi 2017/01/31 00:37:42 Since this is a set object now do we need closure
tsergeant 2017/01/31 01:55:35 You should be able to add /** @type {Set<string>}
jiaxi 2017/01/31 03:45:03 Done.
46 searchResultSet_: Object,
41 }, 47 },
42 48
43 /** @private {Object} */ 49 /** @private {Object} */
44 documentListeners_: null, 50 documentListeners_: null,
45 51
46 /** @override */ 52 /** @override */
47 attached: function() { 53 attached: function() {
48 this.documentListeners_ = { 54 this.documentListeners_ = {
49 'selected-folder-changed': this.onSelectedFolderChanged_.bind(this),
50 'folder-open-changed': this.onFolderOpenChanged_.bind(this), 55 'folder-open-changed': this.onFolderOpenChanged_.bind(this),
51 'search-term-changed': this.onSearchTermChanged_.bind(this), 56 'search-term-changed': this.onSearchTermChanged_.bind(this),
57 'select-item': this.onItemSelected_.bind(this),
58 'selected-folder-changed': this.onSelectedFolderChanged_.bind(this),
52 }; 59 };
53 for (var event in this.documentListeners_) 60 for (var event in this.documentListeners_)
54 document.addEventListener(event, this.documentListeners_[event]); 61 document.addEventListener(event, this.documentListeners_[event]);
55 }, 62 },
56 63
57 /** @override */ 64 /** @override */
58 detached: function() { 65 detached: function() {
59 for (var event in this.documentListeners_) 66 for (var event in this.documentListeners_)
60 document.removeEventListener(event, this.documentListeners_[event]); 67 document.removeEventListener(event, this.documentListeners_[event]);
61 }, 68 },
62 69
63 /** 70 /**
64 * Initializes the store with data from the bookmarks API. 71 * Initializes the store with data from the bookmarks API.
65 * Called by app on attached. 72 * Called by app on attached.
66 */ 73 */
67 initializeStore: function() { 74 initializeStore: function() {
68 chrome.bookmarks.getTree(function(results) { 75 chrome.bookmarks.getTree(function(results) {
69 this.setupStore_(results[0]); 76 this.setupStore_(results[0]);
70 }.bind(this)); 77 }.bind(this));
71 // Attach bookmarks API listeners. 78 // Attach bookmarks API listeners.
72 chrome.bookmarks.onRemoved.addListener(this.onBookmarkRemoved_.bind(this)); 79 chrome.bookmarks.onRemoved.addListener(this.onBookmarkRemoved_.bind(this));
73 chrome.bookmarks.onChanged.addListener(this.onBookmarkChanged_.bind(this)); 80 chrome.bookmarks.onChanged.addListener(this.onBookmarkChanged_.bind(this));
74 }, 81 },
75 82
76 ////////////////////////////////////////////////////////////////////////////// 83 ////////////////////////////////////////////////////////////////////////////////
77 // bookmarks-store, private: 84 // bookmarks-store, private:
78 85
79 /** 86 /**
80 * @param {BookmarkTreeNode} rootNode 87 * @param {BookmarkTreeNode} rootNode
81 * @private 88 * @private
82 */ 89 */
83 setupStore_: function(rootNode) { 90 setupStore_: function(rootNode) {
84 this.rootNode = rootNode; 91 this.rootNode = rootNode;
85 this.idToNodeMap_ = {}; 92 this.idToNodeMap_ = {};
86 this.rootNode.path = 'rootNode'; 93 this.rootNode.path = 'rootNode';
87 BookmarksStore.generatePaths(rootNode, 0); 94 BookmarksStore.generatePaths(rootNode, 0);
88 BookmarksStore.initNodes(this.rootNode, this.idToNodeMap_); 95 BookmarksStore.initNodes(this.rootNode, this.idToNodeMap_);
89 96
90 // Initialize the store's fields from the router. 97 // Initialize the store's fields from the router.
91 if (this.$.router.searchTerm) 98 if (this.$.router.searchTerm)
92 this.searchTerm = this.$.router.searchTerm; 99 this.searchTerm = this.$.router.searchTerm;
93 else 100 else
94 this.fire('selected-folder-changed', this.$.router.selectedId); 101 this.fire('selected-folder-changed', this.$.router.selectedId);
95 }, 102 },
96 103
97 /** @private */ 104 /** @private */
98 deselectFolders_: function() { 105 deselectFolders_: function() {
99 this.unlinkPaths('displayedList'); 106 this.unlinkPaths('displayedList');
100 this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false); 107 this.set(
108 this.idToNodeMap_[this.selectedId].path + '.isSelectedFolder', false);
101 this.selectedId = null; 109 this.selectedId = null;
102 }, 110 },
103 111
104 /** 112 /**
105 * @param {BookmarkTreeNode} folder 113 * @param {BookmarkTreeNode} folder
106 * @private 114 * @private
107 * @return {boolean} 115 * @return {boolean}
108 */ 116 */
109 isAncestorOfSelected_: function(folder) { 117 isAncestorOfSelected_: function(folder) {
110 if (!this.selectedId) 118 if (!this.selectedId)
111 return false; 119 return false;
112 120
113 var selectedNode = this.idToNodeMap_[this.selectedId]; 121 var selectedNode = this.idToNodeMap_[this.selectedId];
114 return selectedNode.path.startsWith(folder.path); 122 return selectedNode.path.startsWith(folder.path);
115 }, 123 },
116 124
117 /** @private */ 125 /** @private */
118 updateSearchDisplay_: function() { 126 updateSearchDisplay_: function(searchObserver) {
tsergeant 2017/01/30 06:39:47 - Rename `searchObserver` to `searchTerm`, since t
jiaxi 2017/01/31 00:37:42 We're using this.searchTerm in this function. Will
119 if (!this.rootNode) 127 if (!this.rootNode)
120 return; 128 return;
121 129
122 if (!this.searchTerm) { 130 if (!this.searchTerm) {
123 this.fire('selected-folder-changed', this.rootNode.children[0].id); 131 this.fire('selected-folder-changed', this.rootNode.children[0].id);
124 } else { 132 } else {
125 chrome.bookmarks.search(this.searchTerm, function(results) { 133 chrome.bookmarks.search(this.searchTerm, function(results) {
134 if (searchObserver)
tsergeant 2017/01/30 06:39:47 This is an interesting way to solve this problem.
135 this.anchorIndex_ = undefined;
136 this.clearSelectedItems_();
137 this.searchResultSet_ = {};
tsergeant 2017/01/30 06:39:47 There's a Set class that you should use for this:
jiaxi 2017/01/31 00:37:42 Done.
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(
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_ = undefined;
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(selectedNode.children);
143 }, 162 },
144 163
145 /** 164 /**
146 * Remove all descendants of a given node from the map. 165 * Remove all descendants of a given node from the map.
147 * @param {string} id 166 * @param {string} id
148 * @private 167 * @private
149 */ 168 */
150 removeDescendantsFromMap_: function(id) { 169 removeDescendantsFromMap_: function(id) {
151 var node = this.idToNodeMap_[id]; 170 var node = this.idToNodeMap_[id];
152 if (!node) 171 if (!node)
153 return; 172 return;
154 173
155 if (node.children) { 174 if (node.children) {
156 for (var i = 0; i < node.children.length; i++) 175 for (var i = 0; i < node.children.length; i++)
157 this.removeDescendantsFromMap_(node.children[i].id); 176 this.removeDescendantsFromMap_(node.children[i].id);
158 } 177 }
159 delete this.idToNodeMap_[id]; 178 delete this.idToNodeMap_[id];
160 }, 179 },
161 180
162 ////////////////////////////////////////////////////////////////////////////// 181 /**
163 // bookmarks-store, bookmarks API event listeners: 182 * Remove all selected items in the list.
183 * @private
184 */
185 clearSelectedItems_: function() {
186 if (!this.displayedList)
187 return;
188
189 for (var i = 0; i < this.displayedList.length; i++) {
190 if (!this.displayedList[i].isSelectedItem)
191 continue;
192
193 this.set('displayedList.#' + i + '.isSelectedItem', false);
194 }
195 },
196
197 /**
198 * Return the index in the search result of an item.
199 * @param {BookmarkTreeNode} item
200 * @return {number}
201 * @private
202 */
203 getIndexInList_: function(item) {
204 return this.searchTerm ? item.searchResultIndex : item.index;
205 },
206
207 /**
208 * @param {BookmarkTreeNode} item
209 * @return {boolean}
210 * @private
211 */
212 isInDisplayedList_: function(id) {
213 return this.searchTerm ? this.searchResultSet_[id] :
214 this.idToNodeMap_[id].parentId == this.selectedId;
215 },
216
217 /**
218 * Initializes the search results returned by the API as follows:
219 * - Populates |searchResultSet_| with a mapping of all result ids to
220 * their corresponding result.
221 * - Sets up the |searchResultIndex|.
222 * @param {Array<BookmarkTreeNode>} item
223 * @private
224 */
225 setupSearchResults_: function(results) {
226 for (var i = 0; i < results.length; i++) {
227 results[i].searchResultIndex = i;
228 results[i].isSelectedItem = false;
229 this.searchResultSet_[results[i].id] = true;
230 }
231
232 this._setDisplayedList(results);
233 },
234
235 ////////////////////////////////////////////////////////////////////////////////
236 // bookmarks-store, bookmarks API event listeners:
164 237
165 /** 238 /**
166 * Callback for when a bookmark node is removed. 239 * Callback for when a bookmark node is removed.
167 * If a folder is selected or is an ancestor of a selected folder, the parent 240 * If a folder is selected or is an ancestor of a selected folder, the parent
168 * of the removed folder will be selected. 241 * of the removed folder will be selected.
169 * @param {string} id The id of the removed bookmark node. 242 * @param {string} id The id of the removed bookmark node.
170 * @param {!{index: number, 243 * @param {!{index: number,
171 * parentId: string, 244 * parentId: string,
172 * node: BookmarkTreeNode}} removeInfo 245 * node: BookmarkTreeNode}} removeInfo
173 */ 246 */
174 onBookmarkRemoved_: function(id, removeInfo) { 247 onBookmarkRemoved_: function(id, removeInfo) {
175 if (this.isAncestorOfSelected_(this.idToNodeMap_[id])) { 248 chrome.bookmarks.getSubTree(removeInfo.parentId, function(parentNodes) {
176 this.fire('selected-folder-changed', removeInfo.parentId); 249 var parentNode = parentNodes[0];
177 } 250 var isAncestor = this.isAncestorOfSelected_(this.idToNodeMap_[id]);
251 var isInDisplayedList = this.isInDisplayedList_(id);
178 252
179 var parentNode = this.idToNodeMap_[removeInfo.parentId]; 253 // Updates the tree with the new subtree we got so every node has the
180 this.splice(parentNode.path + '.children', removeInfo.index, 1); 254 // correct index.
tsergeant 2017/01/30 06:39:47 Update this comment to explain that since Polymer
jiaxi 2017/01/31 00:37:42 Done. I moved selectRange and selectItem to the ri
181 this.removeDescendantsFromMap_(id); 255 this.removeDescendantsFromMap_(id);
182 BookmarksStore.generatePaths(parentNode, removeInfo.index); 256 parentNode.path = this.idToNodeMap_[parentNode.id].path;
257 BookmarksStore.generatePaths(parentNode, 0);
258 BookmarksStore.initNodes(parentNode, this.idToNodeMap_);
259 this.set(parentNode.path, parentNode);
183 260
184 // Regenerate the search list if its displayed. 261 // Updates selectedId if the removed node is an ancestor of the current
185 if (this.searchTerm) 262 // selected node.
186 this.updateSearchDisplay_(); 263 if (isAncestor)
264 this.fire('selected-folder-changed', removeInfo.parentId);
265
266 // Only update the displayedList if the removed node is in the
267 // displayedList.
268 if (!isInDisplayedList)
269 return;
270
271 if (this.anchorIndex_ == this.displayedList.length - 1)
272 this.anchorIndex_--;
273
274 if (this.searchTerm) {
275 this.updateSearchDisplay_();
276 } else {
277 if (!isAncestor)
278 this.fire('selected-folder-changed', this.selectedId);
279
280 this._setDisplayedList(parentNode.children);
281
282 this.set(
283 'displayedList.#' + this.anchorIndex_ + '.isSelectedItem', true);
284 }
285 }.bind(this));
187 }, 286 },
188 287
189 /** 288 /**
190 * Called when the title of a bookmark changes. 289 * Called when the title of a bookmark changes.
191 * @param {string} id The id of changed bookmark node. 290 * @param {string} id The id of changed bookmark node.
192 * @param {!Object} changeInfo 291 * @param {!Object} changeInfo
193 */ 292 */
194 onBookmarkChanged_: function(id, changeInfo) { 293 onBookmarkChanged_: function(id, changeInfo) {
195 if (changeInfo.title) 294 if (changeInfo.title)
196 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title); 295 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title);
197 if (changeInfo.url) 296 if (changeInfo.url)
198 this.set(this.idToNodeMap_[id].path + '.url', changeInfo.url); 297 this.set(this.idToNodeMap_[id].path + '.url', changeInfo.url);
199 298
200 if (this.searchTerm) 299 if (this.searchTerm)
201 this.updateSearchDisplay_(); 300 this.updateSearchDisplay_();
202 }, 301 },
203 302
204 ////////////////////////////////////////////////////////////////////////////// 303 /**
205 // bookmarks-store, bookmarks app event listeners: 304 * Select multiple items based on |anchorIndex_| and the selected
305 * item. If |anchorIndex_| is not set, single select the item.
306 * @param {BookmarkTreeNode} item
307 * @private
308 */
309 selectRange_: function(item) {
310 var startIndex, endIndex;
311 if (this.anchorIndex_ == undefined) {
312 this.anchorIndex_ = this.getIndexInList_(item);
313 startIndex = this.anchorIndex_;
314 endIndex = this.anchorIndex_;
315 } else {
316 var selectedIndex = this.getIndexInList_(item);
317 startIndex = Math.min(this.anchorIndex_, selectedIndex);
318 endIndex = Math.max(this.anchorIndex_, selectedIndex);
319 }
320 for (var i = startIndex; i <= endIndex; i++)
321 this.set('displayedList.#' + i + '.isSelectedItem', true);
322 },
323
324 /**
325 * Selects a single item in the displayedList.
326 * @param {BookmarkTreeNode} item
327 * @private
328 */
329 selectItem_: function(item) {
330 this.anchorIndex_ = this.getIndexInList_(item);
331 this.set('displayedList.#' + this.anchorIndex_ + '.isSelectedItem', true);
332 },
333
334 ////////////////////////////////////////////////////////////////////////////////
335 // bookmarks-store, bookmarks app event listeners:
206 336
207 /** 337 /**
208 * @param {Event} e 338 * @param {Event} e
209 * @private 339 * @private
210 */ 340 */
211 onSearchTermChanged_: function(e) { 341 onSearchTermChanged_: function(e) {
212 this.searchTerm = /** @type {string} */ (e.detail); 342 this.searchTerm = /** @type {string} */ (e.detail);
213 }, 343 },
214 344
215 /** 345 /**
216 * Selects the folder specified by the event and deselects the previously 346 * Selects the folder specified by the event and deselects the previously
217 * selected folder. 347 * selected folder.
218 * @param {CustomEvent} e 348 * @param {CustomEvent} e
219 * @private 349 * @private
220 */ 350 */
221 onSelectedFolderChanged_: function(e) { 351 onSelectedFolderChanged_: function(e) {
222 if (this.searchTerm) 352 if (this.searchTerm)
223 this.searchTerm = ''; 353 this.searchTerm = '';
224 354
225 // Deselect the old folder if defined. 355 // Deselect the old folder if defined.
226 if (this.selectedId) 356 if (this.selectedId && this.idToNodeMap_[this.selectedId])
227 this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false); 357 this.set(
358 this.idToNodeMap_[this.selectedId].path + '.isSelectedFolder', false);
228 359
229 // Check if the selected id is that of a defined folder. 360 // Check if the selected id is that of a defined folder.
230 var id = /** @type {string} */ (e.detail); 361 var id = /** @type {string} */ (e.detail);
231 if (!this.idToNodeMap_[id] || this.idToNodeMap_[id].url) 362 if (!this.idToNodeMap_[id] || this.idToNodeMap_[id].url)
232 id = this.rootNode.children[0].id; 363 id = this.rootNode.children[0].id;
233 364
234 var newFolder = this.idToNodeMap_[id]; 365 var newFolder = this.idToNodeMap_[id];
235 this.set(newFolder.path + '.isSelected', true); 366 this.set(newFolder.path + '.isSelectedFolder', true);
236 this.selectedId = id; 367 this.selectedId = id;
237 }, 368 },
238 369
239 /** 370 /**
240 * Handles events that open and close folders. 371 * Handles events that open and close folders.
241 * @param {CustomEvent} e 372 * @param {CustomEvent} e
242 * @private 373 * @private
243 */ 374 */
244 onFolderOpenChanged_: function(e) { 375 onFolderOpenChanged_: function(e) {
245 var folder = this.idToNodeMap_[e.detail.id]; 376 var folder = this.idToNodeMap_[e.detail.id];
246 this.set(folder.path + '.isOpen', e.detail.open); 377 this.set(folder.path + '.isOpen', e.detail.open);
247 if (!folder.isOpen && this.isAncestorOfSelected_(folder)) 378 if (!folder.isOpen && this.isAncestorOfSelected_(folder))
248 this.fire('selected-folder-changed', folder.id); 379 this.fire('selected-folder-changed', folder.id);
249 }, 380 },
381
382 /**
383 * Selects items according to keyboard behaviours.
384 * @param {CustomEvent} e
385 * @private
386 */
387 onItemSelected_: function(e) {
388 if (!e.detail.add)
389 this.clearSelectedItems_();
390
391 if (e.detail.range)
392 this.selectRange_(e.detail.item);
393 else
394 this.selectItem_(e.detail.item);
395 },
250 }); 396 });
251 397
252 //////////////////////////////////////////////////////////////////////////////// 398 ////////////////////////////////////////////////////////////////////////////////
253 // bookmarks-store, static methods: 399 // bookmarks-store, static methods:
254 400
255 /** 401 /**
256 * Stores the path from the store to a node inside the node. 402 * Stores the path from the store to a node inside the node.
257 * @param {BookmarkTreeNode} bookmarkNode 403 * @param {BookmarkTreeNode} bookmarkNode
258 * @param {number} startIndex 404 * @param {number} startIndex
259 */ 405 */
260 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) { 406 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) {
261 if (!bookmarkNode.children) 407 if (!bookmarkNode.children)
262 return; 408 return;
263 409
264 for (var i = startIndex; i < bookmarkNode.children.length; i++) { 410 for (var i = startIndex; i < bookmarkNode.children.length; i++) {
265 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i; 411 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i;
266 BookmarksStore.generatePaths(bookmarkNode.children[i], 0); 412 BookmarksStore.generatePaths(bookmarkNode.children[i], 0);
267 } 413 }
268 }; 414 };
269 415
270 /** 416 /**
271 * Initializes the nodes in the bookmarks tree as follows: 417 * Initializes the nodes in the bookmarks tree as follows:
272 * - Populates |idToNodeMap_| with a mapping of all node ids to their 418 * - Populates |idToNodeMap_| with a mapping of all node ids to their
273 * corresponding BookmarkTreeNode. 419 * corresponding BookmarkTreeNode.
274 * - Sets all the nodes to not selected and open by default. 420 * - Sets all the nodes to not selected and open by default.
275 * @param {BookmarkTreeNode} bookmarkNode 421 * @param {BookmarkTreeNode} bookmarkNode
276 * @param {Object=} idToNodeMap 422 * @param {Object=} idToNodeMap
277 */ 423 */
278 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) { 424 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) {
425 bookmarkNode.isSelectedItem = false;
279 if (idToNodeMap) 426 if (idToNodeMap)
280 idToNodeMap[bookmarkNode.id] = bookmarkNode; 427 idToNodeMap[bookmarkNode.id] = bookmarkNode;
281 428
282 if (bookmarkNode.url) 429 if (bookmarkNode.url)
283 return; 430 return;
284 431
285 bookmarkNode.isSelected = false; 432 bookmarkNode.isSelectedFolder = false;
286 bookmarkNode.isOpen = true; 433 bookmarkNode.isOpen = true;
287 for (var i = 0; i < bookmarkNode.children.length; i++) 434 for (var i = 0; i < bookmarkNode.children.length; i++)
288 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap); 435 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap);
289 }; 436 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698