@finqu/cool 1.2.29 → 1.3.0

package/js/src/dropdown.js

@@ -1,525 +0,0 @@
-import 'jquery';
-import PerfectScrollbar from './util/perfect-scrollbar';
-import { debounce, touchEvents } from './util/index';
-import AbstractUIComponent from './abstract-ui-component';
-
-const NAME = 'coolDropdown';
-const DATA_KEY = 'plugin_coolDropdown';
-
-class Dropdown extends AbstractUIComponent {
-
-    constructor(el, opts) {
-
-        super();
-
-        this.opts = {};
-
-        if (window.Cool.settings.dropdown) {
-
-            $.extend(true, this.opts, $.fn[NAME].defaults, window.Cool.settings.dropdown, opts);
-
-        } else {
-
-            $.extend(true, this.opts, $.fn[NAME].defaults, opts);
-        }
-
-        this.el = el;
-        this.debug = this.opts.debug;
-        this.init();
-    }
-
-    // Init plugin
-    init() {
-
-        $.when(this.buildCache()).then(() => {
-            this.buildScroll();
-            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.$el.addClass('dropdown-trigger');
-        this.$container = this.$el.parent('.dropdown');
-        this.id = 'dropdown-'+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.offset = this.$el.data('offset') ? this.$el.data('offset') : this.opts.offset;
-        this.minWidth = this.$el.data('minWidth') ? this.$el.data('minWidth') : this.opts.minWidth;
-        this.scroll = this.$el.data('scroll') ? this.$el.data('scroll') : this.opts.scroll;
-        this.scrollContentHeight = this.$el.data('scrollContentHeight') ? this.$el.data('scrollContentHeight') : this.opts.scrollContentHeight;
-        this.positionObserver = this.$el.attr('data-position-observer') ? JSON.parse(this.$el.attr('data-position-observer')) : this.opts.positionObserver;
-        this.closeOnItemClick = this.$el.data('closeOnItemClick') ? this.$el.data('closeOnItemClick') : this.opts.closeOnItemClick;
-        this.content = this.$el.data('content') ? this.$el.data('content') : this.opts.content;
-        this.contentOpen = false;
-
-        if (this.$container.hasClass('dropup')) {
-            this.placement = 'top';
-        } else if (this.$container.hasClass('dropright')) {
-            this.placement = 'right';
-        } else if (this.$container.hasClass('dropbottom')) {
-            this.placement = 'bottom';
-        } else {
-            this.placement = 'left';
-        }
-
-        if (typeof this.content === 'function') {
-
-            let menuRight = this.opts.align === 'end' ? ' dropdown-menu-right' : '';
-
-            this.$dropdown = $(`
-                <div class="dropdown-menu${menuRight}" id="${this.id}">
-                    ${this.content()}
-                </div>
-            `);
-
-            $.when(this.$el.after(this.$dropdown)).then(() => {
-
-                this.$scrollableContent = this.$dropdown.find('.dropdown-scrollable-content') ? this.$dropdown.find('.dropdown-scrollable-content') : false;
-                this.$dropdown.hasClass('dropdown-menu-right') ? this.align = 'end' : this.align = 'start';
-                this.$dropdownItem = this.$dropdown.find('.dropdown-item');
-
-                if (this.minWidth) {
-                    this.$dropdown.css('min-width', this.minWidth+'px');
-                }
-
-                this.log(this.$el);
-                this.log(this.$container);
-                this.log(this.$dropdown);
-                this.log(this.$scrollableContent);
-                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('Offset: '+this.offset);
-                this.log('Min width: '+this.minWidth);
-                this.log('Content: '+this.content);
-                this.log('Scroll: '+this.scroll);
-                this.log('Scroll content height: '+this.scrollContentHeight+'px');
-
-                return true;
-            });
-
-        } else {
-
-            this.$dropdown = this.$el.next('.dropdown-menu') ? this.$el.next('.dropdown-menu') : false;
-            this.$dropdown.hasClass('dropdown-menu-right') ? this.align = 'end' : this.align = 'start';
-            this.$scrollableContent = this.$dropdown.find('.dropdown-scrollable-content') ? this.$dropdown.find('.dropdown-scrollable-content') : false;
-            this.$dropdownItem = this.$dropdown.find('.dropdown-item');
-
-            if (this.minWidth) {
-                this.$dropdown.css('min-width', this.minWidth+'px');
-            }
-
-            this.log(this.$el);
-            this.log(this.$container);
-            this.log(this.$dropdown);
-            this.log(this.$scrollableContent);
-            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('Offset: '+this.offset);
-            this.log('Min width: '+this.minWidth);
-            this.log('Content: '+this.opts.content);
-            this.log('Scroll: '+this.scroll);
-            this.log('Scroll content height: '+this.scrollContentHeight+'px');
-
-            return true;
-        }
-    }
-
-    // Build scroll
-    buildScroll() {
-
-        if (this.opts.scroll && this.$scrollableContent.length) {
-
-            this.$scrollableContent.css({
-                'max-height': this.scrollContentHeight+'px'
-            });
-
-           if (touchEvents()) {
-
-                this.$scrollableContent.css({
-                    'overflow-y': 'auto'
-                });
-
-            } else {
-
-                this.$scrollableContent.css({
-                    'overflow-y': 'auto'
-                });
-
-                this.scroll = new PerfectScrollbar(this.$scrollableContent[0], {
-                    wheelSpeed: 1,
-                    wheelPropagation: false,
-                    minScrollbarLength: 20
-                });
-
-                this.$scrollableContent.addClass('ps-show-rail-y');
-            }
-        }
-    }
-
-    // Bind events that trigger methods
-    bindEvents() {
-
-        let self = this;
-
-        this.$el.on('click'+'.'+NAME, () => {
-
-            if (this.contentOpen) {
-                this.close();
-            } else {
-                this.show();
-            }
-        });
-
-        this.$dropdownItem.on('click'+'.'+NAME, function() {
-
-           if (self.closeOnItemClick) {
-               self.close();
-            }
-
-            self.onItemClick(this);
-        });
-
-        $(document).on('touchstart click', (e) => {
-
-            if (!this.$el.is(e.target) && !this.$dropdown.is(e.target) && this.$dropdown.has(e.target).length === 0 && this.contentOpen) {
-                this.close();
-            }
-        });
-
-        $(window).on('resize', debounce(() => {
-
-            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);
-        });
-    }
-
-    // Set positions
-    setPosition(placement) {
-
-        if (typeof str === 'undefined' || str === null) {
-            placement = this.placement;
-        }
-
-        let dropdownWidth = this.$dropdown.outerWidth(true);
-        let dropdownHeight = this.$dropdown.outerHeight(true);
-        let dropdownTriggerWidth = this.$el.outerWidth(true);
-        let dropdownTriggerHeight = this.$el.outerHeight(true);
-        let dropdownTriggerPosX = this.$el.position().left;
-        let dropdownTriggerPosY = this.$el.position().top;
-        let dropdownPosX = 0;
-        let dropdownPosY = 0;
-        let offsetX = 0;
-        let offsetY = 0;
-
-        if (placement === 'top') {
-
-            if (this.align === 'end') {
-                dropdownPosX = dropdownTriggerWidth - dropdownWidth;
-            } else {
-                dropdownPosX = dropdownTriggerPosX;
-            }
-
-            dropdownPosY = dropdownTriggerPosY - dropdownHeight;
-
-        } else if (placement === 'right') {
-
-            dropdownPosX = dropdownTriggerPosX + dropdownTriggerWidth;
-            dropdownPosY = dropdownTriggerPosY;
-
-        } else if (placement === 'bottom') {
-
-            if (this.align === 'end') {
-                dropdownPosX = dropdownTriggerWidth - dropdownWidth;
-            } else {
-                dropdownPosX = dropdownTriggerPosX;
-            }
-
-            dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight;
-
-        } else if (placement === 'left') {
-
-            dropdownPosX = dropdownTriggerPosX - dropdownWidth;
-            dropdownPosY = dropdownTriggerPosY;
-        }
-
-        if (this.offset) {
-
-            const offsets = this.offset.split(',');
-
-            offsetX = offsets[0];
-            offsetY = offsets[1];
-            dropdownPosX += parseInt(offsetX, 10);
-            dropdownPosY += parseInt(offsetY, 10);
-        }
-
-        if (this.positionObserver && this.$container.length > 0) {
-
-            // this is not set during init so we have to fetch it
-            // and let's assume that this containing parent fits and is inside
-            // viewport
-            let $containingParent = this.$container.parent();
-            let index = 0;
-            while (
-                $containingParent.css('overflow-x') !== 'hidden' && 
-                $containingParent.css('overflow') !== 'hidden' &&
-                ($containingParent.prop('tagName') || '').toLowerCase() !== 'body' &&
-                index < 100
-            ) {
-                $containingParent = $containingParent.parent();
-
-                if (!$containingParent.get(0)) {
-                    return;
-                }
-
-                ++index;
-            }
-
-            if (!$containingParent.get(0)) {
-                return;
-            }
-
-            const containingBoundingRect = $containingParent.get(0).getBoundingClientRect();
-            const containerBoundingRect = this.$container.get(0).getBoundingClientRect();
-
-            if (containingBoundingRect.width < dropdownWidth) {
-                this.$dropdown.css('max-width', containingBoundingRect.width);
-                dropdownWidth = containingBoundingRect.width;
-            } else {
-                this.$dropdown.css('max-width', '');
-            }
-
-            if (containingBoundingRect.height < dropdownHeight) {
-                this.$dropdown.css('max-height', containingBoundingRect.height);
-                dropdownHeight = containingBoundingRect.height;
-            } else {
-                this.$dropdown.css('max-height', '');
-            }
-
-            const maxTop = Math.max(Math.abs(containingBoundingRect.y - containerBoundingRect.y), 0);
-            const maxLeft = Math.max(Math.abs(containingBoundingRect.x - containerBoundingRect.x), 0);
-            const maxRight = $containingParent.get(0).scrollWidth - (containerBoundingRect.x + containerBoundingRect.width);
-            const maxBottom = $containingParent.get(0).scrollHeight - (containerBoundingRect.y + (placement === 'dropbottom' ? containerBoundingRect.height : 0));
-
-            if (maxLeft < dropdownWidth && dropdownPosX < dropdownTriggerPosX) {
-                dropdownPosX = dropdownTriggerPosX;
-
-                // would be on top of the trigger
-                if (dropdownTriggerPosY + dropdownTriggerHeight > dropdownPosY) {
-                    dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + (offsetY > 0 ? offsetY : 0);
-                }
-            }
-
-            if (maxRight < dropdownWidth && dropdownPosX + dropdownWidth > dropdownTriggerPosX + dropdownTriggerWidth) {
-                dropdownPosX = dropdownTriggerPosX + dropdownTriggerWidth - dropdownWidth;
-
-                if (dropdownTriggerPosY + dropdownTriggerHeight > dropdownPosY) {
-                    dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + (offsetY > 0 ? offsetY : 0);
-                }
-            }
-
-            if (dropdownPosY < dropdownTriggerPosY && maxTop < dropdownHeight) {
-                dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + offsetY;
-            }
-
-            if (dropdownPosY >= dropdownTriggerPosY && maxBottom < dropdownHeight) {
-                if (dropdownPosX >= dropdownTriggerPosX + dropdownTriggerWidth || dropdownTriggerPosX >= dropdownPosX + dropdownWidth) {
-                    dropdownPosY = dropdownTriggerPosY - (dropdownHeight - maxBottom);
-                } else {
-                    dropdownPosY = dropdownTriggerPosY - dropdownHeight - offsetY
-                }
-            }
-        }
-
-        this.$dropdown.css({
-            position: 'absolute',
-            top: '0px',
-            left: '0px',
-            transform: 'translate3d('+Math.round(dropdownPosX)+'px, '+Math.round(dropdownPosY)+'px, 0px)',
-            'will-change': 'transform'
-        });
-
-        this.log('Dropdown trigger width: '+dropdownTriggerWidth+'px');
-        this.log('Dropdown trigger height: '+dropdownTriggerHeight+'px');
-        this.log('Dropdown trigger position x: '+dropdownTriggerPosX+'px');
-        this.log('Dropdown trigger position Y: '+dropdownTriggerPosY+'px');
-        this.log('Dropdown width: '+dropdownWidth+'px');
-        this.log('Dropdown height: '+dropdownHeight+'px');
-        this.log('Dropdown position x: '+dropdownPosX+'px');
-        this.log('Dropdown position y: '+dropdownPosY+'px');
-    }
-
-    // Show
-    show() {
-
-        if (!this.$dropdown || this.$dropdown.hasClass('show')) {
-            return;
-        }
-
-        this.setPosition();
-
-        if (this.animation) {
-
-            this.$dropdown.attr('x-placement', this.placement+'-'+this.align);
-            this.$dropdown.addClass(this.animationSpeed);
-            this.$dropdown.animateCss(this.animationIn);
-            this.$dropdown.addClass('show');
-            this.$dropdown.attr('id', this.id);
-            this.$el.attr('data-dropdown', this.id);
-
-        } else {
-
-            this.$dropdown.attr('x-placement', this.placement+'-'+this.align);
-            this.$dropdown.addClass('show');
-            this.$dropdown.attr('id', this.id);
-            this.$el.attr('data-dropdown', this.id);
-        }
-
-        if (this.opts.scroll && this.scroll && this.$scrollableContent.length) {
-            this.$scrollableContent[0].scrollTop = 1;
-            this.$scrollableContent[0].scrollTop = 0;
-        }
-
-        this.contentOpen = true;
-        this.onShow();
-    }
-
-    // Close
-    close() {
-
-        if (!this.$dropdown) {
-            return;
-        }
-
-        if (this.animation && !this.$dropdown.hasClass('animated')) {
-
-            this.$dropdown.animateCss(this.animationOut, () => {
-                this.$dropdown.removeClass('show');
-                this.$el.removeAttr('data-dropdown');
-            });
-
-        } else {
-
-            this.$dropdown.removeClass('show');
-            this.$el.removeAttr('data-dropdown');
-        }
-
-        this.contentOpen = false;
-        this.onClose();
-    }
-
-    // Item callback
-    onItemClick(el) {
-
-        let onItemClick = this.opts.onItemClick;
-
-        if (typeof onItemClick === 'function') {
-
-            onItemClick.call(el);
-        }
-    }
-
-    static _jQueryInterface(config) {
-
-        return this.each(function() {
-
-            let data = $(this).data(DATA_KEY);
-            const _config = typeof config === 'object' && config;
-
-            if (!data) {
-                data = new Dropdown(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] = Dropdown._jQueryInterface;
-    $.fn[NAME].Constructor = Dropdown;
-
-    $.fn[NAME].noConflict = () => {
-
-        $.fn[NAME] = JQUERY_NO_CONFLICT;
-
-        return Dropdown._jQueryInterface;
-    }
-
-    $.fn[NAME].defaults = {
-        animation: true,
-        animationIn: 'zoomIn',
-        animationOut: 'zoomOut',
-        animationSpeed: 'fastest',
-        offset: null,
-        minWidth: null,
-        align: 'start',
-        closeOnItemClick: true,
-        positionObserver: true,
-        content: false,
-        scroll: true,
-        scrollContentHeight: 100,
-        onInit: null,
-        onUpdate: null,
-        onDestroy: null,
-        onShow: null,
-        onClose: null,
-        onItemClick: null,
-        debug: false
-    }
-}
-
-export default Dropdown;