src/third_party/polymer/components-chromium/paper-toast/paper-toast-extracted.js

   1
   2
   3   (function() {
   4
   5     var currentToast;
   6
   7     Polymer('paper-toast', {
   8
   9       /**
  10        * The text shows in a toast.
  11        *
  12        * @attribute text
  13        * @type string
  14        * @default ''
  15        */
  16       text: '',
  17
  18       /**
  19        * The duration in milliseconds to show the toast.
  20        *
  21        * @attribute duration
  22        * @type number
  23        * @default 3000
  24        */
  25       duration: 3000,
  26
  27       /**
  28        * Set opened to true to show the toast and to false to hide it.
  29        *
  30        * @attribute opened
  31        * @type boolean
  32        * @default false
  33        */
  34       opened: false,
  35
  36       /**
  37        * Min-width when the toast changes to narrow layout.  In narrow layout,
  38        * the toast fits at the bottom of the screen when opened.
  39        *
  40        * @attribute responsiveWidth
  41        * @type string
  42        * @default '480px'
  43        */
  44       responsiveWidth: '480px',
  45
  46       /**
  47        * If true, the toast can't be swiped.
  48        *
  49        * @attribute swipeDisabled
  50        * @type boolean
  51        * @default false
  52        */
  53       swipeDisabled: false,
  54
  55       eventDelegates: {
  56         trackstart: 'trackStart',
  57         track: 'track',
  58         trackend: 'trackEnd',
  59         transitionend: 'transitionEnd'
  60       },
  61
  62       narrowModeChanged: function() {
  63         this.classList.toggle('fit-bottom', this.narrowMode);
  64       },
  65
  66       openedChanged: function() {
  67         if (this.opened) {
  68           this.dismissJob = this.job(this.dismissJob, this.dismiss, this.duration);
  69         } else {
  70           this.dismissJob && this.dismissJob.stop();
  71           this.dismiss();
  72         }
  73       },
  74
  75       /**
  76        * Toggle the opened state of the toast.
  77        * @method toggle
  78        */
  79       toggle: function() {
  80         this.opened = !this.opened;
  81       },
  82
  83       /**
  84        * Show the toast for the specified duration
  85        * @method show
  86        */
  87       show: function() {
  88         if (currentToast) {
  89           currentToast.dismiss();
  90         }
  91         currentToast = this;
  92         this.opened = true;
  93       },
  94
  95       /**
  96        * Dismiss the toast and hide it.
  97        * @method dismiss
  98        */
  99       dismiss: function() {
 100         if (this.dragging) {
 101           this.shouldDismiss = true;
 102         } else {
 103           this.opened = false;
 104           if (currentToast === this) {
 105             currentToast = null;
 106           }
 107         }
 108       },
 109
 110       trackStart: function(e) {
 111         if (!this.swipeDisabled) {
 112           e.preventTap();
 113           this.vertical = e.yDirection;
 114           this.w = this.offsetWidth;
 115           this.h = this.offsetHeight;
 116           this.dragging = true;
 117           this.classList.add('dragging');
 118         }
 119       },
 120
 121       track: function(e) {
 122         if (this.dragging) {
 123           var s = this.style;
 124           if (this.vertical) {
 125             var y = e.dy;
 126             s.opacity = (this.h - Math.abs(y)) / this.h;
 127             s.webkitTransform = s.transform =  'translate3d(0, ' + y + 'px, 0)';
 128           } else {
 129             var x = e.dx;
 130             s.opacity = (this.w - Math.abs(x)) / this.w;
 131             s.webkitTransform = s.transform = 'translate3d(' + x + 'px, 0, 0)';
 132           }
 133         }
 134       },
 135
 136       trackEnd: function(e) {
 137         if (this.dragging) {
 138           this.classList.remove('dragging');
 139           this.style.opacity = null;
 140           this.style.webkitTransform = this.style.transform = null;
 141           var cl = this.classList;
 142           if (this.vertical) {
 143             cl.toggle('fade-out-down', e.yDirection === 1 && e.dy > 0);
 144             cl.toggle('fade-out-up', e.yDirection === -1 && e.dy < 0);
 145           } else {
 146             cl.toggle('fade-out-right', e.xDirection === 1 && e.dx > 0);
 147             cl.toggle('fade-out-left', e.xDirection === -1 && e.dx < 0);
 148           }
 149           this.dragging = false;
 150         }
 151       },
 152
 153       transitionEnd: function() {
 154         var cl = this.classList;
 155         if (cl.contains('fade-out-right') || cl.contains('fade-out-left') ||
 156             cl.contains('fade-out-down') || cl.contains('fade-out-up')) {
 157           this.dismiss();
 158           cl.remove('fade-out-right', 'fade-out-left',
 159               'fade-out-down', 'fade-out-up');
 160         } else if (this.shouldDismiss) {
 161           this.dismiss();
 162         }
 163         this.shouldDismiss = false;
 164       }
 165
 166     });
 167
 168   })();
 169