Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Please add new toasts supports #260

Closed
nanixne opened this Issue Jan 6, 2019 · 23 comments

Comments

Projects
None yet
3 participants
@nanixne
Copy link

nanixne commented Jan 6, 2019

Recent bootstrap has new component toasts added and need us to initialize it. Could you add native support to it?

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 6, 2019

If you could link me to the page of their demo, that would be great.

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 7, 2019

I believe this isn't supported in the original plugins, so we won't implement it.

@thednp thednp closed this Jan 7, 2019

@nanixne

This comment has been minimized.

Copy link
Author

nanixne commented Jan 7, 2019

https://getbootstrap.com/docs/4.2/components/toasts/

could you let me know how do you tell it original plugins or not? @thednp

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 7, 2019

We will analyze it and have it working in the following days or week. Seems a simple straight forward component. Thanks for the heads up.

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 7, 2019

I will reopen this and leave it this issue untouched until we have the original component closer to RC because I think it seems a bit unpolished.

@thednp thednp reopened this Jan 7, 2019

thednp added a commit that referenced this issue Jan 9, 2019

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 9, 2019

OK @nanixne please download latest master and give it a test. Some considerations:

Initialization

  • use var myToast = new Toast(document.querySelector('[data-dismiss="toast"]'), options );
  • the <button type="button" class="close" data-dismiss="toast"> is the initialization element, it also holds initialization object
  • options are/(should be) exactly the same as for the original plugin

Using Methods

  • use myToast.hide(noTimer) to hide
  • use myToast.show() to show
  • use myToast.dispose() to hide and destroy the initialization

Events

  • the events are exactly the same as for the original plugin
  • the event target is the <div class="toast"> element, the parent of the <button type="button" class="close" data-dismiss="toast">

Please try and provide feedback.

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 14, 2019

@nanixne I'm still waiting for your approval on the new component functionality and features.

@roymilder

This comment has been minimized.

Copy link

roymilder commented Jan 15, 2019

hi @thednp

first of all thanks for your efforts on this library.
i'm testing your toast plugin by implementing it as an angular component.

I have it working, so that looks promising. I will keep you posted on my progress, I'm going to spend the coming hours on this item, so you may expect some feedback.

I'm getting the following error message:

TypeError: globalObject[getComputedStyle] is not a function

caused by:
node_modules/bootstrap.native/dist/bootstrap-native-v4.js#222

I'm probably forgetting to do something with transitionDuration, however the bootstrap docs are not mentioning this as a valid toast option.

If I manually set supportTransitions to false, everything works as expected and I can trigger a new toast by using the .show() method.

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 15, 2019

@roymilder I cannot confirm the issue, perhaps you have a test site? I've done a one hour translation of the original plugin into native JavaScript, did some tests and everything seem to work fine.

@roymilder

This comment has been minimized.

Copy link

roymilder commented Jan 15, 2019

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 15, 2019

Nop I'm not familiar with that Angular stuff ;)

@roymilder

This comment has been minimized.

Copy link

roymilder commented Jan 15, 2019

Lol :)
just clone the repo, run npm serve
browse to localhost:4200
you will see a test site with one button: hit it and you will see an error in your console.log

TypeError: globalObject[getComputedStyle] is not a function

this error relates to bootstrap-native-v4.js:218

      var duration = supportTransitions ? globalObject[getComputedStyle](element)[transitionDuration] : 0;

if you manually set

supportTransitions = false;

in bootstrap-native-v4.js

everything works well

Ah, and to explain what the button does:

    this._toast = new bsn.Toast(this.toast.nativeElement.querySelector('[data-dismiss="toast"]'), this._options);
    this._toast.show();

with
this._options being:

  private _options = {
    animation: true,
    autohide: false,
    delay: 3000
  };
@roymilder

This comment has been minimized.

Copy link

roymilder commented Jan 15, 2019

after digging in the code; perhaps it has something to do with the angular way of selecting the element. I'll try a few things tomorrow and will let you know.

besides this one thing i have the toast component running within an angular component and it is working perfect so far.

so, thanks..

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 15, 2019

Alright @roymilder sorry I can't help much with Angular stuff :|

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 17, 2019

Any update on this guys? @roymilder & @nanixne

@roymilder

This comment has been minimized.

Copy link

roymilder commented Jan 17, 2019

@thednp haven't figured out the weird bug regarding the supportTransitions setting yet.
However I did test the toast support and it works fine! haven't found any other bug so far.

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 17, 2019

@thednp haven't figured out the weird bug regarding the supportTransitions setting yet.
However I did test the toast support and it works fine! haven't found any other bug so far.

Probably because there is no browser/mock-up browser in place?

@nanixne

This comment has been minimized.

Copy link
Author

nanixne commented Jan 23, 2019

@thednp I tested on angular 7, it works! super duper!, I think for normal html page it should work too.

  1. I tested animation, autohide and delay all three options work!
  2. method show and hide work! I did not test dispose, but I think it will work as expected!

you are super!
Thanks, I am ready for new release!

@nanixne

This comment has been minimized.

Copy link
Author

nanixne commented Jan 23, 2019

@roymilder I took look at your code; it missed initialization part. new Toast(element, options) should be called some where before it is invoked.

@roymilder

This comment has been minimized.

Copy link

roymilder commented Jan 23, 2019

@roymilder I took look at your code; it missed initialization part. new Toast(element, options) should be called some where before it is invoked.

Thanks for the feedback @nanixne, however, the initialization is on line 34 of toast.component.ts.
The toast is working, just the transition is failing.

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 23, 2019

So @roymilder perhaps your CSS3 isn't right? I haven't checked but since our component uses transitionEnd to mark the end of transitions, might explain and hopefully lead to a solution in your app.

@roymilder

This comment has been minimized.

Copy link

roymilder commented Jan 25, 2019

my import handling was wrong:
after adding the library to my typings.d.ts and calling Toast like this:
new (<any>window).Toast(this.toast.nativeElement, this._options);

globalObject was correctly set and everything works fine.

Haven't found any bugs related to the Toast. So, thanks!


https://stackoverflow.com/questions/37430055/typescript-attach-module-namespaces-to-window

@thednp

This comment has been minimized.

Copy link
Owner

thednp commented Jan 25, 2019

That's great, I think we can close this as solved, we implemented the component and was tested in a "real world" environment, other issues will take new threads.

Cheers.

@thednp thednp closed this Jan 25, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.