third_party/polymer/components/paper-toast/paper-toast.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 `paper-toast` provides lightweight feedback about an operation in a small popup
  12 at the base of the screen on mobile and at the lower left on desktop. Toasts are
  13 above all other elements on screen, including the FAB.
  14
  15 Toasts automatically disappear after a timeout or after user interaction
  16 elsewhere on the screen, whichever comes first. Toasts can be swiped off
  17 screen.  There can be only one on the screen at a time.
  18
  19 Example:
  20
  21     <paper-toast text="Your draft has been discarded." onclick="discardDraft(el)"></paper-toast>
  22
  23     <script>
  24       function discardDraft(el) {
  25         el.show();
  26       }
  27     </script>
  28
  29 An action button can be presented in the toast.
  30
  31 Example (using Polymer's data-binding features):
  32
  33     <paper-toast id="toast2" text="Connection timed out. Showing limited messages.">
  34       <div style="color: blue;" on-tap="{{retry}}">Retry</div>
  35     </paper-toast>
  36
  37 Positioning toast:
  38
  39 A standard toast appears near the lower left of the screen.  You can change the
  40 position by overriding bottom and left positions.
  41
  42     paper-toast {
  43       bottom: 40px;
  44       left: 10px;
  45     }
  46
  47 To position the toast to the right:
  48
  49     paper-toast {
  50       right: 10px;
  51       left: auto;
  52     }
  53
  54 To make it fit at the bottom of the screen:
  55
  56     paper-toast {
  57       bottom: 0;
  58       left: 0;
  59       width: 100%;
  60     }
  61
  62 When the screen size is smaller than the `responsiveWidth` (default to 480px),
  63 the toast will automatically fits at the bottom of the screen.
  64
  65 @group Paper Elements
  66 @element paper-toast
  67 @homepage github.io
  68 -->
  69 <!--
  70 Fired when the `paper-toast`'s `opened` property changes.
  71
  72 @event core-overlay-open
  73 @param {boolean} detail the opened state
  74 -->
  75 <!--
  76 Fired when the `paper-toast` has completely opened.
  77
  78 @event core-overlay-open-completed
  79 -->
  80 <!--
  81 Fired when the `paper-toast` has completely closed.
  82
  83 @event core-overlay-close-completed
  84 -->
  85 <link rel="import" href="../core-overlay/core-overlay.html">
  86 <link rel="import" href="../core-transition/core-transition-css.html">
  87 <link rel="import" href="../core-media-query/core-media-query.html">
  88
  89 <polymer-element name="paper-toast" attributes="text duration opened responsiveWidth swipeDisabled autoCloseDisabled" role="status">
  90
  91 <template>
  92
  93   <link rel="stylesheet" href="paper-toast.css" >
  94
  95   <core-overlay id="overlay" autoFocusDisabled autoCloseDisabled="{{autoCloseDisabled}}" opened="{{opened}}" target="{{}}" transition="core-transition-bottom"></core-overlay>
  96
  97   <div class="toast-container" horizontal layout>
  98
  99     <div class="toast-text" flex>{{text}}</div>
 100
 101     <div class="toast-text toast-action" on-tap="{{dismiss}}">
 102       <content></content>
 103     </div>
 104
 105   </div>
 106
 107   <core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{narrowMode}}"></core-media-query>
 108
 109 </template>
 110 <script>
 111
 112   (function() {
 113
 114     var currentToast;
 115
 116     Polymer('paper-toast', {
 117
 118       /**
 119        * The text shows in a toast.
 120        *
 121        * @attribute text
 122        * @type string
 123        * @default ''
 124        */
 125       text: '',
 126
 127       /**
 128        * The duration in milliseconds to show the toast.
 129        *
 130        * @attribute duration
 131        * @type number
 132        * @default 3000
 133        */
 134       duration: 3000,
 135
 136       /**
 137        * Set opened to true to show the toast and to false to hide it.
 138        *
 139        * @attribute opened
 140        * @type boolean
 141        * @default false
 142        */
 143       opened: false,
 144
 145       /**
 146        * Min-width when the toast changes to narrow layout.  In narrow layout,
 147        * the toast fits at the bottom of the screen when opened.
 148        *
 149        * @attribute responsiveWidth
 150        * @type string
 151        * @default '480px'
 152        */
 153       responsiveWidth: '480px',
 154
 155       /**
 156        * If true, the toast can't be swiped.
 157        *
 158        * @attribute swipeDisabled
 159        * @type boolean
 160        * @default false
 161        */
 162       swipeDisabled: false,
 163
 164       /**
 165        * By default, the toast will close automatically if the user taps
 166        * outside it or presses the escape key. Disable this behavior by setting
 167        * the `autoCloseDisabled` property to true.
 168        *
 169        * @attribute autoCloseDisabled
 170        * @type boolean
 171        * @default false
 172        */
 173       autoCloseDisabled: false,
 174
 175       narrowMode: false,
 176
 177       eventDelegates: {
 178         trackstart: 'trackStart',
 179         track: 'track',
 180         trackend: 'trackEnd',
 181         transitionend: 'transitionEnd'
 182       },
 183
 184       narrowModeChanged: function() {
 185         this.classList.toggle('fit-bottom', this.narrowMode);
 186         if (this.opened) {
 187           this.$.overlay.resizeHandler();
 188         }
 189       },
 190
 191       openedChanged: function() {
 192         if (this.opened) {
 193           this.dismissJob = this.job(this.dismissJob, this.dismiss, this.duration);
 194         } else {
 195           this.dismissJob && this.dismissJob.stop();
 196           this.dismiss();
 197         }
 198       },
 199
 200       /**
 201        * Toggle the opened state of the toast.
 202        * @method toggle
 203        */
 204       toggle: function() {
 205         this.opened = !this.opened;
 206       },
 207
 208       /**
 209        * Show the toast for the specified duration
 210        * @method show
 211        */
 212       show: function() {
 213         if (currentToast) {
 214           currentToast.dismiss();
 215         }
 216         currentToast = this;
 217         this.opened = true;
 218       },
 219
 220       /**
 221        * Dismiss the toast and hide it.
 222        * @method dismiss
 223        */
 224       dismiss: function() {
 225         if (this.dragging) {
 226           this.shouldDismiss = true;
 227         } else {
 228           this.opened = false;
 229           if (currentToast === this) {
 230             currentToast = null;
 231           }
 232         }
 233       },
 234
 235       trackStart: function(e) {
 236         if (!this.swipeDisabled) {
 237           e.preventTap();
 238           this.vertical = e.yDirection;
 239           this.w = this.offsetWidth;
 240           this.h = this.offsetHeight;
 241           this.dragging = true;
 242           this.classList.add('dragging');
 243         }
 244       },
 245
 246       track: function(e) {
 247         if (this.dragging) {
 248           var s = this.style;
 249           if (this.vertical) {
 250             var y = e.dy;
 251             s.opacity = (this.h - Math.abs(y)) / this.h;
 252             s.transform = s.webkitTransform = 'translate3d(0, ' + y + 'px, 0)';
 253           } else {
 254             var x = e.dx;
 255             s.opacity = (this.w - Math.abs(x)) / this.w;
 256             s.transform = s.webkitTransform = 'translate3d(' + x + 'px, 0, 0)';
 257           }
 258         }
 259       },
 260
 261       trackEnd: function(e) {
 262         if (this.dragging) {
 263           this.classList.remove('dragging');
 264           this.style.opacity = '';
 265           this.style.transform = this.style.webkitTransform = '';
 266           var cl = this.classList;
 267           if (this.vertical) {
 268             cl.toggle('fade-out-down', e.yDirection === 1 && e.dy > 0);
 269             cl.toggle('fade-out-up', e.yDirection === -1 && e.dy < 0);
 270           } else {
 271             cl.toggle('fade-out-right', e.xDirection === 1 && e.dx > 0);
 272             cl.toggle('fade-out-left', e.xDirection === -1 && e.dx < 0);
 273           }
 274           this.dragging = false;
 275         }
 276       },
 277
 278       transitionEnd: function() {
 279         var cl = this.classList;
 280         if (cl.contains('fade-out-right') || cl.contains('fade-out-left') ||
 281             cl.contains('fade-out-down') || cl.contains('fade-out-up')) {
 282           this.dismiss();
 283           cl.remove('fade-out-right', 'fade-out-left',
 284               'fade-out-down', 'fade-out-up');
 285         } else if (this.shouldDismiss) {
 286           this.dismiss();
 287         }
 288         this.shouldDismiss = false;
 289       }
 290
 291     });
 292
 293   })();
 294
 295 </script>
 296 </polymer-element>