framework7 6.3.15 → 7.0.0-beta.11

package/modules/router/component-loader.js

@@ -0,0 +1,174 @@
+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
+      };
+
+      if (options.openIn === 'popup') {
+        params.content = `<div class="popup popup-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
+        navigateOptions.route.popup = params;
+      }
+
+      if (options.openIn === 'loginScreen') {
+        params.content = `<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
+        navigateOptions.route.loginScreen = params;
+      }
+
+      if (options.openIn === 'sheet') {
+        params.content = `<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
+        navigateOptions.route.sheet = params;
+      }
+
+      if (options.openIn === 'popover') {
+        params.targetEl = options.clickedEl || options.targetEl;
+        params.content = `<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
+        navigateOptions.route.popover = params;
+      }
+
+      if (options.openIn.indexOf('panel') >= 0) {
+        const parts = options.openIn.split(':');
+        const side = parts[1] || 'left';
+        const effect = parts[2] || 'cover';
+        params.targetEl = options.clickedEl || options.targetEl;
+        params.content = `<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
+        navigateOptions.route.panel = params;
+      }
+
+      return router.navigate(navigateOptions);
+    },
+
+    componentLoader(component, componentUrl, options = {}, resolve, reject) {
+      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);
+        });
+      }
+
+      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({
+      component,
+      componentUrl,
+      options,
+      resolve,
+      reject
+    } = {}) {
+      const router = this;
+      router.componentLoader(component, componentUrl, options, el => {
+        resolve(el);
+      }, reject);
+    },
+
+    tabComponentLoader({
+      component,
+      componentUrl,
+      options,
+      resolve,
+      reject
+    } = {}) {
+      const router = this;
+      router.componentLoader(component, componentUrl, options, el => {
+        resolve(el);
+      }, reject);
+    },
+
+    pageComponentLoader({
+      component,
+      componentUrl,
+      options,
+      resolve,
+      reject
+    } = {}) {
+      const router = this;
+      router.componentLoader(component, componentUrl, options, (el, newOptions = {}) => {
+        resolve(el, newOptions);
+      }, reject);
+    }
+
+  }
+};

package/{esm/modules → modules}/router/modal.js

@@ -1,30 +1,28 @@
-import { extend, nextTick } from '../../shared/utils';
-import History from '../../shared/history';
-import asyncComponent from './async-component';
-
-function modalLoad(modalType, route, loadOptions, direction) {
-  if (loadOptions === void 0) {
-    loadOptions = {};
-  }
-
-  var router = this;
-  var app = router.app;
-  var isPanel = modalType === 'panel';
-  var modalOrPanel = isPanel ? 'panel' : 'modal';
-  var options = extend({
+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) {
+  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);
-  var modalParams = extend({}, route.route[modalType]);
-  var modalRoute = route.route;
+  const modalParams = extend({}, route.route[modalType]);
+  const modalRoute = route.route;
 
-  var routeCallback = function routeCallback(modal, name) {
-    var on = options.on,
-        once = options.once;
-    var callback;
+  const routeCallback = (modal, name) => {
+    const {
+      on,
+      once
+    } = options;
+    let callback;
 
     if (name === 'open') {
       callback = on.modalOpen || once.modalOpen || on.panelOpen || once.panelOpen;
@@ -43,27 +41,27 @@ function modalLoad(modalType, route, loadOptions, direction) {
 
   function onModalLoaded() {
     // Create Modal
-    var modal = app[modalType].create(modalParams);
+    const modal = app[modalType].create(modalParams);
     modalRoute.modalInstance = modal;
-    var hasEl = modal.el;
+    const hasEl = modal.el;
 
     function closeOnSwipeBack() {
       modal.close();
     }
 
-    modal.on(modalOrPanel + "Open", function () {
+    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);
+        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", function () {
+    modal.on(`${modalOrPanel}Close`, () => {
       router.off('swipeBackMove', closeOnSwipeBack);
 
       if (!modal.closeByRouter) {
@@ -72,17 +70,17 @@ function modalLoad(modalType, route, loadOptions, direction) {
 
       routeCallback(modal, 'close');
     });
-    modal.on(modalOrPanel + "Closed", function () {
-      modal.$el.trigger(modalType.toLowerCase() + ":beforeremove", route, modal);
-      modal.emit("" + (!isPanel ? 'modalBeforeRemove ' : '') + modalType + "BeforeRemove", modal.el, route, modal);
-      var modalComponent = modal.el.f7Component;
+    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(function () {
+      nextTick(() => {
         if (modalComponent || modalParams.component || modalParams.asyncComponent) {
           router.removeModal(modal.el);
         }
@@ -105,7 +103,7 @@ function modalLoad(modalType, route, loadOptions, direction) {
 
       if (options.route !== router.currentRoute) {
         modal.route = extend(options.route, {
-          modal: modal
+          modal
         });
         router.currentRoute = modal.route;
       } // Update Router History
@@ -121,8 +119,8 @@ function modalLoad(modalType, route, loadOptions, direction) {
       // 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);
+      modal.$el.trigger(`${modalType.toLowerCase()}:init ${modalType.toLowerCase()}:mounted`, route, modal);
+      router.emit(`${modalOrPanel}Init ${modalType}Init ${modalType}Mounted`, modal.el, route, modal);
     } // Open
 
 
@@ -132,17 +130,19 @@ function modalLoad(modalType, route, loadOptions, direction) {
 
   function loadModal(loadModalParams, loadModalOptions) {
     // Load Modal Props
-    var url = loadModalParams.url,
-        content = loadModalParams.content,
-        component = loadModalParams.component,
-        componentUrl = loadModalParams.componentUrl; // Component/Template Callbacks
+    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(function (componentEl) {
+          contentEl.f7Component.mount(componentEl => {
             modalParams.el = componentEl;
             app.$el.append(componentEl);
           });
@@ -166,11 +166,11 @@ function modalLoad(modalType, route, loadOptions, direction) {
       try {
         router.modalComponentLoader({
           rootEl: app.el,
-          component: component,
-          componentUrl: componentUrl,
+          component,
+          componentUrl,
           options: loadModalOptions,
-          resolve: resolve,
-          reject: reject
+          resolve,
+          reject
         });
       } catch (err) {
         router.allowPageChange = true;
@@ -183,10 +183,10 @@ function modalLoad(modalType, route, loadOptions, direction) {
         router.xhrAbortController = false;
       }
 
-      router.xhrRequest(url, loadModalOptions).then(function (modalContent) {
+      router.xhrRequest(url, loadModalOptions).then(modalContent => {
         modalParams.content = modalContent;
         onModalLoaded();
-      }).catch(function () {
+      }).catch(() => {
         router.allowPageChange = true;
       });
     } else {
@@ -194,13 +194,13 @@ function modalLoad(modalType, route, loadOptions, direction) {
     }
   }
 
-  var foundLoadProp;
-  'url content component el componentUrl template'.split(' ').forEach(function (modalLoadProp) {
+  let foundLoadProp;
+  'url content component el componentUrl template'.split(' ').forEach(modalLoadProp => {
     if (modalParams[modalLoadProp] && !foundLoadProp) {
-      var _loadModal;
-
       foundLoadProp = true;
-      loadModal((_loadModal = {}, _loadModal[modalLoadProp] = modalParams[modalLoadProp], _loadModal), options);
+      loadModal({
+        [modalLoadProp]: modalParams[modalLoadProp]
+      }, options);
     }
   });
 
@@ -219,13 +219,13 @@ function modalLoad(modalType, route, loadOptions, direction) {
 
   if (modalParams.async) {
     modalParams.async.call(router, {
-      router: router,
+      router,
       to: options.route,
       from: router.currentRoute,
       resolve: asyncResolve,
       reject: asyncReject,
-      direction: direction,
-      app: app
+      direction,
+      app
     });
   }