@finqu/cool 1.0.0

package/js/dist/popover.js

@@ -0,0 +1,587 @@
+/*!
+  * Cool UI popover.js v1.0.0 (https://finqu.fi)
+  * Copyright 2011-2019 Finqu Oy
+  * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
+  */
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) :
+	typeof define === 'function' && define.amd ? define(['jquery'], factory) :
+	(global = global || self, global.Popover = factory());
+}(this, function () { 'use strict';
+
+	const debounce = function (func, wait, immediate) {
+	  let timeout;
+	  return function () {
+	    let context = this;
+	    let args = arguments;
+
+	    let later = function () {
+	      timeout = null;
+
+	      if (!immediate) {
+	        func.apply(context, args);
+	      }
+	    };
+
+	    let callNow = immediate && !timeout;
+	    clearTimeout(timeout);
+	    timeout = setTimeout(later, wait);
+
+	    if (callNow) {
+	      func.apply(context, args);
+	    }
+	  };
+	};
+
+	class AbstractUIComponent {
+	  // Init callback
+	  onInit() {
+	    let onInit = this.opts.onInit;
+
+	    if (typeof onInit === 'function') {
+	      onInit.call(this.el);
+	    }
+	  } // Update callback
+
+
+	  onUpdate() {
+	    let onUpdate = this.opts.onUpdate;
+
+	    if (typeof onUpdate === 'function') {
+	      onUpdate.call(this.el);
+	    }
+	  } // Destroy callback
+
+
+	  onDestroy() {
+	    let onDestroy = this.opts.onDestroy;
+
+	    if (typeof onDestroy === 'function') {
+	      onDestroy.call(this.el);
+	    }
+	  } // Show callback
+
+
+	  onShow() {
+	    let onShow = this.opts.onShow;
+
+	    if (typeof onShow === 'function') {
+	      onShow.call(this.el);
+	    }
+	  } // Close callback
+
+
+	  onClose() {
+	    let onClose = this.opts.onClose;
+
+	    if (typeof onClose === 'function') {
+	      onClose.call(this.el);
+	    }
+	  } // Debug log
+
+
+	  log(...args) {
+	    if (this.debug) {
+	      if (typeof this.debug === 'function') {
+	        this.debug(...args);
+	      } else {
+	        console.log(...args);
+	      }
+	    }
+	  }
+
+	}
+
+	const NAME = 'coolPopover';
+	const DATA_KEY = 'plugin_coolPopover';
+
+	class Popover extends AbstractUIComponent {
+	  constructor(el, opts) {
+	    super();
+	    this.opts = {};
+
+	    if (window.Cool.settings.popover) {
+	      $.extend(true, this.opts, $.fn[NAME].defaults, window.Cool.settings.popover, opts);
+	    } else {
+	      $.extend(true, this.opts, $.fn[NAME].defaults, opts);
+	    }
+
+	    this.el = el;
+	    this.debug = this.opts.debug;
+	    this.init();
+	  } // Init plugin
+
+
+	  init() {
+	    this.buildCache();
+	    this.bindEvents();
+	    this.onInit();
+	  } // Remove plugin instance completely
+
+
+	  destroy() {
+	    this.unbindEvents();
+	    this.$el.removeData(DATA_KEY);
+	    this.onDestroy();
+	  } // Update plugin data
+
+
+	  update() {
+	    this.buildCache();
+	    this.onUpdate();
+	  } // Cache DOM nodes for performance
+
+
+	  buildCache() {
+	    this.$el = $(this.el);
+	    this.$container = this.$el.data('container') ? $(this.$el.data('container')) : $(this.opts.container);
+	    this.id = 'popover-' + this.generateUUID();
+	    this.animation = this.$el.data('animation') ? this.$el.data('animation') : this.opts.animation;
+	    this.animationIn = this.$el.data('animationIn') ? this.$el.data('animationIn') : this.opts.animationIn;
+	    this.animationOut = this.$el.data('animationOut') ? this.$el.data('animationOut') : this.opts.animationOut;
+	    this.animationSpeed = this.$el.data('animationSpeed') ? this.$el.data('animationSpeed') : this.opts.animationSpeed;
+	    this.trigger = this.$el.data('trigger') ? this.$el.data('trigger') : this.opts.trigger;
+	    this.placement = this.$el.data('placement') ? this.$el.data('placement') : this.opts.placement;
+	    this.placementChanged = false;
+	    this.title = this.$el.data('title') ? this.$el.data('title') : this.opts.title;
+	    this.content = this.$el.data('content') ? this.$el.data('content') : this.opts.content;
+	  } // Bind events that trigger methods
+
+
+	  bindEvents() {
+	    if (this.trigger === 'click') {
+	      this.$el.on('click' + '.' + NAME, () => {
+	        if (this.$popover) {
+	          this.close();
+	        } else {
+	          this.show();
+	        }
+	      });
+	    } else if (this.trigger === 'hover') {
+	      this.$el.on('mouseenter' + '.' + NAME, () => {
+	        this.show();
+	      });
+	      this.$el.on('mouseleave' + '.' + NAME, () => {
+	        this.close();
+	      });
+	    } else if (this.trigger === 'focus') {
+	      this.$el.on('focusin' + '.' + NAME, () => {
+	        this.show();
+	      });
+	      this.$el.on('focusout' + '.' + NAME, () => {
+	        this.close();
+	      });
+	    }
+
+	    $(window).on('resize', debounce(() => {
+	      if (this.$popover) {
+	        this.setPosition();
+	        this.onUpdate();
+	      }
+	    }, 250));
+	  } // Unbind events that trigger methods
+
+
+	  unbindEvents() {
+	    this.$el.off('.' + NAME);
+	  } // Generate UUID
+
+
+	  generateUUID() {
+	    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+	      let r = Math.random() * 16 | 0,
+	          v = c == 'x' ? r : r & 0x3 | 0x8;
+	      return v.toString(16);
+	    });
+	  } // Build popover
+
+
+	  buildPopover() {
+	    let content;
+
+	    if (typeof this.content === 'function') {
+	      content = this.content();
+	    } else {
+	      content = this.content;
+	    }
+
+	    this.$popover = $(`
+    		<div class="popover" role="tooltip" id="${this.id}">
+
+			    <div class="arrow"></div>
+
+			    <h3 class="popover-header">${this.title}</h3>
+
+			    <div class="popover-body">${content}</div>
+
+			</div>
+    	`);
+	    this.$container.append(this.$popover);
+	    this.$arrow = this.$popover.find('.arrow') ? this.$popover.find('.arrow') : false;
+	    this.log(this.$el);
+	    this.log(this.$container);
+	    this.log(this.$popover);
+	    this.log(this.$arrow);
+	    this.log('Id: ' + this.id);
+	    this.log('Trigger: ' + this.trigger);
+	    this.log('Placement: ' + this.placement);
+	    this.log('Animation: ' + this.animation);
+	    this.log('Animation in: ' + this.animationIn);
+	    this.log('Animation out: ' + this.animationOut);
+	    this.log('Animation speed: ' + this.animationSpeed);
+	    this.log('Title: ' + this.title);
+	    this.log('Content: ' + this.content);
+	  } // Set positions
+
+
+	  setPosition(placement) {
+	    if (typeof placement === 'undefined' || placement === null) {
+	      placement = this.placement;
+	    }
+
+	    this.$popover.addClass('popover-' + placement);
+	    let containerInnerWidth = this.$container.innerWidth();
+	    let containerInnerHeight = this.$container.innerHeight();
+	    let popoverWidth = this.$popover.outerWidth(true);
+	    let popoverHeight = this.$popover.outerHeight(true);
+	    let popoverTriggerWidth = this.$el.outerWidth();
+	    let popoverTriggerHeight = this.$el.outerHeight();
+	    let popoverTriggerPosX = this.$el.position().left;
+	    let popoverTriggerPosY = this.$el.position().top;
+	    let arrowWidth = this.$arrow.outerWidth(true);
+	    let arrowHeight = this.$arrow.outerHeight(true);
+	    let arrowPos;
+	    let popoverPosX;
+	    let popoverPosY;
+
+	    if (placement === 'top') {
+	      popoverPosX = Math.round(popoverTriggerPosX - (popoverWidth - popoverTriggerWidth) / 2);
+	      popoverPosY = Math.round(popoverTriggerPosY - popoverHeight);
+	      arrowPos = Math.round(popoverWidth / 2 - arrowWidth / 2);
+	      this.$arrow.css({
+	        left: arrowPos + 'px'
+	      });
+	    } else if (placement === 'right') {
+	      popoverPosX = Math.round(popoverTriggerPosX + popoverTriggerWidth);
+	      popoverPosY = Math.round(popoverTriggerPosY - (popoverHeight - popoverTriggerHeight) / 2);
+	      arrowPos = Math.round(popoverHeight / 2 - arrowHeight / 2);
+	      this.$arrow.css({
+	        top: arrowPos + 'px'
+	      });
+	    } else if (placement === 'bottom') {
+	      popoverPosX = Math.round(popoverTriggerPosX - (popoverWidth - popoverTriggerWidth) / 2);
+	      popoverPosY = Math.round(popoverTriggerPosY + popoverTriggerHeight);
+	      arrowPos = Math.round(popoverWidth / 2 - arrowWidth / 2);
+	      this.$arrow.css({
+	        left: arrowPos + 'px'
+	      });
+	    } else if (placement === 'left') {
+	      popoverPosX = Math.round(popoverTriggerPosX - popoverWidth);
+	      popoverPosY = Math.round(popoverTriggerPosY - (popoverHeight - popoverTriggerHeight) / 2);
+	      arrowPos = Math.round(popoverHeight / 2 - arrowHeight / 2);
+	      this.$arrow.css({
+	        top: arrowPos + 'px'
+	      });
+	    }
+
+	    this.$popover.css({
+	      position: 'absolute',
+	      top: '0px',
+	      left: '0px',
+	      transform: 'translate3d(' + popoverPosX + 'px, ' + popoverPosY + 'px, 0px)',
+	      'will-change': 'transform'
+	    }); // Correct placement if popover goes outside of container
+
+	    let popoverOverflowCount = 0;
+	    let popoverPosition = {
+	      left: this.$popover.position().left,
+	      top: this.$popover.position().top,
+	      right: containerInnerWidth - (this.$popover.position().left + popoverWidth),
+	      bottom: containerInnerHeight - (this.$popover.position().top + popoverHeight)
+	    };
+	    let popoverOverflow = {
+	      left: false,
+	      top: false,
+	      right: false,
+	      bottom: false
+	    };
+
+	    if (popoverPosition.right < 0) {
+	      popoverOverflow.right = true;
+	      popoverOverflowCount++;
+	      this.log('Popover overflowing from right');
+	    }
+
+	    if (popoverPosition.left < 0) {
+	      popoverOverflow.left = true;
+	      popoverOverflowCount++;
+	      this.log('Popover overflowing from left');
+	    }
+
+	    if (popoverPosition.bottom < 0) {
+	      popoverOverflow.bottom = true;
+	      popoverOverflowCount++;
+	      this.log('Popover overflowing from bottom');
+	    }
+
+	    if (popoverPosition.top < 0) {
+	      popoverOverflow.top = true;
+	      popoverOverflowCount++;
+	      this.log('Popover overflowing from top');
+	    }
+
+	    if (popoverOverflowCount > 0) {
+	      if (!this.placementChanged && popoverOverflow.left && popoverPosition.right > popoverWidth) {
+	        this.log('Changing popover placement to right');
+	        this.placementChanged = true;
+	        this.$popover.removeClass('popover-' + placement);
+	        this.$arrow.removeAttr('style');
+	        this.setPosition('right');
+	      } else if (!this.placementChanged && popoverOverflow.top && popoverPosition.top > popoverHeight) {
+	        this.log('Changing popover placement to bottom');
+	        this.placementChanged = true;
+	        this.$popover.removeClass('popover-' + placement);
+	        this.$arrow.removeAttr('style');
+	        this.setPosition('bottom');
+	      } else if (!this.placementChanged && popoverOverflow.right && popoverPosition.left > popoverWidth) {
+	        this.log('Changing popover placement to left');
+	        this.placementChanged = true;
+	        this.$popover.removeClass('popover-' + placement);
+	        this.$arrow.removeAttr('style');
+	        this.setPosition('left');
+	      } else if (!this.placementChanged && popoverOverflow.bottom && popoverPosition.top > popoverHeight) {
+	        this.log('Changing popover placement to top');
+	        this.placementChanged = true;
+	        this.$popover.removeClass('popover-' + placement);
+	        this.$arrow.removeAttr('style');
+	        this.setPosition('top');
+	      } else if (!this.placementChanged && (placement !== 'top' || placement !== 'bottom') && (popoverOverflow.left || popoverOverflow.right)) {
+	        if (popoverPosition.top > popoverPosition.bottom) {
+	          this.log('Changing popover placement to top');
+	          this.placementChanged = true;
+	          this.$popover.removeClass('popover-' + placement);
+	          this.$arrow.removeAttr('style');
+	          this.setPosition('top');
+	        } else {
+	          this.log('Changing popover placement to bottom');
+	          this.placementChanged = true;
+	          this.$popover.removeClass('popover-' + placement);
+	          this.$arrow.removeAttr('style');
+	          this.setPosition('bottom');
+	        }
+	      } else {
+	        this.fixPopoverPosition = true;
+	      }
+
+	      if (this.fixPopoverPosition) {
+	        this.log('Adjusting popover size or position in order to popover fit in the container');
+
+	        if (popoverOverflow.left) {
+	          this.log('Popover overflowing from left');
+	          let overflowAmount = Math.abs(popoverPosition.left);
+	          let excludePlacements = ['top', 'bottom'];
+
+	          if (popoverTriggerPosX >= popoverPosX + overflowAmount && excludePlacements.indexOf(placement) < 0) {
+	            this.log('Popover adjusting width');
+	            popoverWidth -= overflowAmount;
+	            popoverPosX += overflowAmount;
+	          } else {
+	            this.log('Popover adjusting position x');
+	            popoverPosX += overflowAmount;
+	            arrowPos -= overflowAmount;
+	          }
+	        }
+
+	        if (popoverOverflow.top) {
+	          this.log('Popover overflowing from top');
+	          let overflowAmount = Math.abs(popoverPosition.top);
+	          this.log('Popover adjusting position y');
+	          popoverPosY += overflowAmount;
+	          arrowPos -= overflowAmount;
+	        }
+
+	        if (popoverOverflow.right) {
+	          this.log('Popover overflowing from right');
+	          let overflowAmount = Math.abs(popoverPosition.right);
+	          let excludePlacements = ['top', 'bottom'];
+
+	          if (popoverTriggerPosX <= popoverPosX - overflowAmount && excludePlacements.indexOf(placement) < 0) {
+	            this.log('Popover adjusting width');
+	            popoverWidth -= overflowAmount;
+	          } else {
+	            this.log('Popover adjusting position x');
+	            popoverPosX -= overflowAmount;
+	            arrowPos += overflowAmount;
+	          }
+	        }
+
+	        if (popoverOverflow.bottom) {
+	          this.log('Popover overflowing from bottom');
+	          let overflowAmount = Math.abs(popoverPosition.bottom);
+	          this.log('Popover adjusting position y');
+	          popoverPosY -= overflowAmount;
+	          arrowPos += overflowAmount;
+	        }
+
+	        if (placement === 'top') {
+	          this.$arrow.css({
+	            left: arrowPos + 'px'
+	          });
+	        } else if (placement === 'right') {
+	          this.$arrow.css({
+	            top: arrowPos + 'px'
+	          });
+	        } else if (placement === 'bottom') {
+	          this.$arrow.css({
+	            left: arrowPos + 'px'
+	          });
+	        } else if (placement === 'left') {
+	          this.$arrow.css({
+	            top: arrowPos + 'px'
+	          });
+	        }
+
+	        this.$popover.css({
+	          width: popoverWidth,
+	          transform: 'translate3d(' + popoverPosX + 'px, ' + popoverPosY + 'px, 0px)'
+	        });
+	        this.fixPopoverPosition = false;
+	        this.log('Popover placement changed: ' + this.placementChanged);
+	        this.log('Popover container inner width: ' + containerInnerWidth + 'px');
+	        this.log('Popover container inner height: ' + containerInnerHeight + 'px');
+	        this.log('Popover trigger width: ' + popoverTriggerWidth + 'px');
+	        this.log('Popover trigger height: ' + popoverTriggerHeight + 'px');
+	        this.log('popover trigger position x: ' + popoverTriggerPosX + 'px');
+	        this.log('Popover trigger position Y: ' + popoverTriggerPosY + 'px');
+	        this.log('Popover width: ' + popoverWidth + 'px');
+	        this.log('Popover height: ' + popoverHeight + 'px');
+	        this.log('Popover position x: ' + popoverPosX + 'px');
+	        this.log('Popover position y: ' + popoverPosY + 'px');
+	        this.log('Popover position left: ' + popoverPosition.left + 'px');
+	        this.log('Popover position top: ' + popoverPosition.top + 'px');
+	        this.log('Popover position right: ' + popoverPosition.right + 'px');
+	        this.log('Popover position bottom: ' + popoverPosition.bottom + 'px');
+	      }
+	    } else {
+	      this.log('Popover placement changed: ' + this.placementChanged);
+	      this.log('Popover container inner width: ' + containerInnerWidth + 'px');
+	      this.log('Popover container inner height: ' + containerInnerHeight + 'px');
+	      this.log('Popover trigger width: ' + popoverTriggerWidth + 'px');
+	      this.log('Popover trigger height: ' + popoverTriggerHeight + 'px');
+	      this.log('popover trigger position x: ' + popoverTriggerPosX + 'px');
+	      this.log('Popover trigger position Y: ' + popoverTriggerPosY + 'px');
+	      this.log('Popover width: ' + popoverWidth + 'px');
+	      this.log('Popover height: ' + popoverHeight + 'px');
+	      this.log('Popover position x: ' + popoverPosX + 'px');
+	      this.log('Popover position y: ' + popoverPosY + 'px');
+	      this.log('Popover position left: ' + popoverPosition.left + 'px');
+	      this.log('Popover position top: ' + popoverPosition.top + 'px');
+	      this.log('Popover position right: ' + popoverPosition.right + 'px');
+	      this.log('Popover position bottom: ' + popoverPosition.bottom + 'px');
+	    }
+	  } // Show
+
+
+	  show() {
+	    if (this.$popover) {
+	      return;
+	    }
+
+	    this.buildPopover();
+	    this.setPosition();
+
+	    if (this.animation) {
+	      this.$popover.addClass(this.animationSpeed);
+	      this.$popover.animateCss(this.animationIn);
+	      this.$popover.addClass('show');
+	      this.$popover.attr('id', this.id);
+	      this.$el.attr('data-popover', this.id);
+	    } else {
+	      this.$popover.addClass('show');
+	      this.$popover.attr('id', this.id);
+	      this.$el.attr('data-popover', this.id);
+	    }
+
+	    this.onShow();
+	  } // Close
+
+
+	  close() {
+	    if (!this.$popover) {
+	      return;
+	    }
+
+	    if (this.animation && !this.$popover.hasClass('animated')) {
+	      this.$popover.animateCss(this.animationOut, () => {
+	        this.$popover.remove();
+	        this.$el.removeAttr('data-popover');
+	        this.$popover = null;
+	        this.placementChanged = false;
+	        this.onClose();
+	      });
+	    } else {
+	      this.$popover.remove();
+	      this.$el.removeAttr('data-popover');
+	      this.$popover = null;
+	      this.placementChanged = false;
+	      this.onClose();
+	    }
+	  }
+
+	  static _jQueryInterface(config) {
+	    return this.each(function () {
+	      let data = $(this).data(DATA_KEY);
+
+	      const _config = typeof config === 'object' && config;
+
+	      if (!data) {
+	        data = new Popover(this, _config);
+	        $(this).data(DATA_KEY, data);
+	      }
+
+	      if (typeof config === 'string') {
+	        if (typeof data[config] === 'undefined') {
+	          throw new TypeError(`No method named "${config}"`);
+	        }
+
+	        data[config]();
+	      }
+	    });
+	  }
+
+	}
+
+	if (typeof $ !== 'undefined') {
+	  // jQuery
+	  const JQUERY_NO_CONFLICT = $.fn[NAME];
+	  $.fn[NAME] = Popover._jQueryInterface;
+	  $.fn[NAME].Constructor = Popover;
+
+	  $.fn[NAME].noConflict = () => {
+	    $.fn[NAME] = JQUERY_NO_CONFLICT;
+	    return Popover._jQueryInterface;
+	  };
+
+	  $.fn[NAME].defaults = {
+	    container: '.content-inner',
+	    trigger: 'focus',
+	    placement: 'bottom',
+	    animation: true,
+	    animationIn: 'fadeIn',
+	    animationOut: 'fadeOut',
+	    animationSpeed: 'fastest',
+	    title: '',
+	    content: '',
+	    onInit: null,
+	    onUpdate: null,
+	    onDestroy: null,
+	    onShow: null,
+	    onClose: null,
+	    debug: false
+	  };
+	}
+
+	return Popover;
+
+}));
+//# sourceMappingURL=popover.js.map