framework7 7.0.8 → 8.0.0-beta.1

package/modules/router/router-class.js

@@ -11,14 +11,13 @@ import { modalLoad, modalRemove } from './modal.js';
 import { back } from './back.js';
 import { clearPreviousHistory } from './clear-previous-history.js';
 import appRouterCheck from './app-router-check.js';
-
 class Router extends Framework7Class {
   constructor(app, view) {
     super({}, [typeof view === 'undefined' ? app : view]);
-    const router = this; // Is App Router
+    const router = this;
 
+    // Is App Router
     router.isAppRouter = typeof view === 'undefined';
-
     if (router.isAppRouter) {
       // App Router
       extend(false, router, {
@@ -43,52 +42,46 @@ class Router extends Framework7Class {
         initialPages: [],
         initialNavbars: []
       });
-    } // Install Modules
-
+    }
 
-    router.useModules(); // AllowPageChage
+    // Install Modules
+    router.useModules();
 
-    router.allowPageChange = true; // Current Route
+    // AllowPageChage
+    router.allowPageChange = true;
 
+    // Current Route
     let currentRoute = {};
     let previousRoute = {};
     Object.defineProperty(router, 'currentRoute', {
       enumerable: true,
       configurable: true,
-
       set(newRoute) {
         if (newRoute === void 0) {
           newRoute = {};
         }
-
         previousRoute = extend({}, currentRoute);
         currentRoute = newRoute;
         if (!currentRoute) return;
         router.url = currentRoute.url;
         router.emit('routeChange', newRoute, previousRoute, router);
       },
-
       get() {
         return currentRoute;
       }
-
     });
     Object.defineProperty(router, 'previousRoute', {
       enumerable: true,
       configurable: true,
-
       get() {
         return previousRoute;
       },
-
       set(newRoute) {
         previousRoute = newRoute;
       }
-
     });
     return router;
   }
-
   mount() {
     const router = this;
     const view = router.view;
@@ -102,27 +95,22 @@ class Router extends Framework7Class {
     });
     router.emit('local::mount routerMount', router);
   }
-
   animatableNavElements($newNavbarEl, $oldNavbarEl, toLarge, fromLarge, direction) {
     const router = this;
     const dynamicNavbar = router.dynamicNavbar;
     const animateIcon = router.params.iosAnimateNavbarBackIcon;
     let newNavEls;
     let oldNavEls;
-
     function animatableNavEl($el, $navbarInner) {
       const isSliding = $el.hasClass('sliding') || $navbarInner.hasClass('sliding');
       const isSubnavbar = $el.hasClass('subnavbar');
       const needsOpacityTransition = isSliding ? !isSubnavbar : true;
       const $iconEl = $el.find('.back .icon');
       let isIconLabel;
-
       if (isSliding && animateIcon && $el.hasClass('left') && $iconEl.length > 0 && $iconEl.next('span').length) {
         $el = $iconEl.next('span'); // eslint-disable-line
-
         isIconLabel = true;
       }
-
       return {
         $el,
         isIconLabel,
@@ -133,7 +121,6 @@ class Router extends Framework7Class {
         needsOpacityTransition
       };
     }
-
     if (dynamicNavbar) {
       newNavEls = [];
       oldNavEls = [];
@@ -143,21 +130,17 @@ class Router extends Framework7Class {
         if ($navEl.hasClass('title') && toLarge) return;
         newNavEls.push(animatableNavEl($navEl, $newNavbarEl.children('.navbar-inner')));
       });
-
       if (!($oldNavbarEl.hasClass('navbar-master') && router.params.masterDetailBreakpoint > 0 && router.app.width >= router.params.masterDetailBreakpoint)) {
         $oldNavbarEl.children('.navbar-inner').children('.left, .right, .title, .subnavbar').each(navEl => {
           const $navEl = $(navEl);
           if ($navEl.hasClass('left') && toLarge && !fromLarge && direction === 'forward') return;
           if ($navEl.hasClass('left') && toLarge && direction === 'backward') return;
-
           if ($navEl.hasClass('title') && fromLarge) {
             return;
           }
-
           oldNavEls.push(animatableNavEl($navEl, $oldNavbarEl.children('.navbar-inner')));
         });
       }
-
       [oldNavEls, newNavEls].forEach(navEls => {
         navEls.forEach(navEl => {
           const n = navEl;
@@ -176,64 +159,52 @@ class Router extends Framework7Class {
         });
       });
     }
-
     return {
       newNavEls,
       oldNavEls
     };
   }
-
   animate($oldPageEl, $newPageEl, $oldNavbarEl, $newNavbarEl, direction, transition, callback) {
     const router = this;
-
     if (router.params.animateCustom) {
       router.params.animateCustom.apply(router, [$oldPageEl, $newPageEl, $oldNavbarEl, $newNavbarEl, direction, callback]);
       return;
     }
-
     const dynamicNavbar = router.dynamicNavbar;
     const ios = router.app.theme === 'ios';
-
     if (transition) {
-      const routerCustomTransitionClass = `router-transition-custom router-transition-${transition}-${direction}`; // Animate
-
+      const routerCustomTransitionClass = `router-transition-custom router-transition-${transition}-${direction}`;
+      // Animate
       const onCustomTransitionDone = () => {
         router.$el.removeClass(routerCustomTransitionClass);
-
         if (dynamicNavbar && router.$navbarsEl.length) {
           if ($newNavbarEl) {
             router.$navbarsEl.prepend($newNavbarEl);
           }
-
           if ($oldNavbarEl) {
             router.$navbarsEl.prepend($oldNavbarEl);
           }
         }
-
         if (callback) callback();
       };
-
       (direction === 'forward' ? $newPageEl : $oldPageEl).animationEnd(onCustomTransitionDone);
-
       if (dynamicNavbar) {
         if ($newNavbarEl && $newPageEl) {
           router.setNavbarPosition($newNavbarEl, '');
           $newNavbarEl.removeClass('navbar-next navbar-previous navbar-current');
           $newPageEl.prepend($newNavbarEl);
         }
-
         if ($oldNavbarEl && $oldPageEl) {
           router.setNavbarPosition($oldNavbarEl, '');
           $oldNavbarEl.removeClass('navbar-next navbar-previous navbar-current');
           $oldPageEl.prepend($oldNavbarEl);
         }
       }
-
       router.$el.addClass(routerCustomTransitionClass);
       return;
-    } // Router Animation class
-
+    }
 
+    // Router Animation class
     const routerTransitionClass = `router-transition-${direction} router-transition`;
     let newNavEls;
     let oldNavEls;
@@ -242,10 +213,8 @@ class Router extends Framework7Class {
     let toDifferent;
     let oldIsLarge;
     let newIsLarge;
-
     if (ios && dynamicNavbar) {
       const betweenMasterAndDetail = router.params.masterDetailBreakpoint > 0 && router.app.width >= router.params.masterDetailBreakpoint && ($oldNavbarEl.hasClass('navbar-master') && $newNavbarEl.hasClass('navbar-master-detail') || $oldNavbarEl.hasClass('navbar-master-detail') && $newNavbarEl.hasClass('navbar-master'));
-
       if (!betweenMasterAndDetail) {
         oldIsLarge = $oldNavbarEl && $oldNavbarEl.hasClass('navbar-large');
         newIsLarge = $newNavbarEl && $newNavbarEl.hasClass('navbar-large');
@@ -253,31 +222,25 @@ class Router extends Framework7Class {
         toLarge = newIsLarge && !$newNavbarEl.hasClass('navbar-large-collapsed');
         toDifferent = fromLarge && !toLarge || toLarge && !fromLarge;
       }
-
       const navEls = router.animatableNavElements($newNavbarEl, $oldNavbarEl, toLarge, fromLarge, direction);
       newNavEls = navEls.newNavEls;
       oldNavEls = navEls.oldNavEls;
     }
-
     function animateNavbars(progress) {
       if (!(ios && dynamicNavbar)) return;
-
       if (progress === 1) {
         if (toLarge) {
           $newNavbarEl.addClass('router-navbar-transition-to-large');
           $oldNavbarEl.addClass('router-navbar-transition-to-large');
         }
-
         if (fromLarge) {
           $newNavbarEl.addClass('router-navbar-transition-from-large');
           $oldNavbarEl.addClass('router-navbar-transition-from-large');
         }
       }
-
       newNavEls.forEach(navEl => {
         const $el = navEl.$el;
         const offset = direction === 'forward' ? navEl.rightOffset : navEl.leftOffset;
-
         if (navEl.isSliding) {
           if (navEl.isSubnavbar && newIsLarge) {
             // prettier-ignore
@@ -290,7 +253,6 @@ class Router extends Framework7Class {
       oldNavEls.forEach(navEl => {
         const $el = navEl.$el;
         const offset = direction === 'forward' ? navEl.leftOffset : navEl.rightOffset;
-
         if (navEl.isSliding) {
           if (navEl.isSubnavbar && oldIsLarge) {
             $el.transform(`translate3d(${offset * progress}px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)`);
@@ -299,9 +261,9 @@ class Router extends Framework7Class {
           }
         }
       });
-    } // AnimationEnd Callback
-
+    }
 
+    // AnimationEnd Callback
     function onDone() {
       if (router.dynamicNavbar) {
         if ($newNavbarEl) {
@@ -311,44 +273,40 @@ class Router extends Framework7Class {
             $newNavbarEl.removeClass('navbar-no-title-large-transition');
           });
         }
-
         if ($oldNavbarEl) {
           $oldNavbarEl.removeClass('router-navbar-transition-to-large router-navbar-transition-from-large');
         }
-
         if ($newNavbarEl.hasClass('sliding') || $newNavbarEl.children('.navbar-inner.sliding').length) {
           $newNavbarEl.find('.title, .left, .right, .left .icon, .subnavbar').transform('');
         } else {
           $newNavbarEl.find('.sliding').transform('');
         }
-
         if ($oldNavbarEl.hasClass('sliding') || $oldNavbarEl.children('.navbar-inner.sliding').length) {
           $oldNavbarEl.find('.title, .left, .right, .left .icon, .subnavbar').transform('');
         } else {
           $oldNavbarEl.find('.sliding').transform('');
         }
       }
-
       router.$el.removeClass(routerTransitionClass);
       if (callback) callback();
     }
 
-    (direction === 'forward' ? $newPageEl : $oldPageEl).animationEnd(() => {
+    // eslint-disable-next-line
+    (direction === 'forward' ? $newPageEl : ios ? $oldPageEl : $newPageEl).animationEnd(() => {
       onDone();
-    }); // Animate
+    });
 
+    // Animate
     if (dynamicNavbar) {
       // Prepare Navbars
       animateNavbars(0);
       nextFrame(() => {
         // Add class, start animation
         router.$el.addClass(routerTransitionClass);
-
         if (toDifferent) {
           // eslint-disable-next-line
           router.el._clientLeft = router.el.clientLeft;
         }
-
         animateNavbars(1);
       });
     } else {
@@ -356,36 +314,29 @@ class Router extends Framework7Class {
       router.$el.addClass(routerTransitionClass);
     }
   }
-
   removeModal(modalEl) {
     const router = this;
     router.removeEl(modalEl);
-  } // eslint-disable-next-line
-
-
+  }
+  // eslint-disable-next-line
   removeTabContent(tabEl) {
     const $tabEl = $(tabEl);
     $tabEl.html('');
   }
-
   removeNavbar(el) {
     const router = this;
     router.removeEl(el);
   }
-
   removePage(el) {
     const $el = $(el);
     const f7Page = $el && $el[0] && $el[0].f7Page;
     const router = this;
-
     if (f7Page && f7Page.route && f7Page.route.route && f7Page.route.route.keepAlive) {
       $el.remove();
       return;
     }
-
     router.removeEl(el);
   }
-
   removeEl(el) {
     if (!el) return;
     const router = this;
@@ -399,15 +350,12 @@ class Router extends Framework7Class {
         }
       });
     });
-
     if ($el[0].f7Component && $el[0].f7Component.destroy) {
       $el[0].f7Component.destroy();
     }
-
     if (!router.params.removeElements) {
       return;
     }
-
     if (router.params.removeElementsWithTimeout) {
       setTimeout(() => {
         $el.remove();
@@ -416,65 +364,53 @@ class Router extends Framework7Class {
       $el.remove();
     }
   }
-
   getPageEl(content) {
     const router = this;
-
     if (typeof content === 'string') {
       router.tempDom.innerHTML = content;
     } else {
       if ($(content).hasClass('page')) {
         return content;
       }
-
       router.tempDom.innerHTML = '';
       $(router.tempDom).append(content);
     }
-
     return router.findElement('.page', router.tempDom);
   }
-
-  findElement(stringSelector, container, notStacked) {
+  findElement(stringSelector, container) {
     const router = this;
     const view = router.view;
-    const app = router.app; // Modals Selector
+    const app = router.app;
 
+    // Modals Selector
     const modalsSelector = '.popup, .dialog, .popover, .actions-modal, .sheet-modal, .login-screen, .page';
     const $container = $(container);
-    let selector = stringSelector;
-    if (notStacked) selector += ':not(.stacked)';
+    const selector = stringSelector;
     let found = $container.find(selector).filter(el => $(el).parents(modalsSelector).length === 0);
-
     if (found.length > 1) {
       if (typeof view.selector === 'string') {
         // Search in related view
         found = $container.find(`${view.selector} ${selector}`);
       }
-
       if (found.length > 1) {
         // Search in main view
         found = $container.find(`.${app.params.viewMainClass} ${selector}`);
       }
     }
-
-    if (found.length === 1) return found; // Try to find not stacked
-
-    if (!notStacked) found = router.findElement(selector, $container, true);
+    if (found.length === 1) return found;
+    found = router.findElement(selector, $container);
     if (found && found.length === 1) return found;
     if (found && found.length > 1) return $(found[0]);
     return undefined;
   }
-
   flattenRoutes(routes) {
     if (routes === void 0) {
       routes = this.routes;
     }
-
     const router = this;
     let flattenedRoutes = [];
     routes.forEach(route => {
       let hasTabRoutes = false;
-
       if ('tabs' in route && route.tabs) {
         const mergedPathsRoutes = route.tabs.map(tabRoute => {
           const tRoute = extend({}, route, {
@@ -489,7 +425,6 @@ class Router extends Framework7Class {
         hasTabRoutes = true;
         flattenedRoutes = flattenedRoutes.concat(router.flattenRoutes(mergedPathsRoutes));
       }
-
       if ('detailRoutes' in route) {
         const mergedPathsRoutes = route.detailRoutes.map(detailRoute => {
           const dRoute = extend({}, detailRoute);
@@ -499,29 +434,26 @@ class Router extends Framework7Class {
         });
         flattenedRoutes = flattenedRoutes.concat(route, router.flattenRoutes(mergedPathsRoutes));
       }
-
       if ('routes' in route) {
         const mergedPathsRoutes = route.routes.map(childRoute => {
           const cRoute = extend({}, childRoute);
           cRoute.path = `${route.path}/${cRoute.path}`.replace('///', '/').replace('//', '/');
           return cRoute;
         });
-
         if (hasTabRoutes) {
           flattenedRoutes = flattenedRoutes.concat(router.flattenRoutes(mergedPathsRoutes));
         } else {
           flattenedRoutes = flattenedRoutes.concat(route, router.flattenRoutes(mergedPathsRoutes));
         }
       }
-
       if (!('routes' in route) && !('tabs' in route && route.tabs) && !('detailRoutes' in route)) {
         flattenedRoutes.push(route);
       }
     });
     return flattenedRoutes;
-  } // eslint-disable-next-line
-
+  }
 
+  // eslint-disable-next-line
   parseRouteUrl(url) {
     if (!url) return {};
     const query = parseUrlQuery(url);
@@ -536,30 +468,24 @@ class Router extends Framework7Class {
       path
     };
   }
-
   generateUrl(parameters) {
     if (parameters === void 0) {
       parameters = {};
     }
-
     if (typeof parameters === 'string') {
       return parameters;
     }
-
     const {
       name,
       path,
       params,
       query
     } = parameters;
-
     if (!name && !path) {
       throw new Error('Framework7: "name" or "path" parameter is required');
     }
-
     const router = this;
     const route = name ? router.findRouteByKey('name', name) : router.findRouteByKey('path', path);
-
     if (!route) {
       if (name) {
         throw new Error(`Framework7: route with name "${name}" not found`);
@@ -567,20 +493,17 @@ class Router extends Framework7Class {
         throw new Error(`Framework7: route with path "${path}" not found`);
       }
     }
-
     const url = router.constructRouteUrl(route, {
       params,
       query
     });
-
     if (!url) {
       throw new Error(`Framework7: can't construct URL for route with name "${name}"`);
     }
-
     return url;
-  } // eslint-disable-next-line
-
+  }
 
+  // eslint-disable-next-line
   constructRouteUrl(route, _temp) {
     let {
       params,
@@ -591,20 +514,16 @@ class Router extends Framework7Class {
     } = route;
     const toUrl = compile(path);
     let url;
-
     try {
       url = toUrl(params || {});
     } catch (error) {
       throw new Error(`Framework7: error constructing route URL from passed params:\nRoute: ${path}\n${error.toString()}`);
     }
-
     if (query) {
       if (typeof query === 'string') url += `?${query}`;else if (Object.keys(query).length) url += `?${serializeObject(query)}`;
     }
-
     return url;
   }
-
   findTabRouteUrl(tabEl) {
     const router = this;
     const $tabEl = $(tabEl);
@@ -626,7 +545,6 @@ class Router extends Framework7Class {
     });
     return foundTabRouteUrl;
   }
-
   findRouteByKey(key, value) {
     const router = this;
     const routes = router.routes;
@@ -634,14 +552,12 @@ class Router extends Framework7Class {
     let matchingRoute;
     flattenedRoutes.forEach(route => {
       if (matchingRoute) return;
-
       if (route[key] === value) {
         matchingRoute = route;
       }
     });
     return matchingRoute;
   }
-
   findMatchingRoute(url) {
     if (!url) return undefined;
     const router = this;
@@ -658,7 +574,6 @@ class Router extends Framework7Class {
       if (matchingRoute) return;
       const keys = [];
       const pathsToMatch = [route.path];
-
       if (route.alias) {
         if (typeof route.alias === 'string') pathsToMatch.push(route.alias);else if (Array.isArray(route.alias)) {
           route.alias.forEach(aliasPath => {
@@ -666,18 +581,15 @@ class Router extends Framework7Class {
           });
         }
       }
-
       let matched;
       pathsToMatch.forEach(pathToMatch => {
         if (matched) return;
         matched = pathToRegexp(pathToMatch, keys).exec(path);
       });
-
       if (matched) {
         keys.forEach((keyObj, index) => {
           if (typeof keyObj.name === 'number') return;
           const paramValue = matched[index + 1];
-
           if (typeof paramValue === 'undefined' || paramValue === null) {
             params[keyObj.name] = paramValue;
           } else {
@@ -685,11 +597,9 @@ class Router extends Framework7Class {
           }
         });
         let parentPath;
-
         if (route.parentPath) {
           parentPath = path.split('/').slice(0, route.parentPath.split('/').length - 1).join('/');
         }
-
         matchingRoute = {
           query,
           hash,
@@ -703,42 +613,34 @@ class Router extends Framework7Class {
       }
     });
     return matchingRoute;
-  } // eslint-disable-next-line
-
+  }
 
+  // eslint-disable-next-line
   replaceRequestUrlParams(url, options) {
     if (url === void 0) {
       url = '';
     }
-
     if (options === void 0) {
       options = {};
     }
-
     let compiledUrl = url;
-
     if (typeof compiledUrl === 'string' && compiledUrl.indexOf('{{') >= 0 && options && options.route && options.route.params && Object.keys(options.route.params).length) {
       Object.keys(options.route.params).forEach(paramName => {
         const regExp = new RegExp(`{{${paramName}}}`, 'g');
         compiledUrl = compiledUrl.replace(regExp, options.route.params[paramName] || '');
       });
     }
-
     return compiledUrl;
   }
-
   removeFromXhrCache(url) {
     const router = this;
     const xhrCache = router.cache.xhr;
     let index = false;
-
     for (let i = 0; i < xhrCache.length; i += 1) {
       if (xhrCache[i].url === url) index = i;
     }
-
     if (index !== false) xhrCache.splice(index, 1);
   }
-
   xhrRequest(requestUrl, options) {
     const router = this;
     const params = router.params;
@@ -747,31 +649,25 @@ class Router extends Framework7Class {
     } = options;
     let url = requestUrl;
     let hasQuery = url.indexOf('?') >= 0;
-
     if (params.passRouteQueryToRequest && options && options.route && options.route.query && Object.keys(options.route.query).length) {
       url += `${hasQuery ? '&' : '?'}${serializeObject(options.route.query)}`;
       hasQuery = true;
     }
-
     if (params.passRouteParamsToRequest && options && options.route && options.route.params && Object.keys(options.route.params).length) {
       url += `${hasQuery ? '&' : '?'}${serializeObject(options.route.params)}`;
       hasQuery = true;
     }
-
     if (url.indexOf('{{') >= 0) {
       url = router.replaceRequestUrlParams(url, options);
-    } // should we ignore get params or not
-
-
+    }
+    // should we ignore get params or not
     if (params.xhrCacheIgnoreGetParameters && url.indexOf('?') >= 0) {
       url = url.split('?')[0];
     }
-
     return new Promise((resolve, reject) => {
       if (params.xhrCache && !ignoreCache && url.indexOf('nocache') < 0 && params.xhrCacheIgnore.indexOf(url) < 0) {
         for (let i = 0; i < router.cache.xhr.length; i += 1) {
           const cachedUrl = router.cache.xhr[i];
-
           if (cachedUrl.url === url) {
             // Check expiration
             if (now() - cachedUrl.time < params.xhrCacheDuration) {
@@ -782,106 +678,86 @@ class Router extends Framework7Class {
           }
         }
       }
-
-      router.xhrAbortController = router.app.request.abortController();
-      router.app.request({
-        abortController: router.xhrAbortController,
-        url,
-        method: 'GET',
-
-        beforeSend(xhr) {
-          router.emit('routerAjaxStart', xhr, options);
-        },
-
-        complete(xhr, status) {
-          router.emit('routerAjaxComplete', xhr);
-
-          if (status !== 'error' && status !== 'timeout' && xhr.status >= 200 && xhr.status < 300 || xhr.status === 0) {
-            if (params.xhrCache && xhr.responseText !== '') {
-              router.removeFromXhrCache(url);
-              router.cache.xhr.push({
-                url,
-                time: now(),
-                content: xhr.responseText
-              });
-            }
-
-            router.emit('routerAjaxSuccess', xhr, options);
-            resolve(xhr.responseText);
-          } else {
-            router.emit('routerAjaxError', xhr, options);
-            reject(xhr);
+      router.xhrAbortController = new AbortController();
+      let fetchRes;
+      fetch(url, {
+        signal: router.xhrAbortController.signal,
+        method: 'GET'
+      }).then(res => {
+        fetchRes = res;
+        return res.text();
+      }).then(responseText => {
+        const {
+          status
+        } = fetchRes;
+        router.emit('routerAjaxComplete', fetchRes);
+        if (status !== 'error' && status !== 'timeout' && status >= 200 && status < 300 || status === 0) {
+          if (params.xhrCache && responseText !== '') {
+            router.removeFromXhrCache(url);
+            router.cache.xhr.push({
+              url,
+              time: now(),
+              content: responseText
+            });
           }
-        },
-
-        error(xhr) {
-          router.emit('routerAjaxError', xhr, options);
-          reject(xhr);
+          router.emit('routerAjaxSuccess', fetchRes, options);
+          resolve(responseText);
+        } else {
+          router.emit('routerAjaxError', fetchRes, options);
+          reject(fetchRes);
         }
-
+      }).catch(err => {
+        reject(err);
       });
     });
   }
-
   setNavbarPosition($el, position, ariaHidden) {
     const router = this;
     $el.removeClass('navbar-previous navbar-current navbar-next');
-
     if (position) {
       $el.addClass(`navbar-${position}`);
     }
-
     if (ariaHidden === false) {
       $el.removeAttr('aria-hidden');
     } else if (ariaHidden === true) {
       $el.attr('aria-hidden', 'true');
     }
-
     $el.trigger('navbar:position', {
       position
     });
     router.emit('navbarPosition', $el[0], position);
   }
-
   setPagePosition($el, position, ariaHidden) {
     const router = this;
     $el.removeClass('page-previous page-current page-next');
     $el.addClass(`page-${position}`);
-
     if (ariaHidden === false) {
       $el.removeAttr('aria-hidden');
     } else if (ariaHidden === true) {
       $el.attr('aria-hidden', 'true');
     }
-
     $el.trigger('page:position', {
       position
     });
     router.emit('pagePosition', $el[0], position);
-  } // Remove theme elements
-
+  }
 
+  // Remove theme elements
   removeThemeElements(el) {
     const router = this;
     const theme = router.app.theme;
     let toRemove;
-
     if (theme === 'ios') {
-      toRemove = '.md-only, .aurora-only, .if-md, .if-aurora, .if-not-ios, .not-ios';
+      toRemove = '.md-only, .if-md, .if-not-ios, .not-ios';
     } else if (theme === 'md') {
-      toRemove = '.ios-only, .aurora-only, .if-ios, .if-aurora, .if-not-md, .not-md';
-    } else if (theme === 'aurora') {
-      toRemove = '.ios-only, .md-only, .if-ios, .if-md, .if-not-aurora, .not-aurora';
+      toRemove = '.ios-only, .if-ios, .if-not-md, .not-md';
     }
-
     $(el).find(toRemove).remove();
   }
-
   getPageData(pageEl, navbarEl, from, to, route, pageFromEl) {
     if (route === void 0) {
       route = {};
     }
-
     const router = this;
     const $pageEl = $(pageEl).eq(0);
     const $navbarEl = $(navbarEl).eq(0);
@@ -890,21 +766,16 @@ class Router extends Framework7Class {
     let pageFrom;
     if (from === 'next' && to === 'current' || from === 'current' && to === 'previous') direction = 'forward';
     if (from === 'current' && to === 'next' || from === 'previous' && to === 'current') direction = 'backward';
-
     if (currentPage && !currentPage.fromPage) {
       const $pageFromEl = $(pageFromEl);
-
       if ($pageFromEl.length) {
         pageFrom = $pageFromEl[0].f7Page;
       }
     }
-
     pageFrom = currentPage.pageFrom || pageFrom;
-
     if (pageFrom && pageFrom.pageFrom) {
       pageFrom.pageFrom = null;
     }
-
     const page = {
       app: router.app,
       view: router.view,
@@ -925,14 +796,13 @@ class Router extends Framework7Class {
     };
     $pageEl[0].f7Page = page;
     return page;
-  } // Callbacks
-
+  }
 
+  // Callbacks
   pageCallback(callback, pageEl, navbarEl, from, to, options, pageFromEl) {
     if (options === void 0) {
       options = {};
     }
-
     if (!pageEl) return;
     const router = this;
     const $pageEl = $(pageEl);
@@ -943,7 +813,6 @@ class Router extends Framework7Class {
     } = options;
     const restoreScrollTopOnBack = router.params.restoreScrollTopOnBack && !(router.params.masterDetailBreakpoint > 0 && $pageEl.hasClass('page-master') && router.app.width >= router.params.masterDetailBreakpoint);
     const keepAlive = $pageEl[0].f7Page && $pageEl[0].f7Page.route && $pageEl[0].f7Page.route.route && $pageEl[0].f7Page.route.route.keepAlive;
-
     if (callback === 'beforeRemove' && keepAlive) {
       callback = 'beforeUnmount'; // eslint-disable-line
     }
@@ -951,7 +820,6 @@ class Router extends Framework7Class {
     const camelName = `page${callback[0].toUpperCase() + callback.slice(1, callback.length)}`;
     const colonName = `page:${callback.toLowerCase()}`;
     let page = {};
-
     if (callback === 'beforeRemove' && $pageEl[0].f7Page) {
       page = extend($pageEl[0].f7Page, {
         from,
@@ -961,25 +829,20 @@ class Router extends Framework7Class {
     } else {
       page = router.getPageData($pageEl[0], $navbarEl[0], from, to, route, pageFromEl);
     }
-
     page.swipeBack = !!options.swipeBack;
     const {
       on = {},
       once = {}
     } = options.route ? options.route.route : {};
-
     if (options.on) {
       extend(on, options.on);
     }
-
     if (options.once) {
       extend(once, options.once);
     }
-
     function attachEvents() {
       if ($pageEl[0].f7RouteEventsAttached) return;
       $pageEl[0].f7RouteEventsAttached = true;
-
       if (on && Object.keys(on).length > 0) {
         $pageEl[0].f7RouteEventsOn = on;
         Object.keys(on).forEach(eventName => {
@@ -987,7 +850,6 @@ class Router extends Framework7Class {
           $pageEl.on(eventNameToColonCase(eventName), on[eventName]);
         });
       }
-
       if (once && Object.keys(once).length > 0) {
         $pageEl[0].f7RouteEventsOnce = once;
         Object.keys(once).forEach(eventName => {
@@ -996,22 +858,18 @@ class Router extends Framework7Class {
         });
       }
     }
-
     function detachEvents() {
       if (!$pageEl[0].f7RouteEventsAttached) return;
-
       if ($pageEl[0].f7RouteEventsOn) {
         Object.keys($pageEl[0].f7RouteEventsOn).forEach(eventName => {
           $pageEl.off(eventNameToColonCase(eventName), $pageEl[0].f7RouteEventsOn[eventName]);
         });
       }
-
       if ($pageEl[0].f7RouteEventsOnce) {
         Object.keys($pageEl[0].f7RouteEventsOnce).forEach(eventName => {
           $pageEl.off(eventNameToColonCase(eventName), $pageEl[0].f7RouteEventsOnce[eventName]);
         });
       }
-
       $pageEl[0].f7RouteEventsAttached = null;
       $pageEl[0].f7RouteEventsOn = null;
       $pageEl[0].f7RouteEventsOnce = null;
@@ -1019,109 +877,88 @@ class Router extends Framework7Class {
       delete $pageEl[0].f7RouteEventsOn;
       delete $pageEl[0].f7RouteEventsOnce;
     }
-
     if (callback === 'mounted') {
       attachEvents();
     }
-
     if (callback === 'init') {
       if (restoreScrollTopOnBack && (from === 'previous' || !from) && to === 'current' && router.scrollHistory[page.route.url] && !$pageEl.hasClass('no-restore-scroll')) {
         let $pageContent = $pageEl.find('.page-content');
-
         if ($pageContent.length > 0) {
           // eslint-disable-next-line
           $pageContent = $pageContent.filter(pageContentEl => {
             return $(pageContentEl).parents('.tab:not(.tab-active)').length === 0 && !$(pageContentEl).is('.tab:not(.tab-active)');
           });
         }
-
         $pageContent.scrollTop(router.scrollHistory[page.route.url]);
       }
-
       attachEvents();
-
       if ($pageEl[0].f7PageInitialized) {
         $pageEl.trigger('page:reinit', page);
         router.emit('pageReinit', page);
         return;
       }
-
       $pageEl[0].f7PageInitialized = true;
     }
-
     if (restoreScrollTopOnBack && callback === 'beforeOut' && from === 'current' && to === 'previous') {
       // Save scroll position
       let $pageContent = $pageEl.find('.page-content');
-
       if ($pageContent.length > 0) {
         // eslint-disable-next-line
         $pageContent = $pageContent.filter(pageContentEl => {
           return $(pageContentEl).parents('.tab:not(.tab-active)').length === 0 && !$(pageContentEl).is('.tab:not(.tab-active)');
         });
       }
-
       router.scrollHistory[page.route.url] = $pageContent.scrollTop();
     }
-
     if (restoreScrollTopOnBack && callback === 'beforeOut' && from === 'current' && to === 'next') {
       // Delete scroll position
       delete router.scrollHistory[page.route.url];
     }
-
     $pageEl.trigger(colonName, page);
     router.emit(camelName, page);
-
     if (callback === 'beforeRemove' || callback === 'beforeUnmount') {
       detachEvents();
-
       if (!keepAlive) {
         if ($pageEl[0].f7Page && $pageEl[0].f7Page.navbarEl) {
           delete $pageEl[0].f7Page.navbarEl.f7Page;
         }
-
         $pageEl[0].f7Page = null;
       }
     }
   }
-
   saveHistory() {
     const router = this;
     const window = getWindow();
     router.view.history = router.history;
-
     if (router.params.browserHistory && router.params.browserHistoryStoreHistory && window.localStorage) {
       window.localStorage[`f7router-${router.view.id}-history`] = JSON.stringify(router.history);
     }
   }
-
   restoreHistory() {
     const router = this;
     const window = getWindow();
-
     if (router.params.browserHistory && router.params.browserHistoryStoreHistory && window.localStorage && window.localStorage[`f7router-${router.view.id}-history`]) {
       router.history = JSON.parse(window.localStorage[`f7router-${router.view.id}-history`]);
       router.view.history = router.history;
     }
   }
-
   clearHistory() {
     const router = this;
     router.history = [];
     if (router.view) router.view.history = [];
     router.saveHistory();
   }
-
   updateCurrentUrl(newUrl) {
     const router = this;
-    appRouterCheck(router, 'updateCurrentUrl'); // Update history
-
+    appRouterCheck(router, 'updateCurrentUrl');
+    // Update history
     if (router.history.length) {
       router.history[router.history.length - 1] = newUrl;
     } else {
       router.history.push(newUrl);
-    } // Update current route params
-
+    }
 
+    // Update current route params
     const {
       query,
       hash,
@@ -1129,7 +966,6 @@ class Router extends Framework7Class {
       url,
       path
     } = router.parseRouteUrl(newUrl);
-
     if (router.currentRoute) {
       extend(router.currentRoute, {
         query,
@@ -1139,29 +975,25 @@ class Router extends Framework7Class {
         path
       });
     }
-
     if (router.params.browserHistory) {
       const browserHistoryRoot = router.params.browserHistoryRoot || '';
       History.replace(router.view.id, {
         url: newUrl
       }, browserHistoryRoot + router.params.browserHistorySeparator + newUrl);
-    } // Save History
-
+    }
 
+    // Save History
     router.saveHistory();
     router.emit('routeUrlUpdate', router.currentRoute, router);
   }
-
   getInitialUrl() {
     const router = this;
-
     if (router.initialUrl) {
       return {
         initialUrl: router.initialUrl,
         historyRestored: router.historyRestored
       };
     }
-
     const {
       app,
       view
@@ -1180,22 +1012,18 @@ class Router extends Framework7Class {
     let {
       browserHistoryRoot
     } = router.params;
-
     if ((window.cordova || window.Capacitor && window.Capacitor.isNative) && browserHistory && !browserHistorySeparator && !browserHistoryRoot && location.pathname.indexOf('index.html')) {
       // eslint-disable-next-line
       console.warn('Framework7: wrong or not complete browserHistory configuration, trying to guess browserHistoryRoot');
       browserHistoryRoot = location.pathname.split('index.html')[0];
     }
-
     if (!browserHistory || !browserHistoryOnLoad) {
       if (!initialUrl) {
         initialUrl = documentUrl;
       }
-
       if (location.search && initialUrl.indexOf('?') < 0) {
         initialUrl += location.search;
       }
-
       if (location.hash && initialUrl.indexOf('#') < 0) {
         initialUrl += location.hash;
       }
@@ -1204,15 +1032,12 @@ class Router extends Framework7Class {
         documentUrl = documentUrl.split(browserHistoryRoot)[1];
         if (documentUrl === '') documentUrl = '/';
       }
-
       if (browserHistorySeparator.length > 0 && documentUrl.indexOf(browserHistorySeparator) >= 0) {
         initialUrl = documentUrl.split(browserHistorySeparator)[1];
       } else {
         initialUrl = documentUrl;
       }
-
       router.restoreHistory();
-
       if (router.history.indexOf(initialUrl) >= 0) {
         router.history = router.history.slice(0, router.history.indexOf(initialUrl) + 1);
       } else if (router.params.url === initialUrl) {
@@ -1222,16 +1047,13 @@ class Router extends Framework7Class {
       } else {
         router.history = [documentUrl.split(browserHistorySeparator)[0] || '/', initialUrl];
       }
-
       if (router.history.length > 1) {
         historyRestored = true;
       } else {
         router.history = [];
       }
-
       router.saveHistory();
     }
-
     router.initialUrl = initialUrl;
     router.historyRestored = historyRestored;
     return {
@@ -1239,7 +1061,6 @@ class Router extends Framework7Class {
       historyRestored
     };
   }
-
   init() {
     const router = this;
     const {
@@ -1251,12 +1072,12 @@ class Router extends Framework7Class {
     const {
       initialUrl,
       historyRestored
-    } = router.getInitialUrl(); // Init Swipeback
+    } = router.getInitialUrl();
 
-    if (view && router.params.iosSwipeBack && app.theme === 'ios' || view && router.params.mdSwipeBack && app.theme === 'md' || view && router.params.auroraSwipeBack && app.theme === 'aurora') {
+    // Init Swipeback
+    if (view && router.params.iosSwipeBack && app.theme === 'ios' || view && router.params.mdSwipeBack && app.theme === 'md') {
       SwipeBack(router);
     }
-
     const {
       browserHistory,
       browserHistoryOnLoad,
@@ -1264,12 +1085,10 @@ class Router extends Framework7Class {
       browserHistoryInitialMatch
     } = router.params;
     let currentRoute;
-
     if (router.history.length > 1) {
       // Will load page
       const initUrl = browserHistoryInitialMatch ? initialUrl : router.history[0];
       currentRoute = router.findMatchingRoute(initUrl);
-
       if (!currentRoute) {
         currentRoute = extend(router.parseRouteUrl(initUrl), {
           route: {
@@ -1281,7 +1100,6 @@ class Router extends Framework7Class {
     } else {
       // Don't load page
       currentRoute = router.findMatchingRoute(initialUrl);
-
       if (!currentRoute) {
         currentRoute = extend(router.parseRouteUrl(initialUrl), {
           route: {
@@ -1291,19 +1109,7 @@ class Router extends Framework7Class {
         });
       }
     }
-
-    if (router.params.stackPages) {
-      router.$el.children('.page').each(pageEl => {
-        const $pageEl = $(pageEl);
-        router.initialPages.push($pageEl[0]);
-
-        if (router.dynamicNavbar && $pageEl.children('.navbar').length > 0) {
-          router.initialNavbars.push($pageEl.children('.navbar')[0]);
-        }
-      });
-    }
-
-    if (router.$el.children('.page:not(.stacked)').length === 0 && initialUrl && router.params.loadInitialPage) {
+    if (router.$el.children('.page').length === 0 && initialUrl && router.params.loadInitialPage) {
       // No pages presented in DOM, reload new page
       router.navigate(initialUrl, {
         initial: true,
@@ -1314,108 +1120,85 @@ class Router extends Framework7Class {
           modalOpen() {
             if (!historyRestored) return;
             const preloadPreviousPage = router.params.preloadPreviousPage || router.params[`${app.theme}SwipeBack`];
-
             if (preloadPreviousPage && router.history.length > 1) {
               router.back({
                 preload: true
               });
             }
           },
-
           pageAfterIn() {
             if (!historyRestored) return;
             const preloadPreviousPage = router.params.preloadPreviousPage || router.params[`${app.theme}SwipeBack`];
-
             if (preloadPreviousPage && router.history.length > 1) {
               router.back({
                 preload: true
               });
             }
           }
-
         }
       });
-    } else if (router.$el.children('.page:not(.stacked)').length) {
+    } else if (router.$el.children('.page').length) {
       // Init current DOM page
       let hasTabRoute;
       router.currentRoute = currentRoute;
-      router.$el.children('.page:not(.stacked)').each(pageEl => {
+      router.$el.children('.page').each(pageEl => {
         const $pageEl = $(pageEl);
         let $navbarEl;
         router.setPagePosition($pageEl, 'current');
-
         if (router.dynamicNavbar) {
           $navbarEl = $pageEl.children('.navbar');
-
           if ($navbarEl.length > 0) {
             if (!router.$navbarsEl.parents(document).length) {
               router.$el.prepend(router.$navbarsEl);
             }
-
             router.setNavbarPosition($navbarEl, 'current');
             router.$navbarsEl.append($navbarEl);
-
             if ($navbarEl.children('.title-large').length) {
               $navbarEl.addClass('navbar-large');
             }
-
             $pageEl.children('.navbar').remove();
           } else {
             router.$navbarsEl.addClass('navbar-hidden');
-
             if ($navbarEl.children('.title-large').length) {
               router.$navbarsEl.addClass('navbar-hidden navbar-large-hidden');
             }
           }
         }
-
         if (router.currentRoute && router.currentRoute.route && (router.currentRoute.route.master === true || typeof router.currentRoute.route.master === 'function' && router.currentRoute.route.master(app, router)) && router.params.masterDetailBreakpoint > 0) {
           $pageEl.addClass('page-master');
           $pageEl.trigger('page:role', {
             role: 'master'
           });
-
           if ($navbarEl && $navbarEl.length) {
             $navbarEl.addClass('navbar-master');
           }
-
           view.checkMasterDetailBreakpoint();
         }
-
         const initOptions = {
           route: router.currentRoute
         };
-
         if (router.currentRoute && router.currentRoute.route && router.currentRoute.route.options) {
           extend(initOptions, router.currentRoute.route.options);
         }
-
         router.currentPageEl = $pageEl[0];
-
         if (router.dynamicNavbar && $navbarEl.length) {
           router.currentNavbarEl = $navbarEl[0];
         }
-
         router.removeThemeElements($pageEl);
-
         if (router.dynamicNavbar && $navbarEl.length) {
           router.removeThemeElements($navbarEl);
         }
-
         if (initOptions.route.route.tab) {
           hasTabRoute = true;
           router.tabLoad(initOptions.route.route.tab, extend({}, initOptions));
         }
-
         router.pageCallback('init', $pageEl, $navbarEl, 'current', undefined, initOptions);
         router.pageCallback('beforeIn', $pageEl, $navbarEl, 'current', undefined, initOptions);
         router.pageCallback('afterIn', $pageEl, $navbarEl, 'current', undefined, initOptions);
       });
-
       if (historyRestored) {
         if (browserHistoryInitialMatch) {
           const preloadPreviousPage = router.params.preloadPreviousPage || router.params[`${app.theme}SwipeBack`];
-
           if (preloadPreviousPage && router.history.length > 1) {
             router.back({
               preload: true
@@ -1430,58 +1213,52 @@ class Router extends Framework7Class {
             once: {
               pageAfterIn() {
                 const preloadPreviousPage = router.params.preloadPreviousPage || router.params[`${app.theme}SwipeBack`];
-
                 if (preloadPreviousPage && router.history.length > 2) {
                   router.back({
                     preload: true
                   });
                 }
               }
-
             }
           });
         }
       }
-
       if (!historyRestored && !hasTabRoute) {
         router.history.push(initialUrl);
         router.saveHistory();
       }
     }
-
     if (initialUrl && browserHistory && browserHistoryOnLoad && (!History.state || !History.state[view.id])) {
       History.initViewState(view.id, {
         url: initialUrl
       });
     }
-
     router.emit('local::init routerInit', router);
   }
-
   destroy() {
     let router = this;
-    router.emit('local::destroy routerDestroy', router); // Delete props & methods
+    router.emit('local::destroy routerDestroy', router);
 
+    // Delete props & methods
     Object.keys(router).forEach(routerProp => {
       router[routerProp] = null;
       delete router[routerProp];
     });
     router = null;
   }
+}
 
-} // Load
-
-
+// Load
 Router.prototype.navigate = navigate;
-Router.prototype.refreshPage = refreshPage; // Tab
-
+Router.prototype.refreshPage = refreshPage;
+// Tab
 Router.prototype.tabLoad = tabLoad;
-Router.prototype.tabRemove = tabRemove; // Modal
-
+Router.prototype.tabRemove = tabRemove;
+// Modal
 Router.prototype.modalLoad = modalLoad;
-Router.prototype.modalRemove = modalRemove; // Back
-
-Router.prototype.back = back; // Clear history
-
+Router.prototype.modalRemove = modalRemove;
+// Back
+Router.prototype.back = back;
+// Clear history
 Router.prototype.clearPreviousHistory = clearPreviousHistory;
 export default Router;