@finqu/cool 1.0.0

package/js/src/toast.js

@@ -0,0 +1,581 @@
+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;