OLD | NEW |
1 | 1 |
2 | 2 |
3 (function() { | 3 (function() { |
4 | 4 |
5 'use strict'; | 5 'use strict'; |
6 | 6 |
7 // this would be the only `paper-drawer-panel` in | 7 // this would be the only `paper-drawer-panel` in |
8 // the whole app that can be in `dragging` state | 8 // the whole app that can be in `dragging` state |
9 var sharedPanel = null; | 9 var sharedPanel = null; |
10 | 10 |
(...skipping 13 matching lines...) Expand all Loading... |
24 is: 'paper-drawer-panel', | 24 is: 'paper-drawer-panel', |
25 | 25 |
26 /** | 26 /** |
27 * Fired when the narrow layout changes. | 27 * Fired when the narrow layout changes. |
28 * | 28 * |
29 * @event paper-responsive-change {{narrow: boolean}} detail - | 29 * @event paper-responsive-change {{narrow: boolean}} detail - |
30 * narrow: true if the panel is in narrow layout. | 30 * narrow: true if the panel is in narrow layout. |
31 */ | 31 */ |
32 | 32 |
33 /** | 33 /** |
34 * Fired when the selected panel changes. | 34 * Fired when the a panel is selected. |
35 * | 35 * |
36 * Listening for this event is an alternative to observing changes in the
`selected` attribute. | 36 * Listening for this event is an alternative to observing changes in the
`selected` attribute. |
37 * This event is fired both when a panel is selected and deselected. | 37 * This event is fired both when a panel is selected. |
38 * The `isSelected` detail property contains the selection state. | |
39 * | 38 * |
40 * @event paper-select {{isSelected: boolean, item: Object}} detail - | 39 * @event iron-select {{item: Object}} detail - |
41 * isSelected: True for selection and false for deselection. | |
42 * item: The panel that the event refers to. | 40 * item: The panel that the event refers to. |
43 */ | 41 */ |
44 | 42 |
| 43 /** |
| 44 * Fired when a panel is deselected. |
| 45 * |
| 46 * Listening for this event is an alternative to observing changes in the
`selected` attribute. |
| 47 * This event is fired both when a panel is deselected. |
| 48 * |
| 49 * @event iron-deselect {{item: Object}} detail - |
| 50 * item: The panel that the event refers to. |
| 51 */ |
45 properties: { | 52 properties: { |
46 | 53 |
47 /** | 54 /** |
48 * The panel to be selected when `paper-drawer-panel` changes to narrow | 55 * The panel to be selected when `paper-drawer-panel` changes to narrow |
49 * layout. | 56 * layout. |
50 */ | 57 */ |
51 defaultSelected: { | 58 defaultSelected: { |
52 type: String, | 59 type: String, |
53 value: 'main' | 60 value: 'main' |
54 }, | 61 }, |
(...skipping 178 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
233 closeDrawer: function() { | 240 closeDrawer: function() { |
234 this.selected = 'main'; | 241 this.selected = 'main'; |
235 }, | 242 }, |
236 | 243 |
237 ready: function() { | 244 ready: function() { |
238 // Avoid transition at the beginning e.g. page loads and enable | 245 // Avoid transition at the beginning e.g. page loads and enable |
239 // transitions only after the element is rendered and ready. | 246 // transitions only after the element is rendered and ready. |
240 this.transition = true; | 247 this.transition = true; |
241 }, | 248 }, |
242 | 249 |
243 _computeIronSelectorClass: function(narrow, transition, dragging, rightDra
wer) { | 250 _computeIronSelectorClass: function(narrow, transition, dragging, rightDra
wer, peeking) { |
244 return classNames({ | 251 return classNames({ |
245 dragging: dragging, | 252 dragging: dragging, |
246 'narrow-layout': narrow, | 253 'narrow-layout': narrow, |
247 'right-drawer': rightDrawer, | 254 'right-drawer': rightDrawer, |
248 'left-drawer': !rightDrawer, | 255 'left-drawer': !rightDrawer, |
249 transition: transition | 256 transition: transition, |
| 257 peeking: peeking |
250 }); | 258 }); |
251 }, | 259 }, |
252 | 260 |
253 _computeDrawerStyle: function(drawerWidth) { | 261 _computeDrawerStyle: function(drawerWidth) { |
254 return 'width:' + drawerWidth + ';'; | 262 return 'width:' + drawerWidth + ';'; |
255 }, | 263 }, |
256 | 264 |
257 _computeMainStyle: function(narrow, rightDrawer, drawerWidth) { | 265 _computeMainStyle: function(narrow, rightDrawer, drawerWidth) { |
258 var style = ''; | 266 var style = ''; |
259 | 267 |
260 style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'; | 268 style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'; |
261 | 269 |
262 if (rightDrawer) { | 270 if (rightDrawer) { |
263 style += 'right:' + (narrow ? '' : drawerWidth) + ';'; | 271 style += 'right:' + (narrow ? '' : drawerWidth) + ';'; |
264 } else { | |
265 style += 'right:;'; | |
266 } | 272 } |
267 | 273 |
268 return style; | 274 return style; |
269 }, | 275 }, |
270 | 276 |
271 _computeMediaQuery: function(forceNarrow, responsiveWidth) { | 277 _computeMediaQuery: function(forceNarrow, responsiveWidth) { |
272 return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; | 278 return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; |
273 }, | 279 }, |
274 | 280 |
275 _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) { | 281 _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) { |
276 return !narrow || disableEdgeSwipe; | 282 return !narrow || disableEdgeSwipe; |
277 }, | 283 }, |
278 | 284 |
279 _onTrack: function(e) { | 285 _onTrack: function(event) { |
280 if (sharedPanel && this !== sharedPanel) { | 286 if (sharedPanel && this !== sharedPanel) { |
281 return; | 287 return; |
282 } | 288 } |
283 switch (e.detail.state) { | 289 switch (event.detail.state) { |
284 case 'start': | 290 case 'start': |
285 this._trackStart(e); | 291 this._trackStart(event); |
286 break; | 292 break; |
287 case 'track': | 293 case 'track': |
288 this._trackX(e); | 294 this._trackX(event); |
289 break; | 295 break; |
290 case 'end': | 296 case 'end': |
291 this._trackEnd(e); | 297 this._trackEnd(event); |
292 break; | 298 break; |
293 } | 299 } |
294 | 300 |
295 }, | 301 }, |
296 | 302 |
297 _responsiveChange: function(narrow) { | 303 _responsiveChange: function(narrow) { |
298 this._setNarrow(narrow); | 304 this._setNarrow(narrow); |
299 | 305 |
300 if (this.narrow) { | 306 if (this.narrow) { |
301 this.selected = this.defaultSelected; | 307 this.selected = this.defaultSelected; |
302 } | 308 } |
303 | 309 |
304 this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); | 310 this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); |
305 this.fire('paper-responsive-change', {narrow: this.narrow}); | 311 this.fire('paper-responsive-change', {narrow: this.narrow}); |
306 }, | 312 }, |
307 | 313 |
308 _onQueryMatchesChanged: function(e) { | 314 _onQueryMatchesChanged: function(event) { |
309 this._responsiveChange(e.detail.value); | 315 this._responsiveChange(event.detail.value); |
310 }, | 316 }, |
311 | 317 |
312 _forceNarrowChanged: function() { | 318 _forceNarrowChanged: function() { |
313 // set the narrow mode only if we reached the `responsiveWidth` | 319 // set the narrow mode only if we reached the `responsiveWidth` |
314 this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches); | 320 this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches); |
315 }, | 321 }, |
316 | 322 |
317 _swipeAllowed: function() { | 323 _swipeAllowed: function() { |
318 return this.narrow && !this.disableSwipe; | 324 return this.narrow && !this.disableSwipe; |
319 }, | 325 }, |
320 | 326 |
321 _isMainSelected: function() { | 327 _isMainSelected: function() { |
322 return this.selected === 'main'; | 328 return this.selected === 'main'; |
323 }, | 329 }, |
324 | 330 |
325 _startEdgePeek: function() { | 331 _startEdgePeek: function() { |
326 this.width = this.$.drawer.offsetWidth; | 332 this.width = this.$.drawer.offsetWidth; |
327 this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? | 333 this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? |
328 -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); | 334 -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); |
329 this._setPeeking(true); | 335 this._setPeeking(true); |
330 }, | 336 }, |
331 | 337 |
332 _stopEdgePeek: function() { | 338 _stopEdgePeek: function() { |
333 if (this.peeking) { | 339 if (this.peeking) { |
334 this._setPeeking(false); | 340 this._setPeeking(false); |
335 this._moveDrawer(null); | 341 this._moveDrawer(null); |
336 } | 342 } |
337 }, | 343 }, |
338 | 344 |
339 _downHandler: function(e) { | 345 _downHandler: function(event) { |
340 if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) &&
!sharedPanel) { | 346 if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event)
&& !sharedPanel) { |
341 this._startEdgePeek(); | 347 this._startEdgePeek(); |
| 348 // cancel selection |
| 349 event.preventDefault(); |
342 // grab this panel | 350 // grab this panel |
343 sharedPanel = this; | 351 sharedPanel = this; |
344 } | 352 } |
345 }, | 353 }, |
346 | 354 |
347 _upHandler: function() { | 355 _upHandler: function() { |
348 this._stopEdgePeek(); | 356 this._stopEdgePeek(); |
349 // release the panel | 357 // release the panel |
350 sharedPanel = null; | 358 sharedPanel = null; |
351 }, | 359 }, |
352 | 360 |
353 _onTap: function(e) { | 361 _onTap: function(event) { |
354 var targetElement = Polymer.dom(e).localTarget; | 362 var targetElement = Polymer.dom(event).localTarget; |
355 var isTargetToggleElement = targetElement && | 363 var isTargetToggleElement = targetElement && |
356 this.drawerToggleAttribute && | 364 this.drawerToggleAttribute && |
357 targetElement.hasAttribute(this.drawerToggleAttribute); | 365 targetElement.hasAttribute(this.drawerToggleAttribute); |
358 | 366 |
359 if (isTargetToggleElement) { | 367 if (isTargetToggleElement) { |
360 this.togglePanel(); | 368 this.togglePanel(); |
361 } | 369 } |
362 }, | 370 }, |
363 | 371 |
364 _isEdgeTouch: function(e) { | 372 _isEdgeTouch: function(event) { |
365 var x = e.detail.x; | 373 var x = event.detail.x; |
366 | 374 |
367 return !this.disableEdgeSwipe && this._swipeAllowed() && | 375 return !this.disableEdgeSwipe && this._swipeAllowed() && |
368 (this.rightDrawer ? | 376 (this.rightDrawer ? |
369 x >= this.offsetWidth - this.edgeSwipeSensitivity : | 377 x >= this.offsetWidth - this.edgeSwipeSensitivity : |
370 x <= this.edgeSwipeSensitivity); | 378 x <= this.edgeSwipeSensitivity); |
371 }, | 379 }, |
372 | 380 |
373 _trackStart: function(event) { | 381 _trackStart: function(event) { |
374 if (this._swipeAllowed()) { | 382 if (this._swipeAllowed()) { |
375 sharedPanel = this; | 383 sharedPanel = this; |
(...skipping 13 matching lines...) Expand all Loading... |
389 _translateXForDeltaX: function(deltaX) { | 397 _translateXForDeltaX: function(deltaX) { |
390 var isMain = this._isMainSelected(); | 398 var isMain = this._isMainSelected(); |
391 | 399 |
392 if (this.rightDrawer) { | 400 if (this.rightDrawer) { |
393 return Math.max(0, isMain ? this.width + deltaX : deltaX); | 401 return Math.max(0, isMain ? this.width + deltaX : deltaX); |
394 } else { | 402 } else { |
395 return Math.min(0, isMain ? deltaX - this.width : deltaX); | 403 return Math.min(0, isMain ? deltaX - this.width : deltaX); |
396 } | 404 } |
397 }, | 405 }, |
398 | 406 |
399 _trackX: function(e) { | 407 _trackX: function(event) { |
400 if (this.dragging) { | 408 if (this.dragging) { |
401 var dx = e.detail.dx; | 409 var dx = event.detail.dx; |
402 | 410 |
403 if (this.peeking) { | 411 if (this.peeking) { |
404 if (Math.abs(dx) <= this.edgeSwipeSensitivity) { | 412 if (Math.abs(dx) <= this.edgeSwipeSensitivity) { |
405 // Ignore trackx until we move past the edge peek. | 413 // Ignore trackx until we move past the edge peek. |
406 return; | 414 return; |
407 } | 415 } |
408 this._setPeeking(false); | 416 this._setPeeking(false); |
409 } | 417 } |
410 | 418 |
411 this._moveDrawer(this._translateXForDeltaX(dx)); | 419 this._moveDrawer(this._translateXForDeltaX(dx)); |
412 } | 420 } |
413 }, | 421 }, |
414 | 422 |
415 _trackEnd: function(e) { | 423 _trackEnd: function(event) { |
416 if (this.dragging) { | 424 if (this.dragging) { |
417 var xDirection = e.detail.dx > 0; | 425 var xDirection = event.detail.dx > 0; |
418 | 426 |
419 this._setDragging(false); | 427 this._setDragging(false); |
420 this.transition = true; | 428 this.transition = true; |
421 sharedPanel = null; | 429 sharedPanel = null; |
422 this._moveDrawer(null); | 430 this._moveDrawer(null); |
423 | 431 |
424 if (this.rightDrawer) { | 432 if (this.rightDrawer) { |
425 this[xDirection ? 'closeDrawer' : 'openDrawer'](); | 433 this[xDirection ? 'closeDrawer' : 'openDrawer'](); |
426 } else { | 434 } else { |
427 this[xDirection ? 'openDrawer' : 'closeDrawer'](); | 435 this[xDirection ? 'openDrawer' : 'closeDrawer'](); |
428 } | 436 } |
429 } | 437 } |
430 }, | 438 }, |
431 | 439 |
432 _transformForTranslateX: function(translateX) { | 440 _transformForTranslateX: function(translateX) { |
433 if (translateX === null) { | 441 if (translateX === null) { |
434 return ''; | 442 return ''; |
435 } | 443 } |
436 | 444 |
437 return this.hasWillChange ? 'translateX(' + translateX + 'px)' : | 445 return this.hasWillChange ? 'translateX(' + translateX + 'px)' : |
438 'translate3d(' + translateX + 'px, 0, 0)'; | 446 'translate3d(' + translateX + 'px, 0, 0)'; |
439 }, | 447 }, |
440 | 448 |
441 _moveDrawer: function(translateX) { | 449 _moveDrawer: function(translateX) { |
442 var s = this.$.drawer.style; | 450 this.transform(this._transformForTranslateX(translateX), this.$.drawer); |
443 | |
444 if (this.hasTransform) { | |
445 s.transform = this._transformForTranslateX(translateX); | |
446 } else { | |
447 s.webkitTransform = this._transformForTranslateX(translateX); | |
448 } | |
449 } | 451 } |
450 | 452 |
451 }); | 453 }); |
452 | 454 |
453 }()); | 455 }()); |
454 | 456 |
OLD | NEW |