[SOLVED] 2 views, panels are for one of the views. Panels are showing for both views

I guys, I’m having a problem.

I’ve got 2 views:
One: view-init to launch the login/register actions (because I couldn’t force to open login inside a callback)
Second: view-main to launch all the functions for a register user.

Problem:
Panels are showing also when view-init is active.

¿Can you help me?

I’ve got this Code:

  <body>

    <!-- App root element -->
    <div id="app">

              <!-- Statusbar overlay -->
              <div class="statusbar"></div>

              <!-- panels !-->
              <div class="panel panel-left panel-cover"  data-view=".view-main">
                       <div class="view  panel-view" >
                      </div>
              </div>
              <div class="panel panel-right panel-cover"  data-view=".view-main">
                       <div class="view  panel-view">
                      </div>
            </div>

            <!-- login !-->
           <div class="login-screen " id="login-screen">
           </div>



                    <!-- =============================== !-->
                    <!-- ===========  VIEWS ============ !-->
                    <!-- =============================== !-->




                    <!-- =========== INIT VIEW ============ !-->
 
                    <div class="view view-init" data-url="/" data-name="landing" data-push-state="true">
                                              
                        <div class="page no-navbar no-toolbar no-swipeback">

                        <a class="item-content item-link login-screen-open" data-login-screen="#login-screen">LOGIN</a>
                        <a class="item-content item-link login-screen-open" data-login-screen="#registro-screen">REGISTER</a>

                        </div>

                    </div> 

                    <!-- =========== INIT VIEW ============ !-->




                    <!-- =========== MAIN VIEW ============ !-->
                    <div class="view view-main">
                    </div>
</div ><!-- id="app" !-->
</body>

And my routes:

 // Initialize app and store it to app variable for futher access to its methods
var app = new Framework7({

  // App root element
  root: '#app',
  // App Name
  name: 'XXX',
  // App id
  id: 'XXX.com.{{name}}',
  // App Version
  version: '1.0.0',
  // Extended by Panel component:
  panel: {
    swipe: 'left',
    leftBreakpoint: 768,
    rightBreakpoint: 1024,
  },
  // Extended by Dialog component:
  dialog: {
    title: 'XXX',
  },
  // Extended by Statusbar component:
  statusbar: {
    iosOverlaysWebview: true,
  },
  clicks: {
    externalLinks: '.external',
  },
 touch: {
    tapHold: true,
    fastClicks:true,
     materialRipple:true,
     activeState: true,
  },

  // Add default routes
  routes: [],
  // .
});


var f7_routes = [
 

   /**************************************************************
     *
     * ROUTES:    INDEX FUNCTIONS
     *
     *************************************************************** */
     
    {
    path: '/',
    url: './index.html',
    on: {
        pageAfterIn: function (e, page) {
          // do something after page gets into the view

          console.log("pageAfterIn");

       },

        pageInit:  function (e, page) {
             console.log("INDEX pageInit");
 

          }, //pageinit
    }, //on
  }, // index

  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './404.html',
  },
];

app.routes.push(  f7_routes);


// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/', 
  routes: f7_routes
});
 
 
var landingView = app.views.create('.view-init', {
  url: '/', 
  routes: [        
  ]
});

Panels are not sticked to any view. As soon as you have init it and you make it swipeable. Then it will work as it is specified. Just disable swipeable panel and enable it use app.panel.enableSwipe methods when you need it

1 Like