Close all pages when navigation is used on open page

Questions
1

Hello,

Just like the facebook app I want to close all open pages/popups etc and return to root when a user clicks on the navigation (toolbar) button off the view that is currently open.

I’ve managed this but it doesn’t work as I want when a user navigates. I still want to have the pages open when a user navigates between views. But only close all pages/popups when a user clicks on the navigation button of the view that is currently open.

This doesn’t work:

<div class="toolbar tabbar toolbar-bottom">

                <div class="toolbar-inner">

                    <a href="#view-news" class="tab-link tab-link-active" data-selector=".view-main"><span class="icon-News"></span></a>

                </div>

            </div>

$(document).on("click",".toolbar-inner a.tab-link", function(){

        if ($(this).attr("data-selector") === f7app.views.current.router.view.selector) {

            // Clear History to Root

            f7app.views.current.router.clearPreviousHistory();

            // Go to Root

            f7app.views.current.router.back();

        }

    });
2 
// Clear History to Root
f7app.views.current.router.clearPreviousHistory();
// Go to Root
f7app.views.current.router.back();

This should be replaced with:

const router = f7app.views.current.router;
router.back(router.history[0], { force: true } );
1 Like
3

No I mean how to close all open pages when you click on the navigation icon of the current view. But can still navigate without closing pages

4

What does this mean?

Part 1: When the user clicks on the view’s icon, the view history clears and returns to view’s home page. (Not touching any of the other views)
Part 2: ?

nolimits4web addressed part 1 with above.

5

I have a toolbar with buttons. When I click a button I go to the chosen view tab. When a page is open within this view and I navigate away and come back the page is still open. This should be and I’m satisfied about this.

When I’m in a view tab and have pages opened within this view I want to close all open pages when I click on the view button of the same view.

6

@nolimits4web I think at the moment, view change happens before ‘click’ event is fired to the tab button right? So if you check if the tab is the same, it will always match current, even when changing from another tab.

@Dopey should there be an event that fires before tab change, you may use this to put clearing DOM and cache + go back to home page in 1 line:

router.navigate(router.history[0], { reloadAll: true } );

and to double check that it’s not home already:

if ($(this).attr("data-selector") === router.view.selector && router.history.length > 1) {
7

if ($(this).attr(“data-selector”) === router.view.selector && router.history.length > 1) {

This doesn’t work for me. When the toolbar icon is clicked and this line of code is executed the view is already changed.

router.navigate(router.history[0], { reloadAll: true } );

Also this doesn’t work for me but this does:

// Clear History to Root
f7app.views.current.router.clearPreviousHistory();
// Go to Root
f7app.views.current.router.back();
8

I solved a problem like this:

$on('tabHide',(e)=>{
      const selector = '#'+e.target.id;
      const vw = $f7.views.get(selector);
      const router  = vw.router;
      if(router.history.length > 1){
        router.navigate(router.history[0], { reloadAll: true } );
      }
 })

I take the “tabhide” event to return the pages even when a current view has already been updated

(sorry about the english, i used google translate)