Hash URLs

[cferdinandi]

Hash URLs

[tomByrer]

Good idea. That would be a distinct difference between using JS & CSS-only for tabs organized layouts.

[cferdinandi]

@silvenon @tomByrer I agree, this is a good idea! However, it can be done already today using the API. This should work:

;(function (window, document, undefined) {

    'use strict';

    // Get the hash
    var tabID = window.location.hash;

    // If there's a hash and tabby has been defined, toggle your tab
    if ( tabID && typeof tabby === 'function' ) {
        var toggle = document.querySelector('[data-tab="' + tabID + '"]'); // Get the tab toggle that matches the hash
        tabby.tabby.toggleTab( toggle, tabID );
    }

})(window, document);

[silvenon]

Yes, it can be done, but I was proposing it as a feature of tabby, instead of having to manually do it on every project.

Also, your example covers only if the hash already exists, we should also implement changing the hash when a tab is toggled.

[cferdinandi]

I hear you, but that's why the API exists. Tabby is intentionally lightweight, and a feature like this is relatively easy to bolt-on with the API.

[cferdinandi]

It's worth mentioning: Adding functionality like that not only adds weight to the code, but forces me to make decisions that I don't at the moment.

1. Does the navigation remain on non-supporting browsers, since links could still function as anchor links?
2. What happens in that case if someone is using buttons for toggles instead of links?
3. Should I also support (or even require) an href value for link toggles?

Those are things that might vary by project, and are frankly best left to the developers using the scripts rather than me.

[tomByrer]

Perhaps document somewhere, in README or WiKi?

[cferdinandi]

@tomByrer - I can certainly look into adding some API examples in docs.

@silvenon - Regarding updating the URL on click, that may or may not be a desired behavior, which is again why I prefer to leave these things to the API. But that would be handled using the callback API:

tabby.init({
    callbackAfter: function ( toggle, tabID ) {
        if ( history.pushState ) {
            history.pushState( {
                pos: tabID
            }, '', window.location.pathname + tabID );
        }
    }
});

[silvenon]

This functionality can be optional, passed as a flag when initializing tabby. 3. decision is IMO easy, just use href for <a> and use data-tab on non-<a> tabs. For the 1. decision, I would leave the links, because they can still link to that content. The 2. decision is tough, I agree.

[cferdinandi]

@silvenon But the thing is, it's almost as easy to just let people who want this functionality build it themselves with the API. It gives them the freedom to make those decisions based on their project, and keeps the core code weight down. I could make each of those decisions a user configurable variable, but the code can bloat up pretty fast that way.

The only benefit I can see to baking this in is that people who have no idea how to write JS can still get in on it. But this is simple enough to learn, so I'm leaving it as an optional API feature.

[silvenon]

Ok, fair enough 😃