@finqu/cool 1.2.28 → 1.3.0

package/js/src/toast.js

@@ -1,581 +0,0 @@
-import 'jquery';
-import { debounce } from './util/index';
-import AbstractUIComponent from './abstract-ui-component';
-
-const NAME = 'coolToast';
-const DATA_KEY = 'plugin_coolToast';
-
-class Toast {
-
-    constructor(container, opts) {
-
-        this.settings = {};
-
-        if (window.Cool.settings.toast) {
-
-            $.extend(true, this.settings, $.fn[NAME].defaults, window.Cool.settings.toast, opts);
-
-        } else {
-
-            $.extend(true, this.settings, $.fn[NAME].defaults, opts);
-        }
-
-        this.container = container;
-        this.$container = $(this.container);
-        this.debug = this.settings.debug;
-        this.faPro = this.settings.faPro;
-        this.toasts = [];
-        this.queue = [];
-        this.processingQueue = false;
-        this.onInitialize = this.settings.onInitialize;
-        this.onDestroy = this.settings.onDestroy;
-    }
-
-    // Add item to queue
-    addQueue(toast) {
-
-        this.queue.push(toast);
-
-        if (this.processingQueue) {
-            return;
-        }
-
-        return this.processQueue();
-    }
-
-    // Process queue
-    processQueue() {
-
-        if (this.processingQueue) {
-
-            this.queue.shift();
-        }
-
-        if (!this.queue.length) {
-
-            this.processingQueue = false;
-            return;
-        }
-
-        this.processingQueue = true;
-
-        return this.show(this.queue[0]);
-    }
-
-    // Init toast
-    init(opts) {
-
-        let settings = {};
-
-        $.extend(true, settings, this.settings, opts);
-
-        let toast = this.buildToast(settings);
-
-        this.addQueue(toast);
-        this.onInit(toast);
-
-        return toast;
-    }
-
-    // Remove plugin instance completely
-    destroy() {
-
-        this.$container.removeData(DATA_KEY);
-        this.onDestroy();
-    }
-
-    // Build toast
-    buildToast(settings) {
-
-        let toast = {
-            uuid: 'toast-'+this.generateUUID(),
-            placement: settings.placement,
-            placementX: settings.placementX,
-            placementY: settings.placementY,
-            offset: settings.offset,
-            animation: settings.animation,
-            animationIn: settings.animationIn,
-            animationOut: settings.animationOut,
-            animationSpeed: settings.animationSpeed,
-            dismiss: settings.dismiss,
-            size: settings.size,
-            header: settings.header,
-            theme: settings.theme,
-            title: settings.title,
-            content: settings.content,
-            template: settings.template,
-            maxBodyHeight: settings.maxBodyHeight,
-            onInit: settings.onInit,
-            onShow: settings.onShow,
-            onClose: settings.onClose
-        };
-
-        if (typeof toast.content === 'function') {
-
-            toast.$el = $(toast.template());
-
-        } else {
-
-            toast.$el = $(this._renderTemplate(toast));
-        }
-
-        toast.$inner = toast.$el.find('.toast-inner');
-        toast.$closeBtn = toast.$el.find('[data-toast-close]');
-
-        this.log(toast);
-        this.toasts.push(toast);
-
-        return toast;
-    }
-
-    // Bind events that trigger methods
-    bindEvents(toast) {
-
-        let self = this;
-
-        toast.$el.on('click', '[data-toast-close]', () => {
-
-            if (toast.$el) {
-                self.close(toast);
-            }
-        });
-
-        $(window).on('resize', debounce(() => {
-
-            if (toast.$el) {
-                this.setPosition(toast);
-            }
-        }, 250));
-    }
-
-    // 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(toast, placement, placementY, placementX) {
-
-        if (typeof placementY === 'undefined' || placementY === null) {
-            placementY = toast.placementY;
-        }
-
-        if (typeof placementX === 'undefined' || placementX === null) {
-            placementX = toast.placementX;
-        }
-
-        if (!placementX || !placementY) {
-            placement = toast.placement
-        }
-
-        if (toast.offset) {
-
-            let offsets = toast.offset.split(',')
-            let offsetX = parseInt(offsets[0], 10);
-            let offsetY = parseInt(offsets[1], 10);
-        }
-
-        let toastWidth = toast.$el.outerWidth(true);
-        let toastHeight = toast.$el.outerHeight(true);
-        let toastPosX;
-        let toastPosY;
-
-        if (placement) {
-
-            if (placement === 'top-left') {
-
-                toastPosX = 0;
-                toastPosY = 0;
-
-                if (toast.offset) {
-                    toastPosX += offsetX;
-                    toastPosY += offsetY;
-                } else {
-                    toastPosX += 30;
-                    toastPosY += 30;
-                }
-
-            } else if (placement === 'top-center') {
-
-                toastPosX = (this.$container.width() / 2) - toastWidth / 2;
-                toastPosY = 0;
-
-                this.log(this.$container.width);
-
-                if (toast.offset) {
-                    toastPosX += offsetX;
-                    toastPosY += offsetY;
-                } else {
-                    toastPosY += 30;
-                }
-
-            } else if (placement === 'top-right') {
-
-                toastPosX = this.$container.width() - toastWidth;
-                toastPosY = 0;
-
-                if (toast.offset) {
-                    toastPosX += -offsetX;
-                    toastPosY += offsetY;
-                } else {
-                    toastPosX += -30;
-                    toastPosY += 30;
-                }
-
-            } else if (placement === 'center-left') {
-
-                toastPosX = 0;
-                toastPosY = (this.$container.height() / 2) - toastHeight / 2;
-
-                if (toast.offset) {
-                    toastPosX += offsetX;
-                    toastPosY += offsetY;
-                } else {
-                    toastPosX += 30;
-                }
-
-            } else if (placement === 'center-center') {
-
-                toastPosX = (this.$container.width() / 2) - toastWidth / 2;
-                toastPosY = (this.$container.height() / 2) - toastHeight / 2;
-
-                if (toast.offset) {
-                    toastPosX += offsetX;
-                    toastPosY += offsetY;
-                }
-
-            } else if (placement === 'center-right') {
-
-                toastPosX = this.$container.width() - toastWidth;
-                toastPosY = (this.$container.height() / 2) - toastHeight / 2;
-
-                if (toast.offset) {
-                    toastPosX += -offsetX;
-                    toastPosY += offsetY;
-                } else {
-                    toastPosX += -30;
-                }
-
-            } else if (placement === 'bottom-left') {
-
-                toastPosX = 0;
-                toastPosY = this.$container.height() - toastHeight;
-
-                if (toast.offset) {
-                    toastPosX += offsetX;
-                    toastPosY += -offsetY;
-                } else {
-                    toastPosX += 30;
-                    toastPosY += -30;
-                }
-
-            } else if (placement === 'bottom-center') {
-
-                toastPosX = (this.$container.width() / 2) - toastWidth / 2;
-                toastPosY = this.$container.height() - toastHeight;
-
-                if (toast.offset) {
-                    toastPosX += offsetX;
-                    toastPosY += -offsetY;
-                } else {
-                    toastPosY += -30;
-                }
-
-            } else if (placement === 'bottom-right') {
-
-                toastPosX = this.$container.width() - toastWidth
-                toastPosY = this.$container.height() - toastHeight;
-
-                if (toast.offset) {
-                    toastPosX += -offsetX;
-                    toastPosY += -offsetY;
-                } else {
-                    toastPosX += -30;
-                    toastPosY += -30;
-                }
-            }
-
-        } else {
-
-            toastPosX = placementX;
-            toastPosY = placementY;
-        }
-
-        toast.$el.css({
-            position: 'absolute',
-            top: '0px',
-            left: '0px',
-            transform: 'translate3d('+toastPosX+'px, '+toastPosY+'px, 0px)',
-            'will-change': 'transform'
-        });
-
-        this.log('Toast width: '+toastWidth+'px');
-        this.log('Toast height: '+toastHeight+'px');
-        this.log('Toast position Y: '+toastPosX+'px');
-        this.log('Toast position x: '+toastPosY+'px');
-    }
-
-    // Show
-    show(toast) {
-
-        this.$container.append(toast.$el);
-        this.bindEvents(toast);
-        this.setPosition(toast);
-
-        if (toast.animation) {
-
-            toast.$el.addClass('show');
-            toast.$inner.addClass(toast.animationSpeed);
-            toast.$inner.animateCss(toast.animationIn);
-
-        } else {
-
-            toast.$el.addClass('show');
-        }
-
-        if (toast.dismiss) {
-
-            setTimeout(() => {
-                this.close(toast);
-            }, toast.dismiss * 1000);
-        }
-
-        this.onShow(toast);
-    }
-
-    // Close
-    close(toast) {
-
-        if (toast.animation && !toast.$inner.hasClass('animated')) {
-
-            toast.$el.removeClass('show');
-            toast.$inner.animateCss(toast.animationOut, () => {
-
-                toast.$el.remove();
-
-                this.toasts = $.grep(this.toasts, function(item) {
-                    return item.uuid != toast.uuid;
-                });
-
-                this.processQueue();
-                this.onClose(toast);
-            });
-
-        } else {
-
-            toast.$el.remove();
-
-            this.toasts = $.grep(this.toasts, function(item) {
-                return item.uuid != toast.uuid;
-            });
-
-            this.processQueue();
-            this.onClose(toast);
-        }
-    }
-
-    // Initialize callback
-    onInitialize() {
-
-        let onInitialize = this.onInitialize;
-
-        if (typeof onInitialize === 'function') {
-
-            onInitialize.call(this.container);
-        }
-    }
-
-    // Destroy callback
-    onDestroy() {
-
-        let onDestroy = this.onDestroy;
-
-        if (typeof onDestroy === 'function') {
-
-            onDestroy.call(this.container);
-        }
-    }
-
-    // Init callback
-    onInit(toast) {
-
-        let onInit = toast.onInit;
-
-        if (typeof onInit === 'function') {
-
-            onInit.call(toast);
-        }
-    }
-
-    // Show callback
-    onShow(toast) {
-
-        let onShow = toast.onShow;
-
-        if (typeof onShow === 'function') {
-
-            onShow.call(toast);
-        }
-    }
-
-    // Close callback
-    onClose(toast) {
-
-        let onClose = toast.onClose;
-
-        if (typeof onClose === 'function') {
-
-            onClose.call(toast);
-        }
-    }
-
-    // Debug log
-    log(...args) {
-
-        if (this.debug) {
-
-            if (typeof this.debug === 'function') {
-                this.debug(...args);
-            } else {
-                console.log(...args);
-            }
-        }
-    }
-
-    // Render template
-    _renderTemplate(toast) {
-
-        let faNameSpace = this.faPro ? 'far' : 'fas';
-        let content = '';
-        let header = '';
-        let body = '';
-        let bodyCloseBtn = '';
-
-        if (typeof toast.content === 'function') {
-
-            content = toast.content();
-
-        } else {
-
-            content = toast.content;
-        }
-
-        if (toast.header) {
-
-            header = `
-                <div class="toast-header">
-
-                    <span>${toast.title}</span>
-
-                    <button type="button" data-toast-close>
-                        <i class="${faNameSpace} fa-times icon"></i>
-                    </button>
-
-                </div>
-            `;
-
-        } else {
-
-            bodyCloseBtn = `
-                <button type="button" data-toast-close>
-
-                    <i class="${faNameSpace} fa-times icon"></i>
-
-                </button>
-            `;
-        }
-
-        body = `
-            <div class="toast-body">
-
-                <span>${content}</span>
-                ${bodyCloseBtn}
-
-            </div>
-        `;
-
-        return `
-            <div class="toast toast-${toast.size} toast-${toast.theme}" role="alert" id="${toast.uuid}">
-
-                <div class="toast-inner">
-
-                    ${header}
-                    ${body}
-
-                </div>
-
-            </div>
-        `;
-    }
-
-    static _jQueryInterface(config) {
-
-        return this.each(function() {
-
-            let data = $(this).data(DATA_KEY);
-            const _config = typeof config === 'object' && config;
-
-            if (!data) {
-                data = new Toast(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] = Toast._jQueryInterface;
-    $.fn[NAME].Constructor = Toast;
-
-    $.fn[NAME].noConflict = () => {
-
-      $.fn[NAME] = JQUERY_NO_CONFLICT;
-
-      return Toast._jQueryInterface;
-    }
-
-    $.fn[NAME].defaults = {
-        title: '',
-        content: '',
-        template: '',
-        theme: 'dark',
-        placement: 'bottom-center',
-        placementX: null,
-        placementY: null,
-        animation: true,
-        animationIn: 'slideInUp',
-        animationOut: 'slideOutDown',
-        animationSpeed: 'faster',
-        offset: null,
-        size: null,
-        dismiss: 3,
-        header: false,
-        faPro: false,
-        debug: false,
-        onInitialize: null,
-        onDestroy: null,
-        onInit: null,
-        onDestroy: null,
-        onShow: null,
-        onClose: null
-    }
-}
-
-export default Toast;