OLD | NEW |
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 Loading... |
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 Loading... |
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 }); |
OLD | NEW |