new: [js:bootstrap-helper] Added support of text in overlay

pull/37/head
mokaddem 2021-01-14 12:04:24 +01:00
parent 691032551b
commit 36cc3d82fe
1 changed files with 10 additions and 1 deletions

View File

@ -625,6 +625,7 @@ class OverlayFactory {
/** /**
* @namespace * @namespace
* @property {string} text - A small text indicating the reason of the overlay
* @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} variant - The variant of the overlay * @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 {number} opacity - The opacity of the overlay
* @property {boolean} rounded - If the overlay should be rounded * @property {boolean} rounded - If the overlay should be rounded
@ -634,6 +635,7 @@ class OverlayFactory {
* @property {string=('border'|'grow')} spinnerSmall - If the spinner inside the overlay should be small * @property {string=('border'|'grow')} spinnerSmall - If the spinner inside the overlay should be small
*/ */
static defaultOptions = { static defaultOptions = {
text: '',
variant: 'light', variant: 'light',
opacity: 0.85, opacity: 0.85,
blur: '2px', blur: '2px',
@ -645,9 +647,10 @@ class OverlayFactory {
} }
static overlayWrapper = '<div aria-busy="true" class="position-relative"/>' static overlayWrapper = '<div aria-busy="true" class="position-relative"/>'
static overlayContainer = '<div class="position-absolute" style="inset: 0px; z-index: 10;"/>' static overlayContainer = '<div class="position-absolute text-nowrap" style="inset: 0px; z-index: 10;"/>'
static overlayBg = '<div class="position-absolute" style="inset: 0px;"/>' static overlayBg = '<div class="position-absolute" style="inset: 0px;"/>'
static overlaySpinner = '<div class="position-absolute" style="top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"><span aria-hidden="true" class=""><!----></span></div></div>' static overlaySpinner = '<div class="position-absolute" style="top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"><span aria-hidden="true" class=""><!----></span></div></div>'
static overlayText = '<span class="ml-1 align-text-top"></span>'
shown = false shown = false
originalNodeIndex = 0 originalNodeIndex = 0
@ -667,6 +670,12 @@ class OverlayFactory {
if (this.options.spinnerVariant.length > 0) { if (this.options.spinnerVariant.length > 0) {
this.$overlaySpinner.children().addClass(`text-${this.options.spinnerVariant}`) this.$overlaySpinner.children().addClass(`text-${this.options.spinnerVariant}`)
} }
if (this.options.text.length > 0) {
this.$overlayText = $(OverlayFactory.overlayText);
this.$overlayText.addClass(`text-${this.options.spinnerVariant}`)
.text(this.options.text)
this.$overlaySpinner.append(this.$overlayText)
}
} }
/** Create the overlay, attach it to the DOM and display it */ /** Create the overlay, attach it to the DOM and display it */