@xenknight/framework7 0.0.2

package/modules/router/clear-previous-history.js

@@ -0,0 +1,31 @@
+import $ from '../../shared/dom7.js';
+import appRouterCheck from './app-router-check.js';
+function clearPreviousPages(router) {
+  appRouterCheck(router, 'clearPreviousPages');
+  const app = router.app;
+  const dynamicNavbar = router.dynamicNavbar;
+  const $pagesToRemove = router.$el.children('.page').filter(pageInView => {
+    if (router.currentRoute && (router.currentRoute.modal || router.currentRoute.panel)) return true;
+    return pageInView !== router.currentPageEl;
+  });
+  $pagesToRemove.each(pageEl => {
+    const $oldPageEl = $(pageEl);
+    const $oldNavbarEl = $(app.navbar.getElByPage($oldPageEl));
+    // Page remove event
+    router.pageCallback('beforeRemove', $oldPageEl, $oldNavbarEl, 'previous', undefined, {});
+    router.removePage($oldPageEl);
+    if (dynamicNavbar && $oldNavbarEl.length) {
+      router.removeNavbar($oldNavbarEl);
+    }
+  });
+}
+function clearPreviousHistory() {
+  const router = this;
+  appRouterCheck(router, 'clearPreviousHistory');
+  const url = router.history[router.history.length - 1];
+  clearPreviousPages(router);
+  router.history = [url];
+  router.view.history = [url];
+  router.saveHistory();
+}
+export { clearPreviousHistory }; // eslint-disable-line

package/modules/router/component-loader.js

@@ -0,0 +1,200 @@
+import { merge } from '../../shared/utils.js';
+export default {
+  name: 'routerComponentLoader',
+  proto: {
+    openIn(router, url, options) {
+      const navigateOptions = {
+        url,
+        route: {
+          path: url,
+          options: {
+            ...options,
+            openIn: undefined
+          }
+        }
+      };
+      const params = {
+        ...options
+      };
+      const component = (props, ctx) => {
+        const {
+          $h,
+          $onMounted,
+          $el,
+          $f7
+        } = ctx;
+        $onMounted(() => {
+          const viewEl = $el.value.find('.view');
+          const view = $f7.view.create(viewEl, {
+            linksView: router.view.selector,
+            ignoreOpenIn: true,
+            loadInitialPage: false
+          });
+          view.router.navigate(url, {
+            props: options.props,
+            reloadAll: true
+          });
+        });
+        // eslint-disable-next-line
+        return () => {
+          if (options.openIn === 'popup') {
+            return $h`<div class="popup popup-router-open-in" data-url="${url}"><div class="view"></div></div>`;
+          }
+          if (options.openIn === 'loginScreen') {
+            return $h`<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view"></div></div>`;
+          }
+          if (options.openIn === 'sheet') {
+            return $h`<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view"></div></div></div>`;
+          }
+          if (options.openIn === 'popover') {
+            return $h`<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view"></div></div></div>`;
+          }
+          if (options.openIn.indexOf('panel') >= 0) {
+            const parts = options.openIn.split(':');
+            const side = parts[1] || 'left';
+            const effect = parts[2] || 'cover';
+            return $h`<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view"></div></div>`;
+          }
+        };
+      };
+      if (options.openIn === 'popup') {
+        navigateOptions.route.popup = params;
+      }
+      if (options.openIn === 'loginScreen') {
+        navigateOptions.route.loginScreen = params;
+      }
+      if (options.openIn === 'sheet') {
+        navigateOptions.route.sheet = params;
+      }
+      if (options.openIn === 'popover') {
+        params.targetEl = options.clickedEl || options.targetEl;
+        navigateOptions.route.popover = params;
+      }
+      if (options.openIn.indexOf('panel') >= 0) {
+        params.targetEl = options.clickedEl || options.targetEl;
+        navigateOptions.route.panel = params;
+      }
+      params.component = component;
+      return router.navigate(navigateOptions);
+    },
+    componentLoader(component, componentUrl, options, resolve, reject) {
+      if (options === void 0) {
+        options = {};
+      }
+      const router = this;
+      const {
+        app
+      } = router;
+      const url = typeof component === 'string' ? component : componentUrl;
+      const compiledUrl = router.replaceRequestUrlParams(url, options);
+      function compile(componentFunction) {
+        let context = options.context || {};
+        if (typeof context === 'function') context = context.call(router);else if (typeof context === 'string') {
+          try {
+            context = JSON.parse(context);
+          } catch (err) {
+            reject(err);
+            throw err;
+          }
+        }
+        const componentContext = merge({}, context, {
+          f7route: options.route,
+          f7router: router
+        });
+        const componentProps = merge(options.route ? options.route.params || {} : {}, options.props || {}, options.routeProps || {});
+        let componentEl;
+        let componentRoot;
+        if (options.componentOptions && options.componentOptions.el) {
+          componentEl = options.componentOptions.el;
+        }
+        if (options.componentOptions && options.componentOptions.root) {
+          componentRoot = options.componentOptions.root;
+        }
+        app.component.create(componentFunction, componentProps, {
+          context: componentContext,
+          el: componentEl,
+          root: componentRoot
+        }).then(createdComponent => {
+          resolve(createdComponent.el);
+        }).catch(err => {
+          reject(err);
+          throw new Error(err, {
+            cause: err
+          });
+        });
+      }
+      let cachedComponent;
+      if (compiledUrl && router.params.componentCache) {
+        router.cache.components.forEach(cached => {
+          if (cached.url === compiledUrl) cachedComponent = cached.component;
+        });
+      }
+      if (compiledUrl && cachedComponent) {
+        compile(cachedComponent);
+      } else if (compiledUrl && !cachedComponent) {
+        // Load via XHR
+        if (router.xhrAbortController) {
+          router.xhrAbortController.abort();
+          router.xhrAbortController = false;
+        }
+        router.xhrRequest(url, options).then(loadedComponent => {
+          const parsedComponent = app.component.parse(loadedComponent);
+          if (router.params.componentCache) {
+            router.cache.components.push({
+              url: compiledUrl,
+              component: parsedComponent
+            });
+          }
+          compile(parsedComponent);
+        }).catch(err => {
+          reject();
+          throw err;
+        });
+      } else {
+        compile(component);
+      }
+    },
+    modalComponentLoader(_temp) {
+      let {
+        component,
+        componentUrl,
+        options,
+        resolve,
+        reject
+      } = _temp === void 0 ? {} : _temp;
+      const router = this;
+      router.componentLoader(component, componentUrl, options, el => {
+        resolve(el);
+      }, reject);
+    },
+    tabComponentLoader(_temp2) {
+      let {
+        component,
+        componentUrl,
+        options,
+        resolve,
+        reject
+      } = _temp2 === void 0 ? {} : _temp2;
+      const router = this;
+      router.componentLoader(component, componentUrl, options, el => {
+        resolve(el);
+      }, reject);
+    },
+    pageComponentLoader(_temp3) {
+      let {
+        component,
+        componentUrl,
+        options,
+        resolve,
+        reject
+      } = _temp3 === void 0 ? {} : _temp3;
+      const router = this;
+      router.componentLoader(component, componentUrl, options, function (el, newOptions) {
+        if (newOptions === void 0) {
+          newOptions = {};
+        }
+        resolve(el, newOptions);
+      }, reject);
+    }
+  }
+};

package/modules/router/modal.js

@@ -0,0 +1,223 @@
+import { extend, nextTick } from '../../shared/utils.js';
+import History from '../../shared/history.js';
+import asyncComponent from './async-component.js';
+function modalLoad(modalType, route, loadOptions, direction) {
+  if (loadOptions === void 0) {
+    loadOptions = {};
+  }
+  const router = this;
+  const app = router.app;
+  const isPanel = modalType === 'panel';
+  const modalOrPanel = isPanel ? 'panel' : 'modal';
+  const options = extend({
+    animate: router.params.animate,
+    browserHistory: true,
+    history: true,
+    on: {},
+    once: {}
+  }, loadOptions);
+  const modalParams = extend({}, route.route[modalType]);
+  const modalRoute = route.route;
+  const routeCallback = (modal, name) => {
+    const {
+      on,
+      once
+    } = options;
+    let callback;
+    if (name === 'open') {
+      callback = on.modalOpen || once.modalOpen || on.panelOpen || once.panelOpen;
+    }
+    if (name === 'close') {
+      callback = on.modalClose || once.modalClose || on.panelClose || once.panelClose;
+    }
+    if (name === 'closed') {
+      callback = on.modalClosed || once.modalClosed || on.panelClosed || once.panelClosed;
+    }
+    if (callback) callback(modal);
+  };
+  function onModalLoaded() {
+    // Create Modal
+    const modal = app[modalType].create(modalParams);
+    modalRoute.modalInstance = modal;
+    const hasEl = modal.el;
+    function closeOnSwipeBack() {
+      modal.close();
+    }
+    modal.on(`${modalOrPanel}Open`, () => {
+      if (!hasEl) {
+        // Remove theme elements
+        router.removeThemeElements(modal.el);
+
+        // Emit events
+        modal.$el.trigger(`${modalType.toLowerCase()}:init ${modalType.toLowerCase()}:mounted`, route, modal);
+        router.emit(`${!isPanel ? 'modalInit' : ''} ${modalType}Init ${modalType}Mounted`, modal.el, route, modal);
+      }
+      router.once('swipeBackMove', closeOnSwipeBack);
+      routeCallback(modal, 'open');
+    });
+    modal.on(`${modalOrPanel}Close`, () => {
+      router.off('swipeBackMove', closeOnSwipeBack);
+      if (!modal.closeByRouter) {
+        router.back();
+      }
+      routeCallback(modal, 'close');
+    });
+    modal.on(`${modalOrPanel}Closed`, () => {
+      modal.$el.trigger(`${modalType.toLowerCase()}:beforeremove`, route, modal);
+      modal.emit(`${!isPanel ? 'modalBeforeRemove ' : ''}${modalType}BeforeRemove`, modal.el, route, modal);
+      const modalComponent = modal.el.f7Component;
+      routeCallback(modal, 'closed');
+      if (modalComponent) {
+        modalComponent.destroy();
+      }
+      nextTick(() => {
+        if (modalComponent || modalParams.component || modalParams.asyncComponent || modalParams.async) {
+          router.removeModal(modal.el);
+        }
+        modal.destroy();
+        delete modal.route;
+        delete modalRoute.modalInstance;
+      });
+    });
+    if (options.route) {
+      // Update Browser History
+      if (router.params.browserHistory && options.browserHistory) {
+        History.push(router.view.id, {
+          url: options.route.url,
+          modal: modalType
+        }, (router.params.browserHistoryRoot || '') + router.params.browserHistorySeparator + options.route.url);
+      }
+
+      // Set Route
+      if (options.route !== router.currentRoute) {
+        modal.route = extend(options.route, {
+          modal
+        });
+        router.currentRoute = modal.route;
+      }
+
+      // Update Router History
+      if (options.history && !options.reloadCurrent) {
+        router.history.push(options.route.url);
+        router.saveHistory();
+      }
+    }
+    if (hasEl) {
+      // Remove theme elements
+      router.removeThemeElements(modal.el);
+
+      // Emit events
+      modal.$el.trigger(`${modalType.toLowerCase()}:init ${modalType.toLowerCase()}:mounted`, route, modal);
+      router.emit(`${modalOrPanel}Init ${modalType}Init ${modalType}Mounted`, modal.el, route, modal);
+    }
+
+    // Open
+    modal.open(options.animate === false || options.animate === true ? options.animate : undefined);
+  }
+
+  // Load Modal Content
+  function loadModal(loadModalParams, loadModalOptions) {
+    // Load Modal Props
+    const {
+      url,
+      content,
+      component,
+      componentUrl
+    } = loadModalParams;
+
+    // Component/Template Callbacks
+    function resolve(contentEl) {
+      if (contentEl) {
+        if (typeof contentEl === 'string') {
+          modalParams.content = contentEl;
+        } else if (contentEl.f7Component) {
+          contentEl.f7Component.mount(componentEl => {
+            modalParams.el = componentEl;
+            app.$el.append(componentEl);
+          });
+        } else {
+          modalParams.el = contentEl;
+        }
+        onModalLoaded();
+      }
+    }
+    function reject() {
+      router.allowPageChange = true;
+      return router;
+    }
+    if (content) {
+      resolve(content);
+    } else if (component || componentUrl) {
+      // Load from component (F7/Vue/React/...)
+      try {
+        router.modalComponentLoader({
+          rootEl: app.el,
+          component,
+          componentUrl,
+          options: loadModalOptions,
+          resolve,
+          reject
+        });
+      } catch (err) {
+        router.allowPageChange = true;
+        throw err;
+      }
+    } else if (url) {
+      // Load using XHR
+      if (router.xhrAbortController) {
+        router.xhrAbortController.abort();
+        router.xhrAbortController = false;
+      }
+      router.xhrRequest(url, loadModalOptions).then(modalContent => {
+        modalParams.content = modalContent;
+        onModalLoaded();
+      }).catch(() => {
+        router.allowPageChange = true;
+      });
+    } else {
+      onModalLoaded();
+    }
+  }
+  let foundLoadProp;
+  'url content component el componentUrl template'.split(' ').forEach(modalLoadProp => {
+    if (modalParams[modalLoadProp] && !foundLoadProp) {
+      foundLoadProp = true;
+      loadModal({
+        [modalLoadProp]: modalParams[modalLoadProp]
+      }, options);
+    }
+  });
+  if (!foundLoadProp && modalType === 'actions') {
+    onModalLoaded();
+  }
+
+  // Async
+  function asyncResolve(resolveParams, resolveOptions) {
+    loadModal(resolveParams, extend(options, resolveOptions));
+  }
+  function asyncReject() {
+    router.allowPageChange = true;
+  }
+  if (modalParams.async) {
+    modalParams.async.call(router, {
+      router,
+      to: options.route,
+      from: router.currentRoute,
+      resolve: asyncResolve,
+      reject: asyncReject,
+      direction,
+      app
+    });
+  }
+  if (modalParams.asyncComponent) {
+    asyncComponent(router, modalParams.asyncComponent, asyncResolve, asyncReject);
+  }
+  return router;
+}
+function modalRemove(modal) {
+  extend(modal, {
+    closeByRouter: true
+  });
+  modal.close();
+}
+export { modalLoad, modalRemove };