@finqu/cool 1.2.29 → 1.3.0

package/js/src/tooltip.js

@@ -1,591 +0,0 @@
-import 'jquery';
-import { debounce, touchEvents } from './util/index';
-import AbstractUIComponent from './abstract-ui-component';
-
-const NAME = 'coolTooltip';
-const DATA_KEY = 'plugin_coolTooltip';
-
-class Tooltip extends AbstractUIComponent {
-
-    constructor(el, opts) {
-
-        super();
-
-        this.opts = {};
-
-        if (window.Cool.settings.tooltip) {
-
-            $.extend(true, this.opts, $.fn[NAME].defaults, window.Cool.settings.tooltip, 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 = 'tooltip-'+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.placement = this.$el.data('placement') ? this.$el.data('placement') : this.opts.placement;
-        this.placementChanged = false;
-        this.content = this.$el.data('content') ? this.$el.data('content') : this.opts.content;
-        this.trigger = this.$el.data('trigger') ? this.$el.data('trigger') : this.opts.trigger;
-    }
-
-    // Bind events that trigger methods
-    bindEvents() {
-
-        if (this.trigger === 'auto') {
-
-            this.$el.on('mouseenter'+'.'+NAME, () => {
-
-                this.show();
-            });
-
-            this.$el.on('mouseleave'+'.'+NAME, () => {
-
-                this.close();
-            });
-
-            this.$el.on('blur'+'.'+NAME, () => {
-
-                this.close();
-            });
-        }
-
-        this.$el.on('destroyed'+'.'+NAME, () => {
-
-            this.close();
-        });
-
-        $(window).on('resize', debounce(() => {
-
-            if (this.$tooltip) {
-                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 tooltip
-    buildTooltip() {
-
-        this.$tooltip = $(`
-
-            <div class="tooltip" role="tooltip" id="${this.id}">
-
-                <div class="arrow"></div>
-
-                <div class="tooltip-inner">${this.content}</div>
-
-            </div>
-
-        `);
-
-        this.$container.append(this.$tooltip);
-        this.$arrow = this.$tooltip.find('.arrow');
-
-        this.log(this.$el);
-        this.log(this.$container);
-        this.log(this.$tooltip);
-        this.log(this.$arrow);
-        this.log('Id: '+this.id);
-        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('Placement: '+this.placement);
-        this.log('Content: '+this.content);
-        this.log('Trigger: '+this.trigger);
-    }
-
-    // Set positions
-    setPosition(placement) {
-
-        if (typeof placement === 'undefined' || placement === null) {
-            placement = this.placement;
-        }
-
-        this.$tooltip.addClass('tooltip-'+placement);
-
-        let containerInnerWidth = this.$container.innerWidth();
-        let containerInnerHeight = this.$container.innerHeight();
-        let tooltipWidth = this.$tooltip.outerWidth(true);
-        let tooltipHeight = this.$tooltip.outerHeight(true);
-        let tooltipTriggerWidth = this.$el.outerWidth();
-        let tooltipTriggerHeight = this.$el.outerHeight();
-        let tooltipTriggerPosX = this.$el.offset().left;
-        let tooltipTriggerPosY = this.$el.offset().top;
-        let arrowWidth = this.$arrow.outerWidth(true);
-        let arrowHeight = this.$arrow.outerHeight(true);
-        let arrowPos;
-        let tooltipPosX;
-        let tooltipPosY;
-
-        if (placement === 'top') {
-
-            tooltipPosX = Math.round(tooltipTriggerPosX - (tooltipWidth - tooltipTriggerWidth) / 2);
-            tooltipPosY = Math.round(tooltipTriggerPosY - tooltipHeight);
-            arrowPos = Math.round(tooltipWidth / 2 - arrowWidth / 2);
-
-            this.$arrow.css({
-                left: arrowPos+'px'
-            });
-
-        } else if (placement === 'right') {
-
-            tooltipPosX = Math.round(tooltipTriggerPosX + tooltipTriggerWidth);
-            tooltipPosY = Math.round(tooltipTriggerPosY - (tooltipHeight - tooltipTriggerHeight) / 2);
-            arrowPos = Math.round(tooltipHeight / 2 - arrowHeight / 2);
-
-            this.$arrow.css({
-                top: arrowPos+'px'
-            });
-
-        } else if (placement === 'bottom') {
-
-            tooltipPosX = Math.round(tooltipTriggerPosX - (tooltipWidth - tooltipTriggerWidth) / 2);
-            tooltipPosY = Math.round(tooltipTriggerPosY + tooltipTriggerHeight);
-            arrowPos = Math.round(tooltipWidth / 2 - arrowWidth / 2);
-
-            this.$arrow.css({
-                left: arrowPos+'px'
-            });
-
-        } else if (placement === 'left') {
-
-            tooltipPosX = Math.round(tooltipTriggerPosX - tooltipWidth);
-            tooltipPosY = Math.round(tooltipTriggerPosY - (tooltipHeight - tooltipTriggerHeight) / 2);
-            arrowPos = Math.round(tooltipHeight / 2 - arrowHeight / 2);
-
-            this.$arrow.css({
-                top: arrowPos+'px'
-            });
-        }
-
-        this.$tooltip.css({
-            position: 'absolute',
-            top: '0px',
-            left: '0px',
-            transform: 'translate3d('+tooltipPosX+'px, '+tooltipPosY+'px, 0px)',
-            'will-change': 'transform'
-        });
-
-        // Correct placement if tooltip goes outside of container
-        let tooltipOverflowCount = 0;
-        let tooltipPosition =  {
-            left: this.$tooltip.position().left,
-            top: this.$tooltip.position().top,
-            right: containerInnerWidth - (this.$tooltip.position().left + tooltipWidth),
-            bottom: containerInnerHeight - (this.$tooltip.position().top + tooltipHeight),
-        };
-        let tooltipOverflow = {
-            left: false,
-            top: false,
-            right: false,
-            bottom: false
-        };
-
-        if (tooltipPosition.right < 0) {
-
-            tooltipOverflow.right = true;
-            tooltipOverflowCount++;
-
-            this.log('Tooltip overflowing from right');
-        }
-
-        if (tooltipPosition.left < 0) {
-
-            tooltipOverflow.left = true;
-            tooltipOverflowCount++;
-
-            this.log('Tooltip overflowing from left');
-        }
-
-        if (tooltipPosition.bottom < 0) {
-
-            tooltipOverflow.bottom = true;
-            tooltipOverflowCount++;
-
-            this.log('Tooltip overflowing from bottom');
-        }
-
-        if (tooltipPosition.top < 0) {
-
-            tooltipOverflow.top = true;
-            tooltipOverflowCount++;
-
-            this.log('Tooltip overflowing from top');
-        }
-
-        if (tooltipOverflowCount > 0) {
-
-            if (!this.placementChanged && tooltipOverflow.left && tooltipPosition.right > tooltipWidth) {
-
-                this.log('Changing tooltip placement to right');
-
-                this.placementChanged = true;
-                this.$tooltip.removeClass('tooltip-'+placement);
-                this.$arrow.removeAttr('style');
-                this.setPosition('right');
-
-            } else if (!this.placementChanged && tooltipOverflow.top && tooltipPosition.top > tooltipHeight) {
-
-                this.log('Changing tooltip placement to bottom');
-
-                this.placementChanged = true;
-                this.$tooltip.removeClass('tooltip-'+placement);
-                this.$arrow.removeAttr('style');
-                this.setPosition('bottom');
-
-            } else if (!this.placementChanged && tooltipOverflow.right && tooltipPosition.left > tooltipWidth) {
-
-                this.log('Changing tooltip placement to left');
-
-                this.placementChanged = true;
-                this.$tooltip.removeClass('tooltip-'+placement);
-                this.$arrow.removeAttr('style');
-                this.setPosition('left');
-
-            } else if (!this.placementChanged && tooltipOverflow.bottom && tooltipPosition.top > tooltipHeight) {
-
-                this.log('Changing tooltip placement to top');
-
-                this.placementChanged = true;
-                this.$tooltip.removeClass('tooltip-'+placement);
-                this.$arrow.removeAttr('style');
-                this.setPosition('top');
-
-            } else if (!this.placementChanged && (placement !== 'top' || placement !== 'bottom') && (tooltipOverflow.left || tooltipOverflow.right)) {
-
-                if (tooltipPosition.top > tooltipPosition.bottom) {
-
-                    this.log('Changing tooltip placement to top');
-
-                    this.placementChanged = true;
-                    this.$tooltip.removeClass('tooltip-'+placement);
-                    this.$arrow.removeAttr('style');
-                    this.setPosition('top');
-
-                } else {
-
-                    this.log('Changing tooltip placement to bottom');
-
-                    this.placementChanged = true;
-                    this.$tooltip.removeClass('tooltip-'+placement);
-                    this.$arrow.removeAttr('style');
-                    this.setPosition('bottom');
-                }
-
-            } else {
-
-                this.fixTooltipPosition = true;
-            }
-
-            if (this.fixTooltipPosition) {
-
-                this.log('Adjusting tooltip size or position in order to tooltip fit in the container');
-
-                if (tooltipOverflow.left) {
-
-                    this.log('Tooltip overflowing from left');
-
-                    let overflowAmount = Math.abs(tooltipPosition.left);
-                    let excludePlacements = ['top', 'bottom'];
-
-                    if ((tooltipTriggerPosX >= tooltipPosX + overflowAmount) && excludePlacements.indexOf(placement) < 0) {
-
-                        this.log('Tooltip adjusting width');
-
-                        tooltipWidth -= overflowAmount;
-                        tooltipPosX += overflowAmount;
-
-                    } else {
-
-                        this.log('Tooltip adjusting position x');
-
-                        tooltipPosX += overflowAmount;
-                        arrowPos -= overflowAmount;
-                    }
-                }
-
-                if (tooltipOverflow.top) {
-
-                    this.log('Tooltip overflowing from top');
-
-                    let overflowAmount = Math.abs(tooltipPosition.top);
-
-                    this.log('Tooltip adjusting position y');
-
-                    tooltipPosY += overflowAmount;
-                    arrowPos -= overflowAmount;
-                }
-
-                if (tooltipOverflow.right) {
-
-                    this.log('Tooltip overflowing from right');
-
-                    let overflowAmount = Math.abs(tooltipPosition.right);
-                    let excludePlacements = ['top', 'bottom'];
-
-                    if ((tooltipTriggerPosX <= tooltipPosX - overflowAmount) && excludePlacements.indexOf(placement) < 0) {
-
-                        this.log('Tooltip adjusting width');
-
-                        tooltipWidth -= overflowAmount;
-
-                    } else {
-
-                        this.log('Tooltip adjusting position x');
-
-                        tooltipPosX -= overflowAmount;
-                        arrowPos += overflowAmount;
-                    }
-                }
-
-                if (tooltipOverflow.bottom) {
-
-                    this.log('Tooltip overflowing from bottom');
-
-                    let overflowAmount = Math.abs(tooltipPosition.bottom);
-
-                    this.log('Tooltip adjusting position y');
-
-                    tooltipPosY -= 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.$tooltip.css({
-                    width: tooltipWidth,
-                    transform: 'translate3d('+tooltipPosX+'px, '+tooltipPosY+'px, 0px)'
-                });
-
-                this.fixTooltipPosition = false;
-
-                this.log('Tooltip placement changed: '+this.placementChanged);
-                this.log('Tooltip container inner width: '+containerInnerWidth+'px');
-                this.log('Tooltip container inner height: '+containerInnerHeight+'px');
-                this.log('Tooltip trigger width: '+tooltipTriggerWidth+'px');
-                this.log('Tooltip trigger height: '+tooltipTriggerHeight+'px');
-                this.log('Tooltip trigger position x: '+tooltipTriggerPosX+'px');
-                this.log('Tooltip trigger position Y: '+tooltipTriggerPosY+'px');
-                this.log('Tooltip width: '+tooltipWidth+'px');
-                this.log('Tooltip height: '+tooltipHeight+'px');
-                this.log('Tooltip position x: '+tooltipPosX+'px');
-                this.log('Tooltip position y: '+tooltipPosY+'px');
-                this.log('Tooltip position left: '+tooltipPosition.left+'px');
-                this.log('Tooltip position top: '+tooltipPosition.top+'px');
-                this.log('Tooltip position right: '+tooltipPosition.right+'px');
-                this.log('Tooltip position bottom: '+tooltipPosition.bottom+'px');
-            }
-
-        } else {
-
-            this.log('Tooltip placement changed: '+this.placementChanged);
-            this.log('Tooltip container inner width: '+containerInnerWidth+'px');
-            this.log('Tooltip container inner height: '+containerInnerHeight+'px');
-            this.log('Tooltip trigger width: '+tooltipTriggerWidth+'px');
-            this.log('Tooltip trigger height: '+tooltipTriggerHeight+'px');
-            this.log('Tooltip trigger position x: '+tooltipTriggerPosX+'px');
-            this.log('Tooltip trigger position Y: '+tooltipTriggerPosY+'px');
-            this.log('Tooltip width: '+tooltipWidth+'px');
-            this.log('Tooltip height: '+tooltipHeight+'px');
-            this.log('Tooltip position x: '+tooltipPosX+'px');
-            this.log('Tooltip position y: '+tooltipPosY+'px');
-            this.log('Tooltip position left: '+tooltipPosition.left+'px');
-            this.log('Tooltip position top: '+tooltipPosition.top+'px');
-            this.log('Tooltip position right: '+tooltipPosition.right+'px');
-            this.log('Tooltip position bottom: '+tooltipPosition.bottom+'px');
-        }
-    }
-
-    // Show
-    show() {
-
-        if (this.$tooltip) {
-            return;
-        }
-
-        this.buildTooltip();
-        this.setPosition();
-
-        if (this.animation) {
-
-            this.$tooltip.addClass(this.animationSpeed);
-            this.$tooltip.animateCss(this.animationIn);
-            this.$tooltip.addClass('show');
-            this.$tooltip.attr('id', this.id);
-            this.$el.attr('data-tooltip', this.id);
-
-        } else {
-
-            this.$tooltip.addClass('show');
-            this.$tooltip.attr('id', this.id);
-            this.$el.attr('data-tooltip', this.id);
-        }
-
-        this.onShow();
-    }
-
-    // Close
-    close() {
-
-        if (!this.$tooltip) {
-            return;
-        }
-
-        if (this.animation && !this.$tooltip.hasClass('animated')) {
-
-            this.$tooltip.animateCss(this.animationOut, () => {
-
-                this.$tooltip.remove();
-                this.$el.removeAttr('data-tooltip');
-                this.$tooltip = null;
-                this.placementChanged = false;
-
-                this.onClose();
-            });
-
-        } else {
-
-            this.$tooltip.remove();
-            this.$el.removeAttr('data-tooltip');
-            this.$tooltip = 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 Tooltip(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] = Tooltip._jQueryInterface;
-    $.fn[NAME].Constructor = Tooltip;
-
-    $.fn[NAME].noConflict = () => {
-
-        $.fn[NAME] = JQUERY_NO_CONFLICT;
-
-        return Tooltip._jQueryInterface;
-    }
-
-    $.fn[NAME].defaults = {
-        container: 'body',
-        animation: false,
-        animationIn: 'fadeIn',
-        animationOut: 'fadeOut',
-        animationSpeed: 'fastest',
-        placement: 'bottom',
-        content: '',
-        trigger: 'auto',
-        onInit: null,
-        onUpdate: null,
-        onDestroy: null,
-        onShow: null,
-        onClose: null,
-        debug: false
-    }
-}
-
-export default Tooltip;

package/js/src/util/animate-css.js

@@ -1,22 +0,0 @@
-import 'jquery';
-
-$.fn.extend({
-    animateCss: function (animationName, callback) {
-
-        var el = this;
-        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
-
-        el.addClass('animated ' + animationName).one(animationEnd, function(e) {
-
-            $(this).removeClass('animated ' + animationName);
-
-            if (callback) {
-                callback();
-            }
-
-        }).children().on(animationEnd, function(e) {
-
-            e.stopPropagation();
-        });
-    }
-});