addon/components/ui-popup.js

  1. import { computed } from '@ember/object';
  2. import { copy } from '@ember/object/internals';
  3. import Component from '@ember/component';
  4. import $ from 'jquery';
  5. import layout from '../templates/components/ui-popup';
  6.  
  7. /**
  8.  
  9. ui-popup component
  10.  
  11. @module components
  12. @namespace components
  13. @class UiPopup
  14. @constructor
  15. */
  16. export default Component.extend({
  17.   layout,
  18.   classNameBindings: ['_class'],
  19.   class: 'ui button',
  20.   _class: computed('class', {
  21.     get(){
  22.       if(this.attrs.class){
  23.         return '';
  24.       }else {
  25.         return this.get('class');
  26.       }
  27.     }
  28.   }),
  29.   /**
  30.    * If a selector or jQuery object is specified this allows the popup to be positioned relative to that element.
  31.    *
  32.    * @property {String} target
  33.    * @default  ""
  34.    */
  35.   target: '',
  36.   /**
  37.   the pop content
  38.   @property {String} content
  39.   */
  40.   content: '',
  41.   /**
  42.   the pop html content
  43.   @property {String} html
  44.   */
  45.   html: '',
  46.   /**
  47.   the pop title
  48.   @property {String} title
  49.   */
  50.   title: '',
  51.   variation: '',
  52.   /**
  53.    * Event used to trigger popup: focus, click, hover, or manual, by default hover
  54.    *
  55.    * @property {String} event
  56.    * @default  "hover"
  57.    */
  58.   event: 'hover',
  59.   position: 'top left',
  60.   inline: false,
  61.   transition: 'slide down',
  62.   /**
  63.    * Whether popup should not close on hover (useful for popup navigation menus), by default false
  64.    *
  65.    * @property {Boolean} hoverable
  66.    * @default  false
  67.    */
  68.   hoverable: false,
  69.   /**
  70.    * When using on: 'click' specifies whether clicking the page should close the popup, by default true
  71.    *
  72.    * @property {Boolean} closable
  73.    * @default  true
  74.    */
  75.   closable: true,
  76.   /**
  77.    * Duration of animation events, by default 200
  78.    *
  79.    * @property {Number} duration
  80.    * @default  200
  81.    */
  82.   duration: 200,
  83.   delayShow: 50,
  84.   delayHide: 30, 
  85.   preserve: false,
  86.   lastResort: false,
  87.   didUpdateAttrs(){
  88.       if(this.popup || this.title || this.content || this.html){
  89.         this.bindPopEvent();
  90.       }
  91.   },
  92.   init(){
  93.       this._super(...arguments);
  94.       if(this.popup || this.title || this.content || this.html){
  95.         this.bindPopEvent();
  96.       }
  97.   },
  98.   didInsertElement(){
  99.       if(this.title || this.content || this.html){
  100.           this.bindPopEvent();
  101.       }
  102.   },
  103.   bindPopEvent(){
  104.       let self = this;
  105.       let hoverable = copy(this.hoverable);
  106.       let closable = copy(this.closable);
  107.       let preserve = copy(this.preserve);
  108.       let inline = copy(this.inline);
  109.  
  110.       if(!this.$()) {return;}
  111.       this.$().popup({
  112.           popup: self.popup && $('#'+self.popup) || false,
  113.           on: self.event,
  114.           inline: inline,
  115.           hoverable: hoverable,
  116.           closable: closable,
  117.           target: self.target || false,
  118.           title: self.title,
  119.           variation: self.variation,
  120.           html: self.html,
  121.           content: self.content,
  122.           duration: self.duration,
  123.           position: self.position,
  124.           lastResort: self.lastResort,
  125.           delay: {
  126.             show: self.delayShow,
  127.             hide: self.delayHide
  128.           },
  129.           preserve: preserve,
  130.           onCreate: function(){
  131.               if(typeof self.attrs.onCreate === 'function'){
  132.                   self.attrs.onCreate(self);
  133.               }
  134.           },
  135.           onRemove: function(){
  136.               if(typeof self.attrs.onRemove === 'function'){
  137.                   self.attrs.onRemove(self);
  138.               }
  139.           },
  140.           onShow: function(){
  141.               if(typeof self.attrs.onShow === 'function'){
  142.                   self.attrs.onShow(self);
  143.               }
  144.           },
  145.           onVisible: function(){
  146.               if(typeof self.attrs.onVisible === 'function'){
  147.                   self.attrs.onVisible(self);
  148.               }
  149.           },
  150.           onHide: function(){
  151.               if(typeof self.attrs.onHide === 'function'){
  152.                   self.attrs.onHide(self);
  153.               }
  154.           }
  155.       });
  156.   },
  157.   hide(){
  158.     this.$().popup('hide');
  159.   },
  160.   show(){
  161.     this.$().popup('show');
  162.   }
  163. });
  164.