polymerelements / paper-toast Goto Github PK

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?

With paper-toast, we could have some prefix content that precedes the text.

Option 1

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>

Option 2

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>

The focus state is not visible. We need a clearer way to identify which item is in focus.

Description

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.

Expected outcome

1. When fitInto, horizontalAlign, &/or vertialAlignment is used, it goes where it ought to go as its parentElement bids

• node.horizontalAlign ="left|right" goes left/right
• node.verticalAlign ="top|bottom" goes top/bottom
• node.horizontalAlign="auto" === centered
• node.verticalAlign="auto"=== centered
• "node.fitInto="someID" === the toast fits into someID

Actual outcome

paper-toast lies.

Live Demo

http://codepen.io/lozandier/pen/e0f4f64c0cac7aad0ce3b2a71ef47388

Steps to reproduce

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.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Recommended Reviewers

Last 5 contributors to this repo

• @valdrinkoshi
• @notwaldorf
• @abdonrd
• @azakus
• @rictic

My code:

<?php if( !empty( $error )){ ?>
   <paper-toast id="Toasteror" text="<?php echo $error; ?>"></paper-toast>
   <script>document.querySelector('#Toasteror').show();</script>
<?php } ?>

what MS Edge says:

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?

b220515#diff-5eaf4a828ce41e17d9bf6032480c426cR151

Is breaking our Google Developers Codelab frontend. When opened === false, PaperToast.currentToast does not exist yet.

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.

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>

,

There's no way to style this element from outside of element. Please add --paper-toast CSS variable.

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 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.

In firefox, its working fine.

it might be a chrome issue http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform

E.g. http://jsbin.com/rezeru/1/edit?html,output

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.

No docs at all here: https://github.com/PolymerElements/paper-toast/blob/56ff0143cf409a81d505dfa744f713dee68c5647/paper-toast.html

although "visible" is set to "true", paper-toast is not showing up.
one has to manually invoke document.getElementById('myToast').show();

Keyboard navigation issues:

• I am unable to use just the keyboard to navigate through the buttons and activate one to trigger the toast. When I am using a screen reader, I am able to access the buttons and use the force click key command to trigger the toast, but enter does not work.

Focus:

• The animation on the buttons only appears when I use the mouse to click, not when I use the keyboard.

Toast Issues:

• The toasts are not being read aloud by screen readers. These need to be read as announcements
• In the Get Messages toast, there is the ability to click "retry". This is not keyboard accessible. If there is an action available within the toast, we need to ensure a user can get to it with the keyboard.
• The toast times out. If a screen reader is enabled, we should consider extending the length of time it is displayed.
• I am unable to trigger the toast at all on Chrome OS, even when clicking the button with a mouse.

Windows Specific issues with NVDA:

• Chrome / NVDA: I can access the buttons but NVDA reads them as one: "button discard draft button get messages". This is a confusing user experience.
• Firefox / NVDA: there is a "blank" announced between the two buttons.

https://github.com/PolymerElements/paper-toast/blob/master/paper-toast.html#L33 should be on-click instead of onclick

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.

The fit-bottom class is no longer applied. We lost the responsiveness in the port:

We should put this back so the toast adheres to the MD spec and works well on mobile.

Description

Setting a paper-toast to fit-bottom on a container should fix it's position relative to the container's viewport.

Expected outcome

Scrolling the page with the toast shown should cause toast to 'stick' to the bottom of the container viewport.

Actual outcome

Scrolling shows that the toast position is fixed relative to the document instead of being relative to the container.

Live Demo

https://jsbin.com/tazivokatu/edit?html,output

Extracted from paper-toast standard demo page.

Steps to reproduce

1. Click the 'Open Toast' button.
2. Scroll the page while the toast is displayed.
3. Observe that the toast does not move with #container

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. :)

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.

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.

It looks like this:

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;
    }();

🐱

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>

Description

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

Expected outcome

Hiding paper-toast shouldn't lose focus on currently focused input inside paper-dialog

Actual outcome

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)

Steps to reproduce

1. Create paper-toast element, also create paper-dialog with paper-input inside it (you can also try paper-textarea).
2. On web, open paper-dialog and in console, try to open paper-toast with some duration (default is 3000 which is enough).
3. Click on the paper-input to focus it just before the duration on paper-toast expires and wait until paper-toast will close.

Browsers Affected

• Chrome
• Firefox

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.

Description

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.

Expected outcome

The embedded paper-button stays in the same position, but becomes bolded.

Actual outcome

The embedded paper-button becomes bolded, but falls down below the rest of the toast text.

Live Demo

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

Steps to reproduce

1. Put a paper-toast element in the page that also contains a paper-button element.
2. Open the page in a web browser.
3. Click the text of the paper-toast element.
4. Press the tab key.
5. Observe the paper-button falling down below the text of the paper-toast.

Browsers Affected

• Chrome
• Firefox
• Safari 9 - not sure
• Safari 8 - not sure
• Safari 7 - not sure
• Edge - not sure
• IE 11
• IE 10

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(); });
}

Clicking the 2 buttons on the demo page does not trigger a toast message on Chrome v43 on IOS (iPhone 6plus).

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.

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)

During paper-toast shown on screen hide() do nothing.

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.

each time opened change, the auto-close debounce should be canceled, and eventually reset.

,

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.

0.5 paper-toast allows user to swipe the toast off screen. We need to support the same in 1.0.

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

Description

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.

Expected outcome

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.

Actual outcome

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.

Live Demo

https://jsbin.com/rudodozawa/edit?html,console,output

Steps to reproduce

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

Work-around code

Add
this.style.position = "";
this.style.top = "";
to paper-toast's methods:
.center()
https://jsbin.com/vorufazace/1/edit?html,output

Browsers Affected

• Chrome
• Firefox // untested
• Safari 9 // reported unaffected
• Safari 8 // untested
• Safari 7 // untested
• Edge // tested unaffected
• IE 11 // untested
• IE 10 // untested

,

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 ?

Description

The paper-toast element is hidden from drawer content on iPad with Safari. I used PSK1.3 for my application

Expected outcome

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

Live Demo

Video from a iPad Pro / 9.3 Simulator (that happens also on a real device)

https://app.crossbrowsertesting.com/livetests/5325596/videos/z2afd32477be1ee13a18

Browsers Affected

• iPad Pro / 9.3 Simulator Mobile Safari 9.0

Having an event or add notify: true to visible would sure help with this...

@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.