chg: [js:bootstrap-helper] Added documentation

pull/37/head
mokaddem 2020-12-15 13:40:26 +01:00
parent f9bf1c6f55
commit a4cf1a8036
1 changed files with 236 additions and 57 deletions

View File

@ -1,6 +1,10 @@
class UIFactory { class UIFactory {
/* Display a toast based on provided options */ /**
* Create and display a toast
* @param {Object} options - The options to be passed to the Toaster class
* @return {Object} The Toaster object
*/
toast(options) { toast(options) {
const theToast = new Toaster(options); const theToast = new Toaster(options);
theToast.makeToast() theToast.makeToast()
@ -8,7 +12,11 @@ class UIFactory {
return theToast return theToast
} }
/* Display a modal based on provided options */ /**
* Create and display a modal
* @param {Object} options - The options to be passed to the ModalFactory class
* @return {Object} The ModalFactory object
*/
modal (options) { modal (options) {
const theModal = new ModalFactory(options); const theModal = new ModalFactory(options);
theModal.makeModal() theModal.makeModal()
@ -16,14 +24,19 @@ class UIFactory {
return theModal return theModal
} }
/* Display a modal based on provided options */ /**
modalFromURL (url, successCallback, failCallback) { * Create and display a modal where the modal's content is fetched from the provided URL.
* @param {string} url - The URL from which the modal's content should be fetched
* @param {ModalFactory~POSTSuccessCallback} POSTSuccessCallback - The callback that handles successful form submission
* @param {ModalFactory~POSTFailCallback} POSTFailCallback - The callback that handles form submissions errors and validation errors.
* @return {Promise<Object>} Promise object resolving to the ModalFactory object
*/
modalFromURL (url, POSTSuccessCallback, POSTFailCallback) {
return AJAXApi.quickFetchURL(url).then((modalHTML) => { return AJAXApi.quickFetchURL(url).then((modalHTML) => {
const theModal = new ModalFactory({ const theModal = new ModalFactory({
rawHTML: modalHTML, rawHTML: modalHTML,
replaceFormSubmissionByAjax: true, POSTSuccessCallback: POSTSuccessCallback !== undefined ? POSTSuccessCallback : () => {},
successCallback: successCallback !== undefined ? successCallback : () => {}, POSTFailCallback: POSTFailCallback !== undefined ? POSTFailCallback : (errorMessage) => {},
failCallback: failCallback !== undefined ? failCallback : (errorMessage) => {},
}); });
theModal.makeModal(modalHTML) theModal.makeModal(modalHTML)
theModal.show() theModal.show()
@ -32,22 +45,34 @@ class UIFactory {
}) })
} }
/* Fetch HTML from the provided URL and override content of $container. $statusNode allows to specify another HTML node to display the loading */ /**
* Fetch HTML from the provided URL and override the $container's content. $statusNode allows to specify another HTML node to display the loading
* @param {string} url - The URL from which the $container's content should be fetched
* @param {(jQuery|string)} $container - The container that should hold the data fetched
* @param {(jQuery|string)} [$statusNode=null] - A reference to a HTML node on which the loading animation should be displayed. If not provided, $container will be used
* @return {Promise<Object>} Promise object resolving to the $container object after its content has been replaced
*/
reload (url, $container, $statusNode=null) { reload (url, $container, $statusNode=null) {
$container = $($container) $container = $($container)
$statusNode = $($statusNode) $statusNode = $($statusNode)
if (!$statusNode) { if (!$statusNode) {
$statusNode = $container $statusNode = $container
} }
AJAXApi.quickFetchURL(url, { return AJAXApi.quickFetchURL(url, {
statusNode: $statusNode[0] statusNode: $statusNode[0]
}).then((data) => { }).then((theHTML) => {
$container.replaceWith(data) $container.replaceWith(theHTML)
return $container
}) })
} }
} }
/** Class representing a Toast */
class Toaster { class Toaster {
/**
* Create a Toast.
* @param {Object} options - The options supported by Toaster#defaultOptions
*/
constructor(options) { constructor(options) {
this.options = Object.assign({}, Toaster.defaultOptions, options) this.options = Object.assign({}, Toaster.defaultOptions, options)
this.bsToastOptions = { this.bsToastOptions = {
@ -56,6 +81,20 @@ class Toaster {
} }
} }
/**
* @namespace
* @property {number} id - The ID to be used for the toast's container
* @property {string} title - The title's content of the toast
* @property {string} muted - The muted's content of the toast
* @property {string} body - The body's content of the toast
* @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} variant - The variant of the toast
* @property {boolean} autohide - If the toast show be hidden after some time defined by the delay
* @property {number} delay - The number of milliseconds the toast should stay visible before being hidden
* @property {string} titleHtml - The raw HTML title's content of the toast
* @property {string} mutedHtml - The raw HTML muted's content of the toast
* @property {string} bodyHtml - The raw HTML body's content of the toast
* @property {boolean} closeButton - If the toast's title should include a close button
*/
static defaultOptions = { static defaultOptions = {
id: false, id: false,
title: false, title: false,
@ -70,6 +109,7 @@ class Toaster {
closeButton: true, closeButton: true,
} }
/** Create the HTML of the toast and inject it into the DOM */
makeToast() { makeToast() {
if (this.isValid()) { if (this.isValid()) {
this.$toast = Toaster.buildToast(this.options) this.$toast = Toaster.buildToast(this.options)
@ -77,6 +117,7 @@ class Toaster {
} }
} }
/** Display the toast to the user and remove it from the DOM once it get hidden */
show() { show() {
if (this.isValid()) { if (this.isValid()) {
var that = this var that = this
@ -88,14 +129,26 @@ class Toaster {
} }
} }
/** Remove the toast from the DOM */
removeToast() { removeToast() {
this.$toast.remove(); this.$toast.remove();
} }
/**
* Check wheter a toast is valid
* @return {boolean} Return true if the toast contains at least data to be rendered
*/
isValid() { isValid() {
return this.options.title !== false || this.options.muted !== false || this.options.body !== false || this.options.titleHtml !== false || this.options.mutedHtml !== false || this.options.bodyHtml !== false return this.options.title !== false || this.options.titleHtml !== false ||
this.options.muted !== false || this.options.mutedHtml !== false ||
this.options.body !== false || this.options.bodyHtml !== false
} }
/**
* Build the toast HTML
* @param {Object} options - The options supported by Toaster#defaultOptions to build the toast
* @return {jQuery} The toast jQuery object
*/
static buildToast(options) { static buildToast(options) {
var $toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>') var $toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>')
if (options.id !== false) { if (options.id !== false) {
@ -142,14 +195,93 @@ class Toaster {
} }
} }
/** Class representing a Modal */
class ModalFactory { class ModalFactory {
/**
* Create a Modal.
* @param {Object} options - The options supported by ModalFactory#defaultOptions
*/
constructor(options) { constructor(options) {
this.options = Object.assign({}, ModalFactory.defaultOptions, options) this.options = Object.assign({}, ModalFactory.defaultOptions, options)
if (this.options.rawHTML) {
this.attachSubmitButtonListener = true
}
this.bsModalOptions = { this.bsModalOptions = {
show: true show: true
} }
} }
/**
* @callback ModalFactory~closeModalFunction
*/
/**
* @callback ModalFactory~confirm
* @param {ModalFactory~closeModalFunction} closeFunction - A function that will close the modal if called
* @param {Object} modalFactory - The instance of the ModalFactory
* @param {Object} evt - The event that triggered the confirm operation
*/
/**
* @callback ModalFactory~cancel
* @param {ModalFactory~closeModalFunction} closeFunction - A function that will close the modal if called
* @param {Object} modalFactory - The instance of the ModalFactory
* @param {Object} evt - The event that triggered the confirm operation
*/
/**
* @callback ModalFactory~APIConfirm
* @param {AJAXApi} ajaxApi - An instance of the AJAXApi with the AJAXApi.statusNode linked to the modal confirm button
*/
/**
* @callback ModalFactory~APIError
* @param {ModalFactory~closeModalFunction} closeFunction - A function that will close the modal if called
* @param {Object} modalFactory - The instance of the ModalFactory
* @param {Object} evt - The event that triggered the confirm operation
*/
/**
* @callback ModalFactory~shownCallback
* @param {Object} modalFactory - The instance of the ModalFactory
*/
/**
* @callback ModalFactory~hiddenCallback
* @param {Object} modalFactory - The instance of the ModalFactory
*/
/**
* @callback ModalFactory~POSTSuccessCallback
* @param {Object} data - The data received from the successful POST operation
*/
/**
* @callback ModalFactory~POSTFailCallback
* @param {string} errorMessage
*/
/**
* @namespace
* @property {number} id - The ID to be used for the modal's container
* @property {string=('sm'|'lg'|'xl'|'')} size - The size of the modal
* @property {boolean} centered - Should the modal be vertically centered
* @property {boolean} scrollable - Should the modal be scrollable
* @property {string} title - The title's content of the modal
* @property {string} titleHtml - The raw HTML title's content of the modal
* @property {string} body - The body's content of the modal
* @property {string} bodyHtml - The raw HTML body's content of the modal
* @property {string} rawHTML - The raw HTML of the whole modal. If provided, will override any other content
* @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} variant - The variant of the modal
* @property {string} modalClass - Classes to be added to the modal's container
* @property {string} headerClass - Classes to be added to the modal's header
* @property {string} bodyClass - Classes to be added to the modal's body
* @property {string} footerClass - Classes to be added to the modal's footer
* @property {string=('ok-only','confirm','confirm-s uccess','confirm-warning','confirm-danger')} type - Pre-configured template covering most use cases
* @property {string} confirmText - The text to be placed in the confirm button
* @property {string} cancelText - The text to be placed in the cancel button
* @property {boolean} closeManually - If true, the modal will be closed automatically whenever a footer's button is pressed
* @property {boolean} closeOnSuccess - If true, the modal will be closed if the $FILL_ME operation is successful
* @property {ModalFactory~confirm} confirm - The callback that should be called if the user confirm the modal
* @property {ModalFactory~cancel} cancel - The callback that should be called if the user cancel the modal
* @property {ModalFactory~APIConfirm} APIConfirm - The callback that should be called if the user confirm the modal. Behave like the confirm option but provide an AJAXApi object that can be used to issue requests
* @property {ModalFactory~APIError} APIError - The callback called if the APIConfirm callback fails.
* @property {ModalFactory~shownCallback} shownCallback - The callback that should be called whenever the modal is shown
* @property {ModalFactory~hiddenCallback} hiddenCallback - The callback that should be called whenever the modal is hiddenAPIConfirm
* @property {ModalFactory~POSTSuccessCallback} POSTSuccessCallback - The callback that should be called if the POST operation has been a success
* @property {ModalFactory~POSTFailCallback} POSTFailCallback - The callback that should be called if the POST operation has been a failure (Either the request failed or the form validation did not pass)
*/
static defaultOptions = { static defaultOptions = {
id: false, id: false,
size: 'md', size: 'md',
@ -161,24 +293,23 @@ class ModalFactory {
bodyHtml: false, bodyHtml: false,
rawHTML: false, rawHTML: false,
variant: '', variant: '',
modalClass: [], modalClass: '',
headerClass: [], headerClass: '',
bodyClass: [], bodyClass: '',
footerClass: [], footerClass: '',
buttons: [],
type: 'ok-only', type: 'ok-only',
confirmText: 'Confirm', confirmText: 'Confirm',
cancelText: 'Cancel', cancelText: 'Cancel',
closeManually: false, closeManually: false,
closeOnSuccess: true, closeOnSuccess: true,
confirm: function() {}, confirm: function() {},
APIConfirm: null,
cancel: function() {}, cancel: function() {},
error: function() {}, APIConfirm: null,
APIError: function() {},
shownCallback: function() {}, shownCallback: function() {},
hiddenCallback: function() {}, hiddenCallback: function() {},
successCallback: function() {}, POSTSuccessCallback: function() {},
replaceFormSubmissionByAjax: false POSTFailCallback: function() {},
} }
static availableType = [ static availableType = [
@ -192,6 +323,7 @@ class ModalFactory {
static closeButtonHtml = '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' static closeButtonHtml = '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
static spinnerHtml = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...' static spinnerHtml = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...'
/** Create the HTML of the modal and inject it into the DOM */
makeModal() { makeModal() {
if (this.isValid()) { if (this.isValid()) {
this.$modal = this.buildModal() this.$modal = this.buildModal()
@ -199,42 +331,55 @@ class ModalFactory {
} }
} }
/** Display the modal and remove it form the DOM once it gets hidden */
show() { show() {
if (this.isValid()) { if (this.isValid()) {
var that = this var that = this
this.$modal.modal(this.bsModalOptions) this.$modal.modal(this.bsModalOptions)
.on('hidden.bs.modal', function () { .on('hidden.bs.modal', function () {
that.removeModal() that.removeModal()
that.options.hiddenCallback() that.options.hiddenCallback(that)
}) })
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
that.options.shownCallback() that.options.shownCallback(that)
if (that.options.replaceFormSubmissionByAjax) { if (that.attachSubmitButtonListener) {
that.replaceFormSubmissionByAjax() that.findSubmitButtonAndAddListener()
} }
}) })
} }
} }
/** Hide the modal using the bootstrap modal's hide command */
hide() { hide() {
this.$modal.modal('hide') this.$modal.modal('hide')
} }
/** Remove the modal from the DOM */
removeModal() { removeModal() {
this.$modal.remove(); this.$modal.remove();
} }
/**
* Check wheter a modal is valid
* @return {boolean} Return true if the modal contains at least data to be rendered
*/
isValid() { isValid() {
return this.options.title !== false || this.options.body !== false || this.options.titleHtml !== false || this.options.bodyHtml !== false || this.options.rawHTML !== false return this.options.title !== false || this.options.titleHtml !== false ||
this.options.body !== false || this.options.bodyHtml !== false ||
this.options.rawHTML !== false
} }
/**
* Build the modal HTML
* @return {jQuery} The modal jQuery object
*/
buildModal() { buildModal() {
const $modal = $('<div class="modal fade" tabindex="-1" aria-hidden="true"/>') const $modal = $('<div class="modal fade" tabindex="-1" aria-hidden="true"/>')
if (this.options.id !== false) { if (this.options.id !== false) {
$modal.attr('id', this.options.id) $modal.attr('id', this.options.id)
$modal.attr('aria-labelledby', this.options.id) $modal.attr('aria-labelledby', this.options.id)
} }
if (this.options.modalClass !== false) { if (this.options.modalClass) {
$modal.addClass(this.options.modalClass) $modal.addClass(this.options.modalClass)
} }
let $modalDialog let $modalDialog
@ -245,6 +390,9 @@ class ModalFactory {
const $modalContent = $('<div class="modal-content"/>') const $modalContent = $('<div class="modal-content"/>')
if (this.options.title !== false || this.options.titleHtml !== false) { if (this.options.title !== false || this.options.titleHtml !== false) {
const $modalHeader = $('<div class="modal-header"/>') const $modalHeader = $('<div class="modal-header"/>')
if (this.options.headerClass) {
$modalHeader.addClass(this.options.headerClass)
}
let $modalHeaderText let $modalHeaderText
if (this.options.titleHtml !== false) { if (this.options.titleHtml !== false) {
$modalHeaderText = $('<div/>').html(this.options.titleHtml); $modalHeaderText = $('<div/>').html(this.options.titleHtml);
@ -257,6 +405,9 @@ class ModalFactory {
if (this.options.body !== false || this.options.bodyHtml !== false) { if (this.options.body !== false || this.options.bodyHtml !== false) {
const $modalBody = $('<div class="modal-body"/>') const $modalBody = $('<div class="modal-body"/>')
if (this.options.bodyClass) {
$modalBody.addClass(this.options.bodyClass)
}
let $modalBodyText let $modalBodyText
if (this.options.bodyHtml !== false) { if (this.options.bodyHtml !== false) {
$modalBodyText = $('<div/>').html(this.options.bodyHtml); $modalBodyText = $('<div/>').html(this.options.bodyHtml);
@ -268,6 +419,9 @@ class ModalFactory {
} }
const $modalFooter = $('<div class="modal-footer"/>') const $modalFooter = $('<div class="modal-footer"/>')
if (this.options.footerClass) {
$modalFooter.addClass(this.options.footerClass)
}
$modalFooter.append(this.getFooterBasedOnType()) $modalFooter.append(this.getFooterBasedOnType())
$modalContent.append($modalFooter) $modalContent.append($modalFooter)
@ -277,6 +431,7 @@ class ModalFactory {
return $modal return $modal
} }
/** Returns the correct footer data based on the provided type */
getFooterBasedOnType() { getFooterBasedOnType() {
if (this.options.type == 'ok-only') { if (this.options.type == 'ok-only') {
return this.getFooterOkOnly() return this.getFooterOkOnly()
@ -287,6 +442,7 @@ class ModalFactory {
} }
} }
/** Generate the ok-only footer type */
getFooterOkOnly() { getFooterOkOnly() {
return [ return [
$('<button type="button" class="btn btn-primary">OK</button>') $('<button type="button" class="btn btn-primary">OK</button>')
@ -294,6 +450,7 @@ class ModalFactory {
] ]
} }
/** Generate the confirm-* footer type */
getFooterConfirm() { getFooterConfirm() {
let variant = this.options.type.split('-')[1] let variant = this.options.type.split('-')[1]
variant = variant !== undefined ? variant : 'primary' variant = variant !== undefined ? variant : 'primary'
@ -314,10 +471,12 @@ class ModalFactory {
return [$buttonCancel, $buttonConfirm] return [$buttonCancel, $buttonConfirm]
} }
/** Return a close button */
static getCloseButton() { static getCloseButton() {
return $(ModalFactory.closeButtonHtml) return $(ModalFactory.closeButtonHtml)
} }
/** Generate the function that will be called when the user confirm the modal */
getConfirmationHandlerFunction() { getConfirmationHandlerFunction() {
return (evt) => { return (evt) => {
let confirmFunction = this.options.confirm let confirmFunction = this.options.confirm
@ -337,13 +496,14 @@ class ModalFactory {
} }
}) })
.catch(() => { .catch(() => {
this.options.error(() => { this.hide() }, this, evt) this.options.APIError(() => { this.hide() }, this, evt)
}) })
} }
} }
} }
replaceFormSubmissionByAjax() { /** Attach the submission click listener for modals that have been generated by raw HTML */
findSubmitButtonAndAddListener() {
const $submitButton = this.$modal.find('.modal-footer #submitButton') const $submitButton = this.$modal.find('.modal-footer #submitButton')
const formID = $submitButton.data('form-id') const formID = $submitButton.data('form-id')
let $form let $form
@ -358,15 +518,15 @@ class ModalFactory {
return tmpApi.postForm($form[0]) return tmpApi.postForm($form[0])
.then((data) => { .then((data) => {
if (data.success) { if (data.success) {
this.options.successCallback(data) this.options.POSTSuccessCallback(data)
} else { // Validation error, replace modal content with new html } else { // Validation error, replace modal content with new html
this.$modal.html(data.html) this.$modal.html(data.html)
this.replaceFormSubmissionByAjax() this.findSubmitButtonAndAddListener()
return Promise.reject('Validation error'); return Promise.reject('Validation error');
} }
}) })
.catch((errorMessage, response) => { .catch((errorMessage) => {
this.options.failCallback(errorMessage) this.options.POSTFailCallback(errorMessage)
return Promise.reject(errorMessage); return Promise.reject(errorMessage);
}) })
} }
@ -374,23 +534,39 @@ class ModalFactory {
} }
} }
/** Class representing an loading overlay */
class OverlayFactory { class OverlayFactory {
constructor(options) { /**
* Create a loading overlay
* @param {(jQuery|string)} node - The node on which the overlay should be placed
* @param {Object} options - The options supported by OverlayFactory#defaultOptions
*/
constructor(node, options) {
this.node = node
this.$node = $(this.node)
this.options = Object.assign({}, OverlayFactory.defaultOptions, options) this.options = Object.assign({}, OverlayFactory.defaultOptions, options)
if (this.options.spinnerAuto) { if (this.options.auto) {
this.adjustSpinnerOptionsBasedOnNode() this.adjustOptionsBasedOnNode()
} }
} }
/**
* @namespace
* @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} variant - The variant of the overlay
* @property {number} opacity - The opacity of the overlay
* @property {boolean} rounded - If the overlay should be rounded
* @property {number} auto - Whether overlay and spinner options should be adapted automatically based on the node
* @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} spinnerVariant - The variant of the spinner
* @property {boolean} spinnerSmall - If the spinner inside the overlay should be small
*/
static defaultOptions = { static defaultOptions = {
node: false,
variant: 'light', variant: 'light',
opacity: 0.85, opacity: 0.85,
blur: '2px', blur: '2px',
rounded: false, rounded: false,
auto: true,
spinnerVariant: '', spinnerVariant: '',
spinnerSmall: false, spinnerSmall: false,
spinnerAuto: true
} }
static overlayWrapper = '<div aria-busy="true" class="position-relative"/>' static overlayWrapper = '<div aria-busy="true" class="position-relative"/>'
@ -401,12 +577,8 @@ class OverlayFactory {
shown = false shown = false
originalNodeIndex = 0 originalNodeIndex = 0
isValid() { /** Create the HTML of the overlay */
return this.options.node !== false
}
buildOverlay() { buildOverlay() {
this.$node = $(this.options.node)
this.$overlayWrapper = $(OverlayFactory.overlayWrapper) this.$overlayWrapper = $(OverlayFactory.overlayWrapper)
this.$overlayContainer = $(OverlayFactory.overlayContainer) this.$overlayContainer = $(OverlayFactory.overlayContainer)
this.$overlayBg = $(OverlayFactory.overlayBg) this.$overlayBg = $(OverlayFactory.overlayBg)
@ -421,21 +593,22 @@ class OverlayFactory {
} }
} }
/** Create the overlay, attach it to the DOM and display it */
show() { show() {
if (this.isValid()) { this.buildOverlay()
this.buildOverlay() this.mountOverlay()
this.mountOverlay() this.shown = true
this.shown = true
}
} }
/** Hide the overlay and remove it from the DOM */
hide() { hide() {
if (this.isValid() && this.shown) { if (this.shown) {
this.unmountOverlay() this.unmountOverlay()
} }
this.shown = false this.shown = false
} }
/** Attach the overlay to the DOM */
mountOverlay() { mountOverlay() {
this.originalNodeIndex = this.$node.index() this.originalNodeIndex = this.$node.index()
this.$overlayBg.appendTo(this.$overlayContainer) this.$overlayBg.appendTo(this.$overlayContainer)
@ -445,26 +618,28 @@ class OverlayFactory {
this.$node.prependTo(this.$overlayWrapper) this.$node.prependTo(this.$overlayWrapper)
} }
/** Remove the overlay from the DOM */
unmountOverlay() { unmountOverlay() {
this.appendToIndex(this.$node, this.$overlayWrapper.parent(), this.originalNodeIndex) this.appendToIndex(this.$node, this.$overlayWrapper.parent(), this.originalNodeIndex)
this.$overlayWrapper.remove() this.$overlayWrapper.remove()
this.originalNodeIndex = 0 this.originalNodeIndex = 0
} }
/** Append a node to the provided DOM index */
appendToIndex($node, $targetContainer, index) { appendToIndex($node, $targetContainer, index) {
const $target = $targetContainer.children().eq(index); const $target = $targetContainer.children().eq(index);
$node.insertBefore($target); $node.insertBefore($target);
} }
adjustSpinnerOptionsBasedOnNode() { /** Adjust instance's options based on the provided node */
let $node = $(this.options.node) adjustOptionsBasedOnNode() {
if ($node.width() < 50 || $node.height() < 50) { if (this.$node.width() < 50 || this.$node.height() < 50) {
this.options.spinnerSmall = true this.options.spinnerSmall = true
} }
if ($node.is('input[type="checkbox"]')) { if (this.$node.is('input[type="checkbox"]')) {
this.options.rounded = true this.options.rounded = true
} else { } else {
let classes = $node.attr('class') let classes = this.$node.attr('class')
if (classes !== undefined) { if (classes !== undefined) {
classes = classes.split(' ') classes = classes.split(' ')
this.options.spinnerVariant = OverlayFactory.detectedBootstrapVariant(classes) this.options.spinnerVariant = OverlayFactory.detectedBootstrapVariant(classes)
@ -472,8 +647,12 @@ class OverlayFactory {
} }
} }
/**
* Detect the bootstrap variant from a list of classes
* @param {Array} classes - A list of classes containg a bootstrap variant
*/
static detectedBootstrapVariant(classes) { static detectedBootstrapVariant(classes) {
const re = /^[a-zA-Z]+-(?<variant>primary|success)$/; const re = /^[a-zA-Z]+-(?<variant>primary|success|danger|warning|info|light|dark|white|transparent)$/;
let result let result
for (let i=0; i<classes.length; i++) { for (let i=0; i<classes.length; i++) {
let theClass = classes[i] let theClass = classes[i]