Core: Router - routes beforeEnter and beforeLeave callbacks

Author: nolimits4web

src/core/modules/router/back.js

@@ -4,7 +4,7 @@ import Utils from '../../utils/utils';
 import Device from '../../utils/device';
 import History from '../../utils/history';
 import redirect from './redirect';
-import preRoute from './pre-route';
+import processRouteQueue from './process-route-queue';
 
 function backward(el, backwardOptions) {
   const router = this;
@@ -403,7 +403,7 @@ function back(...args) {
   const router = this;
   const app = router.app;
   if (!router.view) {
-    app.views.main.router.back(navigateUrl, navigateOptions);
+    app.views.main.router.back(...args);
     return router;
   }
 
@@ -448,13 +448,30 @@ function back(...args) {
   }
   const $previousPage = router.$el.children('.page-current').prevAll('.page-previous').eq(0);
   if (!navigateOptions.force && $previousPage.length > 0) {
-    if (router.params.pushState && $previousPage[0].f7Page && router.history[router.history.length - 2] !== $previousPage[0].f7Page.route.url) {
-      router.back(router.history[router.history.length - 2], Utils.extend(navigateOptions, { force: true }));
+    if (router.params.pushState
+      && $previousPage[0].f7Page
+      && router.history[router.history.length - 2] !== $previousPage[0].f7Page.route.url
+    ) {
+      router.back(
+        router.history[router.history.length - 2],
+        Utils.extend(navigateOptions, { force: true })
+      );
       return router;
     }
-    router.loadBack({ el: $previousPage }, Utils.extend(navigateOptions, {
-      route: $previousPage[0].f7Page.route,
-    }));
+
+    const previousPageRoute = $previousPage[0].f7Page.route;
+    processRouteQueue.call(
+      router,
+      previousPageRoute,
+      router.currentRoute,
+      () => {
+        router.loadBack({ el: $previousPage }, Utils.extend(navigateOptions, {
+          route: previousPageRoute,
+        }));
+      },
+      () => {}
+    );
+
     return router;
   }
 
@@ -548,23 +565,20 @@ function back(...args) {
     router.allowPageChange = true;
   }
 
-  if (router.params.preRoute || route.route.preRoute) {
-    router.allowPageChange = false;
-    preRoute.call(
+  if (options.preload) {
+    resolve();
+  } else {
+    processRouteQueue.call(
       router,
-      route.route.preRoute,
       route,
       router.currentRoute,
       () => {
-        router.allowPageChange = true;
         resolve();
       },
       () => {
         reject();
       },
     );
-  } else {
-    resolve();
   }
 
   // Return Router

src/core/modules/router/navigate.js

@@ -3,7 +3,7 @@ import { document } from 'ssr-window';
 import Utils from '../../utils/utils';
 import History from '../../utils/history';
 import redirect from './redirect';
-import preRoute from './pre-route';
+import processRouteQueue from './process-route-queue';
 
 function refreshPage() {
   const router = this;
@@ -601,24 +601,17 @@ function navigate(navigateParams, navigateOptions = {}) {
     router.allowPageChange = true;
   }
 
-  if (router.params.preRoute || route.route.preRoute) {
-    router.allowPageChange = false;
-    preRoute.call(
-      router,
-      route.route.preRoute,
-      route,
-      router.currentRoute,
-      () => {
-        router.allowPageChange = true;
-        resolve();
-      },
-      () => {
-        reject();
-      },
-    );
-  } else {
-    resolve();
-  }
+  processRouteQueue.call(
+    router,
+    route,
+    router.currentRoute,
+    () => {
+      resolve();
+    },
+    () => {
+      reject();
+    },
+  );
 
   // Return Router
   return router;

src/core/modules/router/pre-route.js

@@ -0,0 +1,84 @@
+function processQueue(router, routerQueue, routeQueue, to, from, resolve, reject) {
+  const queue = [];
+
+  if (Array.isArray(routeQueue)) {
+    queue.push(...routeQueue);
+  } else if (routeQueue && typeof routeQueue === 'function') {
+    queue.push(routeQueue);
+  }
+  if (routerQueue) {
+    if (Array.isArray(routerQueue)) {
+      queue.push(...routerQueue);
+    } else {
+      queue.push(routerQueue);
+    }
+  }
+
+  function next() {
+    if (queue.length === 0) {
+      resolve();
+      return;
+    }
+    const queueItem = queue.shift();
+
+    queueItem.call(
+      router,
+      to,
+      from,
+      () => {
+        next();
+      },
+      () => {
+        reject();
+      }
+    );
+  }
+  next();
+}
+
+export default function (to, from, resolve, reject) {
+  const router = this;
+  function enterNextRoute() {
+    if (router.params.beforeEnter || to.route.beforeEnter) {
+      router.allowPageChange = false;
+      processQueue(
+        router,
+        router.params.beforeEnter,
+        to.route.beforeEnter,
+        to,
+        from,
+        () => {
+          router.allowPageChange = true;
+          resolve();
+        },
+        () => {
+          reject();
+        },
+      );
+    } else {
+      resolve();
+    }
+  }
+  function leaveCurrentRoute() {
+    if (router.params.beforeLeave || from.route.beforeLeave) {
+      router.allowPageChange = false;
+      processQueue(
+        router,
+        router.params.beforeLeave,
+        from.route.beforeLeave,
+        to,
+        from,
+        () => {
+          router.allowPageChange = true;
+          enterNextRoute();
+        },
+        () => {
+          reject();
+        },
+      );
+    } else {
+      enterNextRoute();
+    }
+  }
+  leaveCurrentRoute();
+}