drapcode-builder/src/popover_dialog/index.js

Drapcode Builder Library

import defaults from './config/config';
import Popover from './popover/Popover';
import PopoverView from './view/PopoverView';

export default () => {
  var c = {};
  var model, popover;

  const triggerEvent = (enable, em) => {
    em && em.trigger(`popover:${enable ? 'open' : 'close'}`);
  };

  return {
    name: 'Popover',

    getConfig() {
      return c;
    },

    init(config = {}) {
      c = {
        ...defaults,
        ...config
      };

      const em = c.em;
      this.em = em;
      var ppfx = c.pStylePrefix;
      if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;

      model = new Popover(c);
      model.on('change:open', (m, enb) => triggerEvent(enb, em));
      popover = new PopoverView({
        model,
        config: c
      });

      return this;
    },

    postRender(view) {
      const el = view.model.getConfig().el || view.el;
      this.render().appendTo(el);
    },

    open(opts = {}) {
      opts.title && this.setTitle(opts.title);
      opts.content && this.setContent(opts.content);
      opts.top && this.setTop(opts.top);
      opts.bottom && this.setBottom(opts.bottom);
      opts.left && this.setLeft(opts.left);
      opts.right && this.setRight(opts.right);
      popover.show();
      return this;
    },

    close() {
      popover.hide();
      return this;
    },

    onceClose(clb) {
      this.em.once('popover:close', clb);
      return this;
    },

    onceOpen(clb) {
      this.em.once('popover:open', clb);
      return this;
    },

    isOpen() {
      return !!model.get('open');
    },

    setTitle(title) {
      model.set('title', title);
      return this;
    },

    getTitle() {
      return model.get('title');
    },

    setContent(content) {
      model.set('content', ' ');
      model.set('content', content);
      return this;
    },

    getContent() {
      return model.get('content');
    },

    getContentEl() {
      return popover.getContent().get(0);
    },

    setTop(top) {
      model.set('top', top);
      return this;
    },

    getTop() {
      return model.get('top');
    },

    setBottom(bottom) {
      model.set('bottom', bottom);
      return this;
    },

    getBottom() {
      return model.get('bottom');
    },

    setLeft(left) {
      model.set('left', left);
      return this;
    },

    getLeft() {
      return model.get('left');
    },

    setRight(right) {
      model.set('right', right);
      return this;
    },

    getRight() {
      return model.get('right');
    },

    getModel() {
      return model;
    },

    render() {
      return popover.render().$el;
    }
  };
};