@finqu/cool 1.0.0

package/js/src/tooltip.js

@@ -0,0 +1,575 @@
+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;
+    }
+
+    // Bind events that trigger methods
+    bindEvents() {
+
+        this.$el.on('mouseenter'+'.'+NAME, () => {
+
+            this.show();
+        });
+
+        this.$el.on('mouseleave'+'.'+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);
+    }
+
+    // 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: '',
+        onInit: null,
+        onUpdate: null,
+        onDestroy: null,
+        onShow: null,
+        onClose: null,
+        debug: false
+    }
+}
+
+export default Tooltip;

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

@@ -0,0 +1,22 @@
+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();
+        });
+    }
+});

package/js/src/util/index.js

@@ -0,0 +1,112 @@
+import 'jquery';
+
+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);
+		}
+	};
+};
+
+const shallowProperty = function(key) {
+
+	return function(obj) {
+
+		return obj == null ? void 0 : obj[key];
+	};
+};
+
+const isArrayLike = function(collection) {
+
+	let length = shallowProperty('length');
+
+	return typeof length == 'number' && length >= 0 && length <= Math.pow(2, 53) - 1;
+};
+
+const optimizeCb = function(func, context, argCount) {
+
+    if (context === void 0) {
+    	return func;
+	}
+
+	switch (argCount == null ? 3 : argCount) {
+
+		case 1: return function(value) {
+			return func.call(context, value);
+		};
+
+		case 3: return function(value, index, collection) {
+			return func.call(context, value, index, collection);
+		};
+		case 4: return function(accumulator, value, index, collection) {
+			return func.call(context, accumulator, value, index, collection);
+		};
+	}
+
+    return function() {
+		return func.apply(context, arguments);
+    };
+};
+
+const each = function(obj, iteratee, context) {
+
+	iteratee = optimizeCb(iteratee, context);
+
+	let i;
+	let length;
+
+	if (isArrayLike(obj)) {
+
+		for (i = 0, length = obj.length; i < length; i++) {
+			iteratee(obj[i], i, obj);
+		}
+
+	} else {
+
+		let keys = Object.keys(obj);
+
+		for (i = 0, length = keys.length; i < length; i++) {
+			iteratee(obj[keys[i]], keys[i], obj);
+		}
+	}
+
+	return obj;
+};
+
+const touchEvents = function () {
+
+	let result = false;
+
+	if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
+		result = true;
+	}
+
+	return result;
+};
+
+export {
+	debounce,
+	touchEvents,
+	each
+}