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

Side by Side Diff: chrome/browser/resources/ntp4/nav_dot.js

Issue 2164693002: [WebUI] ClosureCompile cr.ui.DragWrapper, create a real handler class (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove prototypical lies Created 4 years, 5 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 (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 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 /** 5 /**
6 * @fileoverview Nav dot 6 * @fileoverview Nav dot
7 * This is the class for the navigation controls that appear along the bottom 7 * This is the class for the navigation controls that appear along the bottom
8 * of the NTP. 8 * of the NTP.
9 */ 9 */
10 10
11 cr.define('ntp', function() { 11 cr.define('ntp', function() {
12 'use strict'; 12 'use strict';
13 13
14 /** 14 /**
15 * Creates a new navigation dot. 15 * Creates a new navigation dot.
16 * @param {ntp.TilePage} page The associated TilePage. 16 * @param {ntp.TilePage} page The associated TilePage.
17 * @param {string} title The title of the navigation dot. 17 * @param {string} title The title of the navigation dot.
18 * @param {boolean} titleIsEditable If true, the title can be changed. 18 * @param {boolean} titleIsEditable If true, the title can be changed.
19 * @param {boolean} animate If true, animates into existence. 19 * @param {boolean} animate If true, animates into existence.
20 * @constructor 20 * @constructor
21 * @extends {HTMLLIElement} 21 * @extends {HTMLLIElement}
22 * @implements {cr.ui.DragWrapperDelegate}
22 */ 23 */
23 function NavDot(page, title, titleIsEditable, animate) { 24 function NavDot(page, title, titleIsEditable, animate) {
24 var dot = cr.doc.createElement('li'); 25 var dot = cr.doc.createElement('li');
25 dot.__proto__ = NavDot.prototype; 26 dot.__proto__ = NavDot.prototype;
26 dot.initialize(page, title, titleIsEditable, animate); 27 dot.initialize(page, title, titleIsEditable, animate);
27 28
28 return dot; 29 return dot;
29 } 30 }
30 31
31 NavDot.prototype = { 32 NavDot.prototype = {
(...skipping 150 matching lines...) Expand 10 before | Expand all | Expand 10 after
182 window.getSelection().removeAllRanges(); 183 window.getSelection().removeAllRanges();
183 this.displayTitle = this.input_.value; 184 this.displayTitle = this.input_.value;
184 ntp.saveAppPageName(this.page_, this.displayTitle); 185 ntp.saveAppPageName(this.page_, this.displayTitle);
185 this.input_.disabled = true; 186 this.input_.disabled = true;
186 }, 187 },
187 188
188 shouldAcceptDrag: function(e) { 189 shouldAcceptDrag: function(e) {
189 return this.page_.shouldAcceptDrag(e); 190 return this.page_.shouldAcceptDrag(e);
190 }, 191 },
191 192
192 /** 193 /** @override */
193 * A drag has entered the navigation dot. If the user hovers long enough,
194 * we will navigate to the relevant page.
195 * @param {Event} e The MouseOver event for the drag.
196 * @private
197 */
198 doDragEnter: function(e) { 194 doDragEnter: function(e) {
199 var self = this; 195 var self = this;
200 function navPageClearTimeout() { 196 function navPageClearTimeout() {
201 self.switchToPage(); 197 self.switchToPage();
202 self.dragNavTimeout = null; 198 self.dragNavTimeout = null;
203 } 199 }
204 this.dragNavTimeout = window.setTimeout(navPageClearTimeout, 500); 200 this.dragNavTimeout = window.setTimeout(navPageClearTimeout, 500);
205 201
206 this.doDragOver(e); 202 this.doDragOver(e);
207 }, 203 },
208 204
209 /** 205 /** @override */
210 * A dragged element has moved over the navigation dot. Show the correct
211 * indicator and prevent default handling so the <input> won't act as a drag
212 * target.
213 * @param {Event} e The MouseOver event for the drag.
214 * @private
215 */
216 doDragOver: function(e) { 206 doDragOver: function(e) {
207 // Prevent default handling so the <input> won't act as a drag target.
217 e.preventDefault(); 208 e.preventDefault();
218 209
219 if (!this.dragWrapper_.isCurrentDragTarget) 210 if (!this.dragWrapper_.isCurrentDragTarget)
220 ntp.setCurrentDropEffect(e.dataTransfer, 'none'); 211 ntp.setCurrentDropEffect(e.dataTransfer, 'none');
221 else 212 else
222 this.page_.setDropEffect(e.dataTransfer); 213 this.page_.setDropEffect(e.dataTransfer);
223 }, 214 },
224 215
225 /** 216 /** @override */
226 * A dragged element has been dropped on the navigation dot. Tell the page
227 * to append it.
228 * @param {Event} e The MouseOver event for the drag.
229 * @private
230 */
231 doDrop: function(e) { 217 doDrop: function(e) {
232 e.stopPropagation(); 218 e.stopPropagation();
233 var tile = ntp.getCurrentlyDraggingTile(); 219 var tile = ntp.getCurrentlyDraggingTile();
234 if (tile && tile.tilePage != this.page_) 220 if (tile && tile.tilePage != this.page_)
235 this.page_.appendDraggingTile(); 221 this.page_.appendDraggingTile();
236 // TODO(estade): handle non-tile drags. 222 // TODO(estade): handle non-tile drags.
237 223
238 this.cancelDelayedSwitch_(); 224 this.cancelDelayedSwitch_();
239 }, 225 },
240 226
241 /** 227 /** @override */
242 * The drag has left the navigation dot.
243 * @param {Event} e The MouseOver event for the drag.
244 * @private
245 */
246 doDragLeave: function(e) { 228 doDragLeave: function(e) {
247 this.cancelDelayedSwitch_(); 229 this.cancelDelayedSwitch_();
248 }, 230 },
249 231
250 /** 232 /**
251 * Cancels the timer for page switching. 233 * Cancels the timer for page switching.
252 * @private 234 * @private
253 */ 235 */
254 cancelDelayedSwitch_: function() { 236 cancelDelayedSwitch_: function() {
255 if (this.dragNavTimeout) { 237 if (this.dragNavTimeout) {
(...skipping 10 matching lines...) Expand all
266 onTransitionEnd_: function(e) { 248 onTransitionEnd_: function(e) {
267 if (e.propertyName === 'max-width' && this.classList.contains('small')) 249 if (e.propertyName === 'max-width' && this.classList.contains('small'))
268 this.parentNode.removeChild(this); 250 this.parentNode.removeChild(this);
269 }, 251 },
270 }; 252 };
271 253
272 return { 254 return {
273 NavDot: NavDot, 255 NavDot: NavDot,
274 }; 256 };
275 }); 257 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698