@finqu/cool 1.0.0

package/js/src/dropdown.js

@@ -0,0 +1,443 @@
+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.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;
+        let dropdownPosY;
+
+        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) {
+
+            let offsets = this.offset.split(',')
+            let offsetX = offsets[0];
+            let offsetY = offsets[1];
+
+            dropdownPosX += parseInt(offsetX, 10);
+            dropdownPosY += parseInt(offsetY, 10);
+        }
+
+        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,
+        content: false,
+        scroll: true,
+        scrollContentHeight: 100,
+        onInit: null,
+        onUpdate: null,
+        onDestroy: null,
+        onShow: null,
+        onClose: null,
+        onItemClick: null,
+        debug: false
+    }
+}
+
+export default Dropdown;