/* global define */ /* ================================================ * Make use of Bootstrap's modal more monkey-friendly. * * For Bootstrap 3. * * javanoob@hotmail.com * * https://github.com/nakupanda/bootstrap3-dialog * * Licensed under The MIT License. * ================================================ */ (function (root, factory) { "use strict"; // CommonJS module is defined if (typeof module !== 'undefined' && module.exports) { module.exports = factory(require('jquery'), require('bootstrap')); } // AMD module is defined else if (typeof define === "function" && define.amd) { define("bootstrap-dialog", ["jquery", "bootstrap"], function ($) { return factory($); }); } else { // planted over the root! root.BootstrapDialog = factory(root.jQuery); } }(this ? this : window, function ($) { "use strict"; /* ================================================ * Definition of BootstrapDialogModal. * Extend Bootstrap Modal and override some functions. * BootstrapDialogModal === Modified Modal. * ================================================ */ var Modal = $.fn.modal.Constructor; var BootstrapDialogModal = function (element, options) { if (/4\.1\.\d+/.test($.fn.modal.Constructor.VERSION)) { //FIXME for BootstrapV4 return new Modal(element, options); } else { Modal.call(this, element, options); } }; BootstrapDialogModal.getModalVersion = function () { var version = null; if (typeof $.fn.modal.Constructor.VERSION === 'undefined') { version = 'v3.1'; } else if (/3\.2\.\d+/.test($.fn.modal.Constructor.VERSION)) { version = 'v3.2'; } else if (/3\.3\.[1,2]/.test($.fn.modal.Constructor.VERSION)) { version = 'v3.3'; // v3.3.1, v3.3.2 } else if (/4\.\d\.\d+/.test($.fn.modal.Constructor.VERSION)) { //FIXME for BootstrapV4 version = 'v4.1'; } else { version = 'v3.3.4'; } return version; }; BootstrapDialogModal.ORIGINAL_BODY_PADDING = parseInt(($('body').css('padding-right') || 0), 10); BootstrapDialogModal.METHODS_TO_OVERRIDE = {}; BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.1'] = {}; BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.2'] = { hide: function (e) { if (e) { e.preventDefault(); } e = $.Event('hide.bs.modal'); this.$element.trigger(e); if (!this.isShown || e.isDefaultPrevented()) { return; } this.isShown = false; // Remove css class 'modal-open' when the last opened dialog is closing. var openedDialogs = this.getGlobalOpenedDialogs(); if (openedDialogs.length === 0) { this.$body.removeClass('modal-open'); } this.resetScrollbar(); this.escape(); $(document).off('focusin.bs.modal'); this.$element .removeClass('in') .attr('aria-hidden', true) .off('click.dismiss.bs.modal'); $.support.transition && this.$element.hasClass('fade') ? this.$element .one('bsTransitionEnd', $.proxy(this.hideModal, this)) .emulateTransitionEnd(300) : this.hideModal(); } }; BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3'] = { /** * Overrided. * * @returns {undefined} */ setScrollbar: function () { var bodyPad = BootstrapDialogModal.ORIGINAL_BODY_PADDING; if (this.bodyIsOverflowing) { this.$body.css('padding-right', bodyPad + this.scrollbarWidth); } }, /** * Overrided. * * @returns {undefined} */ resetScrollbar: function () { var openedDialogs = this.getGlobalOpenedDialogs(); if (openedDialogs.length === 0) { this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING); } }, /** * Overrided. * * @returns {undefined} */ hideModal: function () { this.$element.hide(); this.backdrop($.proxy(function () { var openedDialogs = this.getGlobalOpenedDialogs(); if (openedDialogs.length === 0) { this.$body.removeClass('modal-open'); } this.resetAdjustments(); this.resetScrollbar(); this.$element.trigger('hidden.bs.modal'); }, this)); } }; BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3.4'] = $.extend({}, BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3']); BootstrapDialogModal.METHODS_TO_OVERRIDE['v4.1'] = $.extend({}, BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3']); //FIXME for BootstrapV4 BootstrapDialogModal.prototype = { constructor: BootstrapDialogModal, /** * New function, to get the dialogs that opened by BootstrapDialog. * * @returns {undefined} */ getGlobalOpenedDialogs: function () { var openedDialogs = []; $.each(BootstrapDialog.dialogs, function (id, dialogInstance) { if (dialogInstance.isRealized() && dialogInstance.isOpened()) { openedDialogs.push(dialogInstance); } }); return openedDialogs; } }; // Add compatible methods. BootstrapDialogModal.prototype = $.extend(BootstrapDialogModal.prototype, Modal.prototype, BootstrapDialogModal.METHODS_TO_OVERRIDE[BootstrapDialogModal.getModalVersion()]); /* ================================================ * Definition of BootstrapDialog. * ================================================ */ var BootstrapDialog = function (options) { this.defaultOptions = $.extend(true, { id: BootstrapDialog.newGuid(), buttons: [], data: {}, onshow: null, onshown: null, onhide: null, onhidden: null }, BootstrapDialog.defaultOptions); this.indexedButtons = {}; this.registeredButtonHotkeys = {}; this.draggableData = { isMouseDown: false, mouseOffset: {} }; this.realized = false; this.opened = false; this.initOptions(options); this.holdThisInstance(); }; BootstrapDialog.BootstrapDialogModal = BootstrapDialogModal; /** * Some constants. */ BootstrapDialog.NAMESPACE = 'bootstrap-dialog'; BootstrapDialog.TYPE_DEFAULT = 'type-default'; BootstrapDialog.TYPE_INFO = 'type-info'; BootstrapDialog.TYPE_PRIMARY = 'type-primary'; BootstrapDialog.TYPE_SECONDARY = 'type-secondary'; BootstrapDialog.TYPE_SUCCESS = 'type-success'; BootstrapDialog.TYPE_WARNING = 'type-warning'; BootstrapDialog.TYPE_DANGER = 'type-danger'; BootstrapDialog.TYPE_DARK = 'type-dark'; BootstrapDialog.TYPE_LIGHT = 'type-light'; BootstrapDialog.DEFAULT_TEXTS = {}; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DEFAULT] = 'Default'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_INFO] = 'Information'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_PRIMARY] = 'Primary'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SECONDARY] = 'Secondary'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SUCCESS] = 'Success'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_WARNING] = 'Warning'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DANGER] = 'Danger'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DARK] = 'Dark'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_LIGHT] = 'Light'; BootstrapDialog.DEFAULT_TEXTS['OK'] = 'OK'; BootstrapDialog.DEFAULT_TEXTS['CANCEL'] = 'Cancel'; BootstrapDialog.DEFAULT_TEXTS['CONFIRM'] = 'Confirmation'; BootstrapDialog.SIZE_NORMAL = 'size-normal'; BootstrapDialog.SIZE_SMALL = 'size-small'; BootstrapDialog.SIZE_WIDE = 'size-wide'; // size-wide is equal to modal-lg BootstrapDialog.SIZE_EXTRAWIDE = 'size-extrawide'; // size-wide is equal to modal-lg BootstrapDialog.SIZE_LARGE = 'size-large'; BootstrapDialog.BUTTON_SIZES = {}; BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_NORMAL] = ''; BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_SMALL] = 'btn-small'; BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_WIDE] = 'btn-block'; BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_LARGE] = 'btn-lg'; BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk'; BootstrapDialog.BUTTONS_ORDER_CANCEL_OK = 'btns-order-cancel-ok'; BootstrapDialog.BUTTONS_ORDER_OK_CANCEL = 'btns-order-ok-cancel'; BootstrapDialog.Z_INDEX_BACKDROP = 1040; BootstrapDialog.Z_INDEX_MODAL = 1050; /** * Default options. */ BootstrapDialog.defaultOptions = { type: BootstrapDialog.TYPE_PRIMARY, size: BootstrapDialog.SIZE_NORMAL, cssClass: '', title: null, message: null, nl2br: true, closable: true, closeByBackdrop: true, closeByKeyboard: true, closeIcon: '×', spinicon: BootstrapDialog.ICON_SPINNER, autodestroy: true, draggable: false, animate: true, description: '', tabindex: -1, btnsOrder: BootstrapDialog.BUTTONS_ORDER_CANCEL_OK }; /** * Config default options. */ BootstrapDialog.configDefaultOptions = function (options) { BootstrapDialog.defaultOptions = $.extend(true, BootstrapDialog.defaultOptions, options); }; /** * Open / Close all created dialogs all at once. */ BootstrapDialog.dialogs = {}; BootstrapDialog.openAll = function () { $.each(BootstrapDialog.dialogs, function (id, dialogInstance) { dialogInstance.open(); }); }; BootstrapDialog.closeAll = function () { $.each(BootstrapDialog.dialogs, function (id, dialogInstance) { dialogInstance.close(); }); }; /** * Get dialog instance by given id. * * @returns dialog instance */ BootstrapDialog.getDialog = function (id) { var dialog = null; if (typeof BootstrapDialog.dialogs[id] !== 'undefined') { dialog = BootstrapDialog.dialogs[id]; } return dialog; }; /** * Set a dialog. * * @returns the dialog that has just been set. */ BootstrapDialog.setDialog = function (dialog) { BootstrapDialog.dialogs[dialog.getId()] = dialog; return dialog; }; /** * Alias of BootstrapDialog.setDialog(dialog) * * @param {type} dialog * @returns {unresolved} */ BootstrapDialog.addDialog = function (dialog) { return BootstrapDialog.setDialog(dialog); }; /** * Move focus to next visible dialog. */ BootstrapDialog.moveFocus = function () { var lastDialogInstance = null; $.each(BootstrapDialog.dialogs, function (id, dialogInstance) { if (dialogInstance.isRealized() && dialogInstance.isOpened()) { lastDialogInstance = dialogInstance; } }); if (lastDialogInstance !== null) { lastDialogInstance.getModal().focus(); } }; BootstrapDialog.METHODS_TO_OVERRIDE = {}; BootstrapDialog.METHODS_TO_OVERRIDE['v3.1'] = { /** * To make multiple opened dialogs look better. * * Will be removed in later version, after Bootstrap Modal >= 3.3.0, updating z-index is unnecessary. */ updateZIndex: function () { if (this.isOpened()) { var zIndexBackdrop = BootstrapDialog.Z_INDEX_BACKDROP; var zIndexModal = BootstrapDialog.Z_INDEX_MODAL; var dialogCount = 0; $.each(BootstrapDialog.dialogs, function (dialogId, dialogInstance) { if (dialogInstance.isRealized() && dialogInstance.isOpened()) { dialogCount++; } }); var $modal = this.getModal(); var $backdrop = this.getModalBackdrop($modal); //FIXME for BootstrapV4 $modal.css('z-index', zIndexModal + (dialogCount - 1) * 20); $backdrop.css('z-index', zIndexBackdrop + (dialogCount - 1) * 20); } return this; }, open: function () { !this.isRealized() && this.realize(); this.getModal().modal('show'); this.updateZIndex(); return this; } }; BootstrapDialog.METHODS_TO_OVERRIDE['v3.2'] = { updateZIndex: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['updateZIndex'], open: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['open'] }; BootstrapDialog.METHODS_TO_OVERRIDE['v3.3'] = {}; BootstrapDialog.METHODS_TO_OVERRIDE['v3.3.4'] = $.extend({}, BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']); BootstrapDialog.METHODS_TO_OVERRIDE['v4.0'] = { //FIXME for BootstrapV4 getModalBackdrop: function ($modal) { return $($modal.data('bs.modal')._backdrop); }, updateZIndex: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['updateZIndex'], open: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['open'], getModalForBootstrapDialogModal: function () { return this.getModal().get(0); } }; BootstrapDialog.METHODS_TO_OVERRIDE['v4.1'] = { //FIXME for BootstrapV4 getModalBackdrop: function ($modal) { return $($modal.data('bs.modal')._backdrop); }, updateZIndex: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['updateZIndex'], open: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['open'], getModalForBootstrapDialogModal: function () { return this.getModal().get(0); } }; BootstrapDialog.prototype = { constructor: BootstrapDialog, initOptions: function (options) { this.options = $.extend(true, this.defaultOptions, options); return this; }, holdThisInstance: function () { BootstrapDialog.addDialog(this); return this; }, initModalStuff: function () { this.setModal(this.createModal()) .setModalDialog(this.createModalDialog()) .setModalContent(this.createModalContent()) .setModalHeader(this.createModalHeader()) .setModalBody(this.createModalBody()) .setModalFooter(this.createModalFooter()); this.getModal().append(this.getModalDialog()); this.getModalDialog().append(this.getModalContent()); this.getModalContent() .append(this.getModalHeader()) .append(this.getModalBody()) .append(this.getModalFooter()); return this; }, createModal: function () { var $modal = $(''); $modal.prop('id', this.getId()); $modal.attr('aria-labelledby', this.getId() + '_title'); return $modal; }, getModal: function () { return this.$modal; }, setModal: function ($modal) { this.$modal = $modal; return this; }, getModalBackdrop: function ($modal) { //FIXME for BootstrapV4 return $modal.data('bs.modal').$backdrop; }, getModalForBootstrapDialogModal: function () { //FIXME for BootstrapV4 return this.getModal(); }, createModalDialog: function () { return $(''); }, getModalDialog: function () { return this.$modalDialog; }, setModalDialog: function ($modalDialog) { this.$modalDialog = $modalDialog; return this; }, createModalContent: function () { return $(''); }, getModalContent: function () { return this.$modalContent; }, setModalContent: function ($modalContent) { this.$modalContent = $modalContent; return this; }, createModalHeader: function () { return $(''); }, getModalHeader: function () { return this.$modalHeader; }, setModalHeader: function ($modalHeader) { this.$modalHeader = $modalHeader; return this; }, createModalBody: function () { return $(''); }, getModalBody: function () { return this.$modalBody; }, setModalBody: function ($modalBody) { this.$modalBody = $modalBody; return this; }, createModalFooter: function () { return $(''); }, getModalFooter: function () { return this.$modalFooter; }, setModalFooter: function ($modalFooter) { this.$modalFooter = $modalFooter; return this; }, createDynamicContent: function (rawContent) { var content = null; if (typeof rawContent === 'function') { content = rawContent.call(rawContent, this); } else { content = rawContent; } if (typeof content === 'string') { content = this.formatStringContent(content); } return content; }, formatStringContent: function (content) { if (this.options.nl2br) { return content.replace(/\r\n/g, '
').replace(/[\r\n]/g, '
'); } return content; }, setData: function (key, value) { this.options.data[key] = value; return this; }, getData: function (key) { return this.options.data[key]; }, setId: function (id) { this.options.id = id; return this; }, getId: function () { return this.options.id; }, getType: function () { return this.options.type; }, setType: function (type) { this.options.type = type; this.updateType(); return this; }, updateType: function () { if (this.isRealized()) { var types = [BootstrapDialog.TYPE_DEFAULT, BootstrapDialog.TYPE_INFO, BootstrapDialog.TYPE_PRIMARY, BootstrapDialog.TYPE_SECONDARY, BootstrapDialog.TYPE_SUCCESS, BootstrapDialog.TYPE_WARNING, BootstrapDialog.TYPE_DARK, BootstrapDialog.TYPE_LIGHT, BootstrapDialog.TYPE_DANGER]; this.getModal().removeClass(types.join(' ')).addClass(this.getType()); } return this; }, getSize: function () { return this.options.size; }, setSize: function (size) { this.options.size = size; this.updateSize(); return this; }, updateSize: function () { if (this.isRealized()) { var dialog = this; // Dialog size this.getModal().removeClass(BootstrapDialog.SIZE_NORMAL) .removeClass(BootstrapDialog.SIZE_SMALL) .removeClass(BootstrapDialog.SIZE_WIDE) .removeClass(BootstrapDialog.SIZE_EXTRAWIDE) .removeClass(BootstrapDialog.SIZE_LARGE); this.getModal().addClass(this.getSize()); // Smaller dialog. this.getModalDialog().removeClass('modal-sm'); if (this.getSize() === BootstrapDialog.SIZE_SMALL) { this.getModalDialog().addClass('modal-sm'); } // Wider dialog. this.getModalDialog().removeClass('modal-lg'); if (this.getSize() === BootstrapDialog.SIZE_WIDE) { this.getModalDialog().addClass('modal-lg'); } // Extra Wide Dialog. this.getModalDialog().removeClass('modal-xl'); if (this.getSize() === BootstrapDialog.SIZE_EXTRAWIDE) { this.getModalDialog().addClass('modal-xl'); } // Button size $.each(this.options.buttons, function (index, button) { var $button = dialog.getButton(button.id); var buttonSizes = ['btn-lg', 'btn-sm', 'btn-xs']; var sizeClassSpecified = false; if (typeof button['cssClass'] === 'string') { var btnClasses = button['cssClass'].split(' '); $.each(btnClasses, function (index, btnClass) { if ($.inArray(btnClass, buttonSizes) !== -1) { sizeClassSpecified = true; } }); } if (!sizeClassSpecified) { $button.removeClass(buttonSizes.join(' ')); $button.addClass(dialog.getButtonSize()); } }); } return this; }, getCssClass: function () { return this.options.cssClass; }, setCssClass: function (cssClass) { this.options.cssClass = cssClass; return this; }, getTitle: function () { return this.options.title; }, setTitle: function (title) { this.options.title = title; this.updateTitle(); return this; }, updateTitle: function () { if (this.isRealized()) { var title = this.getTitle() !== null ? this.createDynamicContent(this.getTitle()) : this.getDefaultText(); this.getModalHeader().find('.' + this.getNamespace('title')).html('').append(title).prop('id', this.getId() + '_title'); } return this; }, getMessage: function () { return this.options.message; }, setMessage: function (message) { this.options.message = message; this.updateMessage(); return this; }, updateMessage: function () { if (this.isRealized()) { var message = this.createDynamicContent(this.getMessage()); this.getModalBody().find('.' + this.getNamespace('message')).html('').append(message); } return this; }, isClosable: function () { return this.options.closable; }, setClosable: function (closable) { this.options.closable = closable; this.updateClosable(); return this; }, setCloseByBackdrop: function (closeByBackdrop) { this.options.closeByBackdrop = closeByBackdrop; return this; }, canCloseByBackdrop: function () { return this.options.closeByBackdrop; }, setCloseByKeyboard: function (closeByKeyboard) { this.options.closeByKeyboard = closeByKeyboard; return this; }, canCloseByKeyboard: function () { return this.options.closeByKeyboard; }, isAnimate: function () { return this.options.animate; }, setAnimate: function (animate) { this.options.animate = animate; return this; }, updateAnimate: function () { if (this.isRealized()) { this.getModal().toggleClass('fade', this.isAnimate()); } return this; }, getSpinicon: function () { return this.options.spinicon; }, setSpinicon: function (spinicon) { this.options.spinicon = spinicon; return this; }, addButton: function (button) { this.options.buttons.push(button); return this; }, addButtons: function (buttons) { var that = this; $.each(buttons, function (index, button) { that.addButton(button); }); return this; }, getButtons: function () { return this.options.buttons; }, setButtons: function (buttons) { this.options.buttons = buttons; this.updateButtons(); return this; }, /** * If there is id provided for a button option, it will be in dialog.indexedButtons list. * * In that case you can use dialog.getButton(id) to find the button. * * @param {type} id * @returns {undefined} */ getButton: function (id) { if (typeof this.indexedButtons[id] !== 'undefined') { return this.indexedButtons[id]; } return null; }, getButtonSize: function () { if (typeof BootstrapDialog.BUTTON_SIZES[this.getSize()] !== 'undefined') { return BootstrapDialog.BUTTON_SIZES[this.getSize()]; } return ''; }, updateButtons: function () { if (this.isRealized()) { if (this.getButtons().length === 0) { this.getModalFooter().hide(); } else { this.getModalFooter().show().closest('.modal-footer').append(this.createFooterButtons()); } } return this; }, isAutodestroy: function () { return this.options.autodestroy; }, setAutodestroy: function (autodestroy) { this.options.autodestroy = autodestroy; }, getDescription: function () { return this.options.description; }, setDescription: function (description) { this.options.description = description; return this; }, setTabindex: function (tabindex) { this.options.tabindex = tabindex; return this; }, getTabindex: function () { return this.options.tabindex; }, updateTabindex: function () { if (this.isRealized()) { this.getModal().attr('tabindex', this.getTabindex()); } return this; }, getDefaultText: function () { return BootstrapDialog.DEFAULT_TEXTS[this.getType()]; }, getNamespace: function (name) { return BootstrapDialog.NAMESPACE + '-' + name; }, createHeaderContent: function () { var $container = $('
'); $container.addClass(this.getNamespace('header')); // title $container.append(this.createTitleContent()); // Close button $container.append(this.createCloseButton()); return $container; }, createTitleContent: function () { var $title = $('
'); $title.addClass(this.getNamespace('title')); return $title; }, createCloseButton: function () { var $container = $('
'); $container.addClass(this.getNamespace('close-button')); var $icon = $(''); $icon.append(this.options.closeIcon); $container.append($icon); $container.on('click', { dialog: this }, function (event) { event.data.dialog.close(); }); return $container; }, createBodyContent: function () { var $container = $('
'); $container.addClass(this.getNamespace('body')); // Message $container.append(this.createMessageContent()); return $container; }, createMessageContent: function () { var $message = $('
'); $message.addClass(this.getNamespace('message')); return $message; }, createFooterContent: function () { var $container = $('
'); $container.addClass(this.getNamespace('footer')); return $container; }, createFooterButtons: function () { var that = this; var $container = that.$modalFooter;// $('
'); //$container.addClass(this.getNamespace('footer-buttons')); this.indexedButtons = {}; $.each(this.options.buttons, function (index, button) { if (!button.id) { button.id = BootstrapDialog.newGuid(); } var $button = that.createButton(button); that.indexedButtons[button.id] = $button; $container.append($button); }); return $container; }, createButton: function (button) { var $button = $(''); $button.prop('id', button.id); $button.data('button', button); // Icon if (typeof button.icon !== 'undefined' && $.trim(button.icon) !== '') { $button.append(this.createButtonIcon(button.icon)); } // Label if (typeof button.label !== 'undefined') { $button.append(button.label); } // title if (typeof button.title !== 'undefined') { $button.attr('title', button.title); } // Css class if (typeof button.cssClass !== 'undefined' && $.trim(button.cssClass) !== '') { $button.addClass(button.cssClass); } else { $button.addClass('btn-secondary'); } // Data attributes if (typeof button.data === 'object' && button.data.constructor === {}.constructor) { $.each(button.data, function (key, value) { $button.attr('data-' + key, value); }); } // Hotkey if (typeof button.hotkey !== 'undefined') { this.registeredButtonHotkeys[button.hotkey] = $button; } // Button on click $button.on('click', { dialog: this, $button: $button, button: button }, function (event) { var dialog = event.data.dialog; var $button = event.data.$button; var button = $button.data('button'); if (button.autospin) { $button.toggleSpin(true); } if (typeof button.action === 'function') { return button.action.call($button, dialog, event); } }); // Dynamically add extra functions to $button this.enhanceButton($button); //Initialize enabled or not if (typeof button.enabled !== 'undefined') { $button.toggleEnable(button.enabled); } $button.addClass("bootstrap4-dialog-button"); return $button; }, /** * Dynamically add extra functions to $button * * Using '$this' to reference 'this' is just for better readability. * * @param {type} $button * @returns {_L13.BootstrapDialog.prototype} */ enhanceButton: function ($button) { $button.dialog = this; // Enable / Disable $button.toggleEnable = function (enable) { var $this = this; if (typeof enable !== 'undefined') { $this.prop("disabled", !enable).toggleClass('disabled', !enable); } else { $this.prop("disabled", !$this.prop("disabled")); } return $this; }; $button.enable = function () { var $this = this; $this.toggleEnable(true); return $this; }; $button.disable = function () { var $this = this; $this.toggleEnable(false); return $this; }; // Icon spinning, helpful for indicating ajax loading status. $button.toggleSpin = function (spin) { var $this = this; var dialog = $this.dialog; var $icon = $this.find('.' + dialog.getNamespace('button-icon')); if (typeof spin === 'undefined') { spin = !($button.find('.icon-spin').length > 0); } if (spin) { $icon.hide(); $button.prepend(dialog.createButtonIcon(dialog.getSpinicon()).addClass('icon-spin')); } else { $icon.show(); $button.find('.icon-spin').remove(); } return $this; }; $button.spin = function () { var $this = this; $this.toggleSpin(true); return $this; }; $button.stopSpin = function () { var $this = this; $this.toggleSpin(false); return $this; }; return this; }, createButtonIcon: function (icon) { var $icon = $(''); $icon.addClass(this.getNamespace('button-icon')).addClass(icon); return $icon; }, /** * Invoke this only after the dialog is realized. * * @param {type} enable * @returns {undefined} */ enableButtons: function (enable) { $.each(this.indexedButtons, function (id, $button) { $button.toggleEnable(enable); }); return this; }, /** * Invoke this only after the dialog is realized. * * @returns {undefined} */ updateClosable: function () { if (this.isRealized()) { // Close button this.getModalHeader().find('.' + this.getNamespace('close-button')).toggle(this.isClosable()); } return this; }, /** * Set handler for modal event 'show.bs.modal'. * This is a setter! */ onShow: function (onshow) { this.options.onshow = onshow; return this; }, /** * Set handler for modal event 'shown.bs.modal'. * This is a setter! */ onShown: function (onshown) { this.options.onshown = onshown; return this; }, /** * Set handler for modal event 'hide.bs.modal'. * This is a setter! */ onHide: function (onhide) { this.options.onhide = onhide; return this; }, /** * Set handler for modal event 'hidden.bs.modal'. * This is a setter! */ onHidden: function (onhidden) { this.options.onhidden = onhidden; return this; }, isRealized: function () { return this.realized; }, setRealized: function (realized) { this.realized = realized; return this; }, isOpened: function () { return this.opened; }, setOpened: function (opened) { this.opened = opened; return this; }, handleModalEvents: function () { this.getModal().on('show.bs.modal', { dialog: this }, function (event) { var dialog = event.data.dialog; dialog.setOpened(true); if (dialog.isModalEvent(event) && typeof dialog.options.onshow === 'function') { var openIt = dialog.options.onshow(dialog); if (openIt === false) { dialog.setOpened(false); } return openIt; } }); this.getModal().on('shown.bs.modal', { dialog: this }, function (event) { var dialog = event.data.dialog; dialog.isModalEvent(event) && typeof dialog.options.onshown === 'function' && dialog.options.onshown(dialog); }); this.getModal().on('hide.bs.modal', { dialog: this }, function (event) { var dialog = event.data.dialog; dialog.setOpened(false); if (dialog.isModalEvent(event) && typeof dialog.options.onhide === 'function') { var hideIt = dialog.options.onhide(dialog); if (hideIt === false) { dialog.setOpened(true); } return hideIt; } }); this.getModal().on('hidden.bs.modal', { dialog: this }, function (event) { var dialog = event.data.dialog; dialog.isModalEvent(event) && typeof dialog.options.onhidden === 'function' && dialog.options.onhidden(dialog); if (dialog.isAutodestroy()) { dialog.setRealized(false); delete BootstrapDialog.dialogs[dialog.getId()]; $(this).remove(); } BootstrapDialog.moveFocus(); if ($('.modal').hasClass('in')) { $('body').addClass('modal-open'); } }); // ESC key support this.getModal().on('keyup', { dialog: this }, function (event) { event.which === 27 && event.data.dialog.isClosable() && event.data.dialog.canCloseByKeyboard() && event.data.dialog.close(); }); // Button hotkey this.getModal().on('keyup', { dialog: this }, function (event) { var dialog = event.data.dialog; if (typeof dialog.registeredButtonHotkeys[event.which] !== 'undefined') { var $button = $(dialog.registeredButtonHotkeys[event.which]); !$button.prop('disabled') && !$button.is(':focus') && $button.focus().trigger('click'); } }); return this; }, isModalEvent: function (event) { return typeof event.namespace !== 'undefined' && event.namespace === 'bs.modal'; }, makeModalDraggable: function () { if (this.options.draggable) { this.getModalHeader().addClass(this.getNamespace('draggable')).on('mousedown', { dialog: this }, function (event) { var dialog = event.data.dialog; dialog.draggableData.isMouseDown = true; var dialogOffset = dialog.getModalDialog().offset(); dialog.draggableData.mouseOffset = { top: event.clientY - dialogOffset.top, left: event.clientX - dialogOffset.left }; }); this.getModal().on('mouseup', { dialog: this }, function (event) { event.data.dialog.draggableData.isMouseDown = false; }); $('body').on('mousemove', { dialog: this }, function (event) { var dialog = event.data.dialog; if (!dialog.draggableData.isMouseDown) { return; } event.preventDefault(); dialog.getModalDialog().offset({ top: event.clientY - dialog.draggableData.mouseOffset.top, left: event.clientX - dialog.draggableData.mouseOffset.left }); }).on('mouseleave', { dialog: this }, function (event) { event.data.dialog.draggableData.isMouseDown = false; }); } return this; }, realize: function () { this.initModalStuff(); this.getModal().addClass(BootstrapDialog.NAMESPACE) .addClass(this.getCssClass()); this.updateSize(); if (this.getDescription()) { this.getModal().attr('aria-describedby', this.getDescription()); } //this.getModalFooter().append(this.createFooterContent()); this.getModalHeader().append(this.createHeaderContent()); this.getModalBody().append(this.createBodyContent()); this.getModal().data('bs.modal', new BootstrapDialogModal(this.getModalForBootstrapDialogModal(), { //FIXME for BootstrapV4 backdrop: (this.isClosable() && this.canCloseByBackdrop()) ? true : 'static', keyboard: false, show: false })); this.makeModalDraggable(); this.handleModalEvents(); this.setRealized(true); this.updateButtons(); this.updateType(); this.updateTitle(); this.updateMessage(); this.updateClosable(); this.updateAnimate(); this.updateSize(); this.updateTabindex(); return this; }, open: function () { !this.isRealized() && this.realize(); this.getModal().modal('show'); return this; }, close: function () { !this.isRealized() && this.realize(); this.getModal().modal('hide'); return this; } }; // Add compatible methods. BootstrapDialog.prototype = $.extend(BootstrapDialog.prototype, BootstrapDialog.METHODS_TO_OVERRIDE[BootstrapDialogModal.getModalVersion()]); /** * RFC4122 version 4 compliant unique id creator. * * Added by https://github.com/tufanbarisyildirim/ * * @returns {String} */ BootstrapDialog.newGuid = function () { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }; /* ================================================ * For lazy people * ================================================ */ /** * Shortcut function: show * * @param {type} options * @returns the created dialog instance */ BootstrapDialog.show = function (options) { return new BootstrapDialog(options).open(); }; /** * Alert window * * @returns the created dialog instance */ BootstrapDialog.alert = function () { var alertOptions = {}; var defaultAlertOptions = { type: BootstrapDialog.TYPE_PRIMARY, title: null, message: null, closable: false, draggable: false, buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK, buttonHotkey: null, callback: null }; if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) { alertOptions = $.extend(true, defaultAlertOptions, arguments[0]); } else { alertOptions = $.extend(true, defaultAlertOptions, { message: arguments[0], callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null }); } var dialog = new BootstrapDialog(alertOptions); dialog.setData('callback', alertOptions.callback); dialog.addButton({ label: alertOptions.buttonLabel, hotkey: alertOptions.buttonHotkey, action: function (dialog) { if (typeof dialog.getData('callback') === 'function' && dialog.getData('callback').call(this, true) === false) { return false; } dialog.setData('btnClicked', true); return dialog.close(); } }); if (typeof dialog.options.onhide === 'function') { dialog.onHide(function (dialog) { var hideIt = true; if (!dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function') { hideIt = dialog.getData('callback')(false); } if (hideIt === false) { return false; } hideIt = this.onhide(dialog); return hideIt; }.bind({ onhide: dialog.options.onhide })); } else { dialog.onHide(function (dialog) { var hideIt = true; if (!dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function') { hideIt = dialog.getData('callback')(false); } return hideIt; }); } return dialog.open(); }; /** * Confirm window * * @returns the created dialog instance */ BootstrapDialog.confirm = function () { var confirmOptions = {}; var defaultConfirmOptions = { type: BootstrapDialog.TYPE_PRIMARY, title: null, message: null, closable: false, draggable: false, btnCancelLabel: BootstrapDialog.DEFAULT_TEXTS.CANCEL, btnCancelClass: null, btnCancelHotkey: null, btnOKLabel: BootstrapDialog.DEFAULT_TEXTS.OK, btnOKClass: null, btnOKHotkey: null, btnsOrder: BootstrapDialog.defaultOptions.btnsOrder, callback: null }; if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) { confirmOptions = $.extend(true, defaultConfirmOptions, arguments[0]); } else { confirmOptions = $.extend(true, defaultConfirmOptions, { message: arguments[0], callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null }); } if (confirmOptions.btnOKClass === null) { confirmOptions.btnOKClass = ['btn', confirmOptions.type.split('-')[1]].join('-'); } var dialog = new BootstrapDialog(confirmOptions); dialog.setData('callback', confirmOptions.callback); var buttons = [{ label: confirmOptions.btnCancelLabel, cssClass: confirmOptions.btnCancelClass, hotkey: confirmOptions.btnCancelHotkey, action: function (dialog) { if (typeof dialog.getData('callback') === 'function' && dialog.getData('callback').call(this, false) === false) { return false; } return dialog.close(); } }, { label: confirmOptions.btnOKLabel, cssClass: confirmOptions.btnOKClass, hotkey: confirmOptions.btnOKHotkey, action: function (dialog) { if (typeof dialog.getData('callback') === 'function' && dialog.getData('callback').call(this, true) === false) { return false; } return dialog.close(); } }]; if (confirmOptions.btnsOrder === BootstrapDialog.BUTTONS_ORDER_OK_CANCEL) { buttons.reverse(); } dialog.addButtons(buttons); return dialog.open(); }; /** * Warning window * * @param {type} message * @returns the created dialog instance */ BootstrapDialog.warning = function (message, callback) { return new BootstrapDialog({ type: BootstrapDialog.TYPE_WARNING, message: message }).open(); }; /** * Danger window * * @param {type} message * @returns the created dialog instance */ BootstrapDialog.danger = function (message, callback) { return new BootstrapDialog({ type: BootstrapDialog.TYPE_DANGER, message: message }).open(); }; /** * Success window * * @param {type} message * @returns the created dialog instance */ BootstrapDialog.success = function (message, callback) { return new BootstrapDialog({ type: BootstrapDialog.TYPE_SUCCESS, message: message }).open(); }; return BootstrapDialog; }));