framework7/components/panel/panel.js

Full featured mobile HTML framework for building iOS & Android apps

import $ from 'dom7';
import Utils from '../../utils/utils';
import Panel from './panel-class';

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
      swipeOnlyClose: false,
      swipeActiveArea: 0,
      swipeThreshold: 0,
      closeByBackdropClick: true,
    },
  },
  static: {
    Panel,
  },
  instance: {
    panel: {
      allowOpen: true,
    },
  },
  create() {
    const app = this;
    Utils.extend(app.panel, {
      create(params) {
        return new Panel(app, params);
      },
      get(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 = '.panel') {
        const panel = app.panel.get(el);
        if (panel && panel.destroy) return panel.destroy();
        return undefined;
      },
      open(el = '.panel', animate) {
        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 = '.panel-in', animate) {
        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 = '.panel', animate) {
        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((index, panelEl) => {
        const params = Object.assign(
          { el: panelEl },
          $(panelEl).dataset() || {}
        );
        app.panel.create(params);
      });
    },
    pageInit(page) {
      const app = this;
      page.$el.find('.panel-init').each((index, panelEl) => {
        const params = Object.assign(
          { el: panelEl },
          $(panelEl).dataset() || {}
        );
        app.panel.create(params);
      });
    },
    pageBeforeRemove(page) {
      const app = this;
      page.$el.find('.panel-init').each((index, panelEl) => {
        const panel = app.panel.get(panelEl);
        if (panel && panel.destroy) panel.destroy();
      });
    },
  },
  clicks: {
    '.panel-open': function open(clickedEl, data = {}) {
      const app = this;
      app.panel.open(data.panel, data.animate);
    },
    '.panel-close': function close(clickedEl, data = {}) {
      const app = this;
      app.panel.close(data.panel, data.animate);
    },
    '.panel-toggle': function close(clickedEl, 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 (app.params.panel.closeByBackdropClick) app.panel.close();
    },
  },
};