polymerelements / paper-toast Goto Github PK
View Code? Open in Web Editor NEWA Material Design popup toast
A Material Design popup toast
As noted in #50, this is a proposal to add an alias method showText()
that combines commonly used lines of code:
myToast.text = "Hello World!";
myToast.show();
myToast.showText("Hello World!");
This method would serve to reduce the need to use the two lines in the former snippet in conjunction, especially if the setting and immediate showing of text in a <paper-toast>
element is a common action across an app or component.
On Android with Talkback, please note that when I click on the button to trigger each toast, the toast is then spoken aloud 3 times in a row. Any idea why this is the case? It's very redundant. :)
b220515#diff-5eaf4a828ce41e17d9bf6032480c426cR151
Is breaking our Google Developers Codelab frontend. When opened === false
, PaperToast.currentToast
does not exist yet.
There's no way to style this element from outside of element. Please add --paper-toast
CSS variable.
Changing the z-index within :host does not work. Also, I feel there should be a z-index attribute added to toast so that it can be easier to ensure it remains on top.
On Safari Version 9.0 (11601.1.56)
I have the following error
TypeError: document.querySelector('#toast2').show is not a function. (In 'document.querySelector('#toast2').show()', 'document.querySelector('#toast2').show' is undefined)
When I am trying to make a check in key press, if an existing email has been entered, the keyboard remains open in *_IOS *_and the paper toast hides behind it. People using form actions with paper-toast can break in I-Phone safari.
I think, Paper toast should have an option to open from top. This is the repo I was working on. Currently I have made the changes to open it from top but you can remove the css from the demo file.
On the https://elements.polymer-project.org/elements/paper-toast site the documentation missing an example usage source like the other elements has. Please add something like this:
<paper-toast id="example_toast" text="Some message in toast!"></paper-toast>
<script>
document.getElementById('example_toast').show();
</script>
The paper-toast
element is hidden from drawer content on iPad with Safari. I used PSK1.3 for my application
All other browers (including Safari on Mac) show the paper-toast
element and the text completely over the menue (drawer content)
Video Mac OSX 10.11 Safari 9
https://app.crossbrowsertesting.com/public/i09702162beb1f63/livetests/5326203/videos/z5d9ad4a7016b91a9b93
Video from a iPad Pro / 9.3 Simulator (that happens also on a real device)
https://app.crossbrowsertesting.com/livetests/5325596/videos/z2afd32477be1ee13a18
The focus state is not visible. We need a clearer way to identify which item is in focus.
I'm curious why the padding is set to:
padding: 16px 24px 12px;
when the Material Design spec shows single-line toasts have a top and bottom spacing of 14 for each.
https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs
Having an event or add notify: true
to visible
would sure help with this...
I got redirected to web components.org from the old catalog, and I expected to find this element in the paper-ui elements collection, but it wasn't there.
In the end I did a search to find it and it didn't appear to be in any of the paper collections.
I would like to have several toast display on top of each other.
Right now if I create 2 toasts and show them, the first toast get hidden by the second toast.
What I would like it the second toast to push the existing toast up.
Ideally my toast should also be able to push a fab button up too (like in inbox).
Is such behavior supported?
,
When a paper-toast that contains a paper-button has enough text to exceed the default width and is open, tabbing focus onto the button causes it to fall out of alignment with the text. This appears to be because the text of the button becomes bolded when it receives focus, and the extra width caused by the bolding exceeds the inline max-width set on the paper-toast.
The embedded paper-button stays in the same position, but becomes bolded.
The embedded paper-button becomes bolded, but falls down below the rest of the toast text.
https://jsfiddle.net/4gfdfucq/2/
Can also be seen on the demo page for the paper-toast element, in the Persistent Toast example. https://elements.polymer-project.org/elements/paper-toast?view=demo:demo/index.html&active=paper-toast
paper-toast
element in the page that also contains a paper-button
element.paper-toast
element.paper-button
falling down below the text of the paper-toast
.As though it's become possessed by GLaDOs, the alignment abilities of paper-toast
is a lie.
As informed by a colleague getting into Polymer & attempting to rehabilitate it to work probably in vain during a debugging session, its ability to align seems to be failing while paper-dialog
used in the same exact ways (& same align properties) does not fail.
Accordingly, its inheritance of overlay behavior & so on seems to be leading it astray to the extent it's betraying its consumers that is compounded that the common logical step of using paper-dialog
to test its alignment shows it seems paper-toast
has indeed lost its way in the art of aligning itself as its owner bids.
Its lies led us no choice but for paper-dialog
to show it how being a material design toast is done.
fitInto
, horizontalAlign
, &/or vertialAlignment
is used, it goes where it ought to go as its parentElement
bidsnode.horizontalAlign ="left|right"
goes left/rightnode.verticalAlign ="top|bottom"
goes top/bottomnode.horizontalAlign="auto"
=== centerednode.verticalAlign="auto"
=== centered"node.fitInto="someID"
=== the toast fits into someID
http://codepen.io/lozandier/pen/e0f4f64c0cac7aad0ce3b2a71ef47388
It's such a liar, attempt to use any of the alignment properties (fitInto
, horizontalAlign
, vertialAlign
) and it leads end users astray. Its lies is only matched by GLaDOs & Game of Throne's Cersei before her walk of shame.
See this issue's expected outcome section to be on the same page of what I thought thee & fellow developer was promised when using it.
Last 5 contributors to this repo
The above says it all..
A paper toast declared in an element that is a child of the main element with a navigation drawer, the toast appears behind the drawer.
I found out that paper-toast works great with iron-signals. For a complex application, instead of having a hundred <paper-toast> instances, we could just fire iron-signals transmited to global toasts. It was the idea of paper-toast-patterns.
This element allows to open predefined toasts identified by a 'type' attribute so for example, every signals sent with type='warning' will open the warning toast pattern.
What do you think of this approach ?
,
@valdrinkoshi would you mind doing a 1.1.1 release with the updates from 4b1e7fd?
I would like to show the toast then got to another screen. It would be nice to have a callback when the toast closes. I tried using iron-overlay-closed but that doesn't seem to be called.
0.5 paper-toast allows user to swipe the toast off screen. We need to support the same in 1.0.
although "visible" is set to "true", paper-toast is not showing up.
one has to manually invoke document.getElementById('myToast').show();
Setting a paper-toast to fit-bottom on a container should fix it's position relative to the container's viewport.
Scrolling the page with the toast shown should cause toast to 'stick' to the bottom of the container viewport.
Scrolling shows that the toast position is fixed relative to the document instead of being relative to the container.
https://jsbin.com/tazivokatu/edit?html,output
Extracted from paper-toast standard demo page.
#container
Keyboard navigation issues:
Focus:
Toast Issues:
Windows Specific issues with NVDA:
Whenever is paper-toast
hidden from the view (function hide
is called) and user has focus on paper-input
that is inside paper-dialog
(and obviously paper-dialog
is shown) , focus on that input is lost and immediately restored. This behavior makes text inside paper-input
selected.
This is really annoying.. Imagine a situation, where the user writes something in paper-input
and paper-toast
will just dissapear. Well, everything the user has written will be lost, because he pressed some key when whole text was selected.
I tried to search for the cause and the only thing i found out was that is has something to do with iron-overlay-behavior
.
I am using newest elements from master branch
Hiding paper-toast
shouldn't lose focus on currently focused input inside paper-dialog
Whenever is paper-toast
hide function called, the focus on element is lost and immediately restored, with whole text selected. (works only if is paper-input
inside paper-dialog
)
paper-toast
element, also create paper-dialog
with paper-input
inside it (you can also try paper-textarea
).paper-dialog
and in console, try to open paper-toast
with some duration (default is 3000 which is enough).paper-input
to focus it just before the duration on paper-toast
expires and wait until paper-toast
will close.iron-overlay-behavior
fires events on opening, closing and canceling the overlay. The paper-toast documentation says these events will be fired as well, but they are not fired.
Is this the intended behavior? Because adding Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
in the ยด_renderOpened` function will easily fire this event.
Without the closed event there is no way to know when a toast is closed.
My code:
<?php if( !empty( $error )){ ?>
<paper-toast id="Toasteror" text="<?php echo $error; ?>"></paper-toast>
<script>document.querySelector('#Toasteror').show();</script>
<?php } ?>
In chrome and other browsers it works fine. This error only occurs in MS Edge.
I have to import jQuery to show toast in all browsers?
The paper-toast
element occasionally gets CSS element style top: 0px
.
Subsequent invocations of paper-toast
's method .show()
cause the toast animation to start from the top of the page. After the animation completes, the toast displays properly at the bottom of the page.
The paper-toast
element should by default display in the lower-left portion of the screen without expanding to the top of the screen.
The paper-toast
element's animation behavior should not change permanently depending on when its .show()
method is first invoked.
The paper-toast
element fills the page top to bottom.
The paper-toast
element animates at the top of the page before finishing at the bottom.
https://jsbin.com/rudodozawa/edit?html,console,output
Call .show() method on paper-toast
as Polymer is actively importing elements with Polymer.Base.importHref()
while Page.js is changing what's displayed in iron-pages
Add
this.style.position = "";
this.style.top = "";
to paper-toast
's methods:
.center()
https://jsbin.com/vorufazace/1/edit?html,output
With paper-toast
, we could have some prefix content that precedes the text.
One way would be to have prefix
attribute on the children, in order for paper-toast
to lay the content in the right order:
<paper-toast text="Error!">
<iron-icon icon="error-outline" prefix></iron-icon>
</paper-toast>
Another option is to avoid setting text
and just adding the content in the desired order:
<paper-toast>
<iron-icon icon="error-outline"></iron-icon>
<span>Error!</span>
</paper-toast>
During paper-toast shown on screen hide() do nothing.
When you have a paper-toast requesting an action such "This didn't work. Retry" or "Your store is live. View your store" the toast should not disappear as the user is hovering over the toast.
Clicking the 2 buttons on the demo page does not trigger a toast message on Chrome v43 on IOS (iPhone 6plus).
each time opened
change, the auto-close debounce should be canceled, and eventually reset.
Hi,
This is the typical structure of an app created with polymer-cli:
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>Menu</app-toolbar>
<paper-menu selected="[[page]]" attr-for-selected="name">
<paper-item name="view1"><a class="item fit" href="/view1">View One</a></paper-item>
<paper-item name="view2"><a class="item fit" href="/view2">View Two</a></paper-item>
<paper-item name="view3"><a class="item fit" href="/view3">View Three</a></paper-item>
</paper-menu>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div title>My App</div>
</app-toolbar>
</app-header>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
If my-view1 has a <paper-toast>
, the toast will be partially covered by <app-drawer>
.
This has come up before, but with the old paper-drawer widgets.
At the moment, I am "solving" this by creating a toast right in index.html and using that one application-wide. However, it would be better to find a "real" solution... Any hints?
It would be cool to be able to set an attribute for an infinite duration to use the paper-toast for things like showing a terms and cookie policy link on a site, shown here which can't go away until it is closed by the user.
You can already just put in a huge wait so it's necessary, It would just be cool.
Maybe something like
<paper-toast permanent></paper-toast>
or even possible
<paper-toast wait="0"></paper-toast>
I'm not sure what actually happens when you put a wait time of '0', except it calls debounce with a wait of '0' which calls async with a wait time of '0'
paper-toast.html
show: function() {
if (PaperToast.currentToast) {
PaperToast.currentToast.hide();
}
PaperToast.currentToast = this;
this.removeAttribute('aria-hidden');
this._setVisible(true);
this.fire('iron-announce', {
text: this.text
});
this.debounce('hide', this.hide, this.duration);
},
polymer.html
Polymer.Async = {
_currVal: 0,
_lastVal: 0,
_callbacks: [],
_twiddleContent: 0,
_twiddle: document.createTextNode(''),
run: function(callback, waitTime) {
//- if (waitTime === 0) possibly just return so the function never gets run
if (waitTime > 0) {
//- Not relevant to this issue, but what does the ~ do to the return value of setTimeout?
return ~setTimeout(callback, waitTime);
} else {
this._twiddle.textContent = this._twiddleContent++;
this._callbacks.push(callback);
return this._currVal++;
}
},
cancel: function(handle) {
if (handle < 0) {
clearTimeout(~handle);
} else {
var idx = handle - this._lastVal;
if (idx >= 0) {
if (!this._callbacks[idx]) {
throw 'invalid async handle: ' + handle;
}
this._callbacks[idx] = null;
}
}
},
_atEndOfMicrotask: function() {
var len = this._callbacks.length;
for (var i = 0; i < len; i++) {
var cb = this._callbacks[i];
if (cb) {
try {
cb();
} catch (e) {
i++;
this._callbacks.splice(0, i);
this._lastVal += i;
this._twiddle.textContent = this._twiddleContent++;
throw e;
}
}
}
this._callbacks.splice(0, len);
this._lastVal += len;
}
};
new(window.MutationObserver || JsMutationObserver)(Polymer.Async._atEndOfMicrotask.bind(Polymer.Async)).observe(Polymer.Async._twiddle, {
characterData: true
});
Polymer.Debounce = function() {
var Async = Polymer.Async;
var Debouncer = function(context) {
this.context = context;
this.boundComplete = this.complete.bind(this);
};
Debouncer.prototype = {
go: function(callback, wait) {
var h;
this.finish = function() {
Async.cancel(h);
};
h = Async.run(this.boundComplete, wait);
this.callback = callback;
},
stop: function() {
if (this.finish) {
this.finish();
this.finish = null;
}
},
complete: function() {
if (this.finish) {
this.stop();
this.callback.call(this.context);
}
}
};
function debounce(debouncer, callback, wait) {
if (debouncer) {
debouncer.stop();
} else {
debouncer = new Debouncer(this);
}
debouncer.go(callback, wait);
return debouncer;
}
return debounce;
}();
๐ฑ
In firefox, its working fine.
it might be a chrome issue http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform
PaperToast not showing at all in Dart. Posting here following this post:
https://groups.google.com/a/dartlang.org/forum/#!topic/web/qGQOwa6HvUU
Tried this, but still no luck:
void test() {
PaperToast toast=new PaperToast();
toast.text='hello';
toast.async(() { toast.show(); });
}
For example, 0.5 fired core-overlay-open
when the toast opened. It would be nice to have events fired when the toast opens/closes so users can latch onto them. My use case is kicking off other animations once the toast comes up.
,
When using paper-toast with class="fit-bottom"
, it has the right width (same as the element assigned to toast.fitInto
) but it's always aligned to the left edge of the window.
I encountered this in my test project which is based on the Starter Kit Plus.
I added a page with a form with id="myform"
and this toast:
<paper-toast id="toast" class="fit-bottom"></paper-toast>
#toast {
--paper-toast-background-color: red;
--paper-toast-color: white;
}
Then I open it like this:
this.$.toast.fitInto = this.$.myform;
this.$.toast.text = 'Error: ' + err;
this.$.toast.open();
The toast has the same width as myform
but it's aligned to the left of the window, over the drawer.
currently paper-toast overrides center and causes a relayout at each call of it. Instead of this, it should override resetFit & set top/bottom/left/position
there (causing less relayouts). This should allow to remove _onIronResize
method too.
https://github.com/PolymerElements/paper-toast/blob/master/paper-toast.html#L33 should be on-click
instead of onclick
According to the material spec, a toast on desktop should be on the bottom center. (Deep link for the image.) It looks like paper-toast doesn't support it.
I tried be setting horizontalAlign='center' and 'middle', both result in an error to be thrown. I checked the docs, which refer to iron-fit-behavior, and it doesn't mention center or middle either, just left, right, and auto (auto doesn't center either). Finally I checked the demo of iron-fit-behavior. Initially it is centered both horizontally and vertically, but when I press the 'bottom' button to go down, it also goes left or right and keeps jumping based on scroll position (which may be a bug as well), but it doesn't stay horizontally centered.
Hi
I want to align my button at the end of paper-toast , on the right.
If the text has two words or a big phrase it's indifferent for me the button must be in the right of the toast
There is a way?
<paper-toast id="toast1" duration="0" text="This toast will stay opened until you close it, or open another toast."> <paper-button onclick="toast1.toggle()" class="yellow-button">Close now!</paper-button> </paper-toast>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.