/* ================================================ * 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($) { "use strict"; var BootstrapDialog = function(options) { this.defaultOptions = { id: BootstrapDialog.newGuid(), type: BootstrapDialog.TYPE_PRIMARY, size: BootstrapDialog.SIZE_NORMAL, cssClass: '', title: null, message: null, buttons: [], closable: true, spinicon: BootstrapDialog.ICON_SPINNER, data: {}, onshow: null, onhide: null, autodestroy: true, draggable: false }; this.indexedButtons = {}; this.registeredButtonHotkeys = {}; this.draggableData = { isMouseDown: false, mouseOffset: {} }; this.realized = false; this.opened = false; this.initOptions(options); this.holdThisInstance(); }; /** * Some constants. */ BootstrapDialog.NAMESPACE = 'bootstrap-dialog'; BootstrapDialog.TYPE_DEFAULT = 'type-default'; BootstrapDialog.TYPE_INFO = 'type-info'; BootstrapDialog.TYPE_PRIMARY = 'type-primary'; BootstrapDialog.TYPE_SUCCESS = 'type-success'; BootstrapDialog.TYPE_WARNING = 'type-warning'; BootstrapDialog.TYPE_DANGER = 'type-danger'; BootstrapDialog.DEFAULT_TEXTS = {}; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DEFAULT] = 'Information'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_INFO] = 'Information'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_PRIMARY] = 'Information'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SUCCESS] = 'Success'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_WARNING] = 'Warning'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DANGER] = 'Danger'; BootstrapDialog.SIZE_NORMAL = 'size-normal'; BootstrapDialog.SIZE_LARGE = 'size-large'; BootstrapDialog.BUTTON_SIZES = {}; BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_NORMAL] = ''; BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_LARGE] = 'btn-lg'; BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk'; /** * 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(); }); }; BootstrapDialog.prototype = { constructor: BootstrapDialog, initOptions: function(options) { this.options = $.extend(true, this.defaultOptions, options); return this; }, holdThisInstance: function() { BootstrapDialog.dialogs[this.getId()] = 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()); return $modal; }, getModal: function() { return this.$modal; }, setModal: function($modal) { this.$modal = $modal; return this; }, 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) { return content.replace(/\r\n/g, '
').replace(/[\r\n]/g, '
'); }, 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; return this; }, getSize: function() { return this.options.size; }, setSize: function(size) { this.options.size = size; 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); } 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; }, 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; 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 ''; }, isAutodestroy: function() { return this.options.autodestroy; }, setAutodestroy: function(autodestroy) { this.options.autodestroy = autodestroy; }, 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 = $(''); $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')); // Buttons $container.append(this.createFooterButtons()); return $container; }, createFooterButtons: function() { var that = this; var $container = $('
'); $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.addClass(this.getButtonSize()); $button.prop('id', button.id); // 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); } // Css class if (typeof button.cssClass !== undefined && $.trim(button.cssClass) !== '') { $button.addClass(button.cssClass); } else { $button.addClass('btn-default'); } // 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 = event.data.button; if (typeof button.action === 'function') { button.action.call($button, dialog); } if (button.autospin) { $button.toggleSpin(true); } }); // Dynamically add extra functions to $button this.enhanceButton($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; $this.prop("disabled", !enable).toggleClass('disabled', !enable); 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 (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'. * This is a setter! * * @param {type} onopen * @returns {_L9.BootstrapDialog.prototype} */ onShow: function(onshow) { this.options.onshow = onshow; return this; }, /** * Set handler for modal event 'hide'. * This is a setter! * * @param {type} onclose * @returns {_L9.BootstrapDialog.prototype} */ onHide: function(onhide) { this.options.onhide = onhide; 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; typeof dialog.options.onshow === 'function' && dialog.options.onshow(dialog); dialog.showPageScrollBar(true); }); this.getModal().on('hide.bs.modal', {dialog: this}, function(event) { var dialog = event.data.dialog; typeof dialog.options.onhide === 'function' && dialog.options.onhide(dialog); }); this.getModal().on('hidden.bs.modal', {dialog: this}, function(event) { var dialog = event.data.dialog; dialog.isAutodestroy() && $(this).remove(); dialog.showPageScrollBar(false); }); // Backdrop, I did't find a way to change bs3 backdrop option after the dialog is popped up, so here's a new wheel. this.getModal().on('click', {dialog: this}, function(event) { event.target === this && event.data.dialog.isClosable() && event.data.dialog.close(); }); // ESC key support this.getModal().on('keyup', {dialog: this}, function(event) { event.which === 27 && event.data.dialog.isClosable() && 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.focus().trigger('click'); } }); return this; }, 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.getModalContent().offset(); dialog.draggableData.mouseOffset = { top: event.clientY - dialogOffset.top, left: event.clientX - dialogOffset.left }; }); this.getModal().on('mouseup mouseleave', {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; } dialog.getModalContent().offset({ top: event.clientY - dialog.draggableData.mouseOffset.top, left: event.clientX - dialog.draggableData.mouseOffset.left }); }); } return this; }, showPageScrollBar: function(show) { $(document.body).toggleClass('modal-open', show); }, realize: function() { this.initModalStuff(); this.getModal().addClass(BootstrapDialog.NAMESPACE) .addClass(this.getType()) .addClass(this.getSize()) .addClass(this.getCssClass()); this.getModalFooter().append(this.createFooterContent()); this.getModalHeader().append(this.createHeaderContent()); this.getModalBody().append(this.createBodyContent()); this.getModal().modal({ backdrop: 'static', keyboard: false, show: false }); this.makeModalDraggable(); this.handleModalEvents(); this.setRealized(true); this.updateTitle(); this.updateMessage(); this.updateClosable(); return this; }, open: function() { !this.isRealized() && this.realize(); this.getModal().modal('show'); this.setOpened(true); return this; }, close: function() { this.getModal().modal('hide'); if (this.isAutodestroy()) { delete BootstrapDialog.dialogs[this.getId()]; } this.setOpened(false); return this; } }; /** * 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 * * @param {type} message * @param {type} callback * @returns the created dialog instance */ BootstrapDialog.alert = function(message, callback) { return new BootstrapDialog({ message: message, data: { 'callback': callback }, closable: false, buttons: [{ label: 'OK', action: function(dialog) { typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true); dialog.close(); } }] }).open(); }; /** * Confirm window * * @param {type} message * @param {type} callback * @returns the created dialog instance */ BootstrapDialog.confirm = function(message, callback) { return new BootstrapDialog({ title: 'Confirmation', message: message, closable: false, data: { 'callback': callback }, buttons: [{ label: 'Cancel', action: function(dialog) { typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false); dialog.close(); } }, { label: 'OK', cssClass: 'btn-primary', action: function(dialog) { typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true); dialog.close(); } }] }).open(); }; BootstrapDialog.init = function() { // check for nodeJS var hasModule = (typeof module !== 'undefined' && module.exports); // CommonJS module is defined if (hasModule) module.exports = BootstrapDialog; else if (typeof define === "function" && define.amd) define("bootstrap-dialog", function() { return BootstrapDialog; }); else window.BootstrapDialog = BootstrapDialog; }; BootstrapDialog.init(); })(window.jQuery);