@finqu/cool 1.2.29 → 1.3.0

package/js/src/dialog.js

@@ -1,579 +0,0 @@
-import 'jquery';
-import { debounce, touchEvents } from './util/index';
-
-const NAME = 'coolDialog';
-const DATA_KEY = 'plugin_coolDialog';
-
-class Dialog {
-
-    constructor(container, opts) {
-
-        this.settings = {};
-
-        if (window.Cool.settings.dialog) {
-
-            $.extend(true, this.settings, $.fn[NAME].defaults, window.Cool.settings.dialog, 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.dialogs = [];
-        this.onInitialize = this.settings.onInitialize;
-        this.onDestroy = this.settings.onDestroy;
-    }
-
-    // Init dialog
-    init(opts) {
-
-        let settings = {};
-
-        $.extend(true, settings, this.settings, opts);
-
-        let dialog = this.buildDialog(settings);
-
-        this.show(dialog);
-        this.bindEvents(dialog);
-        this.onInit(dialog);
-
-        return dialog;
-    }
-
-    // Remove plugin instance completely
-    destroy() {
-
-        this.$container.removeData(DATA_KEY);
-        this.onDestroy();
-    }
-
-    // Build dialog
-    buildDialog(settings) {
-
-        let self = this;
-        let dialog = {
-            uuid: 'dialog-'+this.generateUUID(),
-            title: settings.title,
-            template: settings.template,
-            body: settings.body,
-            footer: settings.footer,
-            size: settings.size,
-            classes: settings.classes,
-            centered: settings.centered,
-            backdrop: settings.backdrop,
-            preventScroll: settings.preventScroll,
-            closeBtn: settings.closeBtn,
-            animation: settings.animation,
-            animationIn: settings.animationIn,
-            animationOut: settings.animationOut,
-            animationSpeed: settings.animationSpeed,
-            callbacks: settings.callbacks,
-            maxBodyHeight: settings.maxBodyHeight,
-            overflowVisible: settings.overflowVisible,
-            actions: settings.actions,
-            onInit: settings.onInit,
-            onShow: settings.onShow,
-            onClose: settings.onClose
-        };
-
-        if (dialog.maxBodyHeight == null) {
-
-            dialog.maxBodyHeight = window.innerHeight - 200;
-        }
-
-        if (typeof dialog.template === 'function') {
-
-            dialog.$el = $(dialog.template());
-
-        } else {
-
-            dialog.$el = $(this._renderTemplate(dialog));
-        }
-
-        dialog.show = function() {
-            self.show(dialog);
-        };
-
-        dialog.close = function() {
-            self.close(dialog);
-        };
-
-        this.log(dialog);
-        this.dialogs.push(dialog);
-
-        return dialog;
-    }
-
-    // Bind events that trigger methods
-    bindEvents(dialog) {
-
-        let self = this;
-
-        dialog.$el.on('click', '[data-dialog-close]', function (e) {
-
-            dialog.$el.trigger('dialog.close');
-
-            if (typeof dialog.callbacks.close === 'function') {
-
-                dialog.callbacks.close.call(self, function () {
-                    self.close(dialog)
-                }, dialog);
-
-            } else {
-
-                self.close(dialog);
-            }
-        });
-
-        dialog.$el.on('click', '[data-dialog-remove]', function (e) {
-
-            dialog.$el.trigger('dialog.remove');
-
-            if (typeof dialog.callbacks.remove === 'function') {
-
-                dialog.callbacks.remove.call(self, function () {
-                    self.close(dialog)
-                }, dialog);
-            }
-        });
-
-        dialog.$el.on('click', '[data-dialog-confirm]', debounce(function (e) {
-
-            dialog.$el.trigger('dialog.close');
-
-            if (typeof dialog.callbacks.confirm === 'function') {
-
-                dialog.callbacks.confirm.call(self, function () {
-                    self.close(dialog)
-                }, dialog);
-
-            } else {
-
-                self.close(dialog);
-            }
-        }));
-    }
-
-    // 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);
-        });
-    }
-
-    // Show
-    show(dialog) {
-
-        if (!this.$container.hasClass('has-dialogs')) {
-            this.$container.addClass('has-dialogs');
-        }
-
-        if (dialog.preventScroll && !this.$container.hasClass('dialog-prevent-scroll')) {
-            this.$container.addClass('dialog-prevent-scroll');
-        }
-
-        if (this.dialogs.length > 1) {
-
-            let $prevDialog = $(this.dialogs).eq(-2)[0].$el;
-            let zIndex = parseInt($prevDialog.css('z-index'), 10) + 1;
-
-            dialog.$el.css('z-index', zIndex);
-
-            $prevDialog.css({
-                'transition': 'opacity 0.3s',
-                'opacity': 0,
-                'visibility': 'visible'
-            });
-        }
-
-        if (dialog.backdrop && $('.dialog-backdrop').length < 1) {
-
-            this.$container.append('<div class="dialog-backdrop"></div>');
-
-            let checkForBackdrop = setInterval(() => {
-
-                if (this.dialogs.length == 0 && $('.dialog-backdrop').length) {
-
-                    $('.dialog-backdrop').remove();
-                    clearInterval(checkForBackdrop);
-                }
-
-            }, 100);
-        }
-
-        this.$container.append(dialog.$el);
-
-        if (dialog.animation) {
-            dialog.$el.find('.dialog-content').addClass(dialog.animationSpeed).animateCss(dialog.animationIn);
-        }
-
-        this.onShow(dialog);
-    }
-
-    // Close
-    close(dialog) {
-
-        let $prevDialog = null;
-
-        if (this.dialogs.length > 1) {
-            $prevDialog = $(this.dialogs).eq(-2)[0].$el;
-        }
-
-        if ($('.dialog[data-dialog-backdrop="true"]').length === 0 && $('.dialog-backdrop').length) {
-            $('.dialog-backdrop').remove();
-        }
-
-        if (dialog.animation) {
-
-            dialog.$el.find('.dialog-content').animateCss(dialog.animationOut, () => {
-
-                dialog.$el.remove();
-
-                this.dialogs = $.grep(this.dialogs, function(item) {
-                    return item.uuid != dialog.uuid;
-                });
-
-                if (this.dialogs.length == 0) {
-
-                    this.$container.removeClass('has-dialogs');
-
-                    if (this.$container.hasClass('dialog-prevent-scroll')) {
-                        this.$container.removeClass('dialog-prevent-scroll');
-                    }
-
-                } else {
-
-                    if ($prevDialog) {
-                        $prevDialog.css('opacity', 1);
-                    }
-                }
-            });
-
-        } else {
-
-            dialog.$el.remove();
-
-            this.dialogs = $.grep(this.dialogs, function(item) {
-                return item.uuid != dialog.uuid;
-            });
-
-            if (this.dialogs.length == 0) {
-
-                this.$container.removeClass('has-dialogs');
-
-                if (this.$container.hasClass('dialog-prevent-scroll')) {
-                    this.$container.removeClass('dialog-prevent-scroll');
-                }
-
-            } else {
-
-                if ($prevDialog) {
-                    $prevDialog.css('opacity', 1);
-                }
-            }
-        }
-
-        this.onClose(dialog);
-    }
-
-    // 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(dialog) {
-
-        let onInit = dialog.onInit;
-
-        if (typeof onInit === 'function') {
-
-            onInit.call(dialog);
-        }
-    }
-
-    // Show callback
-    onShow(dialog) {
-
-        let onShow = dialog.onShow;
-
-        if (typeof onShow === 'function') {
-
-            onShow.call(dialog);
-        }
-    }
-
-    // Close callback
-    onClose(dialog) {
-
-        let onClose = dialog.onClose;
-
-        if (typeof onClose === 'function') {
-
-            onClose.call(dialog);
-        }
-    }
-
-    // Debug log
-    log(...args) {
-
-        if (this.debug) {
-
-            if (typeof this.debug === 'function') {
-                this.debug(...args);
-            } else {
-                console.log(...args);
-            }
-        }
-    }
-
-    // Render footer
-    _renderFooter(dialog) {
-
-        let footer = '';
-
-        if (typeof dialog.footer === 'function') {
-
-            footer = dialog.footer();
-
-        } else if (dialog.footer !== '' && dialog.footer !== false && dialog.footer !== true) {
-
-            footer = dialog.footer;
-
-        } else if (dialog.footer === true) {
-
-            let btnCancel = '';
-            let btnRemove = '';
-            let btnConfirm = '';
-            let btnStyle = '';
-            let btnClasses = '';
-            let btnAttrs = '';
-
-            if (dialog.actions.close.visible) {
-
-                btnStyle = dialog.actions.close.primary ? 'btn-primary' : 'btn-secondary';
-                btnClasses = dialog.actions.close.classes ? ' '+dialog.actions.close.classes : '';
-                btnAttrs = dialog.actions.close.attrs ? ' '+dialog.actions.close.attrs : '';
-                btnCancel = `
-                    <button type="button" class="btn ${btnStyle}${btnClasses}"${btnAttrs} data-dialog-close>
-                        ${dialog.actions.close.content}
-                    </button>
-                `;
-            }
-
-            if (dialog.actions.remove.visible) {
-
-                btnStyle = 'btn-remove';
-                btnClasses = dialog.actions.remove.classes ? ' '+dialog.actions.remove.classes : '';
-                btnAttrs = dialog.actions.remove.attrs ? ' '+dialog.actions.remove.attrs : '';
-                btnRemove = `
-                    <button type="button" class="btn ${btnStyle}${btnClasses}"${btnAttrs} data-dialog-remove>
-                        ${dialog.actions.remove.content}
-                    </button>
-                `;
-            }
-
-            if (dialog.actions.confirm.visible) {
-
-                btnStyle = dialog.actions.confirm.primary ? 'btn-primary' : 'btn-secondary';
-                btnClasses = dialog.actions.confirm.classes ? ' '+dialog.actions.confirm.classes : '';
-                btnAttrs = dialog.actions.confirm.attrs ? ' '+dialog.actions.confirm.attrs : '';
-                btnConfirm = `
-                    <button type="button" class="btn ${btnStyle}${btnClasses}"${btnAttrs} data-dialog-confirm>
-                        ${dialog.actions.confirm.content}
-                    </button>
-                `;
-            }
-
-            footer = `
-                ${btnRemove}
-                <div class="spacer"></div>
-                ${btnCancel}
-                ${btnConfirm}
-            `;
-
-        } else {
-
-            return footer;
-        }
-
-        if (footer) {
-
-            return `
-                <div class="dialog-footer">
-                    ${footer}
-                </div>
-            `;
-        }
-    }
-
-    // Render template
-    _renderTemplate(dialog) {
-
-        let faNameSpace = this.faPro ? 'far' : 'fas';
-        let classes = dialog.classes ? ' '+dialog.classes : '';
-        let centered = dialog.centered ? ' dialog-centered' : '';
-        let size = dialog.size ? ' dialog-'+dialog.size : '';
-        let overFlowVisible = dialog.overflowVisible ? ' dialog-overflow-visible' : '';
-        let uuid = ' data-dialog-uuid="'+dialog.uuid+'"';
-        let backdrop = dialog.backdrop ? ' data-dialog-backdrop="true"' : ' data-dialog-backdrop="false"';
-        let title = dialog.title;
-        let closeBtn = dialog.closeBtn ? `<button type="button" data-dialog-close><i class="${faNameSpace} fa-times icon"></i></button>` : '';
-        let maxBodyHeight = dialog.maxBodyHeight ? ' style="max-height: '+dialog.maxBodyHeight+'px"' : '';
-        let body = '';
-        let footer = this._renderFooter(dialog);
-
-        if (typeof dialog.body === 'function') {
-
-            body = dialog.body();
-
-        } else {
-
-            body = dialog.body;
-        }
-
-        return `
-            <div class="dialog${classes}${centered}${size}${overFlowVisible}"${uuid}${backdrop}>
-
-                <div class="dialog-container">
-
-                    <div class="dialog-content">
-
-                        <div class="dialog-header">
-
-                            <span class="dialog-title">
-                                ${title}
-                            </span>
-
-                            ${closeBtn}
-
-                        </div>
-
-                        <div class="dialog-body"${maxBodyHeight}>
-
-                            ${body}
-
-                        </div>
-
-                        ${footer}
-
-                    </div>
-
-                </div>
-
-            </div>
-        `;
-    }
-
-    static _jQueryInterface(config) {
-
-        let data = $(this).data(DATA_KEY);
-        const _config = typeof config === 'object' && config;
-
-        if (!data) {
-            data = new Dialog(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] = Dialog._jQueryInterface;
-    $.fn[NAME].Constructor = Dialog;
-
-    $.fn[NAME].noConflict = () => {
-
-      $.fn[NAME] = JQUERY_NO_CONFLICT;
-
-      return Dialog._jQueryInterface;
-    }
-
-    $.fn[NAME].defaults = {
-        title: '',
-        template: '',
-        body: '',
-        footer: true,
-        size: '', // sm/lg
-        classes: '',
-        centered: true,
-        backdrop: true,
-        preventScroll: true,
-        closeBtn: true,
-        animation: true,
-        animationIn: 'zoomIn',
-        animationOut: 'fadeOut',
-        animationSpeed: 'fastest',
-        callbacks: {},
-        maxBodyHeight: null,
-        overflowVisible: false,
-        faPro: false,
-        debug: true,
-        onInitialize: null,
-        onDestroy: null,
-        onInit: null,
-        onDestroy: null,
-        onShow: null,
-        onClose: null,
-        actions: {
-            close: {
-                primary: false,
-                visible: true,
-                content: 'Close',
-                classes: '',
-                attrs: ''
-            },
-            remove: {
-                primary: false,
-                visible: true,
-                content: 'Remove',
-                classes: '',
-                attrs: ''
-            },
-            confirm: {
-                primary: true,
-                visible: true,
-                content: 'Confirm',
-                classes: '',
-                attrs: ''
-            }
-        }
-    }
-}
-
-export default Dialog;