@finqu/cool 1.2.29 → 1.3.0

package/js/src/popover.js

@@ -1,632 +0,0 @@
-import 'jquery';
-import { debounce } from './util/index';
-import AbstractUIComponent from './abstract-ui-component';
-
-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.containerAutoDetect = this.$el.data('containerAutoDetect') ? this.$el.data('containerAutoDetect') : this.opts.containerAutoDetect;
-        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;
-
-        if (this.containerAutoDetect) {
-            this.$container = this.$el.offsetParent();
-        }
-    }
-
-    // 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, debounce(() => {
-                if (!this.popupHasFocus) {
-                    this.close();
-                }
-            }, 500));
-
-        } 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.$container.find('#'+this.id).on('mouseenter', () => {
-            this.popupHasFocus = true;
-        });
-
-        this.$container.find('#'+this.id).on('mouseleave', () => {
-            this.popupHasFocus = false;
-            this.close();
-        });
-
-        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',
-        containerAutoDetect: false,
-        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
-    }
-}
-
-export default Popover;