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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-drawer-panel/paper-drawer-panel-extracted.js

Issue 1221923003: Update bower.json for Polymer elements and add PRESUBMIT.py (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 5 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 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
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
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
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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698