@xenknight/framework7 0.0.2

package/components/panel/panel.d.ts

@@ -0,0 +1,198 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Panel {
+  interface Events {
+    /** Event will be triggered when Panel starts its opening animation. As an argument event handler receives panel instance */
+    open: (panel: Panel) => void;
+    /** Event will be triggered when Panel completes its opening animation. As an argument event handler receives panel instance */
+    opened: (panel: Panel) => void;
+    /** Event will be triggered when Panel starts its closing animation. As an argument event handler receives panel instance */
+    close: (panel: Panel) => void;
+    /** Event will be triggered after Notification completes its closing animation. As an argument event handler receives notification instance */
+    closed: (panel: Panel) => void;
+    /** Event will be triggered when the panel backdrop is clicked. As an argument event handler receives panel instance */
+    backdropClick: (panel: Panel) => void;
+    /** Event will be triggered in the very beginning of opening it with swipe. As an argument event handler receives panel instance */
+    swipeOpen: (panel: Panel) => void;
+    /** Event will be triggered for swipe panel during touch swipe action. As an argument event handler receives panel instance and opened progress (from 0 to 1) */
+    swipe: (panel: Panel, progress: number) => void;
+    /** Event will be triggered when it becomes collapsed/hidden when app width matches its collapsedBreakpoint. As an argument event handler receives panel instance */
+    collapsedBreakpoint: (panel: Panel) => void;
+    /** Event will be triggered when it becomes visible/hidden when app width matches its breakpoint. As an argument event handler receives panel instance */
+    breakpoint: (panel: Panel) => void;
+    /** Event will be triggered right when resizable Panel resized */
+    resize: (panel: Panel, panelWidth: number) => void;
+    /** Event will be triggered right before Panel instance will be destroyed */
+    beforeDestroy: (panel: Panel) => void;
+  }
+  interface Parameters {
+    /** Panel element. */
+    el?: HTMLElement | CSSSelector;
+    /** Panel element HTML string. */
+    content?: string;
+    /** Can be left or right. If not passed then will be determined based on panel-left or panel-right element classes. */
+    side?: string;
+    /** Can be "cover", "reveal", "floating" or "push". If not passed then will be determined based on panel-cover, panel-reveal, panel-floating or panel-push element classes. */
+    effect?: string;
+    /** Enables resizable panel */
+    resizable?: string;
+    /** Enables Panel backdrop (dark semi transparent layer behind). (default true) */
+    backdrop?: boolean;
+    /** Option to pass custom backdrop element */
+    backdropEl?: HTMLElement | CSSSelector;
+    /** Minimal app width (in px) when panel becomes always visible. */
+    visibleBreakpoint?: number;
+    /** Minimal app width (in px) when panel becomes visible but collapsed. */
+    collapsedBreakpoint?: number;
+    /** Enables ability to open/close panel with swipe (default false) */
+    swipe?: boolean;
+    /** Fallback option for potentially better performance on old/slow devices. If you enable it, then swipe panel will not follow your finger during touch move, it will be automatically opened/closed on swipe left/right. (default false) */
+    swipeNoFollow?: boolean;
+    /** This parameter allows to close (but not open) panel with swipes. (default false) */
+    swipeOnlyClose?: boolean;
+    /** Width (in px) of invisible edge from the screen that triggers swipe panel. (default 0) */
+    swipeActiveArea?: number;
+    /** Panel will not move with swipe if "touch distance" will be less than this value (in px).. (default 0) */
+    swipeThreshold?: number;
+    /** Enable/disable ability to close panel by clicking outside of panel (on panel's backdrop). (default true) */
+    closeByBackdropClick?: boolean;
+    /** Element to mount panel to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
+  }
+
+  interface Panel extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** String with panel side: left or right */
+    side: 'left' | 'right';
+    /** String with panel effect: cover, reveal or push */
+    effect: 'cover' | 'reveal' | 'push' | 'floating';
+    /** Boolean property indicating whether it is opened or not */
+    opened: boolean;
+    /** Panel HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with panel HTML element */
+    $el: Dom7Array;
+    /** Backdrop HTML element */
+    backdropEl: HTMLElement;
+    /** Dom7 instance with backdrop HTML element */
+    $backdropEl: Dom7Array;
+    /** Popup parameters */
+    params: Parameters;
+    /** Element to mount panel to. (default app.el) */
+    containerEl: HTMLElement | CSSSelector;
+    /** Dom7 instance with element to mount panel to. (default app.el) */
+    $containerEl: Dom7Array;
+
+    /** Open panel. */
+    open(animate: boolean): void;
+    /** Close panel. */
+    close(animate: boolean): void;
+    /** Toggle panel */
+    toggle(animate: boolean): void;
+    /** Destroy panel instance */
+    destroy(): void;
+
+    /** Enable visible breakpoint */
+    enableVisibleBreakpoint(): void;
+    /** Disable visible breakpoint */
+    disableVisibleBreakpoint(): void;
+    /** Toggle visible breakpoint */
+    toggleVisibleBreakpoint(): void;
+
+    /** Enable collapsed breakpoint */
+    enableCollapsedBreakpoint(): void;
+    /** Disable collapsed breakpoint */
+    disableCollapsedBreakpoint(): void;
+    /** Toggle collapsed breakpoint */
+    toggleCollapsedBreakpoint(): void;
+
+    /** Enable resizable panel */
+    enableResizable(): void;
+    /** Disable resizable panel */
+    disableResizable(): void;
+
+    /** Enable swipeable panel */
+    enableSwipe(): void;
+    /** Disable swipeable panel */
+    disableSwipe(): void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered when Panel starts its opening animation */
+    'panel:open': () => void;
+    /** Event will be triggered after Panel completes its opening animation */
+    'panel:opened': () => void;
+    /** Event will be triggered when Panel starts its closing animation */
+    'panel:close': () => void;
+    /** Event will be triggered after Panel completes its closing animation */
+    'panel:closed': () => void;
+    /** Event will be triggered when the panel overlay is clicked */
+    'panel:backdrop-click	': () => void;
+    /** Event will be triggered in the very beginning of opening it with swipe */
+    'panel:swipeopen': () => void;
+    /** Event will be triggered for swipe panel during touch swipe action */
+    'panel:swipe': () => void;
+    /** Event will be triggered when it becomes visible/hidden when app width matches its breakpoint */
+    'panel:breakpoint': () => void;
+    /** Event will be triggered when it becomes collapsed/hidden when app width matches its collapsedBreakpoint */
+    'panel:collapsedbreakpoint': () => void;
+    /** Event will be triggered right when resizable Panel resized */
+    'panel:resize': () => void;
+    /** Event will be triggered right before Panel instance will be destroyed */
+    'panel:beforedestroy': () => void;
+  }
+
+  interface AppMethods {
+    panel: {
+      /** create new panel instance */
+      create(parameters: Parameters): Panel;
+      /** open panel */
+      open(el?: HTMLElement | CSSSelector | Panel | 'left' | 'right', animate?: boolean): boolean;
+      /** close panel */
+      close(el?: HTMLElement | CSSSelector | Panel | 'left' | 'right', animate?: boolean): boolean;
+      /** toggle panel */
+      toggle(el?: HTMLElement | CSSSelector | Panel | 'left' | 'right', animate?: boolean): boolean;
+      /** get Panel instance by specified side */
+      get(el?: HTMLElement | CSSSelector | Panel | 'left' | 'right', animate?: boolean): Panel;
+      /** destroy Panel instance */
+      destroy(el: HTMLElement | CSSSelector | Panel | 'left' | 'right'): void;
+    };
+  }
+  interface AppParams {
+    panel?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when Panel starts its opening animation. As an argument event handler receives panel instance */
+    panelOpen: (panel: Panel) => void;
+    /** Event will be triggered when Panel completes its opening animation. As an argument event handler receives panel instance */
+    panelOpened: (panel: Panel) => void;
+    /** Event will be triggered when Panel starts its closing animation. As an argument event handler receives panel instance */
+    panelClose: (panel: Panel) => void;
+    /** Event will be triggered after Notification completes its closing animation. As an argument event handler receives notification instance */
+    panelClosed: (panel: Panel) => void;
+    /** Event will be triggered when the panel backdrop is clicked. As an argument event handler receives panel instance */
+    panelBackdropClick: (panel: Panel) => void;
+    /** Event will be triggered in the very beginning of opening it with swipe. As an argument event handler receives panel instance */
+    panelSwipeOpen: (panel: Panel) => void;
+    /** Event will be triggered for swipe panel during touch swipe action. As an argument event handler receives panel instance and opened progress (from 0 to 1) */
+    panelSwipe: (panel: Panel, progress: number) => void;
+    /** Event will be triggered when it becomes collapsed/hidden when app width matches its collapsedBreakpoint. As an argument event handler receives panel instance */
+    panelCollapsedBreakpoint: (panel: Panel) => void;
+    /** Event will be triggered when it becomes visible/hidden when app width matches its breakpoint. As an argument event handler receives panel instance */
+    panelBreakpoint: (panel: Panel) => void;
+    /** Event will be triggered right when resizable Panel resized */
+    panelResize: (panel: Panel, panelWidth: number) => void;
+    /** Event will be triggered right before Panel instance will be destroyed */
+    panelBeforeDestroy: (panel: Panel) => void;
+  }
+}
+
+declare const PanelComponent: Framework7Plugin;
+
+export default PanelComponent;

package/components/panel/panel.js

@@ -0,0 +1,189 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Panel from './panel-class.js';
+export default {
+  name: 'panel',
+  params: {
+    panel: {
+      opened: undefined,
+      // default based on panel-in class
+      side: undefined,
+      // default based on panel class
+      effect: undefined,
+      // default based on panel class
+      resizable: undefined,
+      // default based on panel-resizable class
+      backdrop: true,
+      backdropEl: undefined,
+      visibleBreakpoint: undefined,
+      collapsedBreakpoint: undefined,
+      swipe: false,
+      // or true
+      swipeNoFollow: false,
+      // or true
+      swipeOnlyClose: false,
+      swipeActiveArea: 0,
+      swipeThreshold: 0,
+      closeByBackdropClick: true,
+      containerEl: undefined
+    }
+  },
+  static: {
+    Panel
+  },
+  create() {
+    const app = this;
+    extend(app, {
+      panel: {
+        allowOpen: true,
+        create(params) {
+          return new Panel(app, params);
+        },
+        get(el) {
+          if (el === void 0) {
+            el = '.panel';
+          }
+          if (el instanceof Panel) return el;
+          if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
+          const $el = $(el);
+          if ($el.length === 0 || $el.length > 1) return undefined;
+          return $el[0].f7Panel;
+        },
+        destroy(el) {
+          if (el === void 0) {
+            el = '.panel';
+          }
+          const panel = app.panel.get(el);
+          if (panel && panel.destroy) return panel.destroy();
+          return undefined;
+        },
+        open(el, animate) {
+          if (el === void 0) {
+            el = '.panel';
+          }
+          if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
+          let panel = app.panel.get(el);
+          if (panel && panel.open) return panel.open(animate);
+          if (!panel) {
+            panel = app.panel.create({
+              el
+            });
+            return panel.open(animate);
+          }
+          return undefined;
+        },
+        close(el, animate) {
+          if (el === void 0) {
+            el = '.panel-in';
+          }
+          if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
+          let panel = app.panel.get(el);
+          if (panel && panel.open) return panel.close(animate);
+          if (!panel) {
+            panel = app.panel.create({
+              el
+            });
+            return panel.close(animate);
+          }
+          return undefined;
+        },
+        toggle(el, animate) {
+          if (el === void 0) {
+            el = '.panel';
+          }
+          if (el === 'left' || el === 'right') el = `.panel-${el}`; // eslint-disable-line
+          let panel = app.panel.get(el);
+          if (panel && panel.toggle) return panel.toggle(animate);
+          if (!panel) {
+            panel = app.panel.create({
+              el
+            });
+            return panel.toggle(animate);
+          }
+          return undefined;
+        }
+      }
+    });
+  },
+  on: {
+    init() {
+      const app = this;
+      $('.panel-init').each(panelEl => {
+        const params = Object.assign({
+          el: panelEl
+        }, $(panelEl).dataset() || {});
+        app.panel.create(params);
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.panel-init').each(panelEl => {
+        const params = Object.assign({
+          el: panelEl
+        }, $(panelEl).dataset() || {});
+        app.panel.create(params);
+      });
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.panel-init').each(panelEl => {
+        const panel = app.panel.get(panelEl);
+        if (panel && panel.destroy) panel.destroy();
+      });
+    }
+  },
+  vnode: {
+    'panel-init': {
+      insert(vnode) {
+        const app = this;
+        const panelEl = vnode.elm;
+        const params = Object.assign({
+          el: panelEl
+        }, $(panelEl).dataset() || {});
+        app.panel.create(params);
+      },
+      destroy(vnode) {
+        const app = this;
+        const panelEl = vnode.elm;
+        const panel = app.panel.get(panelEl);
+        if (panel && panel.destroy) panel.destroy();
+      }
+    }
+  },
+  clicks: {
+    '.panel-open': function open(clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.panel.open(data.panel, data.animate);
+    },
+    '.panel-close': function close(clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.panel.close(data.panel, data.animate);
+    },
+    '.panel-toggle': function close(clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.panel.toggle(data.panel, data.animate);
+    },
+    '.panel-backdrop': function close() {
+      const app = this;
+      const $panelEl = $('.panel-in:not(.panel-out)');
+      if (!$panelEl.length) return;
+      const instance = $panelEl[0] && $panelEl[0].f7Panel;
+      $panelEl.trigger('panel:backdrop-click');
+      if (instance) {
+        instance.emit('backdropClick', instance);
+      }
+      app.emit('panelBackdropClick', instance || $panelEl[0]);
+      if (instance && instance.params.closeByBackdropClick === false) return;
+      if (app.params.panel.closeByBackdropClick) app.panel.close();
+    }
+  }
+};