@finqu/cool 1.0.0

package/js/src/popover.js

@@ -0,0 +1,615 @@
+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.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
+    }
+}
+
+export default Popover;