@xenknight/framework7 0.0.2

package/components/view/view-class.js

@@ -0,0 +1,206 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Router from '../../modules/router/router.js';
+import Framework7Class from '../../shared/class.js';
+import resizableView from './resizable-view.js';
+class View extends Framework7Class {
+  constructor(app, el, viewParams) {
+    if (viewParams === void 0) {
+      viewParams = {};
+    }
+    super(viewParams, [app]);
+    const view = this;
+    const ssr = view.params.routerId;
+    const defaults = {
+      routes: [],
+      routesAdd: []
+    };
+    if (!ssr) {
+      const $el = $(el);
+      if (!$el.length) {
+        let message = "Framework7: can't create a View instance because ";
+        message += typeof el === 'string' ? `the selector "${el}" didn't match any element` : 'el must be an HTMLElement or Dom7 object';
+        throw new Error(message);
+      }
+    }
+
+    // Default View params
+    view.params = extend({
+      el
+    }, defaults, app.params.view, viewParams);
+
+    // Routes
+    if (view.params.routes.length > 0) {
+      view.routes = view.params.routes;
+    } else {
+      view.routes = [].concat(app.routes, view.params.routesAdd);
+    }
+
+    // View Props
+    extend(false, view, {
+      app,
+      name: view.params.name,
+      main: view.params.main,
+      history: [],
+      scrollHistory: {}
+    });
+
+    // Install Modules
+    view.useModules();
+
+    // Add to app
+    app.views.push(view);
+    if (view.main) {
+      app.views.main = view;
+    }
+    if (view.name) {
+      app.views[view.name] = view;
+    }
+
+    // Index
+    view.index = app.views.indexOf(view);
+
+    // View ID
+    let viewId;
+    if (view.name) {
+      viewId = `view_${view.name}`;
+    } else if (view.main) {
+      viewId = 'view_main';
+    } else {
+      viewId = `view_${view.index}`;
+    }
+    view.id = viewId;
+    if (!view.params.init) {
+      return view;
+    }
+    // Init View
+    if (app.initialized) {
+      view.init();
+    } else {
+      app.on('init', () => {
+        view.init();
+      });
+    }
+    return view;
+  }
+  destroy() {
+    let view = this;
+    const app = view.app;
+    view.$el.trigger('view:beforedestroy');
+    view.emit('local::beforeDestroy viewBeforeDestroy', view);
+    app.off('resize', view.checkMasterDetailBreakpoint);
+    if (view.main) {
+      app.views.main = null;
+      delete app.views.main;
+    } else if (view.name) {
+      app.views[view.name] = null;
+      delete app.views[view.name];
+    }
+    view.$el[0].f7View = null;
+    delete view.$el[0].f7View;
+    app.views.splice(app.views.indexOf(view), 1);
+
+    // Destroy Router
+    if (view.params.router && view.router) {
+      view.router.destroy();
+    }
+    view.emit('local::destroy viewDestroy', view);
+
+    // Delete props & methods
+    Object.keys(view).forEach(viewProp => {
+      view[viewProp] = null;
+      delete view[viewProp];
+    });
+    view = null;
+  }
+  checkMasterDetailBreakpoint(force) {
+    const view = this;
+    const app = view.app;
+    const wasMasterDetail = view.$el.hasClass('view-master-detail');
+    const isMasterDetail = app.width >= view.params.masterDetailBreakpoint && view.$el.children('.page-master').length;
+    if (typeof force === 'undefined' && isMasterDetail || force === true) {
+      view.$el.addClass('view-master-detail');
+      if (!wasMasterDetail) {
+        view.emit('local::masterDetailBreakpoint viewMasterDetailBreakpoint', view);
+        view.$el.trigger('view:masterDetailBreakpoint');
+      }
+    } else {
+      view.$el.removeClass('view-master-detail');
+      if (wasMasterDetail) {
+        view.emit('local::masterDetailBreakpoint viewMasterDetailBreakpoint', view);
+        view.$el.trigger('view:masterDetailBreakpoint');
+      }
+    }
+  }
+  initMasterDetail() {
+    const view = this;
+    const app = view.app;
+    view.checkMasterDetailBreakpoint = view.checkMasterDetailBreakpoint.bind(view);
+    view.checkMasterDetailBreakpoint();
+    if (view.params.masterDetailResizable) {
+      resizableView(view);
+    }
+    app.on('resize', view.checkMasterDetailBreakpoint);
+  }
+  mount(viewEl) {
+    const view = this;
+    const app = view.app;
+    const el = view.params.el || viewEl;
+    const $el = $(el);
+
+    // Selector
+    let selector;
+    if (typeof el === 'string') selector = el;else {
+      // Supposed to be HTMLElement or Dom7
+      selector = ($el.attr('id') ? `#${$el.attr('id')}` : '') + ($el.attr('class') ? `.${$el.attr('class').replace(/ /g, '.').replace('.active', '')}` : '');
+    }
+
+    // DynamicNavbar
+    let $navbarsEl;
+    if (app.theme === 'ios' && view.params.iosDynamicNavbar) {
+      $navbarsEl = $el.children('.navbars').eq(0);
+      if ($navbarsEl.length === 0) {
+        $navbarsEl = $('<div class="navbars"></div>');
+      }
+    }
+    extend(view, {
+      $el,
+      el: $el[0],
+      main: view.main || $el.hasClass('view-main'),
+      $navbarsEl,
+      navbarsEl: $navbarsEl ? $navbarsEl[0] : undefined,
+      selector
+    });
+    if (view.main) {
+      app.views.main = view;
+    }
+
+    // Save in DOM
+    if ($el && $el[0]) {
+      $el[0].f7View = view;
+    }
+    view.emit('local::mount viewMount', view);
+  }
+  init(viewEl) {
+    const view = this;
+    view.mount(viewEl);
+    if (view.params.router) {
+      if (view.params.masterDetailBreakpoint > 0) {
+        view.initMasterDetail();
+      }
+      if (view.params.initRouterOnTabShow && view.$el.hasClass('tab') && !view.$el.hasClass('tab-active')) {
+        view.$el.once('tab:show', () => {
+          view.router.init();
+        });
+      } else {
+        view.router.init();
+      }
+      view.$el.trigger('view:init');
+      view.emit('local::init viewInit', view);
+    }
+  }
+}
+
+// Use Router
+View.use(Router);
+export default View;

package/components/view/view-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/view/view-md.less

@@ -0,0 +1,2 @@
+.md {
+}

package/components/view/view.d.ts

@@ -0,0 +1,199 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+import { Router } from '../../modules/router/router.js';
+
+export namespace View {
+  interface View extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** View HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with view HTML element */
+    $el: Dom7Array;
+    /** View name that was passed name parameter */
+    name: string;
+    /** Boolean property indicating is it a main view or not */
+    main: boolean;
+    /** Array with available router's routes */
+    routes: Router.RouteParameters[];
+    /** Array with view history */
+    history: string[];
+    /** Object with view initialization parameters */
+    params: Parameters;
+    /** View's initialized router instance */
+    router: Router.Router;
+    /** Destroy view instance */
+    destroy(): void;
+  }
+  interface Parameters {
+    /** If enabled and View is tab, it won't initialize router and load initial page until View tab becomes visible */
+    initRouterOnTabShow?: boolean;
+    /**	View name. If view was created with name, then it may be accessed via app.views.[name] */
+    name?: string;
+    /**	Specify whether this is View is main or not. If not passed then will be determined based on whether its element has view-main class or not */
+    main?: boolean;
+    /**	Set to false to disable view router */
+    router?: boolean;
+    /**	Default (initial) View's url. If not specified, then it is equal to document url */
+    url?: string;
+    /**	CSS Selector of another view or object with initialized View instance. By default all links in initialized (only) view will load pages in this view. This tell links to load pages in other view. */
+    linksView?: CSSSelector | View;
+    /**	You may enable this parameter to allow loading of new pages that have same url as currently "active" page in View. */
+    allowDuplicateUrls?: boolean;
+    /**	Enables transitions between pages */
+    animate?: boolean;
+    /** Custom page transition effect name */
+    transition?: string;
+    /**	Enable/disable preloading of previous page when you go deep in navigation. Should be enabled for correct work of "swipe back page" feature. */
+    preloadPreviousPage?: boolean;
+    /**	When enabled, View will always reload currently active page without loading new one */
+    reloadPages?: boolean;
+    /** When enabled it will reload every detail page when navigating (by default false) */
+    reloadDetail?: boolean;
+    /** Minimum app width to enable Master Detail view for master routes (routes with master: true parameter) */
+    masterDetailBreakpoint?: number;
+    /** Enables resizable Master Detail */
+    masterDetailResizable?: boolean;
+    /**	When enabled it will restore page scroll top when you get back to this page */
+    restoreScrollTopOnBack?: boolean;
+    /**	Delay (in ms) after new page will be loaded and inserted to DOM and before it will be transitioned. Can be increased a bit to improve performance. Will have effect only under iOS theme */
+    iosPageLoadDelay?: number;
+    /**	Delay (in ms) after new page will be loaded and inserted to DOM and before it will be transitioned. Can be increased a bit to improve performance. Will have effect only under MD theme */
+    mdPageLoadDelay?: number;
+    /**	When enabled then router will pass route url query to request url query (for url, componentUrl route properties) */
+    passRouteQueryToRequest?: boolean;
+    /**	When enabled then router will pass current route parameters to request url query (for url, componentUrl route properties) */
+    passRouteParamsToRequest?: boolean;
+    /**	Array with current View routes. In case if specified then will overwrite global app routes and routes only specified here will be available for the current View */
+    routes?: Router.RouteParameters[];
+    /**	Array with additional routes that will extend global app routes. This additional routes will only be available for the current View */
+    routesAdd?: Router.RouteParameters[];
+    /**	Function (or array of functions) that will be executed before every route load/enter. To proceed route loading resolve must be called. In case of array then every function in array must be resolved to proceed. */
+    routesBeforeEnter?(ctx: {
+      to: Router.Route;
+      from: Router.Route;
+      resolve: Function;
+      reject: Function;
+      router: Router.Router;
+      direction?: 'forward' | 'backward';
+    }): void;
+    /**	Function (or array of functions) that will be executed before every route unload/leave. To proceed navigation resolve must be called. In case of array then every function in array must be resolved to proceed. */
+    routesBeforeLeave?(ctx: {
+      to: Router.Route;
+      from: Router.Route;
+      resolve: Function;
+      reject: Function;
+      router: Router.Router;
+      direction?: 'forward' | 'backward';
+    }): void;
+    /**	During page transitions Router may remove unused Page and Navbar elements from DOM. Useful to be disabled in case you want to handle elements removal manually or using other library, e.g. Vue or React */
+    removeElements?: boolean;
+    /**	When enabled then Router will remove elements after timeout */
+    removeElementsWithTimeout?: boolean;
+    /**	Timeout to remove elements (in case of removeElementsWithTimeout: true) */
+    removeElementsTimeout?: number;
+    /**	Unloads routable tab content (removes tab inner content) when tab becomes visible. Only for routable tabs */
+    unloadTabContent?: boolean;
+    /**	As Router can use Ajax to load HTML content for pages it is good to use caching, especially if your content in those pages updates not very often. */
+    xhrCache?: boolean;
+    /**	Array of URLs (string) that should not be cached */
+    xhrCacheIgnore?: string[];
+    /**	If "true" then URLs like "about.html?id=2" and "about.html?id=3" will be treated and cached like single "about.html" page */
+    xhrCacheIgnoreGetParameters?: boolean;
+    /**	Duration in ms (milliseconds) while app will use cache instead of loading page with another Ajax request. By default it takes 10 minutes. */
+    xhrCacheDuration?: number;
+    /** When enabled, Router will cache components specified via `componentUrl` (default true) */
+    componentCache?: boolean;
+    /** When enabled, and there is no children pages inside of the View. It will load initial page that matches to initial URL (default true) */
+    loadInitialPage?: boolean;
+    /**	Enables dynamic navbar for iOS theme */
+    iosDynamicNavbar?: boolean;
+    /**	This option (when enabled) gives more native look for dynamic navbar left back-link icon animation. Useful only when you use dynamic navbar with default back-link icon on left side set as "sliding". */
+    iosAnimateNavbarBackIcon?: boolean;
+    /**	Enable/disable ability to swipe back from left edge of screen to get to the previous page. For iOS theme */
+    iosSwipeBack?: boolean;
+    /**	Value in px. Swipe back action will start if "touch distance" will be more than this value. For iOS theme */
+    iosSwipeBackThreshold?: number;
+    /**	Value in px. Width of invisible left edge of the screen that triggers swipe back action. For iOS theme */
+    iosSwipeBackActiveArea?: number;
+    /**	Enable/disable box-shadow animation during swipe back action. You can disable it to improve performance. For iOS theme */
+    iosSwipeBackAnimateShadow?: boolean;
+    /**	Enable/disable opacity animation during swipe back action. You can disable it to improve performance. For iOS theme */
+    iosSwipeBackAnimateOpacity?: boolean;
+    /**	Enable/disable ability to swipe back from left edge of screen to get to the previous page. For MD theme */
+    mdSwipeBack?: boolean;
+    /**	Value in px. Swipe back action will start if "touch distance" will be more than this value. For MD theme */
+    mdSwipeBackThreshold?: number;
+    /**	Value in px. Width of invisible left edge of the screen that triggers swipe back action. For MD theme */
+    mdSwipeBackActiveArea?: number;
+    /**	Enable/disable box-shadow animation during swipe back action. You can disable it to improve performance. For MD theme */
+    mdSwipeBackAnimateShadow?: boolean;
+    /**	Enable/disable opacity animation during swipe back action. You can disable it to improve performance. For MD theme */
+    mdSwipeBackAnimateOpacity?: boolean;
+    /**	If you develop web app (not Cordova/Capacitor or Home Screen web app) it is useful to enable hash navigation (browser url will look like "http://my-webapp.com/#!/about.html"). User as well will be able to navigate through app's history by using browser's default back and forward buttons. */
+    browserHistory?: boolean;
+    /**	Browser history root URL, for example "http://my-app.com/". It is useful only in case when you use empty ("") browserHistorySeparator */
+    browserHistoryRoot?: string;
+    /**	Enable/disable page transitions on history change */
+    browserHistoryAnimate?: boolean;
+    /**	Enable/disable page transition on app load */
+    browserHistoryAnimateOnLoad?: boolean;
+    /**	Browser history URL separator, can be changed for something like '#page/' and then your URLs will look like "http://myapp.com/#page/about.html" */
+    browserHistorySeparator?: string;
+    /**	Disable to ignore parsing browser history URL and loading page on app load */
+    browserHistoryOnLoad?: boolean;
+    /**	Set to true when your server cofigured to respond with content that matches to requested URL (e.g. using with server-side rendering frameworks like Nuxt.js, Next.js, and others). Also must be enabled when used in Framework7-React/Vue/Svelte. By default disabled */
+    browserHistoryInitialMatch?: boolean;
+    /**	When enabled (by default), it will store router history in localStorage and try to restore it on next web app visit */
+    browserHistoryStoreHistory?: boolean;
+    /** When "replace" (by default), it will replace state on routable tabs change, otherwise (if "push"), it will add to history every routable tab change, so it will be possible to switch back between tabs with browser back button */
+    browserHistoryTabs?: 'replace' | 'push';
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface View extends Router.AppMethods {}
+  interface Events extends Router.Events {
+    /** Event will be fired on View init */
+    init: (view: View) => void;
+    /** Event will be triggered right when resizable Master Detail resized */
+    resize: (view: View, masterWidth: number) => void;
+  }
+  interface DomEvents extends Router.DomEvents {
+    /** Event will be fired on View init */
+    'view:init': () => void;
+    /** Event will be triggered right when resizable Master Detail resized */
+    'view:resize': () => void;
+  }
+  interface AppMethods extends Router.AppEvents {
+    view: {
+      current: View;
+      main: View;
+      create(viewEl: HTMLElement | CSSSelector, parameters?: Parameters): View;
+      get(viewEl: HTMLElement | CSSSelector): View;
+    };
+    views: {
+      current: View;
+      main: View;
+      create(viewEl: HTMLElement | CSSSelector, parameters?: Parameters): View;
+      get(viewEl: HTMLElement | CSSSelector): View;
+    };
+  }
+  interface AppParams {
+    view?: Parameters | undefined;
+  }
+  interface AppEvents extends Router.Events {
+    /** Event will be fired on View init */
+    viewInit: (view: View) => void;
+    /** Event will be triggered right when resizable Master Detail resized */
+    viewResize: (view: View, masterWidth: number) => void;
+  }
+}
+
+declare const ViewComponent: Framework7Plugin;
+export default ViewComponent;

package/components/view/view.js

@@ -0,0 +1,173 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import View from './view-class.js';
+function getCurrentView(app) {
+  const $popoverView = $('.popover.modal-in .view');
+  const $popupView = $('.popup.modal-in .view');
+  const $panelView = $('.panel.panel-in .view');
+  let $viewsEl = $('.views');
+  if ($viewsEl.length === 0) $viewsEl = app.$el;
+  // Find active view as tab
+  let $viewEl = $viewsEl.children('.view');
+  if ($viewEl.length === 0) {
+    $viewEl = $viewsEl.children('.tabs').children('.view');
+  }
+  // Propably in tabs or split view
+  if ($viewEl.length > 1) {
+    if ($viewEl.hasClass('tab')) {
+      // Tabs
+      $viewEl = $viewsEl.children('.view.tab-active');
+      if ($viewEl.length === 0) {
+        $viewEl = $viewsEl.children('.tabs').children('.view.tab-active');
+      }
+    } else {
+      // Split View, leave appView intact
+    }
+  }
+  if ($popoverView.length > 0 && $popoverView[0].f7View) return $popoverView[0].f7View;
+  if ($popupView.length > 0 && $popupView[0].f7View) return $popupView[0].f7View;
+  if ($panelView.length > 0 && $panelView[0].f7View) return $panelView[0].f7View;
+  if ($viewEl.length > 0) {
+    if ($viewEl.length === 1 && $viewEl[0].f7View) return $viewEl[0].f7View;
+    if ($viewEl.length > 1) {
+      return app.views.main;
+    }
+  }
+  return undefined;
+}
+export default {
+  name: 'view',
+  params: {
+    view: {
+      init: true,
+      initRouterOnTabShow: false,
+      name: undefined,
+      main: false,
+      router: true,
+      linksView: null,
+      xhrCache: true,
+      xhrCacheIgnore: [],
+      xhrCacheIgnoreGetParameters: false,
+      xhrCacheDuration: 1000 * 60 * 10,
+      // Ten minutes
+      componentCache: true,
+      preloadPreviousPage: true,
+      allowDuplicateUrls: false,
+      reloadPages: false,
+      reloadDetail: false,
+      masterDetailBreakpoint: 0,
+      masterDetailResizable: false,
+      removeElements: true,
+      removeElementsWithTimeout: false,
+      removeElementsTimeout: 0,
+      restoreScrollTopOnBack: true,
+      unloadTabContent: true,
+      passRouteQueryToRequest: true,
+      passRouteParamsToRequest: false,
+      loadInitialPage: true,
+      // Swipe Back
+      iosSwipeBack: true,
+      iosSwipeBackAnimateShadow: true,
+      iosSwipeBackAnimateOpacity: true,
+      iosSwipeBackActiveArea: 30,
+      iosSwipeBackThreshold: 0,
+      mdSwipeBack: false,
+      mdSwipeBackAnimateShadow: true,
+      mdSwipeBackAnimateOpacity: false,
+      mdSwipeBackActiveArea: 30,
+      mdSwipeBackThreshold: 0,
+      // Push State
+      browserHistory: false,
+      browserHistoryRoot: undefined,
+      browserHistoryAnimate: true,
+      browserHistoryAnimateOnLoad: false,
+      browserHistorySeparator: '#!',
+      browserHistoryOnLoad: true,
+      browserHistoryInitialMatch: false,
+      browserHistoryStoreHistory: true,
+      browserHistoryTabs: 'replace',
+      // Animate Pages
+      animate: true,
+      // iOS Dynamic Navbar
+      iosDynamicNavbar: true,
+      // Animate iOS Navbar Back Icon
+      iosAnimateNavbarBackIcon: true,
+      // Delays
+      iosPageLoadDelay: 0,
+      mdPageLoadDelay: 0,
+      // Routes hooks
+      routesBeforeEnter: null,
+      routesBeforeLeave: null
+    }
+  },
+  static: {
+    View
+  },
+  create() {
+    const app = this;
+    extend(app, {
+      views: extend([], {
+        create(el, params) {
+          return new View(app, el, params);
+        },
+        get(viewEl) {
+          const $viewEl = $(viewEl);
+          if ($viewEl.length && $viewEl[0].f7View) return $viewEl[0].f7View;
+          return undefined;
+        }
+      })
+    });
+    Object.defineProperty(app.views, 'current', {
+      enumerable: true,
+      configurable: true,
+      get() {
+        return getCurrentView(app);
+      }
+    });
+    // Alias
+    app.view = app.views;
+  },
+  on: {
+    init() {
+      const app = this;
+      $('.view-init').each(viewEl => {
+        if (viewEl.f7View) return;
+        const viewParams = $(viewEl).dataset();
+        app.views.create(viewEl, viewParams);
+      });
+    },
+    'modalOpen panelOpen': function onOpen(instance) {
+      const app = this;
+      instance.$el.find('.view-init').each(viewEl => {
+        if (viewEl.f7View) return;
+        const viewParams = $(viewEl).dataset();
+        app.views.create(viewEl, viewParams);
+      });
+    },
+    'modalBeforeDestroy panelBeforeDestroy': function onClose(instance) {
+      if (!instance || !instance.$el) return;
+      instance.$el.find('.view-init').each(viewEl => {
+        const view = viewEl.f7View;
+        if (!view) return;
+        view.destroy();
+      });
+    }
+  },
+  vnode: {
+    'view-init': {
+      insert(vnode) {
+        const app = this;
+        const viewEl = vnode.elm;
+        if (viewEl.f7View) return;
+        const viewParams = $(viewEl).dataset();
+        app.views.create(viewEl, viewParams);
+      },
+      destroy(vnode) {
+        const viewEl = vnode.elm;
+        const view = viewEl.f7View;
+        if (!view) return;
+        view.destroy();
+      }
+    }
+  }
+};

package/components/view/view.less

@@ -0,0 +1,35 @@
+/* === Views === */
+.views,
+.view {
+  position: relative;
+  height: 100%;
+  z-index: 5000;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.framework7-root {
+  > .view,
+  > .views {
+    height: 100%;
+  }
+}
+.view-resize-handler {
+  width: 6px;
+  height: 100%;
+  position: absolute;
+  left: var(--f7-page-master-width);
+  margin-left: -3px;
+  top: 0;
+  cursor: col-resize;
+  z-index: 1000;
+  display: none;
+  .view-master-detail & {
+    display: block;
+  }
+}
+.if-ios-theme({
+  @import './view-ios.less';
+});
+.if-md-theme({
+  @import './view-md.less';
+});