addon/components/ui-popup.js

import { computed } from '@ember/object';
import { copy } from '@ember/object/internals';
import Component from '@ember/component';
import $ from 'jquery';
import layout from '../templates/components/ui-popup';

/**

ui-popup component

@module components
@namespace components
@class UiPopup
@constructor
*/
export default Component.extend({
  layout,
  classNameBindings: ['_class'],
  class: 'ui button',
  _class: computed('class', {
    get(){
      if(this.attrs.class){
        return '';
      }else {
        return this.get('class');
      }
    }
  }),
  /**
   * If a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
   *
   * @property {String} target
   * @default  ""
   */
  target: '',
  /**
  the pop content
  @property {String} content
  */
  content: '',
  /**
  the pop html content
  @property {String} html
  */
  html: '',
  /**
  the pop title
  @property {String} title
  */
  title: '',
  variation: '',
  /**
   * Event used to trigger popup: focus, click, hover, or manual, by default hover
   *
   * @property {String} event
   * @default  "hover"
   */
  event: 'hover',
  position: 'top left',
  inline: false,
  transition: 'slide down',
  /**
   * Whether popup should not close on hover (useful for popup navigation menus), by default false
   *
   * @property {Boolean} hoverable
   * @default  false
   */
  hoverable: false,
  /**
   * When using on: 'click' specifies whether clicking the page should close the popup, by default true
   *
   * @property {Boolean} closable
   * @default  true
   */
  closable: true,
  /**
   * Duration of animation events, by default 200
   *
   * @property {Number} duration
   * @default  200
   */
  duration: 200,
  delayShow: 50,
  delayHide: 30, 
  preserve: false,
  lastResort: false,
  didUpdateAttrs(){
      if(this.popup || this.title || this.content || this.html){
        this.bindPopEvent();
      }
  },
  init(){
      this._super(...arguments);
      if(this.popup || this.title || this.content || this.html){
        this.bindPopEvent();
      }
  },
  didInsertElement(){
      if(this.title || this.content || this.html){
          this.bindPopEvent();
      }
  },
  bindPopEvent(){
      let self = this;
      let hoverable = copy(this.hoverable);
      let closable = copy(this.closable);
      let preserve = copy(this.preserve);
      let inline = copy(this.inline);

      if(!this.$()) {return;}
      this.$().popup({
          popup: self.popup && $('#'+self.popup) || false,
          on: self.event,
          inline: inline,
          hoverable: hoverable,
          closable: closable,
          target: self.target || false,
          title: self.title,
          variation: self.variation,
          html: self.html,
          content: self.content,
          duration: self.duration,
          position: self.position,
          lastResort: self.lastResort,
          delay: {
            show: self.delayShow,
            hide: self.delayHide
          },
          preserve: preserve,
          onCreate: function(){
              if(typeof self.attrs.onCreate === 'function'){
                  self.attrs.onCreate(self);
              }
          },
          onRemove: function(){
              if(typeof self.attrs.onRemove === 'function'){
                  self.attrs.onRemove(self);
              }
          },
          onShow: function(){
              if(typeof self.attrs.onShow === 'function'){
                  self.attrs.onShow(self);
              }
          },
          onVisible: function(){
              if(typeof self.attrs.onVisible === 'function'){
                  self.attrs.onVisible(self);
              }
          },
          onHide: function(){
              if(typeof self.attrs.onHide === 'function'){
                  self.attrs.onHide(self);
              }
          }
      });
  },
  hide(){
    this.$().popup('hide');
  },
  show(){
    this.$().popup('show');
  }
});