Added shown and hidden events.

[threax]

Added the shown.bs.modal and hidden.bs.modal events to the modal dialog.

[thednp]

Sorry, no custom events except the carousel. If you want this to go live, please open an issue and ask some opinions, most people don't need these events. Thank you.

[kuus]

@thednp can you explain why you would not add these events? How do you fire a callback when a modal is close without them? A modal can be closed in several ways, so it certainly makes no sense to attach listeners e.g. to close and cancel buttons and to the esc key. Furthermore, this PR uses the same technique used in the carousel and it's just 6 lines of code

[thednp]

@kuus

In fact it's about less lines, but that's not the point. The idea is to keep things to as minimal as possible so that everyone can fork and adapt to so many needs.

I am also not against this, just to make sure I make things clear, we have to take decisions in the best interests of the entire community and not just a group of people, which means I wish we have more people involved and express their opinions in these changes.

[kuus]

I see. But, isn't the point of this project to provide Bootstrap functionalities without js dependencies? It seems to me that the modal component without events is very limited comparing to Bootstrap's one. Having said that I forked my version, IMHO it's such a basic feature that I think it should be included

[thednp]

Give me 5 more opinions and the next version will have it.

[dgrammatiko]

One more 👍 from me as well!

PS I already had asked for this few months ago...

[thednp]

I know @dgt41 I hope you and the guys here aren't mad about this.

Also I wish to know from everyone all the components we need to add this functionality. Currently we have carousel, modal is on the topic, dropdown, tabs and collapse might be of interest perhaps.

[dgrammatiko]

Oh, well we can't be mad about your excellent code! Though, as I said before, for modals some event or callback is needed if you want to use it with iframes (and reload the iframe on open, destroy it on close).

[thednp]

As a proposed draft, I was thinking about a new utility to help us quickly register and dispatch events

// definition
var bootstrapCustomEvent = function(eventName,component){
  if (('CustomEvent' in window) && window.dispatchEvent) {
    this.modal.dispatchEvent(new CustomEvent(eventName+".bs."+component));
  }
};

// usage
bootstrapCustomEvent.call(this,'shown','modal'); // or bCE.call(self,eventName,component) if `this` is not same with `self`

Do you think this would make sense?

[dgrammatiko]

💯

[kuus]

As a proposed draft, I was thinking about a new utility to help us quickly register and dispatch events

what if the element itself is passed as the context to the utility? Doing so it can be reused throughout all the various bootstrap components.

// definition
var bootstrapCustomEvent = function(eventName, componentName) {
  if (('CustomEvent' in window) && window.dispatchEvent) {
    this.dispatchEvent(new CustomEvent(eventName+".bs."+component));
  }
};

// usage
bootstrapCustomEvent.call(this.modal, 'shown', 'modal');

[dgrammatiko]

@kuus isn't this in bootstrapCustomEvent.call(this,'shown','modal'); referring to the caller instance, in this case Modal?

[thednp]

@dgt41 that's right. That would leave room for the utility to get all the juice of the instance.

[kuus]

@dgt41 I was imagining to put that bootstrapCustomEvent as a sort of static method in the Utils.js file so that it can be reused in the carousel or wherever else

[thednp]

@kuus go ahead and test in your environment, test both see what's best for you, let us know.

[kuus]

This works for me: https://github.com/kuus/bootstrap.native/commit/98c0844e16d113133fc8ea9e52ec9a4b6cec804d

what you think?

[thednp]

I think it looks good, now the question is: does it work 100% perfect in all IE8+ browsers with our polyfill/minifill?

Also what about other components like collapse, tabs, alert, etc?

A word of advice: I warn you NOT to do anything about scrollspy and affix, leave them alone.

[kuus]

I think it looks good, now the question is: does it work 100% perfect in all IE8+ browsers with our polyfill/minifill?

I can't test on IE at the moment, but if it was working before it should be the same now

Also what about other components like collapse, tabs, alert, etc?

We could add events to those as well in another moment. I could prepare a pull request next week

A word of advice: I warn you NOT to do anything about scrollspy and affix, leave them alone.

Fine with that!

[RyanZim]

👍 For adding events to modal.

[thednp]

I finished adding events to ALL components (most as the original components events) as well as a ton of improvements. The new BSN is gonna be at least 8K smaller size :)

Can't wait for your opinions and test results.

[dgrammatiko]

@thednp can't wait for the commit ;)

[thednp]

Hey I started to rename some methods, some will be same as the original plugins, some for better readability, do you think users will mind this?
Of course the release changelog will mention all changes.

[dgrammatiko]

Personally I will be able to manage those renamed functions (hopefully) but as a general rule of thumb if there are backwards incompatible changes, according to semver, there should be a major release e.g. 2.0.0

[thednp]

How about 1.5?

[dgrammatiko]

That would be fine as well

[thednp]

All right then. Man a lot of stuff to document.