From ef8e307bdc3133e1df26c9de2fe20d996b6cf720 Mon Sep 17 00:00:00 2001 From: Ad Schellevis Date: Thu, 5 Mar 2015 14:54:05 +0100 Subject: [PATCH] add https://github.com/nakupanda/bootstrap3-dialog to standard codebase to ease jQuery/bootstrap dialogs --- src/opnsense/www/js/bootstrap-dialog.js | 1279 +++++++++++++++++ src/opnsense/www/js/bootstrap-dialog.min.js | 1 + .../assets/stylesheets/bootstrap-dialog.less | 137 ++ .../opnsense/build/css/bootstrap-dialog.css | 113 ++ 4 files changed, 1530 insertions(+) create mode 100644 src/opnsense/www/js/bootstrap-dialog.js create mode 100644 src/opnsense/www/js/bootstrap-dialog.min.js create mode 100644 src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap-dialog.less create mode 100644 src/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css diff --git a/src/opnsense/www/js/bootstrap-dialog.js b/src/opnsense/www/js/bootstrap-dialog.js new file mode 100644 index 000000000..b5f090df0 --- /dev/null +++ b/src/opnsense/www/js/bootstrap-dialog.js @@ -0,0 +1,1279 @@ +/* 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')(root)); + } + // AMD module is defined + else if (typeof define === "function" && define.amd) { + define("bootstrap-dialog", ["jquery"], function($) { + return factory($); + }); + } else { + // planted over the root! + root.BootstrapDialog = factory(root.jQuery); + } + +}(this, 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) { + 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 { + version = 'v3.3'; // v3.3+ + } + + return version; + }; + BootstrapDialogModal.ORIGINAL_BODY_PADDING = $('body').css('padding-right') || 0; + 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.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_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.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_LARGE = 'size-large'; + + BootstrapDialog.BUTTON_SIZES = {}; + BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_NORMAL] = ''; + BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_SMALL] = ''; + BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_WIDE] = ''; + BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_LARGE] = 'btn-lg'; + + BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk'; + + /** + * 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, + spinicon: BootstrapDialog.ICON_SPINNER, + autodestroy: true, + draggable: false, + animate: true, + description: '' + }; + + /** + * 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(); + }); + }; + + /** + * Move focus to next visible dialog. + */ + BootstrapDialog.moveFocus = function() { + var lastDialogInstance = null; + $.each(BootstrapDialog.dialogs, function(id, dialogInstance) { + lastDialogInstance = dialogInstance; + }); + if (lastDialogInstance !== null && lastDialogInstance.isRealized()) { + lastDialogInstance.getModal().focus(); + } + }; + + BootstrapDialog.METHODS_TO_OVERRIDE = {}; + BootstrapDialog.METHODS_TO_OVERRIDE['v3.1'] = { + handleModalBackdropEvent: function() { + this.getModal().on('click', {dialog: this}, function(event) { + event.target === this && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close(); + }); + + return this; + }, + /** + * 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() { + var zIndexBackdrop = 1040; + var zIndexModal = 1050; + var dialogCount = 0; + $.each(BootstrapDialog.dialogs, function(dialogId, dialogInstance) { + dialogCount++; + }); + var $modal = this.getModal(); + var $backdrop = $modal.data('bs.modal').$backdrop; + $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(); + this.setOpened(true); + + return this; + } + }; + BootstrapDialog.METHODS_TO_OVERRIDE['v3.2'] = { + handleModalBackdropEvent: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['handleModalBackdropEvent'], + updateZIndex: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['updateZIndex'], + open: BootstrapDialog.METHODS_TO_OVERRIDE['v3.1']['open'] + }; + BootstrapDialog.METHODS_TO_OVERRIDE['v3.3'] = {}; + 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()).attr('aria-labelledby', this.getId() + '_title'); + + 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) { + 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_SUCCESS, + BootstrapDialog.TYPE_WARNING, + 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_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'); + } + + // 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().find('.' + this.getNamespace('footer')).html('').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; + }, + 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.prepend(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')); + + 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.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); + } + + // 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 = $button.data('button'); + if (typeof button.action === 'function') { + button.action.call($button, dialog, event); + } + + 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; + 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()) { + delete BootstrapDialog.dialogs[dialog.getId()]; + $(this).remove(); + } + BootstrapDialog.moveFocus(); + }); + + // 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.handleModalBackdropEvent(); + + // 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.focus().trigger('click'); + } + }); + + return this; + }, + handleModalBackdropEvent: function() { + this.getModal().on('click', {dialog: this}, function(event) { + $(event.target).hasClass('modal-backdrop') && event.data.dialog.isClosable() && event.data.dialog.canCloseByBackdrop() && event.data.dialog.close(); + }); + + 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 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.getModalDialog().offset({ + top: event.clientY - dialog.draggableData.mouseOffset.top, + left: event.clientX - dialog.draggableData.mouseOffset.left + }); + }); + } + + 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.getModal(), { + backdrop: '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(); + + return this; + }, + open: function() { + !this.isRealized() && this.realize(); + this.getModal().modal('show'); + + return this; + }, + close: function() { + 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 options = {}; + var defaultOptions = { + type: BootstrapDialog.TYPE_PRIMARY, + title: null, + message: null, + closable: false, + draggable: false, + buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK, + callback: null + }; + + if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) { + options = $.extend(true, defaultOptions, arguments[0]); + } else { + options = $.extend(true, defaultOptions, { + message: arguments[0], + callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null + }); + } + + return new BootstrapDialog({ + type: options.type, + title: options.title, + message: options.message, + closable: options.closable, + draggable: options.draggable, + data: { + callback: options.callback + }, + onhide: function(dialog) { + !dialog.getData('btnClicked') && dialog.isClosable() && typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false); + }, + buttons: [{ + label: options.buttonLabel, + action: function(dialog) { + dialog.setData('btnClicked', true); + typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true); + dialog.close(); + } + }] + }).open(); + }; + + /** + * Confirm window + * + * @returns the created dialog instance + */ + BootstrapDialog.confirm = function() { + var options = {}; + var defaultOptions = { + type: BootstrapDialog.TYPE_PRIMARY, + title: null, + message: null, + closable: false, + draggable: false, + btnCancelLabel: BootstrapDialog.DEFAULT_TEXTS.CANCEL, + btnOKLabel: BootstrapDialog.DEFAULT_TEXTS.OK, + btnOKClass: null, + callback: null + }; + if (typeof arguments[0] === 'object' && arguments[0].constructor === {}.constructor) { + options = $.extend(true, defaultOptions, arguments[0]); + } else { + options = $.extend(true, defaultOptions, { + message: arguments[0], + closable: false, + buttonLabel: BootstrapDialog.DEFAULT_TEXTS.OK, + callback: typeof arguments[1] !== 'undefined' ? arguments[1] : null + }); + } + if (options.btnOKClass === null) { + options.btnOKClass = ['btn', options.type.split('-')[1]].join('-'); + } + + return new BootstrapDialog({ + type: options.type, + title: options.title, + message: options.message, + closable: options.closable, + draggable: options.draggable, + data: { + callback: options.callback + }, + buttons: [{ + label: options.btnCancelLabel, + action: function(dialog) { + typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false); + dialog.close(); + } + }, { + label: options.btnOKLabel, + cssClass: options.btnOKClass, + action: function(dialog) { + typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true); + dialog.close(); + } + }] + }).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; + +})); diff --git a/src/opnsense/www/js/bootstrap-dialog.min.js b/src/opnsense/www/js/bootstrap-dialog.min.js new file mode 100644 index 000000000..265cf4f3b --- /dev/null +++ b/src/opnsense/www/js/bootstrap-dialog.min.js @@ -0,0 +1 @@ +(function(a,b){if(typeof module!=="undefined"&&module.exports){module.exports=b(require("jquery")(a))}else{if(typeof define==="function"&&define.amd){define("bootstrap-dialog",["jquery"],function(c){return b(c)})}else{a.BootstrapDialog=b(a.jQuery)}}}(this,function(d){var b=d.fn.modal.Constructor;var c=function(f,e){b.call(this,f,e)};c.getModalVersion=function(){var e=null;if(typeof d.fn.modal.Constructor.VERSION==="undefined"){e="v3.1"}else{if(/3\.2\.\d+/.test(d.fn.modal.Constructor.VERSION)){e="v3.2"}else{e="v3.3"}}return e};c.ORIGINAL_BODY_PADDING=d("body").css("padding-right")||0;c.METHODS_TO_OVERRIDE={};c.METHODS_TO_OVERRIDE["v3.1"]={};c.METHODS_TO_OVERRIDE["v3.2"]={hide:function(g){if(g){g.preventDefault()}g=d.Event("hide.bs.modal");this.$element.trigger(g);if(!this.isShown||g.isDefaultPrevented()){return}this.isShown=false;var f=this.getGlobalOpenedDialogs();if(f.length===0){this.$body.removeClass("modal-open")}this.resetScrollbar();this.escape();d(document).off("focusin.bs.modal");this.$element.removeClass("in").attr("aria-hidden",true).off("click.dismiss.bs.modal");d.support.transition&&this.$element.hasClass("fade")?this.$element.one("bsTransitionEnd",d.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal()}};c.METHODS_TO_OVERRIDE["v3.3"]={setScrollbar:function(){var e=c.ORIGINAL_BODY_PADDING;if(this.bodyIsOverflowing){this.$body.css("padding-right",e+this.scrollbarWidth)}},resetScrollbar:function(){var e=this.getGlobalOpenedDialogs();if(e.length===0){this.$body.css("padding-right",c.ORIGINAL_BODY_PADDING)}},hideModal:function(){this.$element.hide();this.backdrop(d.proxy(function(){var e=this.getGlobalOpenedDialogs();if(e.length===0){this.$body.removeClass("modal-open")}this.resetAdjustments();this.resetScrollbar();this.$element.trigger("hidden.bs.modal")},this))}};c.prototype={constructor:c,getGlobalOpenedDialogs:function(){var e=[];d.each(a.dialogs,function(g,f){if(f.isRealized()&&f.isOpened()){e.push(f)}});return e}};c.prototype=d.extend(c.prototype,b.prototype,c.METHODS_TO_OVERRIDE[c.getModalVersion()]);var a=function(e){this.defaultOptions=d.extend(true,{id:a.newGuid(),buttons:[],data:{},onshow:null,onshown:null,onhide:null,onhidden:null},a.defaultOptions);this.indexedButtons={};this.registeredButtonHotkeys={};this.draggableData={isMouseDown:false,mouseOffset:{}};this.realized=false;this.opened=false;this.initOptions(e);this.holdThisInstance()};a.BootstrapDialogModal=c;a.NAMESPACE="bootstrap-dialog";a.TYPE_DEFAULT="type-default";a.TYPE_INFO="type-info";a.TYPE_PRIMARY="type-primary";a.TYPE_SUCCESS="type-success";a.TYPE_WARNING="type-warning";a.TYPE_DANGER="type-danger";a.DEFAULT_TEXTS={};a.DEFAULT_TEXTS[a.TYPE_DEFAULT]="Information";a.DEFAULT_TEXTS[a.TYPE_INFO]="Information";a.DEFAULT_TEXTS[a.TYPE_PRIMARY]="Information";a.DEFAULT_TEXTS[a.TYPE_SUCCESS]="Success";a.DEFAULT_TEXTS[a.TYPE_WARNING]="Warning";a.DEFAULT_TEXTS[a.TYPE_DANGER]="Danger";a.DEFAULT_TEXTS.OK="OK";a.DEFAULT_TEXTS.CANCEL="Cancel";a.DEFAULT_TEXTS.CONFIRM="Confirmation";a.SIZE_NORMAL="size-normal";a.SIZE_SMALL="size-small";a.SIZE_WIDE="size-wide";a.SIZE_LARGE="size-large";a.BUTTON_SIZES={};a.BUTTON_SIZES[a.SIZE_NORMAL]="";a.BUTTON_SIZES[a.SIZE_SMALL]="";a.BUTTON_SIZES[a.SIZE_WIDE]="";a.BUTTON_SIZES[a.SIZE_LARGE]="btn-lg";a.ICON_SPINNER="glyphicon glyphicon-asterisk";a.defaultOptions={type:a.TYPE_PRIMARY,size:a.SIZE_NORMAL,cssClass:"",title:null,message:null,nl2br:true,closable:true,closeByBackdrop:true,closeByKeyboard:true,spinicon:a.ICON_SPINNER,autodestroy:true,draggable:false,animate:true,description:""};a.configDefaultOptions=function(e){a.defaultOptions=d.extend(true,a.defaultOptions,e)};a.dialogs={};a.openAll=function(){d.each(a.dialogs,function(f,e){e.open()})};a.closeAll=function(){d.each(a.dialogs,function(f,e){e.close()})};a.moveFocus=function(){var e=null;d.each(a.dialogs,function(g,f){e=f});if(e!==null&&e.isRealized()){e.getModal().focus()}};a.METHODS_TO_OVERRIDE={};a.METHODS_TO_OVERRIDE["v3.1"]={handleModalBackdropEvent:function(){this.getModal().on("click",{dialog:this},function(e){e.target===this&&e.data.dialog.isClosable()&&e.data.dialog.canCloseByBackdrop()&&e.data.dialog.close()});return this},updateZIndex:function(){var g=1040;var h=1050;var i=0;d.each(a.dialogs,function(j,k){i++});var f=this.getModal();var e=f.data("bs.modal").$backdrop;f.css("z-index",h+(i-1)*20);e.css("z-index",g+(i-1)*20);return this},open:function(){!this.isRealized()&&this.realize();this.getModal().modal("show");this.updateZIndex();this.setOpened(true);return this}};a.METHODS_TO_OVERRIDE["v3.2"]={handleModalBackdropEvent:a.METHODS_TO_OVERRIDE["v3.1"]["handleModalBackdropEvent"],updateZIndex:a.METHODS_TO_OVERRIDE["v3.1"]["updateZIndex"],open:a.METHODS_TO_OVERRIDE["v3.1"]["open"]};a.METHODS_TO_OVERRIDE["v3.3"]={};a.prototype={constructor:a,initOptions:function(e){this.options=d.extend(true,this.defaultOptions,e);return this},holdThisInstance:function(){a.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 e=d('');e.prop("id",this.getId()).attr("aria-labelledby",this.getId()+"_title");return e},getModal:function(){return this.$modal},setModal:function(e){this.$modal=e;return this},createModalDialog:function(){return d('
')},getModalDialog:function(){return this.$modalDialog},setModalDialog:function(e){this.$modalDialog=e;return this},createModalContent:function(){return d('
')},getModalContent:function(){return this.$modalContent},setModalContent:function(e){this.$modalContent=e;return this},createModalHeader:function(){return d('
')},getModalHeader:function(){return this.$modalHeader},setModalHeader:function(e){this.$modalHeader=e;return this},createModalBody:function(){return d('
')},getModalBody:function(){return this.$modalBody},setModalBody:function(e){this.$modalBody=e;return this},createModalFooter:function(){return d('
')},getModalFooter:function(){return this.$modalFooter},setModalFooter:function(e){this.$modalFooter=e;return this},createDynamicContent:function(f){var e=null;if(typeof f==="function"){e=f.call(f,this)}else{e=f}if(typeof e==="string"){e=this.formatStringContent(e)}return e},formatStringContent:function(e){if(this.options.nl2br){return e.replace(/\r\n/g,"
").replace(/[\r\n]/g,"
")}return e},setData:function(e,f){this.options.data[e]=f;return this},getData:function(e){return this.options.data[e]},setId:function(e){this.options.id=e;return this},getId:function(){return this.options.id},getType:function(){return this.options.type},setType:function(e){this.options.type=e;this.updateType();return this},updateType:function(){if(this.isRealized()){var e=[a.TYPE_DEFAULT,a.TYPE_INFO,a.TYPE_PRIMARY,a.TYPE_SUCCESS,a.TYPE_WARNING,a.TYPE_DANGER];this.getModal().removeClass(e.join(" ")).addClass(this.getType())}return this},getSize:function(){return this.options.size},setSize:function(e){this.options.size=e;this.updateSize();return this},updateSize:function(){if(this.isRealized()){var e=this;this.getModal().removeClass(a.SIZE_NORMAL).removeClass(a.SIZE_SMALL).removeClass(a.SIZE_WIDE).removeClass(a.SIZE_LARGE);this.getModal().addClass(this.getSize());this.getModalDialog().removeClass("modal-sm");if(this.getSize()===a.SIZE_SMALL){this.getModalDialog().addClass("modal-sm")}this.getModalDialog().removeClass("modal-lg");if(this.getSize()===a.SIZE_WIDE){this.getModalDialog().addClass("modal-lg")}d.each(this.options.buttons,function(g,i){var k=e.getButton(i.id);var f=["btn-lg","btn-sm","btn-xs"];var j=false;if(typeof i.cssClass==="string"){var h=i.cssClass.split(" ");d.each(h,function(l,m){if(d.inArray(m,f)!==-1){j=true}})}if(!j){k.removeClass(f.join(" "));k.addClass(e.getButtonSize())}})}return this},getCssClass:function(){return this.options.cssClass},setCssClass:function(e){this.options.cssClass=e;return this},getTitle:function(){return this.options.title},setTitle:function(e){this.options.title=e;this.updateTitle();return this},updateTitle:function(){if(this.isRealized()){var e=this.getTitle()!==null?this.createDynamicContent(this.getTitle()):this.getDefaultText();this.getModalHeader().find("."+this.getNamespace("title")).html("").append(e).prop("id",this.getId()+"_title")}return this},getMessage:function(){return this.options.message},setMessage:function(e){this.options.message=e;this.updateMessage();return this},updateMessage:function(){if(this.isRealized()){var e=this.createDynamicContent(this.getMessage());this.getModalBody().find("."+this.getNamespace("message")).html("").append(e)}return this},isClosable:function(){return this.options.closable},setClosable:function(e){this.options.closable=e;this.updateClosable();return this},setCloseByBackdrop:function(e){this.options.closeByBackdrop=e;return this},canCloseByBackdrop:function(){return this.options.closeByBackdrop},setCloseByKeyboard:function(e){this.options.closeByKeyboard=e;return this},canCloseByKeyboard:function(){return this.options.closeByKeyboard},isAnimate:function(){return this.options.animate},setAnimate:function(e){this.options.animate=e;return this},updateAnimate:function(){if(this.isRealized()){this.getModal().toggleClass("fade",this.isAnimate())}return this},getSpinicon:function(){return this.options.spinicon},setSpinicon:function(e){this.options.spinicon=e;return this},addButton:function(e){this.options.buttons.push(e);return this},addButtons:function(f){var e=this;d.each(f,function(g,h){e.addButton(h)});return this},getButtons:function(){return this.options.buttons},setButtons:function(e){this.options.buttons=e;this.updateButtons();return this},getButton:function(e){if(typeof this.indexedButtons[e]!=="undefined"){return this.indexedButtons[e]}return null},getButtonSize:function(){if(typeof a.BUTTON_SIZES[this.getSize()]!=="undefined"){return a.BUTTON_SIZES[this.getSize()]}return""},updateButtons:function(){if(this.isRealized()){if(this.getButtons().length===0){this.getModalFooter().hide()}else{this.getModalFooter().show().find("."+this.getNamespace("footer")).html("").append(this.createFooterButtons())}}return this},isAutodestroy:function(){return this.options.autodestroy},setAutodestroy:function(e){this.options.autodestroy=e},getDescription:function(){return this.options.description},setDescription:function(e){this.options.description=e;return this},getDefaultText:function(){return a.DEFAULT_TEXTS[this.getType()]},getNamespace:function(e){return a.NAMESPACE+"-"+e},createHeaderContent:function(){var e=d("
");e.addClass(this.getNamespace("header"));e.append(this.createTitleContent());e.prepend(this.createCloseButton());return e},createTitleContent:function(){var e=d("
");e.addClass(this.getNamespace("title"));return e},createCloseButton:function(){var f=d("
");f.addClass(this.getNamespace("close-button"));var e=d('');f.append(e);f.on("click",{dialog:this},function(g){g.data.dialog.close()});return f},createBodyContent:function(){var e=d("
");e.addClass(this.getNamespace("body"));e.append(this.createMessageContent());return e},createMessageContent:function(){var e=d("
");e.addClass(this.getNamespace("message"));return e},createFooterContent:function(){var e=d("
");e.addClass(this.getNamespace("footer"));return e},createFooterButtons:function(){var e=this;var f=d("
");f.addClass(this.getNamespace("footer-buttons"));this.indexedButtons={};d.each(this.options.buttons,function(g,h){if(!h.id){h.id=a.newGuid()}var i=e.createButton(h);e.indexedButtons[h.id]=i;f.append(i)});return f},createButton:function(e){var f=d('');f.prop("id",e.id);f.data("button",e);if(typeof e.icon!=="undefined"&&d.trim(e.icon)!==""){f.append(this.createButtonIcon(e.icon))}if(typeof e.label!=="undefined"){f.append(e.label)}if(typeof e.cssClass!=="undefined"&&d.trim(e.cssClass)!==""){f.addClass(e.cssClass)}else{f.addClass("btn-default")}if(typeof e.hotkey!=="undefined"){this.registeredButtonHotkeys[e.hotkey]=f}f.on("click",{dialog:this,$button:f,button:e},function(i){var h=i.data.dialog;var j=i.data.$button;var g=j.data("button");if(typeof g.action==="function"){g.action.call(j,h,i)}if(g.autospin){j.toggleSpin(true)}});this.enhanceButton(f);return f},enhanceButton:function(e){e.dialog=this;e.toggleEnable=function(f){var g=this;if(typeof f!=="undefined"){g.prop("disabled",!f).toggleClass("disabled",!f)}else{g.prop("disabled",!g.prop("disabled"))}return g};e.enable=function(){var f=this;f.toggleEnable(true);return f};e.disable=function(){var f=this;f.toggleEnable(false);return f};e.toggleSpin=function(i){var h=this;var g=h.dialog;var f=h.find("."+g.getNamespace("button-icon"));if(typeof i==="undefined"){i=!(e.find(".icon-spin").length>0)}if(i){f.hide();e.prepend(g.createButtonIcon(g.getSpinicon()).addClass("icon-spin"))}else{f.show();e.find(".icon-spin").remove()}return h};e.spin=function(){var f=this;f.toggleSpin(true);return f};e.stopSpin=function(){var f=this;f.toggleSpin(false);return f};return this},createButtonIcon:function(f){var e=d("");e.addClass(this.getNamespace("button-icon")).addClass(f);return e},enableButtons:function(e){d.each(this.indexedButtons,function(g,f){f.toggleEnable(e)});return this},updateClosable:function(){if(this.isRealized()){this.getModalHeader().find("."+this.getNamespace("close-button")).toggle(this.isClosable())}return this},onShow:function(e){this.options.onshow=e;return this},onShown:function(e){this.options.onshown=e;return this},onHide:function(e){this.options.onhide=e;return this},onHidden:function(e){this.options.onhidden=e;return this},isRealized:function(){return this.realized},setRealized:function(e){this.realized=e;return this},isOpened:function(){return this.opened},setOpened:function(e){this.opened=e;return this},handleModalEvents:function(){this.getModal().on("show.bs.modal",{dialog:this},function(g){var f=g.data.dialog;f.setOpened(true);if(f.isModalEvent(g)&&typeof f.options.onshow==="function"){var e=f.options.onshow(f);if(e===false){f.setOpened(false)}return e}});this.getModal().on("shown.bs.modal",{dialog:this},function(f){var e=f.data.dialog;e.isModalEvent(f)&&typeof e.options.onshown==="function"&&e.options.onshown(e)});this.getModal().on("hide.bs.modal",{dialog:this},function(f){var e=f.data.dialog;e.setOpened(false);if(e.isModalEvent(f)&&typeof e.options.onhide==="function"){var g=e.options.onhide(e);if(g===false){e.setOpened(true)}return g}});this.getModal().on("hidden.bs.modal",{dialog:this},function(f){var e=f.data.dialog;e.isModalEvent(f)&&typeof e.options.onhidden==="function"&&e.options.onhidden(e);if(e.isAutodestroy()){delete a.dialogs[e.getId()];d(this).remove()}a.moveFocus()});this.handleModalBackdropEvent();this.getModal().on("keyup",{dialog:this},function(e){e.which===27&&e.data.dialog.isClosable()&&e.data.dialog.canCloseByKeyboard()&&e.data.dialog.close()});this.getModal().on("keyup",{dialog:this},function(f){var e=f.data.dialog;if(typeof e.registeredButtonHotkeys[f.which]!=="undefined"){var g=d(e.registeredButtonHotkeys[f.which]);!g.prop("disabled")&&g.focus().trigger("click")}});return this},handleModalBackdropEvent:function(){this.getModal().on("click",{dialog:this},function(e){d(e.target).hasClass("modal-backdrop")&&e.data.dialog.isClosable()&&e.data.dialog.canCloseByBackdrop()&&e.data.dialog.close()});return this},isModalEvent:function(e){return typeof e.namespace!=="undefined"&&e.namespace==="bs.modal"},makeModalDraggable:function(){if(this.options.draggable){this.getModalHeader().addClass(this.getNamespace("draggable")).on("mousedown",{dialog:this},function(g){var f=g.data.dialog;f.draggableData.isMouseDown=true;var e=f.getModalDialog().offset();f.draggableData.mouseOffset={top:g.clientY-e.top,left:g.clientX-e.left}});this.getModal().on("mouseup mouseleave",{dialog:this},function(e){e.data.dialog.draggableData.isMouseDown=false});d("body").on("mousemove",{dialog:this},function(f){var e=f.data.dialog;if(!e.draggableData.isMouseDown){return}e.getModalDialog().offset({top:f.clientY-e.draggableData.mouseOffset.top,left:f.clientX-e.draggableData.mouseOffset.left})})}return this},realize:function(){this.initModalStuff();this.getModal().addClass(a.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 c(this.getModal(),{backdrop:"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();return this},open:function(){!this.isRealized()&&this.realize();this.getModal().modal("show");return this},close:function(){this.getModal().modal("hide");return this}};a.prototype=d.extend(a.prototype,a.METHODS_TO_OVERRIDE[c.getModalVersion()]);a.newGuid=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(g){var f=Math.random()*16|0,e=g==="x"?f:(f&3|8);return e.toString(16)})};a.show=function(e){return new a(e).open()};a.alert=function(){var f={};var e={type:a.TYPE_PRIMARY,title:null,message:null,closable:false,draggable:false,buttonLabel:a.DEFAULT_TEXTS.OK,callback:null};if(typeof arguments[0]==="object"&&arguments[0].constructor==={}.constructor){f=d.extend(true,e,arguments[0])}else{f=d.extend(true,e,{message:arguments[0],callback:typeof arguments[1]!=="undefined"?arguments[1]:null})}return new a({type:f.type,title:f.title,message:f.message,closable:f.closable,draggable:f.draggable,data:{callback:f.callback},onhide:function(g){!g.getData("btnClicked")&&g.isClosable()&&typeof g.getData("callback")==="function"&&g.getData("callback")(false)},buttons:[{label:f.buttonLabel,action:function(g){g.setData("btnClicked",true);typeof g.getData("callback")==="function"&&g.getData("callback")(true);g.close()}}]}).open()};a.confirm=function(){var f={};var e={type:a.TYPE_PRIMARY,title:null,message:null,closable:false,draggable:false,btnCancelLabel:a.DEFAULT_TEXTS.CANCEL,btnOKLabel:a.DEFAULT_TEXTS.OK,btnOKClass:null,callback:null};if(typeof arguments[0]==="object"&&arguments[0].constructor==={}.constructor){f=d.extend(true,e,arguments[0])}else{f=d.extend(true,e,{message:arguments[0],closable:false,buttonLabel:a.DEFAULT_TEXTS.OK,callback:typeof arguments[1]!=="undefined"?arguments[1]:null})}if(f.btnOKClass===null){f.btnOKClass=["btn",f.type.split("-")[1]].join("-")}return new a({type:f.type,title:f.title,message:f.message,closable:f.closable,draggable:f.draggable,data:{callback:f.callback},buttons:[{label:f.btnCancelLabel,action:function(g){typeof g.getData("callback")==="function"&&g.getData("callback")(false);g.close()}},{label:f.btnOKLabel,cssClass:f.btnOKClass,action:function(g){typeof g.getData("callback")==="function"&&g.getData("callback")(true);g.close()}}]}).open()};a.warning=function(e,f){return new a({type:a.TYPE_WARNING,message:e}).open()};a.danger=function(e,f){return new a({type:a.TYPE_DANGER,message:e}).open()};a.success=function(e,f){return new a({type:a.TYPE_SUCCESS,message:e}).open()};return a})); \ No newline at end of file diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap-dialog.less b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap-dialog.less new file mode 100644 index 000000000..c6db56d89 --- /dev/null +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap-dialog.less @@ -0,0 +1,137 @@ +.modal-backdrop { + z-index: -1; +} + +.bootstrap-dialog { + + .modal-header { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + .bootstrap-dialog-title { + color: #fff; + display: inline-block; + } + .bootstrap-dialog-button-icon { + margin-right: 3px; + } + .bootstrap-dialog-close-button { + float: right; + filter:alpha(opacity=90); + -moz-opacity:0.9; + -khtml-opacity: 0.9; + opacity: 0.9; + &:hover { + cursor: pointer; + filter: alpha(opacity=100); + -moz-opacity: 1; + -khtml-opacity: 1; + opacity: 1; + } + } + + /* dialog types */ + &.type-default { + .modal-header { + background-color: #fff; + } + .bootstrap-dialog-title { + color: #333; + } + } + + &.type-info { + .modal-header { + background-color: #B0CDDB; + } + } + + &.type-primary { + .modal-header { + background-color: #EA7105; + } + } + + &.type-success { + .modal-header { + background-color: #9BD275; + } + } + + &.type-warning { + .modal-header { + background-color: #f0ad4e; + } + } + + &.type-danger { + .modal-header { + background-color: #d9534f; + } + } + + &.size-large { + .bootstrap-dialog-title { + font-size: 24px; + } + .bootstrap-dialog-close-button { + font-size: 30px; + } + .bootstrap-dialog-message { + font-size: 18px; + } + } + + /** + * Icon animation + * Copied from font-awesome: http://fontawesome.io/ + **/ + .icon-spin { + display: inline-block; + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; + } + @-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + } + } + @-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + } + } + @-o-keyframes spin { + 0% { + -o-transform: rotate(0deg); + } + 100% { + -o-transform: rotate(359deg); + } + } + @-ms-keyframes spin { + 0% { + -ms-transform: rotate(0deg); + } + 100% { + -ms-transform: rotate(359deg); + } + } + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } + } + /** End of icon animation **/ +} \ No newline at end of file diff --git a/src/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css b/src/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css new file mode 100644 index 000000000..a00591ba2 --- /dev/null +++ b/src/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css @@ -0,0 +1,113 @@ +.modal-backdrop { + z-index: -1; +} +.bootstrap-dialog { + /* dialog types */ + /** + * Icon animation + * Copied from font-awesome: http://fontawesome.io/ + **/ + /** End of icon animation **/ +} +.bootstrap-dialog .modal-header { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +.bootstrap-dialog .bootstrap-dialog-title { + color: #fff; + display: inline-block; +} +.bootstrap-dialog .bootstrap-dialog-button-icon { + margin-right: 3px; +} +.bootstrap-dialog .bootstrap-dialog-close-button { + float: right; + filter: alpha(opacity=90); + -moz-opacity: 0.9; + -khtml-opacity: 0.9; + opacity: 0.9; +} +.bootstrap-dialog .bootstrap-dialog-close-button:hover { + cursor: pointer; + filter: alpha(opacity=100); + -moz-opacity: 1; + -khtml-opacity: 1; + opacity: 1; +} +.bootstrap-dialog.type-default .modal-header { + background-color: #fff; +} +.bootstrap-dialog.type-default .bootstrap-dialog-title { + color: #333; +} +.bootstrap-dialog.type-info .modal-header { + background-color: #B0CDDB; +} +.bootstrap-dialog.type-primary .modal-header { + background-color: #EA7105; +} +.bootstrap-dialog.type-success .modal-header { + background-color: #9BD275; +} +.bootstrap-dialog.type-warning .modal-header { + background-color: #f0ad4e; +} +.bootstrap-dialog.type-danger .modal-header { + background-color: #d9534f; +} +.bootstrap-dialog.size-large .bootstrap-dialog-title { + font-size: 24px; +} +.bootstrap-dialog.size-large .bootstrap-dialog-close-button { + font-size: 30px; +} +.bootstrap-dialog.size-large .bootstrap-dialog-message { + font-size: 18px; +} +.bootstrap-dialog .icon-spin { + display: inline-block; + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; +} +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + } +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg); + } + 100% { + -o-transform: rotate(359deg); + } +} +@-ms-keyframes spin { + 0% { + -ms-transform: rotate(0deg); + } + 100% { + -ms-transform: rotate(359deg); + } +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } +}