back button when popup is open

[boynet]

when pushState: true.

1.when popup is open and you press back button(on browser or android not the framework back button) the popup stays and the pages under the popup change.
is there a way to push a state on popup open? so the back button will close the popup?

[nolimits4web]

No, it is highly depends on layout, and pushState works only for main View. You can just add custom event listener to popstate event:

$(window).on('popstate', function(){
  myApp.closeModal('.popup.modal-in');
});

[boynet]

so its not useable except ios :/ there must be a way.
the only problem with pushstate on popup is the refresh will not work?
what do you think of something like:
#!/index.html
with popup:
#!/index.html/popup
on refresh check if its end with /popup if yes remove it

[boynet]

I 'hacked' it like so(i dont need refresh it run only as application):
on popup:
window.history.pushState('', '','#!/'+window.history.state.url+'?&popup');
on close popup:
window.history.back();

I still think its need to be solved in the f7 level

[boynet]

hi Vladimir
I got few ideas to solve this:
1.add app option something like: pushStatePopup
2. make popup automatic push state
3. add some ready to use code to the popup docs how to solve it
what do you think?

the popup state should be soft something like:
index.html -> click on popup -> index.html?popup
this way after refresh the index.html will load normally

I use it like so:
on popup open:

window.history.pushState('', '', '#!/' + window.history.state.url + '?&popup');

somewhere in the code:

    $$(window).on('popstate', function (e) {
        myApp.closeModal('.popup.modal-in');
    });
    $$(window).on('click', '.close-popup', function () {
        window.history.back();
    });

[ZanderBrown]

Is this resolved?

[valnub]

Closed due to no reaction by issue author after several months

[boynet]

@valnub its not solved but I think that nolimits4web not seeing this as bug

[valnub]

Well, on iOS this definitely is not a bug because there is no such behavior for pop-up (as there is no physical back button on the device).

On Android, yeah one could argue that this needs more refinement.

Maybe someone can create a plugin or pull-request to fix this.

[tinyCoder32]

Will this be taken in mind soon?
I'm having the same issue on my app, it is made for iOS and Android and having a lot of popups that need to be closed using the Android device back button.

[tinyCoder32]

I managed to do it as members suggested:

$$(window).on('popstate', function(){
  myApp.closeModal('.popup.modal-in');
});

window.history.pushState('', '','#!/#signup');

We hope that this will be taken into consideration to have an easy option in next versions.

[brainformatik]

@nolimits4web
Please fix that. Everyone (android users) needs that.

[brainformatik]

@tinyCoder32 @boynet

Our dirty fix for smart-select popups is this:

$$(document).find('a.smart-select').on('click', function () {
    setTimeout(function () {
            window.history.pushState('', '', '#/' + window.history.state.url + '&popupOpened');

            $$(window).on('popstate', onPopupHistoryBack);
            function onPopupHistoryBack () {
                $$(document).off('click', '.link.close-popup', onPopupCloseButtonClick);
                myApp.closeModal('.popup.modal-in');
                $$(window).off('popstate', onPopupHistoryBack);
            }

            $$(document).find('.popup.modal-in').on('click', '.link.close-popup,.list-block li', onPopupCloseButtonClick);
            function onPopupCloseButtonClick () {
                $$(window).off('popstate', onPopupHistoryBack);
                window.history.back();
                $$(document).off('click', '.link.close-popup', onPopupCloseButtonClick);
            }
        }, 200);
});

But dirty fixes are ugly. It's a framework7 issue, so we hope @nolimits4web has time for it.
The same should be integrated for panels and popovers (with parameters).

[J05HI]

@nolimits4web
I need this too for android compatibility, but dirty hacks aren't very good.
I need a real implementation.

[ZanderBrown]

@J05HI With how long these issues have been open i suggest you contribute a 'real implementation'

[J05HI]

@ZanderBrown
I'm not familiar with the Framework7 source. I think @nolimits4web can do this better and faster.

[tazzkiller]

For my apps a use a simple workaround with addClass/removeClass on the body element and my back button check if the body has the class or not before execute any action.

[J05HI]

@tazzkiller
Can you please post a code example :)

[tazzkiller]

@J05HI

$$('.your-popup').on('popup:close', function () {
  $$('body').removeClass('popup-open');
});
$$('.your-popup').on('popup:open', function () {
  $$('body').addClass('popup-open');
});

on your "backbutton" event :

if ($$('body').hasClass('popup-open')) {
myApp.closeModal();
} else {
window.history.back();
}

[valnub]

I don't think this will get a fix in Framework7 1.x - As the work on v2 has begun, it might be fixed there as it is more a feature-request rather than a bug.

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Framework7, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue

[J05HI]

@nolimits4web
Yeah in v2 it should already work :)