Home | History | Annotate | Download | only in paper-toast 
      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 
    170