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

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

Issue 2790353002: [MD Bookmarks] Auto expand folders on drag hover. (Closed)
Patch Set: Created 3 years, 8 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 2017 The Chromium Authors. All rights reserved. 1 // Copyright 2017 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 cr.define('bookmarks', function() { 5 cr.define('bookmarks', function() {
6 /** 6 /**
7 * @param {BookmarkElement} element 7 * @param {BookmarkElement} element
8 * @return {boolean} 8 * @return {boolean}
9 */ 9 */
10 function isBookmarkItem(element) { 10 function isBookmarkItem(element) {
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after
106 parents[parentId] = true; 106 parents[parentId] = true;
107 parentId = nodes[parentId].parentId; 107 parentId = nodes[parentId].parentId;
108 } 108 }
109 109
110 return !!this.dragData && this.dragData.elements.some(function(node) { 110 return !!this.dragData && this.dragData.elements.some(function(node) {
111 return parents[node.id]; 111 return parents[node.id];
112 }); 112 });
113 }, 113 },
114 }; 114 };
115 115
116
117 /**
118 * Manages auto expanding of sidebar folders on hover while dragging.
119 * @constructor
120 */
121 function AutoExpander() {
122 /** @const {number} */
123 this.EXPAND_FOLDER_DELAY = 400;
124
125 /** @private {number} */
126 this.lastTimestamp_ = 0;
127
128 /** @private {BookmarkElement|null} */
129 this.lastElement_ = null;
130
131 /** @private {number} */
132 this.testTimestamp_ = 0;
133 }
134
135 AutoExpander.prototype = {
136 /**
137 * @param {Event} e
138 * @param {BookmarkElement} overElement
tsergeant 2017/04/05 07:49:36 Nit: Annotate as ?, since it is nullable
calamity 2017/04/10 03:38:12 Done.
139 */
140 update: function(e, overElement) {
141 var eventTimestamp = this.testTimestamp_ || e.timeStamp;
142 var itemId = overElement.itemId;
tsergeant 2017/04/05 07:49:36 overelement can be null (which is important, I gue
calamity 2017/04/10 03:38:12 Done.
143 var store = bookmarks.Store.getInstance();
144
145 // If hovering over the same folder as last update, open the folder after
146 // the delay has passed.
147 if (overElement && overElement == this.lastElement_) {
148 if (eventTimestamp - this.lastTimestamp_ < this.EXPAND_FOLDER_DELAY)
149 return;
150
151 var action = bookmarks.actions.changeFolderOpen(itemId, true);
152 store.handleAction(action);
153 } else if (
154 isBookmarkFolderNode(overElement) &&
155 bookmarks.util.hasChildFolders(itemId, store.data.nodes) &&
156 store.data.closedFolders.has(itemId)) {
157 // Since this is a closed folder node that has children, set the auto
158 // expander to this element.
159 this.lastTimestamp_ = eventTimestamp;
160 this.lastElement_ = overElement;
161 return;
162 }
163
164 // If the folder has been expanded or we have moved to a different
165 // element, reset the auto expander.
166 this.lastTimestamp_ = 0;
167 this.lastElement_ = null;
168 },
169 };
170
116 /** 171 /**
117 * Encapsulates the behavior of the drag and drop indicator which puts a line 172 * Encapsulates the behavior of the drag and drop indicator which puts a line
118 * between items or highlights folders which are valid drop targets. 173 * between items or highlights folders which are valid drop targets.
119 * @constructor 174 * @constructor
120 */ 175 */
121 function DropIndicator() { 176 function DropIndicator() {
122 /** 177 /**
123 * @private {number|null} Timer id used to help minimize flicker. 178 * @private {number|null} Timer id used to help minimize flicker.
124 */ 179 */
125 this.removeDropIndicatorTimer_ = null; 180 this.removeDropIndicatorTimer_ = null;
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after
223 this.dropIndicator_ = null; 278 this.dropIndicator_ = null;
224 279
225 /** @private {Object<string, function(!Event)>} */ 280 /** @private {Object<string, function(!Event)>} */
226 this.documentListeners_ = null; 281 this.documentListeners_ = null;
227 } 282 }
228 283
229 DNDManager.prototype = { 284 DNDManager.prototype = {
230 init: function() { 285 init: function() {
231 this.dragInfo_ = new DragInfo(); 286 this.dragInfo_ = new DragInfo();
232 this.dropIndicator_ = new DropIndicator(); 287 this.dropIndicator_ = new DropIndicator();
288 this.autoExpander_ = new AutoExpander();
233 289
234 this.documentListeners_ = { 290 this.documentListeners_ = {
235 'dragstart': this.onDragStart_.bind(this), 291 'dragstart': this.onDragStart_.bind(this),
236 'dragenter': this.onDragEnter_.bind(this), 292 'dragenter': this.onDragEnter_.bind(this),
237 'dragover': this.onDragOver_.bind(this), 293 'dragover': this.onDragOver_.bind(this),
238 'dragleave': this.onDragLeave_.bind(this), 294 'dragleave': this.onDragLeave_.bind(this),
239 'drop': this.onDrop_.bind(this), 295 'drop': this.onDrop_.bind(this),
240 'dragend': this.clearDragData_.bind(this), 296 'dragend': this.clearDragData_.bind(this),
241 'mouseup': this.clearDragData_.bind(this), 297 'mouseup': this.clearDragData_.bind(this),
242 // TODO(calamity): Add touch support. 298 // TODO(calamity): Add touch support.
(...skipping 133 matching lines...) Expand 10 before | Expand all | Expand 10 after
376 return; 432 return;
377 433
378 // The default operation is to allow dropping links etc to do 434 // The default operation is to allow dropping links etc to do
379 // navigation. We never want to do that for the bookmark manager. 435 // navigation. We never want to do that for the bookmark manager.
380 e.preventDefault(); 436 e.preventDefault();
381 437
382 if (!this.dragInfo_.isDragValid()) 438 if (!this.dragInfo_.isDragValid())
383 return; 439 return;
384 440
385 var overElement = getBookmarkElement(e.path); 441 var overElement = getBookmarkElement(e.path);
442 this.autoExpander_.update(e, overElement);
386 if (!overElement) 443 if (!overElement)
387 return; 444 return;
388 445
389 // TODO(calamity): open folders on hover.
390 446
391 // Now we know that we can drop. Determine if we will drop above, on or 447 // Now we know that we can drop. Determine if we will drop above, on or
392 // below based on mouse position etc. 448 // below based on mouse position etc.
393 this.dropDestination_ = 449 this.dropDestination_ =
394 this.calculateDropDestination_(e.clientY, overElement); 450 this.calculateDropDestination_(e.clientY, overElement);
395 if (!this.dropDestination_) 451 if (!this.dropDestination_)
396 return; 452 return;
397 453
398 if (e.dataTransfer) { 454 if (e.dataTransfer) {
399 e.dataTransfer.dropEffect = 455 e.dataTransfer.dropEffect =
(...skipping 130 matching lines...) Expand 10 before | Expand all | Expand 10 after
530 return !this.dragInfo_.isDraggingChildBookmark(overElement.itemId) 586 return !this.dragInfo_.isDraggingChildBookmark(overElement.itemId)
531 }, 587 },
532 }; 588 };
533 589
534 return { 590 return {
535 DNDManager: DNDManager, 591 DNDManager: DNDManager,
536 DragInfo: DragInfo, 592 DragInfo: DragInfo,
537 DropIndicator: DropIndicator, 593 DropIndicator: DropIndicator,
538 }; 594 };
539 }); 595 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698