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

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

Issue 2639453002: [MD Bookmarks] Add Select for Bookmarks. (Closed)
Patch Set: comment 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 prevSelectedItemIndex_: Number,
40 }, 42 },
41 43
42 /** @private {Object} */ 44 /** @private {Object} */
43 documentListeners_: null, 45 documentListeners_: null,
44 46
45 /** @override */ 47 /** @override */
46 attached: function() { 48 attached: function() {
47 this.documentListeners_ = { 49 this.documentListeners_ = {
48 'selected-folder-changed': this.onSelectedFolderChanged_.bind(this), 50 'ctrl-select-multiple-items':
51 this.onMultipleItemsCtrlSelected_.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-single-item': this.onSingleItemSelected_.bind(this),
55 'selected-folder-changed': this.onSelectedFolderChanged_.bind(this),
56 'shift-select-multiple-items':
57 this.onMultipleItemsShiftSelected_.bind(this),
51 }; 58 };
52 for (var event in this.documentListeners_) 59 for (var event in this.documentListeners_)
53 document.addEventListener(event, this.documentListeners_[event]); 60 document.addEventListener(event, this.documentListeners_[event]);
54 }, 61 },
55 62
56 /** @override */ 63 /** @override */
57 detached: function() { 64 detached: function() {
58 for (var event in this.documentListeners_) 65 for (var event in this.documentListeners_)
59 document.removeEventListener(event, this.documentListeners_[event]); 66 document.removeEventListener(event, this.documentListeners_[event]);
60 }, 67 },
61 68
62 /** 69 /**
63 * Initializes the store with data from the bookmarks API. 70 * Initializes the store with data from the bookmarks API.
64 * Called by app on attached. 71 * Called by app on attached.
65 */ 72 */
66 initializeStore: function() { 73 initializeStore: function() {
67 chrome.bookmarks.getTree(function(results) { 74 chrome.bookmarks.getTree(function(results) {
68 this.setupStore_(results[0]); 75 this.setupStore_(results[0]);
69 }.bind(this)); 76 }.bind(this));
70 // Attach bookmarks API listeners. 77 // Attach bookmarks API listeners.
71 chrome.bookmarks.onRemoved.addListener(this.onBookmarkRemoved_.bind(this)); 78 chrome.bookmarks.onRemoved.addListener(this.onBookmarkRemoved_.bind(this));
72 chrome.bookmarks.onChanged.addListener(this.onBookmarkChanged_.bind(this)); 79 chrome.bookmarks.onChanged.addListener(this.onBookmarkChanged_.bind(this));
73 }, 80 },
74 81
75 //////////////////////////////////////////////////////////////////////////////// 82 //////////////////////////////////////////////////////////////////////////////
76 // bookmarks-store, private: 83 // bookmarks-store, private:
77 84
78 /** 85 /**
79 * @param {BookmarkTreeNode} rootNode 86 * @param {BookmarkTreeNode} rootNode
80 * @private 87 * @private
81 */ 88 */
82 setupStore_: function(rootNode) { 89 setupStore_: function(rootNode) {
83 this.rootNode = rootNode; 90 this.rootNode = rootNode;
84 this.idToNodeMap_ = {}; 91 this.idToNodeMap_ = {};
85 this.rootNode.path = 'rootNode'; 92 this.rootNode.path = 'rootNode';
86 BookmarksStore.generatePaths(rootNode, 0); 93 BookmarksStore.generatePaths(rootNode, 0);
87 BookmarksStore.initNodes(this.rootNode, this.idToNodeMap_); 94 BookmarksStore.initNodes(this.rootNode, this.idToNodeMap_);
88 this.fire('selected-folder-changed', this.rootNode.children[0].id); 95 this.fire('selected-folder-changed', this.rootNode.children[0].id);
89 }, 96 },
90 97
91 /** @private */ 98 /** @private */
92 deselectFolders_: function() { 99 deselectFolders_: function() {
93 this.unlinkPaths('displayedList'); 100 this.unlinkPaths('displayedList');
94 this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false); 101 this.set(
102 this.idToNodeMap_[this.selectedId].path + '.isSelectedFolder', false);
95 this.selectedId = null; 103 this.selectedId = null;
96 }, 104 },
97 105
98 /** 106 /**
99 * @param {BookmarkTreeNode} folder 107 * @param {BookmarkTreeNode} folder
100 * @private 108 * @private
101 * @return {boolean} 109 * @return {boolean}
102 */ 110 */
103 isAncestorOfSelected_: function(folder) { 111 isAncestorOfSelected_: function(folder) {
104 if (!this.selectedId) 112 if (!this.selectedId)
105 return false; 113 return false;
106 114
107 var selectedNode = this.idToNodeMap_[this.selectedId]; 115 var selectedNode = this.idToNodeMap_[this.selectedId];
108 return selectedNode.path.startsWith(folder.path); 116 return selectedNode.path.startsWith(folder.path);
109 }, 117 },
110 118
111 /** @private */ 119 /** @private */
112 updateSearchDisplay_: function() { 120 updateSearchDisplay_: function() {
113 if (this.searchTerm == '') { 121 if (this.searchTerm == '') {
114 this.fire('selected-folder-changed', this.rootNode.children[0].id); 122 this.fire('selected-folder-changed', this.rootNode.children[0].id);
115 } else { 123 } else {
116 chrome.bookmarks.search(this.searchTerm, function(results) { 124 chrome.bookmarks.search(this.searchTerm, function(results) {
125 if (this.displayedList)
126 this.clearSelectedItems_();
127
128 this.prevSelectedItemIndex_ = undefined;
calamity 2017/01/17 06:12:22 Can this and the if clause above move into this.cl
jiaxi 2017/01/20 04:51:09 The prevSelectedItemIndex_ cannot be reset in this
calamity 2017/01/23 00:44:27 Acknowledged.
129
117 if (this.selectedId) 130 if (this.selectedId)
118 this.deselectFolders_(); 131 this.deselectFolders_();
119 132
120 this._setDisplayedList(results); 133 var searchedList = [];
134 for (var i = 0; i < results.length; i++) {
135 searchedList.push(this.idToNodeMap_[results[i].id]);
136 this.linkPaths(
137 'displayedList.#' + i, this.idToNodeMap_[results[i].id].path);
138 }
calamity 2017/01/18 03:25:37 Can we just set isSelected on the nodes inside res
jiaxi 2017/01/20 04:51:09 There's a bunch of changes around this part of the
139 this._setDisplayedList(searchedList);
121 }.bind(this)); 140 }.bind(this));
122 } 141 }
123 }, 142 },
124 143
125 /** @private */ 144 /** @private */
126 updateSelectedDisplay_: function() { 145 updateSelectedDisplay_: function() {
127 // Don't change to the selected display if ID was cleared. 146 // Don't change to the selected display if ID was cleared.
128 if (!this.selectedId) 147 if (!this.selectedId)
129 return; 148 return;
130 149
150 if (this.displayedList)
151 this.clearSelectedItems_();
152
153 this.prevSelectedItemIndex_ = undefined;
154
131 var selectedNode = this.idToNodeMap_[this.selectedId]; 155 var selectedNode = this.idToNodeMap_[this.selectedId];
132 this.linkPaths('displayedList', selectedNode.path + '.children'); 156 this.linkPaths('displayedList', selectedNode.path + '.children');
133 this._setDisplayedList(selectedNode.children); 157 this._setDisplayedList(selectedNode.children);
134 }, 158 },
135 159
136 /** 160 /**
137 * Remove all descendants of a given node from the map. 161 * Remove all descendants of a given node from the map.
138 * @param {string} id 162 * @param {string} id
139 * @private 163 * @private
140 */ 164 */
141 removeDescendantsFromMap_: function(id) { 165 removeDescendantsFromMap_: function(id) {
142 var node = this.idToNodeMap_[id]; 166 var node = this.idToNodeMap_[id];
143 if (!node) 167 if (!node)
144 return; 168 return;
145 169
146 if (node.children) { 170 if (node.children) {
147 for (var i = 0; i < node.children.length; i++) 171 for (var i = 0; i < node.children.length; i++)
148 this.removeDescendantsFromMap_(node.children[i].id); 172 this.removeDescendantsFromMap_(node.children[i].id);
149 } 173 }
150 delete this.idToNodeMap_[id]; 174 delete this.idToNodeMap_[id];
151 }, 175 },
152 176
153 //////////////////////////////////////////////////////////////////////////////// 177 /**
154 // bookmarks-store, bookmarks API event listeners: 178 * Remove all selected items in the list.
179 * @private
180 */
181 clearSelectedItems_: function() {
182 for (var i = 0; i < this.displayedList.length; i++) {
183 if (this.displayedList[i].isSelected) {
calamity 2017/01/18 03:25:37 Invert and early continue.
jiaxi 2017/01/20 04:51:09 Done.
184 this.set(
185 this.idToNodeMap_[this.displayedList[i].id].path +
186 '.isSelected',
187 false);
188 }
189 }
190 },
191
192 /**
193 * Return the index in the search result of an item.
194 * @param {BookmarkTreeNode} item
195 * @return {number}
196 * @private
197 */
198 getSelectedIndex_: function(item) {
calamity 2017/01/17 06:12:22 It would be better to add the index to the Bookmar
jiaxi 2017/01/20 04:51:09 Done.
199 if (this.searchTerm == '')
200 return item.index;
201
202 for (var i = 0; i < this.displayedList.length; i++) {
203 if (this.displayedList[i].id == item.id)
204 return i;
205 }
206 },
207 //////////////////////////////////////////////////////////////////////////////
208 //////// bookmarks-store, bookmarks API event listeners:
calamity 2017/01/17 06:12:22 clang-format janked this up. Delete back to 2 slas
jiaxi 2017/01/20 04:51:09 Done.
155 209
156 /** 210 /**
157 * Callback for when a bookmark node is removed. 211 * Callback for when a bookmark node is removed.
158 * If a folder is selected or is an ancestor of a selected folder, the parent 212 * If a folder is selected or is an ancestor of a selected folder, the parent
159 * of the removed folder will be selected. 213 * of the removed folder will be selected.
160 * @param {string} id The id of the removed bookmark node. 214 * @param {string} id The id of the removed bookmark node.
161 * @param {!{index: number, 215 * @param {!{index: number,
162 * parentId: string, 216 * parentId: string,
163 * node: BookmarkTreeNode}} removeInfo 217 * node: BookmarkTreeNode}} removeInfo
164 */ 218 */
(...skipping 20 matching lines...) Expand all
185 onBookmarkChanged_: function(id, changeInfo) { 239 onBookmarkChanged_: function(id, changeInfo) {
186 if (changeInfo.title) 240 if (changeInfo.title)
187 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title); 241 this.set(this.idToNodeMap_[id].path + '.title', changeInfo.title);
188 if (changeInfo.url) 242 if (changeInfo.url)
189 this.set(this.idToNodeMap_[id].path + '.url', changeInfo.url); 243 this.set(this.idToNodeMap_[id].path + '.url', changeInfo.url);
190 244
191 if (this.searchTerm) 245 if (this.searchTerm)
192 this.updateSearchDisplay_(); 246 this.updateSearchDisplay_();
193 }, 247 },
194 248
195 //////////////////////////////////////////////////////////////////////////////// 249 //////////////////////////////////////////////////////////////////////////////
196 // bookmarks-store, bookmarks app event listeners: 250 // bookmarks-store, bookmarks app event listeners:
197 251
198 /** 252 /**
199 * @param {Event} e 253 * @param {Event} e
200 * @private 254 * @private
201 */ 255 */
202 onSearchTermChanged_: function(e) { 256 onSearchTermChanged_: function(e) {
203 this.searchTerm = /** @type {string} */ (e.detail); 257 this.searchTerm = /** @type {string} */ (e.detail);
204 }, 258 },
205 259
206 /** 260 /**
207 * Selects the folder specified by the event and deselects the previously 261 * Selects the folder specified by the event and deselects the previously
208 * selected folder. 262 * selected folder.
209 * @param {CustomEvent} e 263 * @param {CustomEvent} e
210 * @private 264 * @private
211 */ 265 */
212 onSelectedFolderChanged_: function(e) { 266 onSelectedFolderChanged_: function(e) {
213 if (this.searchTerm) 267 if (this.searchTerm)
214 this.searchTerm = ''; 268 this.searchTerm = '';
215 269
216 // Deselect the old folder if defined. 270 // Deselect the old folder if defined.
217 if (this.selectedId) 271 if (this.selectedId)
218 this.set(this.idToNodeMap_[this.selectedId].path + '.isSelected', false); 272 this.set(
273 this.idToNodeMap_[this.selectedId].path + '.isSelectedFolder', false);
219 274
220 var selectedId = /** @type {string} */ (e.detail); 275 var selectedId = /** @type {string} */ (e.detail);
221 var newFolder = this.idToNodeMap_[selectedId]; 276 var newFolder = this.idToNodeMap_[selectedId];
222 this.set(newFolder.path + '.isSelected', true); 277 this.set(newFolder.path + '.isSelectedFolder', true);
223 this.selectedId = selectedId; 278 this.selectedId = selectedId;
224 }, 279 },
225 280
226 /** 281 /**
227 * Handles events that open and close folders. 282 * Handles events that open and close folders.
228 * @param {CustomEvent} e 283 * @param {CustomEvent} e
229 * @private 284 * @private
230 */ 285 */
231 onFolderOpenChanged_: function(e) { 286 onFolderOpenChanged_: function(e) {
232 var folder = this.idToNodeMap_[e.detail.id]; 287 var folder = this.idToNodeMap_[e.detail.id];
233 this.set(folder.path + '.isOpen', e.detail.open); 288 this.set(folder.path + '.isOpen', e.detail.open);
234 if (!folder.isOpen && this.isAncestorOfSelected_(folder)) 289 if (!folder.isOpen && this.isAncestorOfSelected_(folder))
235 this.fire('selected-folder-changed', folder.id); 290 this.fire('selected-folder-changed', folder.id);
236 }, 291 },
292
293 /**
294 * Select a single item in the list.
295 * @param {CustomEvent} e
296 * @private
297 */
298 onSingleItemSelected_: function(e) {
299 this.clearSelectedItems_();
300 this.set(this.idToNodeMap_[e.detail.item.id].path + '.isSelected', true);
301 this.prevSelectedItemIndex_ = this.getSelectedIndex_(e.detail.item);
calamity 2017/01/17 06:12:22 What happens if the item at prevSelectedItemIndex_
jiaxi 2017/01/20 04:51:09 The prevSelectedItemIndex_ will not change unless
302 },
303
304 /**
305 * Select multiple items based on |prevSelectedItemIndex_| and the selected
306 * item. If |prevSelectedItemIndex_| is not set, single select the item.
307 * @param {CustomEvent} e
308 * @private
309 */
310 onMultipleItemsShiftSelected_: function(e) {
311 this.clearSelectedItems_();
312 var startIndex, endIndex;
313 if (this.prevSelectedItemIndex_ == undefined) {
314 this.prevSelectedItemIndex_ = this.getSelectedIndex_(e.detail.item);
315 startIndex = this.prevSelectedItemIndex_;
316 endIndex = this.prevSelectedItemIndex_;
317 } else {
318 var currIndex = this.getSelectedIndex_(e.detail.item);
319 startIndex = Math.min(this.prevSelectedItemIndex_, currIndex);
320 endIndex = Math.max(this.prevSelectedItemIndex_, currIndex);
321 }
322 for (var i = startIndex; i <= endIndex; i++)
calamity 2017/01/17 06:12:22 Braces around non-single line clauses.
jiaxi 2017/01/20 04:51:09 Done.
323 this.set(
324 this.idToNodeMap_[this.displayedList[i].id].path +
325 '.isSelected',
326 true);
327 },
328
329 /**
330 * Select multiple items with the index of the last elected item as
331 * |prevSelectedItemIndex_|.
332 * @param {CustomEvent} e
333 * @private
334 */
335 onMultipleItemsCtrlSelected_: function(e) {
336 this.set(this.idToNodeMap_[e.detail.item.id].path + '.isSelected', true);
337 this.prevSelectedItemIndex_ = this.getSelectedIndex_(e.detail.item);
338 },
237 }); 339 });
238 340
239 //////////////////////////////////////////////////////////////////////////////// 341 ////////////////////////////////////////////////////////////////////////////////
240 // bookmarks-store, static methods: 342 // bookmarks-store, static methods:
241 343
242 /** 344 /**
243 * Stores the path from the store to a node inside the node. 345 * Stores the path from the store to a node inside the node.
244 * @param {BookmarkTreeNode} bookmarkNode 346 * @param {BookmarkTreeNode} bookmarkNode
245 * @param {number} startIndex 347 * @param {number} startIndex
246 */ 348 */
247 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) { 349 BookmarksStore.generatePaths = function(bookmarkNode, startIndex) {
248 if (!bookmarkNode.children) 350 if (!bookmarkNode.children)
249 return; 351 return;
250 352
251 for (var i = startIndex; i < bookmarkNode.children.length; i++) { 353 for (var i = startIndex; i < bookmarkNode.children.length; i++) {
252 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i; 354 bookmarkNode.children[i].path = bookmarkNode.path + '.children.#' + i;
253 BookmarksStore.generatePaths(bookmarkNode.children[i], 0); 355 BookmarksStore.generatePaths(bookmarkNode.children[i], 0);
254 } 356 }
255 }; 357 };
256 358
257 /** 359 /**
258 * Initializes the nodes in the bookmarks tree as follows: 360 * Initializes the nodes in the bookmarks tree as follows:
259 * - Populates |idToNodeMap_| with a mapping of all node ids to their 361 * - Populates |idToNodeMap_| with a mapping of all node ids to their
260 * corresponding BookmarkTreeNode. 362 * corresponding BookmarkTreeNode.
261 * - Sets all the nodes to not selected and open by default. 363 * - Sets all the nodes to not selected and open by default.
262 * @param {BookmarkTreeNode} bookmarkNode 364 * @param {BookmarkTreeNode} bookmarkNode
263 * @param {Object=} idToNodeMap 365 * @param {Object=} idToNodeMap
264 */ 366 */
265 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) { 367 BookmarksStore.initNodes = function(bookmarkNode, idToNodeMap) {
368 bookmarkNode.isSelected = false;
calamity 2017/01/17 06:12:22 Maybe isSelectedItem so it's more obvious which is
jiaxi 2017/01/20 04:51:08 Done.
266 if (idToNodeMap) 369 if (idToNodeMap)
267 idToNodeMap[bookmarkNode.id] = bookmarkNode; 370 idToNodeMap[bookmarkNode.id] = bookmarkNode;
268 371
269 if (bookmarkNode.url) 372 if (bookmarkNode.url)
270 return; 373 return;
271 374
272 bookmarkNode.isSelected = false; 375 bookmarkNode.isSelectedFolder = false;
273 bookmarkNode.isOpen = true; 376 bookmarkNode.isOpen = true;
274 for (var i = 0; i < bookmarkNode.children.length; i++) 377 for (var i = 0; i < bookmarkNode.children.length; i++)
275 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap); 378 BookmarksStore.initNodes(bookmarkNode.children[i], idToNodeMap);
276 }; 379 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698