Framework7: TABS - push state in url

[murliatdure]

Switching between tabs can we push the tab state in URL?

[nolimits4web]

Not supported by default

[murliatdure]

Can we achieve this using some parameters in routers/ pushTabState etc?

[murliatdure]

Do you think this is achievable?

[sinceow]

@murliatdure @nolimits4web Is there a proper way to solve the problem?

[JosephShenton]

?

[valnub]

You might have to modify router.js and add a new hash to the URL/history every time a tab is switched.

If you want, you're welcome to create a plugin using the plugin API (https://framework7.io/docs/plugins-api.html) or create a PR (https://help.github.com/articles/about-pull-requests). If you need help, F7 forums is always a good start: http://forum.framework7.io

[kinimodmeyer]

this feature is so important for an app.
it is nessecary that you are in the tab where you where before when you navigate back.
(also with more back steps)
for me it is a must have feature for a mobile framework.

i tried to add it ... i do the track of tabs with the following:

function replaceUrlParam(url, paramName, paramValue){
    if (paramValue == null) {
        paramValue = '';
    }

    var pattern = new RegExp('\\b('+paramName+'=).*?(&|$)')

    if (url.search(pattern) >= 0) {
        return url.replace(pattern,'$1' + paramValue + '$2');
    }

    return url + (url.indexOf('?')>0 ? '&' : '?') + paramName + '=' + paramValue
}

$$(document).on('click', '.page-on-center .tab-link', function (e) {
    history.replaceState('', '', replaceUrlParam(window.location.hash, 'tab', $$(this).data('tab')));
});

but i have problems in setting the tab in the "beforeanimation" callback.
i think we need here a core change.
something like this works only in browser/ios and is a hack
(in android he dont do the animation on beforeanimation):

$$(document).on('page:beforeanimation', function (e) {
    var page = e.detail.page;

    params = $$.parseUrlQuery(window.location.href);

    if (page.from == 'left') {
        if (params.tab) {
            $$('.page-on-left .tab-link').removeClass('active');
            $$('.page-on-left .tab-link-highlight').remove();
            $$('.page-on-left .tab-link[data-tab="'+params.tab+'"]').addClass('active');
            $$('.page-on-left .toolbar-inner').append(
                '<span class="tab-link-highlight" style="width: '+(100 / $$('.page-on-left .tab-link').length)+'%; transform: translate3d('+(100 * $$('.page-on-left .tab-link[data-tab="'+params.tab+'"]').index())+'%, 0px, 0px);"></span>');
        }
    }

just look at big apps like facebook. you cant do it at the moment without this ...
(no one want to land for example on the first tab when he clicks on the second tab a link deeper and then back (or back again))

@nolimits4web @valnub

[valnub]

The feature will be added to v2 as an optional opt-in configuration variable. When set, tabs will be added to history.

[kinimodmeyer]

@valnub thanks for the answer. but i think "adding" would not be the right handling.
i think replacing would be the right handling, because you dont want to switching tab on
back navigation, you just want to land in the "right" tab.

will it load the tab on back navigation?

[valnub]

@kinimodmeyer What is "the right tab"?

[kinimodmeyer]

okay here is one example ( http://badminton-bbv.de/nu/www/ )
when you go to "Menu" -> "Dokumente" then to tab "Jugend" and then to tab "LSP" and then
you go to "Menu" -> "Termine". when you now go back. you should be in "Dokumente" tab "lsp".
when you go again back you should not be on "Dokumente" tab "jugend". you should be on home
(or first tab, but i dont think you should be on first tab)

hope this makes clear that you should use "history.replaceState" instead of always push new entry.

PS this was a simple example if you go under "Menu" -> "Vereine" search for "Neuendettelsau" -> First Team -> Table. when you now click another team from the table and then click again another team form the table. on back navigation you should always land on the group table dont matter which tab you click. betwean two tabs.

[valnub]

@kinimodmeyer Ah, ok. It's a feature to save the state of the tab rather than pushing tab routes to history. Well, I don't know exactly how the new feature in tabs will be implemented into v2. All I know is that something like this is planned as it is requested often.

I suggest you wait for a first alpha/beta release of v2 and then check if it does what you want. If not, maybe we can add additionally functionality then or do changes.

[nolimits4web]

It is possible in v2

[cathrinevaage]

@nolimits4web how?

[valnub]

@jovaage http://framework7.io/docs/routes.html#routable-tabs