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

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

Issue 2639453002: [MD Bookmarks] Add Select for Bookmarks. (Closed)
Patch Set: some more clean up Created 3 years, 11 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 * selected folder. 30 * selected folder.
31 * @type {Array<BookmarkTreeNode>} 31 * @type {Array<BookmarkTreeNode>}
32 */ 32 */
33 displayedList: { 33 displayedList: {
34 type: Array, 34 type: Array,
35 notify: true, 35 notify: true,
36 readOnly: true, 36 readOnly: true,
37 }, 37 },
38 38
39 idToNodeMap_: Object, 39 idToNodeMap_: Object,
40
41 anchorIndex_: Number,
42
43 idToSearchResultMap_: Object,
tsergeant 2017/01/25 06:02:13 I recently discovered how to closure annotate some
jiaxi 2017/01/30 03:28:58 Done.
40 }, 44 },
41 45
42 /** @private {Object} */ 46 /** @private {Object} */
43 documentListeners_: null, 47 documentListeners_: null,
44 48
45 /** @override */ 49 /** @override */
46 attached: function() { 50 attached: function() {
47 this.documentListeners_ = { 51 this.documentListeners_ = {
48 'selected-folder-changed': this.onSelectedFolderChanged_.bind(this),
49 'folder-open-changed': this.onFolderOpenChanged_.bind(this), 52 'folder-open-changed': this.onFolderOpenChanged_.bind(this),
50 'search-term-changed': this.onSearchTermChanged_.bind(this), 53 'search-term-changed': this.onSearchTermChanged_.bind(this),
54 'select-item': this.onItemSelected_.bind(this),
55 'selected-folder-changed': this.onSelectedFolderChanged_.bind(this),
51 }; 56 };
52 for (var event in this.documentListeners_) 57 for (var event in this.documentListeners_)
53 document.addEventListener(event, this.documentListeners_[event]); 58 document.addEventListener(event, this.documentListeners_[event]);
54 }, 59 },
55 60
56 /** @override */ 61 /** @override */
57 detached: function() { 62 detached: function() {
58 for (var event in this.documentListeners_) 63 for (var event in this.documentListeners_)
59 document.removeEventListener(event, this.documentListeners_[event]); 64 document.removeEventListener(event, this.documentListeners_[event]);
60 }, 65 },
(...skipping 23 matching lines...) Expand all
84 this.idToNodeMap_ = {}; 89 this.idToNodeMap_ = {};
85 this.rootNode.path = 'rootNode'; 90 this.rootNode.path = 'rootNode';
86 BookmarksStore.generatePaths(rootNode, 0); 91 BookmarksStore.generatePaths(rootNode, 0);
87 BookmarksStore.initNodes(this.rootNode, this.idToNodeMap_); 92 BookmarksStore.initNodes(this.rootNode, this.idToNodeMap_);
88 this.fire('selected-folder-changed', this.rootNode.children[0].id); 93 this.fire('selected-folder-changed', this.rootNode.children[0].id);
89 }, 94 },
90 95
91 /** @private */ 96 /** @private */
92 deselectFolders_: function() { 97 deselectFolders_: function() {
93 this.unlinkPaths('displayedList'); 98 this.unlinkPaths('displayedList');
94 this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false); 99 this.set(
100 this.idToNodeMap_[this.selectedId].path + '.isSelectedFolder', false);
95 this.selectedId = null; 101 this.selectedId = null;
96 }, 102 },
97 103
98 /** 104 /**
99 * @param {BookmarkTreeNode} folder 105 * @param {BookmarkTreeNode} folder
100 * @private 106 * @private
101 * @return {boolean} 107 * @return {boolean}
102 */ 108 */
103 isAncestorOfSelected_: function(folder) { 109 isAncestorOfSelected_: function(folder) {
104 if (!this.selectedId) 110 if (!this.selectedId)
105 return false; 111 return false;
106 112
107 var selectedNode = this.idToNodeMap_[this.selectedId]; 113 var selectedNode = this.idToNodeMap_[this.selectedId];
108 return selectedNode.path.startsWith(folder.path); 114 return selectedNode.path.startsWith(folder.path);
109 }, 115 },
110 116
111 /** @private */ 117 /** @private */
112 updateSearchDisplay_: function() { 118 updateSearchDisplay_: function() {
113 if (this.searchTerm == '') { 119 if (this.searchTerm == '') {
114 this.fire('selected-folder-changed', this.rootNode.children[0].id); 120 this.fire('selected-folder-changed', this.rootNode.children[0].id);
115 } else { 121 } else {
116 chrome.bookmarks.search(this.searchTerm, function(results) { 122 chrome.bookmarks.search(this.searchTerm, function(results) {
123 this.clearSelectedItems_();
124 this.anchorIndex_ = undefined;
125 this.idToSearchResultMap_ = {};
126
117 if (this.selectedId) 127 if (this.selectedId)
118 this.deselectFolders_(); 128 this.deselectFolders_();
119 129
120 this._setDisplayedList(results); 130 this.setupSearchResults_(results);
121 }.bind(this)); 131 }.bind(this));
122 } 132 }
123 }, 133 },
124 134
125 /** @private */ 135 /** @private */
126 updateSelectedDisplay_: function() { 136 updateSelectedDisplay_: function() {
127 // Don't change to the selected display if ID was cleared. 137 // Don't change to the selected display if ID was cleared.
128 if (!this.selectedId) 138 if (!this.selectedId)
129 return; 139 return;
130 140
141 this.clearSelectedItems_();
142 this.anchorIndex_ = undefined;
143
131 var selectedNode = this.idToNodeMap_[this.selectedId]; 144 var selectedNode = this.idToNodeMap_[this.selectedId];
132 this.linkPaths('displayedList', selectedNode.path + '.children'); 145 this.linkPaths('displayedList', selectedNode.path + '.children');
133 this._setDisplayedList(selectedNode.children); 146 this._setDisplayedList(selectedNode.children);
134 }, 147 },
135 148
136 /** 149 /**
137 * Remove all descendants of a given node from the map. 150 * Remove all descendants of a given node from the map.
138 * @param {string} id 151 * @param {string} id
139 * @private 152 * @private
140 */ 153 */
141 removeDescendantsFromMap_: function(id) { 154 removeDescendantsFromMap_: function(id) {
142 var node = this.idToNodeMap_[id]; 155 var node = this.idToNodeMap_[id];
143 if (!node) 156 if (!node)
144 return; 157 return;
145 158
146 if (node.children) { 159 if (node.children) {
147 for (var i = 0; i < node.children.length; i++) 160 for (var i = 0; i < node.children.length; i++)
148 this.removeDescendantsFromMap_(node.children[i].id); 161 this.removeDescendantsFromMap_(node.children[i].id);
149 } 162 }
150 delete this.idToNodeMap_[id]; 163 delete this.idToNodeMap_[id];
151 }, 164 },
152 165
166 /**
167 * Remove all selected items in the list.
168 * @private
169 */
170 clearSelectedItems_: function() {
171 if (!this.displayedList)
172 return;
173
174 for (var i = 0; i < this.displayedList.length; i++) {
175 if (!this.displayedList[i].isSelectedItem)
176 continue;
177
178 this.set('displayedList.#' + i + '.isSelectedItem', false);
179 }
180 },
181
182 /**
183 * Return the index in the search result of an item.
184 * @param {BookmarkTreeNode} item
185 * @return {number}
186 * @private
187 */
188 getIndexInList_: function(item) {
189 return this.searchTerm ? item.searchResultIndex : item.index;
190 },
191
192 /**
193 * @param {BookmarkTreeNode} item
194 * @return {boolean}
195 * @private
196 */
197 isInDisplayedList_: function(id) {
198 return this.searchTerm ? this.idToSearchResultMap_[id] :
tsergeant 2017/01/25 06:02:13 This doesn't always return a boolean? Sometimes it
jiaxi 2017/01/30 03:28:58 Discussed offline, changing this map into a set.
199 this.idToNodeMap_[id].parentId == this.selectedId;
200 },
201
202 /**
203 * Initializes the search results returned by the API as follows:
204 * - Populates |idToSearchResultMap_| with a mapping of all result ids to
205 * their corresponding result.
206 * - Sets up the |searchResultIndex|.
207 * @param {array<BookmarkTreeNode>} item
tsergeant 2017/01/25 06:02:13 The Array type has an uppercase 'A'
jiaxi 2017/01/30 03:28:59 Done.
208 * @private
209 */
210 setupSearchResults_: function(results) {
211 for (var i = 0; i < results.length; i++) {
212 results[i].searchResultIndex = i;
213 this.idToSearchResultMap_[results[i].id] = results[i];
214 }
tsergeant 2017/01/25 06:02:13 Can you set `isSelectedItem = false` in here? It's
jiaxi 2017/01/30 03:28:58 Done.
215
216 this._setDisplayedList(results);
217 },
218
153 //////////////////////////////////////////////////////////////////////////////// 219 ////////////////////////////////////////////////////////////////////////////////
154 // bookmarks-store, bookmarks API event listeners: 220 // bookmarks-store, bookmarks API event listeners:
155 221
156 /** 222 /**
157 * Callback for when a bookmark node is removed. 223 * Callback for when a bookmark node is removed.
158 * If a folder is selected or is an ancestor of a selected folder, the parent 224 * If a folder is selected or is an ancestor of a selected folder, the parent
159 * of the removed folder will be selected. 225 * of the removed folder will be selected.
160 * @param {string} id The id of the removed bookmark node. 226 * @param {string} id The id of the removed bookmark node.
161 * @param {!{index: number, 227 * @param {!{index: number,
162 * parentId: string, 228 * parentId: string,
163 * node: BookmarkTreeNode}} removeInfo 229 * node: BookmarkTreeNode}} removeInfo
164 */ 230 */
165 onBookmarkRemoved_: function(id, removeInfo) { 231 onBookmarkRemoved_: function(id, removeInfo) {
166 if (this.isAncestorOfSelected_(this.idToNodeMap_[id])) 232 chrome.bookmarks.getSubTree(removeInfo.parentId, function(parentNodes) {
167 this.fire('selected-folder-changed', removeInfo.parentId); 233 var parentNode = parentNodes[0];
234 var isAncestor = this.isAncestorOfSelected_(this.idToNodeMap_[id]);
235 var isInDisplayedList = this.isInDisplayedList_(id);
168 236
169 var parentNode = this.idToNodeMap_[removeInfo.parentId]; 237 // Update the tree.
tsergeant 2017/01/25 06:02:13 Updates the tree...for what reason? The fact that
jiaxi 2017/01/30 03:28:58 Done.
170 this.splice(parentNode.path + '.children', removeInfo.index, 1); 238 this.removeDescendantsFromMap_(id);
171 this.removeDescendantsFromMap_(id); 239 parentNode.path = this.idToNodeMap_[parentNode.id].path;
172 BookmarksStore.generatePaths(parentNode, removeInfo.index); 240 BookmarksStore.generatePaths(parentNode, 0);
241 BookmarksStore.initNodes(parentNode, this.idToNodeMap_);
242 this.set(parentNode.path, parentNode)
173 243
174 // Regenerate the search list if its displayed. 244 // Update selectedId if the removed node is an ancestor of the current
175 if (this.searchTerm) 245 // selected node.
176 this.updateSearchDisplay_(); 246 if (isAncestor)
247 this.fire('selected-folder-changed', removeInfo.parentId);
248
249 // Only update the displayedList if the removed node is in the
250 // displayedList.
251 if (!isInDisplayedList)
252 return;
253
254 if (this.anchorIndex_ == this.displayedList.length - 1)
255 this.anchorIndex_--;
256
257 if (this.searchTerm) {
258 chrome.bookmarks.search(this.searchTerm, function(results) {
tsergeant 2017/01/25 06:02:13 This spooks me a little because there are now two
jiaxi 2017/01/30 03:28:58 I can't think of a good way to using promise to re
259 delete this.idToSearchResultMap_[id];
260 this.setupSearchResults_(results);
261 this.set(
262 'displayedList.#' + this.anchorIndex_ + '.isSelectedItem', true);
263 }.bind(this));
264 } else {
265 this._setDisplayedList(parentNode.children);
266
267 this.set(
268 'displayedList.#' + this.anchorIndex_ + '.isSelectedItem', true);
269 }
270 }.bind(this));
177 }, 271 },
178 272
179 /** 273 /**
180 * Called when the title of a bookmark changes. 274 * Called when the title of a bookmark changes.
181 * @param {string} id The id of changed bookmark node. 275 * @param {string} id The id of changed bookmark node.
182 * @param {!Object} changeInfo 276 * @param {!Object} changeInfo
183 */ 277 */
184 onBookmarkChanged_: function(id, changeInfo) { 278 onBookmarkChanged_: function(id, changeInfo) {
185 if (changeInfo.title) 279 if (changeInfo.title)
186 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title); 280 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title);
(...skipping 19 matching lines...) Expand all
206 * Selects the folder specified by the event and deselects the previously 300 * Selects the folder specified by the event and deselects the previously
207 * selected folder. 301 * selected folder.
208 * @param {CustomEvent} e 302 * @param {CustomEvent} e
209 * @private 303 * @private
210 */ 304 */
211 onSelectedFolderChanged_: function(e) { 305 onSelectedFolderChanged_: function(e) {
212 if (this.searchTerm) 306 if (this.searchTerm)
213 this.searchTerm = ''; 307 this.searchTerm = '';
214 308
215 // Deselect the old folder if defined. 309 // Deselect the old folder if defined.
216 if (this.selectedId) 310 if (this.selectedId && this.idToNodeMap_[this.selectedId])
217 this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false); 311 this.set(
312 this.idToNodeMap_[this.selectedId].path + '.isSelectedFolder', false);
218 313
219 var selectedId = /** @type {string} */ (e.detail); 314 var selectedId = /** @type {string} */ (e.detail);
220 var newFolder = this.idToNodeMap_[selectedId]; 315 var newFolder = this.idToNodeMap_[selectedId];
221 this.set(newFolder.path + '.isSelected', true); 316 this.set(newFolder.path + '.isSelectedFolder', true);
222 this.selectedId = selectedId; 317 this.selectedId = selectedId;
223 }, 318 },
224 319
225 /** 320 /**
226 * Handles events that open and close folders. 321 * Handles events that open and close folders.
227 * @param {CustomEvent} e 322 * @param {CustomEvent} e
228 * @private 323 * @private
229 */ 324 */
230 onFolderOpenChanged_: function(e) { 325 onFolderOpenChanged_: function(e) {
231 var folder = this.idToNodeMap_[e.detail.id]; 326 var folder = this.idToNodeMap_[e.detail.id];
232 this.set(folder.path + '.isOpen', e.detail.open); 327 this.set(folder.path + '.isOpen', e.detail.open);
233 if (!folder.isOpen && this.isAncestorOfSelected_(folder)) 328 if (!folder.isOpen && this.isAncestorOfSelected_(folder))
234 this.fire('selected-folder-changed', folder.id); 329 this.fire('selected-folder-changed', folder.id);
235 }, 330 },
331
332 /**
333 * Select a single item in the list.
334 * @param {BookmarkTreeNode} item
335 * @private
336 */
337 onSingleItemSelected_: function(item) {
338 this.clearSelectedItems_();
339 this.anchorIndex_ = this.getIndexInList_(item);
340 this.set(
341 'displayedList.#' + this.anchorIndex_ + '.isSelectedItem',
342 true);
343 },
344
345 /**
346 * Select multiple items based on |anchorIndex_| and the selected
347 * item. If |anchorIndex_| is not set, single select the item.
348 * @param {BookmarkTreeNode} item
349 * @private
350 */
351 onMultipleItemsShiftSelected_: function(item) {
352 this.clearSelectedItems_();
353 var startIndex, endIndex;
354 if (this.anchorIndex_ == undefined) {
355 this.anchorIndex_ = this.getIndexInList_(item);
356 startIndex = this.anchorIndex_;
357 endIndex = this.anchorIndex_;
358 } else {
359 var selectedIndex = this.getIndexInList_(item);
360 startIndex = Math.min(this.anchorIndex_, selectedIndex);
361 endIndex = Math.max(this.anchorIndex_, selectedIndex);
362 }
363 for (var i = startIndex; i <= endIndex; i++)
364 this.set('displayedList.#' + i + '.isSelectedItem', true);
365 },
366
367 /**
368 * Select multiple items with the index of the last elected item as
369 * |anchorIndex_|.
370 * @param {BookmarkTreeNode} item
371 * @private
372 */
373 onMultipleItemsCtrlSelected_: function(item) {
374 this.anchorIndex_ = this.getIndexInList_(item);
375 this.set(
376 'displayedList.#' + this.anchorIndex_ + '.isSelectedItem',
377 true);
378 },
379
380 /**
381 * Select item according to keyboard behaviours.
382 * @param {CustomEvent} e
383 * @private
384 */
385 onItemSelected_: function(e) {
tsergeant 2017/01/25 06:02:13 Since store is supposed to be isolated from UI, I
jiaxi 2017/01/30 03:28:58 The old bmm doesn't support Ctrl and Shift operati
386 if (e.detail.shiftKey)
387 this.onMultipleItemsShiftSelected_(e.detail.item);
388 else if (e.detail.ctrlKey)
389 this.onMultipleItemsCtrlSelected_(e.detail.item);
390 else
391 this.onSingleItemSelected_(e.detail.item);
392 },
236 }); 393 });
237 394
238 //////////////////////////////////////////////////////////////////////////////// 395 ////////////////////////////////////////////////////////////////////////////////
239 // bookmarks-store, static methods: 396 // bookmarks-store, static methods:
240 397
241 /** 398 /**
242 * Stores the path from the store to a node inside the node. 399 * Stores the path from the store to a node inside the node.
243 * @param {BookmarkTreeNode} bookmarkNode 400 * @param {BookmarkTreeNode} bookmarkNode
244 * @param {number} startIndex 401 * @param {number} startIndex
245 */ 402 */
246 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) { 403 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) {
247 if (!bookmarkNode.children) 404 if (!bookmarkNode.children)
248 return; 405 return;
249 406
250 for (var i = startIndex; i < bookmarkNode.children.length; i++) { 407 for (var i = startIndex; i < bookmarkNode.children.length; i++) {
251 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i; 408 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i;
252 BookmarksStore.generatePaths(bookmarkNode.children[i], 0); 409 BookmarksStore.generatePaths(bookmarkNode.children[i], 0);
253 } 410 }
254 }; 411 };
255 412
256 /** 413 /**
257 * Initializes the nodes in the bookmarks tree as follows: 414 * Initializes the nodes in the bookmarks tree as follows:
258 * - Populates |idToNodeMap_| with a mapping of all node ids to their 415 * - Populates |idToNodeMap_| with a mapping of all node ids to their
259 * corresponding BookmarkTreeNode. 416 * corresponding BookmarkTreeNode.
260 * - Sets all the nodes to not selected and open by default. 417 * - Sets all the nodes to not selected and open by default.
261 * @param {BookmarkTreeNode} bookmarkNode 418 * @param {BookmarkTreeNode} bookmarkNode
262 * @param {Object=} idToNodeMap 419 * @param {Object=} idToNodeMap
263 */ 420 */
264 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) { 421 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) {
422 bookmarkNode.isSelectedItem = false;
265 if (idToNodeMap) 423 if (idToNodeMap)
266 idToNodeMap[bookmarkNode.id] = bookmarkNode; 424 idToNodeMap[bookmarkNode.id] = bookmarkNode;
267 425
268 if (bookmarkNode.url) 426 if (bookmarkNode.url)
269 return; 427 return;
270 428
271 bookmarkNode.isSelected = false; 429 bookmarkNode.isSelectedFolder = false;
272 bookmarkNode.isOpen = true; 430 bookmarkNode.isOpen = true;
273 for (var i = 0; i < bookmarkNode.children.length; i++) 431 for (var i = 0; i < bookmarkNode.children.length; i++)
274 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap); 432 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap);
275 }; 433 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698