@xenknight/framework7 0.0.2

package/modules/router/tab.js

@@ -0,0 +1,230 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import History from '../../shared/history.js';
+import asyncComponent from './async-component.js';
+function tabLoad(tabRoute, loadOptions) {
+  if (loadOptions === void 0) {
+    loadOptions = {};
+  }
+  const router = this;
+  const options = extend({
+    animate: router.params.animate,
+    browserHistory: true,
+    history: true,
+    parentPageEl: null,
+    preload: false,
+    on: {}
+  }, loadOptions);
+  let currentRoute;
+  let previousRoute;
+  if (options.route) {
+    // Set Route
+    if (!options.preload && options.route !== router.currentRoute) {
+      previousRoute = router.previousRoute;
+      router.currentRoute = options.route;
+    }
+    if (options.preload) {
+      currentRoute = options.route;
+      previousRoute = router.currentRoute;
+    } else {
+      currentRoute = router.currentRoute;
+      if (!previousRoute) previousRoute = router.previousRoute;
+    }
+
+    // Update Browser History
+    if (router.params.browserHistory && options.browserHistory && !options.reloadPrevious) {
+      History[router.params.browserHistoryTabs](router.view.id, {
+        url: options.route.url
+      }, (router.params.browserHistoryRoot || '') + router.params.browserHistorySeparator + options.route.url);
+    }
+
+    // Update Router History
+    if (options.history) {
+      router.history[Math.max(router.history.length - 1, 0)] = options.route.url;
+      router.saveHistory();
+    }
+  }
+
+  // Show Tab
+  const $parentPageEl = $(options.parentPageEl || router.currentPageEl);
+  let tabEl;
+  if ($parentPageEl.length && $parentPageEl.find(`#${tabRoute.id}`).length) {
+    tabEl = $parentPageEl.find(`#${tabRoute.id}`).eq(0);
+  } else if (router.view.selector) {
+    tabEl = `${router.view.selector} #${tabRoute.id}`;
+  } else {
+    tabEl = `#${tabRoute.id}`;
+  }
+  const tabShowResult = router.app.tab.show({
+    tabEl,
+    animate: options.animate,
+    tabRoute: options.route
+  });
+  const {
+    $newTabEl,
+    $oldTabEl,
+    animated,
+    onTabsChanged
+  } = tabShowResult;
+  if ($newTabEl && $newTabEl.parents('.page').length > 0 && options.route) {
+    const tabParentPageData = $newTabEl.parents('.page')[0].f7Page;
+    if (tabParentPageData && options.route) {
+      tabParentPageData.route = options.route;
+    }
+  }
+
+  // Tab Content Loaded
+  function onTabLoaded(contentEl) {
+    // Remove theme elements
+    router.removeThemeElements($newTabEl);
+    let tabEventTarget = $newTabEl;
+    if (typeof contentEl !== 'string') tabEventTarget = $(contentEl);
+    tabEventTarget.trigger('tab:init tab:mounted', tabRoute);
+    router.emit('tabInit tabMounted', $newTabEl[0], tabRoute);
+    if ($oldTabEl && $oldTabEl.length) {
+      if (animated) {
+        onTabsChanged(() => {
+          router.emit('routeChanged', router.currentRoute, router.previousRoute, router);
+          if (router.params.unloadTabContent) {
+            router.tabRemove($oldTabEl, $newTabEl, tabRoute);
+          }
+        });
+      } else {
+        router.emit('routeChanged', router.currentRoute, router.previousRoute, router);
+        if (router.params.unloadTabContent) {
+          router.tabRemove($oldTabEl, $newTabEl, tabRoute);
+        }
+      }
+    }
+  }
+  if ($newTabEl[0].f7RouterTabLoaded) {
+    if (!$oldTabEl || !$oldTabEl.length) return router;
+    if (animated) {
+      onTabsChanged(() => {
+        router.emit('routeChanged', router.currentRoute, router.previousRoute, router);
+      });
+    } else {
+      router.emit('routeChanged', router.currentRoute, router.previousRoute, router);
+    }
+    return router;
+  }
+
+  // Load Tab Content
+  function loadTab(loadTabParams, loadTabOptions) {
+    // Load Tab Props
+    const {
+      url,
+      content,
+      el,
+      component,
+      componentUrl
+    } = loadTabParams;
+    // Component/Template Callbacks
+    function resolve(contentEl) {
+      router.allowPageChange = true;
+      if (!contentEl) return;
+      if (typeof contentEl === 'string') {
+        $newTabEl.html(contentEl);
+      } else {
+        $newTabEl.html('');
+        if (contentEl.f7Component) {
+          contentEl.f7Component.mount(componentEl => {
+            $newTabEl.append(componentEl);
+          });
+        } else {
+          $newTabEl.append(contentEl);
+        }
+      }
+      $newTabEl[0].f7RouterTabLoaded = true;
+      onTabLoaded(contentEl);
+    }
+    function reject() {
+      router.allowPageChange = true;
+      return router;
+    }
+    if (content) {
+      resolve(content);
+    } else if (el) {
+      resolve(el);
+    } else if (component || componentUrl) {
+      // Load from component (F7/Vue/React/...)
+      try {
+        router.tabComponentLoader({
+          tabEl: $newTabEl[0],
+          component,
+          componentUrl,
+          options: loadTabOptions,
+          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, loadTabOptions).then(tabContent => {
+        resolve(tabContent);
+      }).catch(() => {
+        router.allowPageChange = true;
+      });
+    }
+  }
+  let hasContentLoadProp;
+  'url content component el componentUrl'.split(' ').forEach(tabLoadProp => {
+    if (tabRoute[tabLoadProp]) {
+      hasContentLoadProp = true;
+      loadTab({
+        [tabLoadProp]: tabRoute[tabLoadProp]
+      }, options);
+    }
+  });
+
+  // Async
+  function asyncResolve(resolveParams, resolveOptions) {
+    loadTab(resolveParams, extend(options, resolveOptions));
+  }
+  function asyncReject() {
+    router.allowPageChange = true;
+  }
+  if (tabRoute.async) {
+    tabRoute.async.call(router, {
+      router,
+      to: currentRoute,
+      from: previousRoute,
+      resolve: asyncResolve,
+      reject: asyncReject,
+      app: router.app
+    });
+  } else if (tabRoute.asyncComponent) {
+    asyncComponent(router, tabRoute.asyncComponent, asyncResolve, asyncReject);
+  } else if (!hasContentLoadProp) {
+    router.allowPageChange = true;
+  }
+  return router;
+}
+function tabRemove($oldTabEl, $newTabEl, tabRoute) {
+  const router = this;
+  let hasTabComponentChild;
+  if ($oldTabEl[0]) {
+    $oldTabEl[0].f7RouterTabLoaded = false;
+    delete $oldTabEl[0].f7RouterTabLoaded;
+  }
+  $oldTabEl.children().each(tabChild => {
+    if (tabChild.f7Component) {
+      hasTabComponentChild = true;
+      $(tabChild).trigger('tab:beforeremove', tabRoute);
+      tabChild.f7Component.destroy();
+    }
+  });
+  if (!hasTabComponentChild) {
+    $oldTabEl.trigger('tab:beforeremove', tabRoute);
+  }
+  router.emit('tabBeforeRemove', $oldTabEl[0], $newTabEl[0], tabRoute);
+  router.removeTabContent($oldTabEl[0], tabRoute);
+}
+export { tabLoad, tabRemove };

package/modules/service-worker/service-worker.d.ts

@@ -0,0 +1,38 @@
+import Framework7, { Framework7Plugin } from '../../components/app/app-class.js';
+
+export namespace ServiceWorker {
+  interface AppMethods {
+    serviceWorker: {
+      /** Service worker container (navigator.serviceWorker) */
+      container: ServiceWorkerContainer;
+      /** Array with service workers registrations */
+      registrations: ServiceWorkerRegistration[];
+      /** Register service worker */
+      register(path: string, scope?: string): Promise<any>;
+      /** Unregister service worker */
+      unregister(registration?: ServiceWorkerRegistration): Promise<any>;
+    };
+  }
+  interface AppParams {
+    /** Object with service worker parameters */
+    serviceWorker?: {
+      /** Service worker to register path (or array with paths) */
+      path?: string | string[];
+      /** Default service worker scope */
+      scope?: string;
+    };
+  }
+  interface AppEvents {
+    /** Event will be triggered when service worker successfully registered */
+    serviceWorkerRegisterSuccess: (registration: ServiceWorkerRegistration) => void;
+    /** Event will be triggered when service worker registration failed */
+    serviceWorkerRegisterError: (error: Error) => void;
+    /** Event will be triggered when service worker successfully unregistered */
+    serviceWorkerUnregisterSuccess: (registration: ServiceWorkerRegistration) => void;
+    /** Event will be triggered when service worker unregister failed */
+    serviceWorkerUnregisterError: (registration: ServiceWorkerRegistration, error: Error) => void;
+  }
+}
+declare const ServiceWorkerModule: Framework7Plugin;
+
+export default ServiceWorkerModule;

package/modules/service-worker/service-worker.js

@@ -0,0 +1,86 @@
+import { getWindow } from 'ssr-window';
+import { extend } from '../../shared/utils.js';
+const SW = {
+  registrations: [],
+  register(path, scope) {
+    const app = this;
+    const window = getWindow();
+    if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) {
+      return new Promise((resolve, reject) => {
+        reject(new Error('Service worker is not supported'));
+      });
+    }
+    return new Promise((resolve, reject) => {
+      app.serviceWorker.container.register(path, scope ? {
+        scope
+      } : {}).then(reg => {
+        SW.registrations.push(reg);
+        app.emit('serviceWorkerRegisterSuccess', reg);
+        resolve(reg);
+      }).catch(error => {
+        app.emit('serviceWorkerRegisterError', error);
+        reject(error);
+      });
+    });
+  },
+  unregister(registration) {
+    const app = this;
+    const window = getWindow();
+    if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) {
+      return new Promise((resolve, reject) => {
+        reject(new Error('Service worker is not supported'));
+      });
+    }
+    let registrations;
+    if (!registration) registrations = SW.registrations;else if (Array.isArray(registration)) registrations = registration;else registrations = [registration];
+    return Promise.all(registrations.map(reg => new Promise((resolve, reject) => {
+      reg.unregister().then(() => {
+        if (SW.registrations.indexOf(reg) >= 0) {
+          SW.registrations.splice(SW.registrations.indexOf(reg), 1);
+        }
+        app.emit('serviceWorkerUnregisterSuccess', reg);
+        resolve();
+      }).catch(error => {
+        app.emit('serviceWorkerUnregisterError', reg, error);
+        reject(error);
+      });
+    })));
+  }
+};
+export default {
+  name: 'sw',
+  params: {
+    serviceWorker: {
+      path: undefined,
+      scope: undefined
+    }
+  },
+  create() {
+    const app = this;
+    const window = getWindow();
+    extend(app, {
+      serviceWorker: {
+        container: 'serviceWorker' in window.navigator ? window.navigator.serviceWorker : undefined,
+        registrations: SW.registrations,
+        register: SW.register.bind(app),
+        unregister: SW.unregister.bind(app)
+      }
+    });
+  },
+  on: {
+    init() {
+      const window = getWindow();
+      if (!('serviceWorker' in window.navigator)) return;
+      const app = this;
+      if (app.device.cordova || window.Capacitor && window.Capacitor.isNative) return;
+      if (!app.serviceWorker.container) return;
+      const paths = app.params.serviceWorker.path;
+      const scope = app.params.serviceWorker.scope;
+      if (!paths || Array.isArray(paths) && !paths.length) return;
+      const toRegister = Array.isArray(paths) ? paths : [paths];
+      toRegister.forEach(path => {
+        app.serviceWorker.register(path, scope);
+      });
+    }
+  }
+};

package/modules/store/create-store.js

@@ -0,0 +1,138 @@
+/* eslint-disable no-underscore-dangle */
+import { extend } from '../../shared/utils.js';
+function createStore(storeParams) {
+  if (storeParams === void 0) {
+    storeParams = {};
+  }
+  const store = {
+    __store: true
+  };
+  const originalState = {
+    ...(storeParams.state || {})
+  };
+  const actions = {
+    ...(storeParams.actions || {})
+  };
+  const getters = {
+    ...(storeParams.getters || {})
+  };
+  const state = extend({}, originalState);
+  let propsQueue = [];
+  const gettersDependencies = {};
+  const gettersCallbacks = {};
+  Object.keys(getters).forEach(getterKey => {
+    gettersDependencies[getterKey] = [];
+    gettersCallbacks[getterKey] = [];
+  });
+  const getGetterValue = getterKey => {
+    return getters[getterKey]({
+      state: store.state
+    });
+  };
+  const addGetterDependencies = (getterKey, deps) => {
+    if (!gettersDependencies[getterKey]) gettersDependencies[getterKey] = [];
+    deps.forEach(dep => {
+      if (gettersDependencies[getterKey].indexOf(dep) < 0) {
+        gettersDependencies[getterKey].push(dep);
+      }
+    });
+  };
+  const addGetterCallback = (getterKey, callback) => {
+    if (!gettersCallbacks[getterKey]) gettersCallbacks[getterKey] = [];
+    gettersCallbacks[getterKey].push(callback);
+  };
+  const runGetterCallbacks = stateKey => {
+    const keys = Object.keys(gettersDependencies).filter(getterKey => {
+      return gettersDependencies[getterKey].indexOf(stateKey) >= 0;
+    });
+    keys.forEach(getterKey => {
+      if (!gettersCallbacks[getterKey] || !gettersCallbacks[getterKey].length) return;
+      gettersCallbacks[getterKey].forEach(callback => {
+        callback(getGetterValue(getterKey));
+      });
+    });
+  };
+  const removeGetterCallback = callback => {
+    Object.keys(gettersCallbacks).forEach(stateKey => {
+      const callbacks = gettersCallbacks[stateKey];
+      if (callbacks.indexOf(callback) >= 0) {
+        callbacks.splice(callbacks.indexOf(callback), 1);
+      }
+    });
+  };
+
+  // eslint-disable-next-line
+  store.__removeCallback = callback => {
+    removeGetterCallback(callback);
+  };
+  const getterValue = function (getterKey, addCallback) {
+    if (addCallback === void 0) {
+      addCallback = true;
+    }
+    if (getterKey === 'constructor') return undefined;
+    propsQueue = [];
+    const value = getGetterValue(getterKey);
+    addGetterDependencies(getterKey, propsQueue);
+    const onUpdated = callback => {
+      addGetterCallback(getterKey, callback);
+    };
+    const obj = {
+      value,
+      onUpdated
+    };
+    if (!addCallback) {
+      return obj;
+    }
+    const callback = v => {
+      obj.value = v;
+    };
+    obj.__callback = callback;
+    addGetterCallback(getterKey, callback);
+    // eslint-disable-next-line
+    return obj;
+  };
+  store.state = new Proxy(state, {
+    set: (target, prop, value) => {
+      target[prop] = value;
+      runGetterCallbacks(prop);
+      return true;
+    },
+    get: (target, prop) => {
+      propsQueue.push(prop);
+      return target[prop];
+    }
+  });
+  store.getters = new Proxy(getters, {
+    set: () => false,
+    get: (target, prop) => {
+      if (!target[prop]) {
+        return undefined;
+      }
+      return getterValue(prop, true);
+    }
+  });
+  store._gettersPlain = new Proxy(getters, {
+    set: () => false,
+    get: (target, prop) => {
+      if (!target[prop]) {
+        return undefined;
+      }
+      return getterValue(prop, false);
+    }
+  });
+  store.dispatch = (actionName, data) => {
+    return new Promise((resolve, reject) => {
+      if (!actions[actionName]) {
+        reject();
+        throw new Error(`Framework7: Store action "${actionName}" is not found`);
+      }
+      const result = actions[actionName]({
+        state: store.state,
+        dispatch: store.dispatch
+      }, data);
+      resolve(result);
+    });
+  };
+  return store;
+}
+export default createStore;

package/modules/store/store.d.ts

@@ -0,0 +1,40 @@
+import { Framework7Plugin } from '../../components/app/app-class.js';
+
+interface StoreGetterValue {
+  value: any;
+  onUpdated: (value: any) => any;
+  __callback: any;
+}
+export interface StoreObject {
+  state: any;
+  getters: any;
+  dispatch: (name: string, data: any) => Promise<any>;
+  __removeCallback: (callback: any) => void;
+}
+export interface StoreParameters {
+  state: object;
+  actions?: object;
+  getters?: object;
+}
+
+/** Create new store */
+interface createStore {
+  (storeParameters: StoreParameters): StoreObject;
+}
+
+export const createStore: createStore;
+
+export namespace Store {
+  interface AppMethods {
+    /** Create new store */
+    createStore: (storeParameters: StoreParameters) => StoreObject;
+  }
+  interface AppParams {
+    /** Store */
+    store?: StoreParameters | StoreObject;
+  }
+  interface AppEvents {}
+}
+declare const StoreModule: Framework7Plugin;
+
+export default StoreModule;

package/modules/store/store.js

@@ -0,0 +1,11 @@
+import createStore from './create-store.js';
+export { createStore };
+export default {
+  name: 'store',
+  static: {
+    createStore
+  },
+  proto: {
+    createStore
+  }
+};

package/modules/support/support.d.ts

@@ -0,0 +1,15 @@
+import { Support } from '../../shared/get-support.js';
+import Framework7, { Framework7Plugin } from '../../components/app/app-class.js';
+
+export namespace Support {
+  interface AppMethods {
+    /** Object with properties about supported features */
+    support: Support;
+  }
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const SupportModule: Framework7Plugin;
+
+export default SupportModule;

package/modules/support/support.js

@@ -0,0 +1,7 @@
+import { getSupport } from '../../shared/get-support.js';
+export default {
+  name: 'support',
+  static: {
+    getSupport
+  }
+};

package/modules/touch/touch.d.ts

@@ -0,0 +1,60 @@
+import Framework7, { Framework7Plugin } from '../../components/app/app-class.js';
+
+export namespace Touch {
+  interface AppMethods {
+    touchEvents: {
+      start: string;
+      move: string;
+      end: string;
+    };
+  }
+  interface AppParams {
+    /** Object with touch-module related parameters */
+    touch?:
+      | {
+          /** Distance threshold (in px) to prevent short swipes. So if tap/move distance is larger than this value then "click" will not be triggered. (default 5) */
+          touchClicksDistanceThreshold?: number;
+          /** . (default true) */
+          disableContextMenu?: boolean;
+          /** Enables tap hold. (default false) */
+          tapHold?: boolean;
+          /** Determines how long (in ms) the user must hold their tap before the taphold event is fired on the target element. (default 750) */
+          tapHoldDelay?: number;
+          /** When enabled (by default), then click event will not be fired after tap hold event. (default true) */
+          tapHoldPreventClicks?: boolean;
+          /** When enabled, app will add "active-state" class to currently touched (:active) element.. (default true) */
+          activeState?: boolean;
+          /** CSS selector of elements where enabled activeState will add appropriate active class. (default a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .link, .item-link) */
+          activeStateElements?: string;
+          /** Enables MD-theme specific touch ripple effect. (default true) */
+          mdTouchRipple?: boolean;
+          /** Enables iOS-theme specific touch ripple effect. (default false) */
+          iosTouchRipple?: boolean;
+          /** CSS selector of elements to apply touch ripple effect on click. (default .ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus) */
+          touchRippleElements?: string;
+          /** CSS selector of elements to with inset touch ripple effect. (default .ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.back) */
+          touchRippleInsetElements?: string;
+        }
+      | undefined;
+  }
+  interface AppEvents {
+    /** Event will be fired on app click */
+    click: (event: Event) => void;
+    /** Event will be fired on touch start (mousedown) event added as active listener (possible to prevent default) */
+    'touchstart:active': (event: Event) => void;
+    /** Event will be fired on touch move (mousemove) event added as active listener (possible to prevent default) */
+    'touchmove:active': (event: Event) => void;
+    /** Event will be fired on touch end (mouseup) event added as active listener (possible to prevent default) */
+    'touchend:active': (event: Event) => void;
+    /** Event will be fired on touch start (mousedown) event added as passive listener (impossible to prevent default) */
+    'touchstart:passive': (event: Event) => void;
+    /** Event will be fired on touch move (mousemove) event added as passive listener (impossible to prevent default) */
+    'touchmove:passive': (event: Event) => void;
+    /** Event will be fired on touch end (mouseup) event added as passive listener (impossible to prevent default) */
+    'touchend:passive': (event: Event) => void;
+  }
+}
+
+declare const TouchModule: Framework7Plugin;
+
+export default TouchModule;