Tab events

[igitur]

Hi,

I'd like to attach a handler for when a tab is activated (because I have some flot charts that need to be redrawn).

Is there an existing event that I can attach to?

thanks

[amorey]

You can activate a tab via JavaScript using `mui.tabs.activate(paneId)`. Would that work or do you need an event to attach to?

[igitur]

The activation of the tab must still be the old, manual way where a user clicks on the tab. I need an event for after the new tab is shown. Similar to Bootstrap shown.bs.tab

[amorey]

Ok, let me think about it and I'll get back to you tonight.

[igitur]

If you're going that route, a full event system for all kinds of events
might be helpful. Would it make MUICSS much heavier? No rush though...
On 19 Aug 2015 8:51 PM, "Andres Morey" notifications@github.com wrote:

Ok, let me think about it and I'll get back to you tonight.

—
Reply to this email directly or view it on GitHub
#42 (comment).

[amorey]

Adding events won't add much overhead. Here's an example of how the <select> component dispatches a "change" event:
https://github.com/muicss/mui/blob/master/src/js/forms/select.js#L324

For starters, how about something similar to Bootstrap (all events fire on tab element):

mui.tabs.showstart - Fires when tab is activated but before pane is visible
mui.tabs.showend - Fires when pane is visible
mui.tabs.hidestart - Fires when tab is inactivated but before pane is hidden
mui.tabs.hideend - Fires when pane is hidden

tabEl.addEventListener('mui.tabs.showstart', function(ev) {
  // user has activated the tab
});

Another option is to trigger a more general event (e.g. on the window):

window.addEventListener('mui.tabs.event', function(ev, type, paneId) {
  // type is one of showstart|showend|hidestart|hideend
});

Let me know your thoughts!

[amorey]

Also, if you have a few minutes, I'd love to get your opinion on the data-attributes proposal: #41

[igitur]

I prefer this approach:

tabEl.addEventListener('mui.tabs.showstart', function(ev) {
  // user has activated the tab
});

But the old tab and new tab should be passed as parameters. Users will sometimes want to know which tab they're exiting.

[amorey]

In terms of passing the old/new tabs how about using Bootstrap's method?

tabEl.addEventListener('mui.tabs.showstart', function(ev) {
  ev.target  // newly activated tab
  ev.relatedTarget  // previous active tab
});

[amorey]

@igitur I implemented the spec defined above in the tab-events branch:
https://github.com/muicss/mui/blob/tab-events/src/js/tabs.js#L52-L99

One subtlety is that events are dispatched on the "tab" elements (<li>) not on the toggle elements (e.g. <a data-mui-toggle="tab" data-mui-controls="pane-2">Tab-2</a>). Let me know if this is ok or if you were expecting something else.

[amorey]

@igitur Any thoughts on the tab events implementation? I'm wondering if it makes more sense to dispatch the event on the toggle element and to communicate the pane ID's instead:

toggleEl.addEventListener('mui.tabs.showstart', function(ev) {
  ev.paneId  // pane ID of newly activated tab
  ev.relatedPaneId  // pane ID of previously active tab
});

[igitur]

@amorey I promise I'll look at this soon. Just give me a few days.

[simonkastenhuber]

Any updates on this?

[amorey]

@simonkastenhuber The code is ready to go! Any thoughts on dispatching the event on the toggle element and passing the pane IDs like this:

toggleEl.addEventListener('mui.tabs.showstart', function(ev) {
  ev.paneId  // pane ID of newly activated tab
  ev.relatedPaneId  // pane ID of previously active tab
});

[simonkastenhuber]

Awesome! Sounds good to me
Thanks.

[amorey]

@simonkastenhuber - Tab events are live in v0.1.22. Let me know if you run into any problems: https://www.muicss.com

[amorey]

I added tab events documentation to the site: https://www.muicss.com/docs/v1/css-js/tabs

[simonkastenhuber]

hey @amorey! i've updated to the new version and it works like a charm. Thanks a lot. Keep up the great work!

[amorey]

Nice! I'm glad to hear it's working well!

[igitur]

I'm a bit late here, but just want to add that tab events are working well for me now.

[amorey]

Great! Thanks for the update!