@finqu/cool 1.0.0

package/js/src/dialog.js

@@ -0,0 +1,570 @@
+import 'jquery';
+import { debounce } 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,
+            actions: settings.actions,
+            onInit: settings.onInit,
+            onShow: settings.onShow,
+            onClose: settings.onClose
+        };
+
+        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 = dialog.actions.remove.primary ? 'btn-primary' : 'btn-secondary';
+                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 = `
+                ${btnCancel}
+                ${btnRemove}
+                ${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 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}"${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: window.innerHeight - 200,
+        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;