WebCompDev / COMPONENTS

Commit d004e0cb411e893857079fba9b6084a2e6b918d9

Authored by Luigi Serra
1 parent 12e73bf0

paper-toast

Inline Side-by-side
Showing 10 changed files with 562 additions and 350 deletions
bower.json
  View file @d004e0c
... ... @@ -18,6 +18,7 @@
18 18 "paper-fab-transitions": "~0.1.0",
19 19 "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#~1.0.14",
20 20 "iron-icon": "PolymerElements/iron-icon#~1.0.7",
21   - "iron-icons": "PolymerElements/iron-icons#~1.1.2"
  21 + "iron-icons": "PolymerElements/iron-icons#~1.1.2",
  22 + "paper-toast": "PolymerElements/paper-toast#~1.2.1"
22 23 }
23 24 }
... ...
bower_components/paper-toast/.bower.json
  View file @d004e0c
1   -<<<<<<< HEAD
2 1 {
3 2 "name": "paper-toast",
4   - "version": "1.2.0",
  3 + "version": "1.2.1",
5 4 "description": "A material design notification toast",
6 5 "private": true,
7 6 "license": "http://polymer.github.io/LICENSE.txt",
... ... @@ -33,53 +32,13 @@
33 32 },
34 33 "ignore": [],
35 34 "homepage": "https://github.com/PolymerElements/paper-toast",
36   - "_release": "1.2.0",
  35 + "_release": "1.2.1",
37 36 "_resolution": {
38 37 "type": "version",
39   - "tag": "v1.2.0",
40   - "commit": "b365f5b9709757c02bd6a2b113f6df1a76f94a77"
  38 + "tag": "v1.2.1",
  39 + "commit": "c1ff94b116dcd95444b57e55020543658fc77de1"
41 40 },
42 41 "_source": "git://github.com/PolymerElements/paper-toast.git",
43   - "_target": "~1.2.0",
44   - "_originalSource": "PolymerElements/paper-toast",
45   - "_direct": true
46   -=======
47   -{
48   - "name": "paper-toast",
49   - "version": "1.0.0",
50   - "description": "A material design notification toast",
51   - "private": true,
52   - "license": "http://polymer.github.io/LICENSE.txt",
53   - "authors": [
54   - "The Polymer Authors"
55   - ],
56   - "keywords": [
57   - "web-components",
58   - "polymer",
59   - "toast",
60   - "notification"
61   - ],
62   - "main": "paper-toast.html",
63   - "dependencies": {
64   - "paper-styles": "PolymerElements/paper-styles#^1.0.0",
65   - "polymer": "Polymer/polymer#^1.0.0",
66   - "iron-a11y-announcer": "polymerelements/iron-a11y-announcer#^1.0.0"
67   - },
68   - "devDependencies": {
69   - "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
70   - "paper-button": "polymerelements/paper-button#^1.0.0",
71   - "web-component-tester": "*",
72   - "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
73   - },
74   - "homepage": "https://github.com/PolymerElements/paper-toast",
75   - "_release": "1.0.0",
76   - "_resolution": {
77   - "type": "version",
78   - "tag": "v1.0.0",
79   - "commit": "71e6c327f7aafe9c71010c83d4c4571f63990072"
80   - },
81   - "_source": "git://github.com/PolymerElements/paper-toast.git",
82   - "_target": "^1.0.0",
83   - "_originalSource": "PolymerElements/paper-toast"
84   ->>>>>>> 8de1b08de87fafc78c8aa175c27a1aa837631903
  42 + "_target": "^1.0.0",
  43 + "_originalSource": "PolymerElements/paper-toast"
85 44 }
86 45 \ No newline at end of file
... ...
bower_components/paper-toast/.gitignore
  View file @d004e0c
1   -bower_components
  1 +bower_components
... ...
bower_components/paper-toast/README.md
  View file @d004e0c
1   -paper-toast
2   -============
3   -
4   -A material design notification toast.
  1 +
  2 +<!---
  3 +
  4 +This README is automatically generated from the comments in these files:
  5 +paper-toast.html
  6 +
  7 +Edit those files, and our readme bot will duplicate them over here!
  8 +Edit this file, and the bot will squash your changes :)
  9 +
  10 +The bot does some handling of markdown. Please file a bug if it does the wrong
  11 +thing! https://github.com/PolymerLabs/tedium/issues
  12 +
  13 +-->
  14 +
  15 +[![Build status](https://travis-ci.org/PolymerElements/paper-toast.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-toast)
  16 +
  17 +_[Demo and API docs](https://elements.polymer-project.org/elements/paper-toast)_
  18 +
  19 +
  20 +##&lt;paper-toast&gt;
  21 +
  22 +Material design: [Snackbards & toasts](https://www.google.com/design/spec/components/snackbars-toasts.html)
  23 +
  24 +`paper-toast` provides a subtle notification toast. Only one `paper-toast` will
  25 +be visible on screen.
  26 +
  27 +Use `opened` to show the toast:
  28 +
  29 +Example:
  30 +
  31 +```html
  32 +<paper-toast text="Hello world!" opened></paper-toast>
  33 +```
  34 +
  35 +Also `open()` or `show()` can be used to show the toast:
  36 +
  37 +Example:
  38 +
  39 +```html
  40 +<paper-button on-click="openToast">Open Toast</paper-button>
  41 +<paper-toast id="toast" text="Hello world!"></paper-toast>
  42 +
  43 +...
  44 +
  45 +openToast: function() {
  46 + this.$.toast.open();
  47 +}
  48 +```
  49 +
  50 +Set `duration` to 0, a negative number or Infinity to persist the toast on screen:
  51 +
  52 +Example:
  53 +
  54 +```html
  55 +<paper-toast text="Terms and conditions" opened duration="0">
  56 + <a href="#">Show more</a>
  57 +</paper-toast>
  58 +```
  59 +
  60 +### Styling
  61 +
  62 +The following custom properties and mixins are available for styling:
  63 +
  64 +| Custom property | Description | Default |
  65 +| --- | --- | --- |
  66 +| `--paper-toast-background-color` | The paper-toast background-color | `#323232` |
  67 +| `--paper-toast-color` | The paper-toast color | `#f1f1f1` |
  68 +
  69 +This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
  70 +In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
  71 +
  72 +
... ...
bower_components/paper-toast/bower.json
  View file @d004e0c
1   -{
2   - "name": "paper-toast",
3   - "version": "1.0.0",
4   - "description": "A material design notification toast",
5   - "private": true,
6   - "license": "http://polymer.github.io/LICENSE.txt",
7   - "authors": [
8   - "The Polymer Authors"
9   - ],
10   - "keywords": [
11   - "web-components",
12   - "polymer",
13   - "toast",
14   - "notification"
15   - ],
16   - "main": "paper-toast.html",
17   - "dependencies": {
18   - "paper-styles": "PolymerElements/paper-styles#^1.0.0",
19   - "polymer": "Polymer/polymer#^1.0.0",
20   - "iron-a11y-announcer": "polymerelements/iron-a11y-announcer#^1.0.0"
21   - },
22   - "devDependencies": {
23   - "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
24   - "paper-button": "polymerelements/paper-button#^1.0.0",
25   - "web-component-tester": "*",
26   - "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
27   - }
28   -}
  1 +{
  2 + "name": "paper-toast",
  3 + "version": "1.2.1",
  4 + "description": "A material design notification toast",
  5 + "private": true,
  6 + "license": "http://polymer.github.io/LICENSE.txt",
  7 + "authors": [
  8 + "The Polymer Authors"
  9 + ],
  10 + "keywords": [
  11 + "web-components",
  12 + "polymer",
  13 + "toast",
  14 + "notification"
  15 + ],
  16 + "repository": {
  17 + "type": "git",
  18 + "url": "git://github.com/PolymerElements/paper-toast.git"
  19 + },
  20 + "main": "paper-toast.html",
  21 + "dependencies": {
  22 + "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0",
  23 + "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^1.0.9",
  24 + "polymer": "Polymer/polymer#^1.1.0"
  25 + },
  26 + "devDependencies": {
  27 + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
  28 + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
  29 + "paper-button": "PolymerElements/paper-button#^1.0.0",
  30 + "web-component-tester": "^4.0.0",
  31 + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
  32 + },
  33 + "ignore": []
  34 +}
... ...
bower_components/paper-toast/demo/index.html
  View file @d004e0c
1   -<!doctype html>
2   -<!--
3   -@license
4   -Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5   -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6   -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7   -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8   -Code distributed by Google as part of the polymer project is also
9   -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10   --->
11   -<html>
12   -<head>
13   - <title>paper-toast</title>
14   -
15   - <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
16   - <meta name="mobile-web-app-capable" content="yes">
17   - <meta name="apple-mobile-web-app-capable" content="yes">
18   -
19   - <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20   -
21   - <link rel="import" href="../paper-toast.html">
22   - <link rel="import" href="../../paper-button/paper-button.html" >
23   -
24   - <style>
25   - html, body {
26   - height: 100%;
27   - }
28   -
29   - body {
30   - overflow: hidden;
31   - margin: 0;
32   - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
33   - -webkit-tap-highlight-color: rgba(0,0,0,0);
34   - -webkit-touch-callout: none;
35   - }
36   -
37   - paper-button {
38   - margin: 20px;
39   - }
40   - </style>
41   -
42   -</head>
43   -<body>
44   -
45   - <paper-button raised onclick="document.querySelector('#toast1').show()">Discard Draft</paper-button>
46   -
47   - <paper-button raised onclick="document.querySelector('#toast2').show()">Get Messages</paper-button>
48   -
49   - <paper-toast id="toast1" text="Your draft has been discarded."></paper-toast>
50   -
51   - <paper-toast id="toast2" text="Connection timed out. Showing limited messages.">
52   - <span role="button" tabindex="0" style="color: #eeff41;margin: 10px" onclick="console.log('RETRY')">Retry</span>
53   - </paper-toast>
54   -
55   -</body>
56   -</html>
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +
  13 +<head>
  14 + <title>paper-toast</title>
  15 +
  16 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  17 + <meta name="mobile-web-app-capable" content="yes">
  18 + <meta name="apple-mobile-web-app-capable" content="yes">
  19 +
  20 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  21 +
  22 + <link rel="import" href="../paper-toast.html">
  23 + <link rel="import" href="../../paper-button/paper-button.html">
  24 + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
  25 + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
  26 +
  27 + <style is="custom-style" include="demo-pages-shared-styles"></style>
  28 +
  29 +</head>
  30 +
  31 +<body unresolved class="centered">
  32 + <h3>Toast auto-closes after 3 seconds. Only one toast per time will be visible</h3>
  33 + <demo-snippet class="centered-demo">
  34 + <template>
  35 + <paper-button raised onclick="toast0.open()">Default toast</paper-button>
  36 + <paper-toast id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast>
  37 + </template>
  38 + </demo-snippet>
  39 +
  40 + <h3>Toast does not auto-close when <code>duration</code> is negative, <code>0</code>, or <code>Infinity</code></h3>
  41 + <demo-snippet class="centered-demo">
  42 + <template>
  43 + <style>
  44 + .yellow-button {
  45 + text-transform: none;
  46 + color: #eeff41;
  47 + }
  48 + </style>
  49 +
  50 + <paper-button raised onclick="toast1.open()">Persistent toast</paper-button>
  51 +
  52 + <paper-toast id="toast1" duration="0" text="This toast will stay opened until you close it, or open another toast.">
  53 + <paper-button onclick="toast1.toggle()" class="yellow-button">Close now!</paper-button>
  54 + </paper-toast>
  55 + </template>
  56 + </demo-snippet>
  57 +
  58 + <h3>Toast can be styled</h3>
  59 + <demo-snippet class="centered-demo">
  60 + <template>
  61 + <style is="custom-style">
  62 + #toast2 {
  63 + --paper-toast-background-color: red;
  64 + --paper-toast-color: white;
  65 + }
  66 + </style>
  67 +
  68 + <paper-button raised onclick="toast2.open()">Styled toast</paper-button>
  69 +
  70 + <paper-toast id="toast2" class="fit-bottom" text="This toast is red and fits bottom!"></paper-toast>
  71 + </template>
  72 + </demo-snippet>
  73 +
  74 + <h3>Toast can fit into any element</h3>
  75 + <demo-snippet class="centered-demo">
  76 + <template>
  77 + <style>
  78 + #container {
  79 + padding: 100px;
  80 + border: 1px solid gray;
  81 + }
  82 + </style>
  83 + <div id="container">
  84 + <paper-button raised onclick="toast3.open()">Open toast</paper-button>
  85 + </div>
  86 + <paper-toast id="toast3" class="fit-bottom" text="This toast fits into the container."></paper-toast>
  87 +
  88 + <script>
  89 + toast3.fitInto = container;
  90 + </script>
  91 +
  92 + </template>
  93 + </demo-snippet>
  94 +</body>
  95 +
  96 +</html>
... ...
bower_components/paper-toast/hero.svg
  View file @d004e0c
1   -<<<<<<< HEAD
2   -<?xml version="1.0" encoding="utf-8"?>
3   -<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
4   -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
5   -<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
6   - viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
7   -<g id="background" display="none">
8   - <rect display="inline" fill="#B0BEC5" width="225" height="126"/>
9   -</g>
10   -<g id="label">
11   -</g>
12   -<g id="art">
13   - <path d="M164,114H13V88h151V114z M15,112h147V90H15V112z"/>
14   - <rect x="26" y="100" width="79" height="2"/>
15   - <rect x="135" y="100" width="16" height="2"/>
16   - <g id="ic_x5F_add_x0D_">
17   - </g>
18   -</g>
19   -<g id="Guides">
20   -</g>
21   -</svg>
22   -=======
23 1 <?xml version="1.0" encoding="utf-8"?>
24 2 <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
25 3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
... ... @@ -40,4 +18,3 @@
40 18 <g id="Guides">
41 19 </g>
42 20 </svg>
43   ->>>>>>> 8de1b08de87fafc78c8aa175c27a1aa837631903
... ...
bower_components/paper-toast/index.html
  View file @d004e0c
1   -<!doctype html>
2   -<!--
3   -@license
4   -Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5   -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
6   -The complete set of authors may be found at http://polymer.github.io/AUTHORS
7   -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
8   -Code distributed by Google as part of the polymer project is also
9   -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
10   --->
11   -<html>
12   -<head>
13   -
14   - <meta charset="utf-8">
15   - <meta name="viewport" content="width=device-width, initial-scale=1.0">
16   -
17   - <script src="../webcomponentsjs/webcomponents-lite.js"></script>
18   - <link rel="import" href="../iron-component-page/iron-component-page.html">
19   -
20   -</head>
21   -<body>
22   -
23   - <iron-component-page></iron-component-page>
24   -
25   -</body>
26   -</html>
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 +
  14 + <meta charset="utf-8">
  15 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16 +
  17 + <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  18 + <link rel="import" href="../iron-component-page/iron-component-page.html">
  19 +
  20 +</head>
  21 +<body>
  22 +
  23 + <iron-component-page></iron-component-page>
  24 +
  25 +</body>
  26 +</html>
... ...
bower_components/paper-toast/paper-toast.html
  View file @d004e0c
1   -<!--
2   -@license
3   -Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4   -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5   -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6   -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7   -Code distributed by Google as part of the polymer project is also
8   -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9   --->
10   -
11   -<link rel="import" href="../polymer/polymer.html">
12   -<link rel="import" href="../paper-styles/typography.html">
13   -<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
14   -
15   -<!--
16   -`paper-toast` provides a subtle notification toast.
17   -
18   -@group Paper Elements
19   -@element paper-toast
20   -@demo demo/index.html
21   -@hero hero.svg
22   --->
23   -<dom-module id="paper-toast">
24   - <style>
25   - :host {
26   - display: inline-block;
27   - position: fixed;
28   -
29   - background: #323232;
30   - color: #f1f1f1;
31   - min-height: 48px;
32   - min-width: 288px;
33   - padding: 16px 24px 12px;
34   - box-sizing: border-box;
35   - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
36   - border-radius: 2px;
37   - bottom: 12px;
38   - left: 12px;
39   - font-size: 14px;
40   - cursor: default;
41   -
42   - -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
43   - transition: visibility 0.3s, transform 0.3s;
44   -
45   - -webkit-transform: translateY(100px);
46   - transform: translateY(100px);
47   -
48   - visibility: hidden;
49   - }
50   -
51   - :host(.capsule) {
52   - border-radius: 24px;
53   - }
54   -
55   - :host(.fit-bottom) {
56   - bottom: 0;
57   - left: 0;
58   - width: 100%;
59   - min-width: 0;
60   - border-radius: 0;
61   - }
62   -
63   - :host(.paper-toast-open){
64   - visibility: visible;
65   -
66   - -webkit-transform: translateY(0px);
67   - transform: translateY(0px);
68   - }
69   - </style>
70   - <template>
71   - <span id="label">{{text}}</span>
72   - <content></content>
73   - </template>
74   -</dom-module>
75   -<script>
76   -(function() {
77   -
78   - var PaperToast = Polymer({
79   - is: 'paper-toast',
80   -
81   - properties: {
82   - /**
83   - * The duration in milliseconds to show the toast.
84   - */
85   - duration: {
86   - type: Number,
87   - value: 3000
88   - },
89   -
90   - /**
91   - * The text to display in the toast.
92   - */
93   - text: {
94   - type: String,
95   - value: ""
96   - },
97   -
98   - /**
99   - * True if the toast is currently visible.
100   - */
101   - visible: {
102   - type: Boolean,
103   - readOnly: true,
104   - value: false,
105   - observer: '_visibleChanged'
106   - }
107   - },
108   -
109   - created: function() {
110   - Polymer.IronA11yAnnouncer.requestAvailability();
111   - },
112   -
113   - ready: function() {
114   - this.async(function() {
115   - this.hide();
116   - });
117   - },
118   -
119   - /**
120   - * Show the toast.
121   - * @method show
122   - */
123   - show: function() {
124   - if (PaperToast.currentToast) {
125   - PaperToast.currentToast.hide();
126   - }
127   - PaperToast.currentToast = this;
128   - this.removeAttribute('aria-hidden');
129   - this._setVisible(true);
130   - this.fire('iron-announce', {
131   - text: this.text
132   - });
133   - this.debounce('hide', this.hide, this.duration);
134   - },
135   -
136   - /**
137   - * Hide the toast
138   - */
139   - hide: function() {
140   - this.setAttribute('aria-hidden', 'true');
141   - this._setVisible(false);
142   - },
143   -
144   - /**
145   - * Toggle the opened state of the toast.
146   - * @method toggle
147   - */
148   - toggle: function() {
149   - if (!this.visible) {
150   - this.show();
151   - } else {
152   - this.hide();
153   - }
154   - },
155   -
156   - _visibleChanged: function(visible) {
157   - this.toggleClass('paper-toast-open', visible);
158   - }
159   - });
160   -
161   - PaperToast.currentToast = null;
162   -
163   -})();
164   -</script>
  1 +<!--
  2 +@license
  3 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  4 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 +Code distributed by Google as part of the polymer project is also
  8 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 +-->
  10 +
  11 +<link rel="import" href="../polymer/polymer.html">
  12 +<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
  13 +<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
  14 +
  15 +<!--
  16 +Material design: [Snackbards & toasts](https://www.google.com/design/spec/components/snackbars-toasts.html)
  17 +
  18 +`paper-toast` provides a subtle notification toast. Only one `paper-toast` will
  19 +be visible on screen.
  20 +
  21 +Use `opened` to show the toast:
  22 +
  23 +Example:
  24 +
  25 + <paper-toast text="Hello world!" opened></paper-toast>
  26 +
  27 +Also `open()` or `show()` can be used to show the toast:
  28 +
  29 +Example:
  30 +
  31 + <paper-button on-click="openToast">Open Toast</paper-button>
  32 + <paper-toast id="toast" text="Hello world!"></paper-toast>
  33 +
  34 + ...
  35 +
  36 + openToast: function() {
  37 + this.$.toast.open();
  38 + }
  39 +
  40 +Set `duration` to 0, a negative number or Infinity to persist the toast on screen:
  41 +
  42 +Example:
  43 +
  44 + <paper-toast text="Terms and conditions" opened duration="0">
  45 + <a href="#">Show more</a>
  46 + </paper-toast>
  47 +
  48 +
  49 +### Styling
  50 +The following custom properties and mixins are available for styling:
  51 +
  52 +Custom property | Description | Default
  53 +----------------|-------------|----------
  54 +`--paper-toast-background-color` | The paper-toast background-color | `#323232`
  55 +`--paper-toast-color` | The paper-toast color | `#f1f1f1`
  56 +
  57 +This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
  58 +In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
  59 +
  60 +@group Paper Elements
  61 +@element paper-toast
  62 +@demo demo/index.html
  63 +@hero hero.svg
  64 +-->
  65 +
  66 +<dom-module id="paper-toast">
  67 + <template>
  68 + <style>
  69 + :host {
  70 + display: block;
  71 + position: fixed;
  72 + background-color: var(--paper-toast-background-color, #323232);
  73 + color: var(--paper-toast-color, #f1f1f1);
  74 + min-height: 48px;
  75 + min-width: 288px;
  76 + padding: 16px 24px;
  77 + box-sizing: border-box;
  78 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  79 + border-radius: 2px;
  80 + left: 0;
  81 + bottom: 0;
  82 + margin: 12px;
  83 + font-size: 14px;
  84 + cursor: default;
  85 + -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  86 + transition: transform 0.3s, opacity 0.3s;
  87 + opacity: 0;
  88 + -webkit-transform: translateY(100px);
  89 + transform: translateY(100px);
  90 + @apply(--paper-font-common-base);
  91 + }
  92 +
  93 + :host(.capsule) {
  94 + border-radius: 24px;
  95 + }
  96 +
  97 + :host(.fit-bottom) {
  98 + width: 100%;
  99 + min-width: 0;
  100 + border-radius: 0;
  101 + margin: 0;
  102 + }
  103 +
  104 + :host(.paper-toast-open) {
  105 + opacity: 1;
  106 + -webkit-transform: translateY(0px);
  107 + transform: translateY(0px);
  108 + }
  109 + </style>
  110 +
  111 + <span id="label">{{text}}</span>
  112 + <content></content>
  113 + </template>
  114 +
  115 + <script>
  116 + (function() {
  117 + // Keeps track of the toast currently opened.
  118 + var currentToast = null;
  119 +
  120 + Polymer({
  121 + is: 'paper-toast',
  122 +
  123 + behaviors: [
  124 + Polymer.IronOverlayBehavior
  125 + ],
  126 +
  127 + properties: {
  128 + /**
  129 + * The duration in milliseconds to show the toast.
  130 + * Set to `0`, a negative number, or `Infinity`, to disable the
  131 + * toast auto-closing.
  132 + */
  133 + duration: {
  134 + type: Number,
  135 + value: 3000
  136 + },
  137 +
  138 + /**
  139 + * The text to display in the toast.
  140 + */
  141 + text: {
  142 + type: String,
  143 + value: ''
  144 + },
  145 +
  146 + /**
  147 + * Overridden from `IronOverlayBehavior`.
  148 + * Set to false to enable closing of the toast by clicking outside it.
  149 + */
  150 + noCancelOnOutsideClick: {
  151 + type: Boolean,
  152 + value: true
  153 + },
  154 +
  155 + /**
  156 + * Overridden from `IronOverlayBehavior`.
  157 + * Set to true to disable auto-focusing the toast or child nodes with
  158 + * the `autofocus` attribute` when the overlay is opened.
  159 + */
  160 + noAutoFocus: {
  161 + type: Boolean,
  162 + value: true
  163 + }
  164 + },
  165 +
  166 + listeners: {
  167 + 'transitionend': '__onTransitionEnd'
  168 + },
  169 +
  170 + /**
  171 + * Read-only. Deprecated. Use `opened` from `IronOverlayBehavior`.
  172 + * @property visible
  173 + * @deprecated
  174 + */
  175 + get visible() {
  176 + console.warn('`visible` is deprecated, use `opened` instead');
  177 + return this.opened;
  178 + },
  179 +
  180 + /**
  181 + * Read-only. Can auto-close if duration is a positive finite number.
  182 + * @property _canAutoClose
  183 + */
  184 + get _canAutoClose() {
  185 + return this.duration > 0 && this.duration !== Infinity;
  186 + },
  187 +
  188 + created: function() {
  189 + this._autoClose = null;
  190 + Polymer.IronA11yAnnouncer.requestAvailability();
  191 + },
  192 +
  193 + /**
  194 + * Show the toast. Without arguments, this is the same as `open()` from `IronOverlayBehavior`.
  195 + * @param {Object|string|undefined} properties Properties to be set before opening the toast.
  196 + * e.g. `toast.show('hello')` or `toast.show({text: 'hello', duration: 3000})`
  197 + */
  198 + show: function(properties) {
  199 + if (typeof properties == 'string') {
  200 + properties = { text: properties };
  201 + }
  202 + for (var property in properties) {
  203 + if (property.indexOf('_') === 0) {
  204 + console.warn('The property "' + property + '" is private and was not set.');
  205 + } else if (property in this) {
  206 + this[property] = properties[property];
  207 + } else {
  208 + console.warn('The property "' + property + '" is not valid.');
  209 + }
  210 + }
  211 + this.open();
  212 + },
  213 +
  214 + /**
  215 + * Hide the toast. Same as `close()` from `IronOverlayBehavior`.
  216 + */
  217 + hide: function() {
  218 + this.close();
  219 + },
  220 +
  221 + /**
  222 + * Overridden from `IronFitBehavior`.
  223 + * Positions the toast at the bottom left of fitInto.
  224 + */
  225 + center: function () {
  226 + if (this.fitInto === window) {
  227 + this.style.bottom = this.style.left = '';
  228 + } else {
  229 + var rect = this.fitInto.getBoundingClientRect();
  230 + this.style.left = rect.left + 'px';
  231 + this.style.bottom = (window.innerHeight - rect.bottom) + 'px';
  232 + }
  233 + },
  234 +
  235 + /**
  236 + * Called on transitions of the toast, indicating a finished animation
  237 + * @private
  238 + */
  239 + __onTransitionEnd: function(e) {
  240 + // there are different transitions that are happening when opening and
  241 + // closing the toast. The last one so far is for `opacity`.
  242 + // This marks the end of the transition, so we check for this to determine if this
  243 + // is the correct event.
  244 + if (e && e.target === this && e.propertyName === 'opacity') {
  245 + if (this.opened) {
  246 + this._finishRenderOpened();
  247 + } else {
  248 + this._finishRenderClosed();
  249 + }
  250 + }
  251 + },
  252 +
  253 + /**
  254 + * Overridden from `IronOverlayBehavior`.
  255 + * Called when the value of `opened` changes.
  256 + */
  257 + _openedChanged: function() {
  258 + if (this._autoClose !== null) {
  259 + this.cancelAsync(this._autoClose);
  260 + this._autoClose = null;
  261 + }
  262 + if (this.opened) {
  263 + if (currentToast && currentToast !== this) {
  264 + currentToast.close();
  265 + }
  266 + currentToast = this;
  267 + this.fire('iron-announce', {
  268 + text: this.text
  269 + });
  270 + if (this._canAutoClose) {
  271 + this._autoClose = this.async(this.close, this.duration);
  272 + }
  273 + } else if (currentToast === this) {
  274 + currentToast = null;
  275 + }
  276 + Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
  277 + },
  278 +
  279 + /**
  280 + * Overridden from `IronOverlayBehavior`.
  281 + */
  282 + _renderOpened: function() {
  283 + this.classList.add('paper-toast-open');
  284 + },
  285 +
  286 + /**
  287 + * Overridden from `IronOverlayBehavior`.
  288 + */
  289 + _renderClosed: function() {
  290 + this.classList.remove('paper-toast-open');
  291 + },
  292 +
  293 + /**
  294 + * Overridden from `IronOverlayBehavior`.
  295 + * iron-fit-behavior will set the inline style position: static, which
  296 + * causes the toast to be rendered incorrectly when opened by default.
  297 + */
  298 + _onIronResize: function() {
  299 + Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments);
  300 + if (this.opened) {
  301 + // Make sure there is no inline style for position.
  302 + this.style.position = '';
  303 + }
  304 + }
  305 +
  306 + /**
  307 + * Fired when `paper-toast` is opened.
  308 + *
  309 + * @event 'iron-announce'
  310 + * @param {{text: string}} detail Contains text that will be announced.
  311 + */
  312 + });
  313 + })();
  314 + </script>
  315 +</dom-module>
... ...
bower_components/paper-toast/test/basic.html
  View file @d004e0c
... ... @@ -95,6 +95,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
95 95 });
96 96 });
97 97  
  98 + test('toast does not get focused', function(done) {
  99 + toast = fixture('show');
  100 + var spy = sinon.spy(toast, 'focus');
  101 + assert.isTrue(toast.noAutoFocus, 'no-auto-focus is true');
  102 + toast.addEventListener('iron-overlay-opened', function() {
  103 + assert.isFalse(spy.called, 'toast is not focused');
  104 + done();
  105 + });
  106 + });
  107 +
98 108 test('toast fires closed event', function(done) {
99 109 toast = fixture('basic');
100 110 toast.show({duration: 350});
... ...