cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

chg: [js:bootstrap-helper] Overlay factory supports dark theme and auto rounding

pull/37/head
mokaddem 2021-01-18 09:49:20 +01:00
parent 815645767b
commit 7743369da4
1 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
webroot/js/bootstrap-helper.js
View File

@ -107,7 +107,7 @@ class UIFactory {
otherStatusNodes.push(loadingOverlay) otherStatusNodes.push(loadingOverlay)
}) })
return AJAXApi.quickFetchURL(url, { return AJAXApi.quickFetchURL(url, {
statusNode: $statusNode[0] statusNode: $statusNode[0],
}).then((theHTML) => { }).then((theHTML) => {
$container.replaceWith(theHTML) $container.replaceWith(theHTML)
return $container return $container
@ -622,13 +622,17 @@ class ModalFactory {
class OverlayFactory { class OverlayFactory {
/** /**
* Create a loading overlay * Create a loading overlay
* @param {(jQuery|string)} node - The node on which the overlay should be placed * @param {(jQuery|string|HTMLButtonElement)} node - The node on which the overlay should be placed
* @param {Object} options - The options supported by OverlayFactory#defaultOptions * @param {Object} options - The options supported by OverlayFactory#defaultOptions
*/ */
constructor(node, options={}) { constructor(node, options={}) {
this.node = node this.node = node
this.$node = $(this.node) this.$node = $(this.node)
this.options = Object.assign({}, OverlayFactory.defaultOptions, options) if (darkMode) {
this.options = Object.assign({}, OverlayFactory.defaultOptionsDarkTheme, options)
} else {
this.options = Object.assign({}, OverlayFactory.defaultOptions, options)
}
this.options.auto = options.auto ? this.options.auto : !(options.variant || options.spinnerVariant) this.options.auto = options.auto ? this.options.auto : !(options.variant || options.spinnerVariant)
if (this.options.auto) { if (this.options.auto) {
this.adjustOptionsBasedOnNode() this.adjustOptionsBasedOnNode()
@ -646,16 +650,29 @@ class OverlayFactory {
* @property {boolean} spinnerSmall - If the spinner inside the overlay should be small * @property {boolean} spinnerSmall - If the spinner inside the overlay should be small
* @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 defaultOptionsDarkTheme = {
text: '', text: '',
variant: 'light', variant: 'light',
opacity: 0.15, opacity: 0.25,
blur: '2px', blur: '2px',
rounded: false, rounded: false,
auto: true, auto: true,
spinnerVariant: '', spinnerVariant: '',
spinnerSmall: false, spinnerSmall: false,
spinnerType: 'border' spinnerType: 'border',
fallbackBoostrapVariant: 'light'
}
static defaultOptions = {
text: '',
variant: 'light',
opacity: 0.85,
blur: '2px',
rounded: false,
auto: true,
spinnerVariant: '',
spinnerSmall: false,
spinnerType: 'border',
fallbackBoostrapVariant: ''
} }
static overlayWrapper = '<div aria-busy="true" class="position-relative"/>' static overlayWrapper = '<div aria-busy="true" class="position-relative"/>'
@ -733,14 +750,14 @@ class OverlayFactory {
if (this.$node.width() < 50 || this.$node.height() < 50) { if (this.$node.width() < 50 || this.$node.height() < 50) {
this.options.spinnerSmall = true this.options.spinnerSmall = true
} }
if (this.$node.is('input[type="checkbox"]')) { if (this.$node.is('input[type="checkbox"]') || this.$node.css('border-radius') !== '0px') {
this.options.rounded = true this.options.rounded = true
} else { }
let classes = this.$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) const detectedVariant = OverlayFactory.detectedBootstrapVariant(classes, this.options.fallbackBoostrapVariant)
} this.options.spinnerVariant = detectedVariant
} }
} }
@ -748,7 +765,7 @@ class OverlayFactory {
* Detect the bootstrap variant from a list of classes * Detect the bootstrap variant from a list of classes
* @param {Array} classes - A list of classes containg a bootstrap variant * @param {Array} classes - A list of classes containg a bootstrap variant
*/ */
static detectedBootstrapVariant(classes) { static detectedBootstrapVariant(classes, fallback=OverlayFactory.defaultOptions.fallbackBoostrapVariant) {
const re = /^[a-zA-Z]+-(?<variant>primary|success|danger|warning|info|light|dark|white|transparent)$/; 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++) {
@ -759,7 +776,7 @@ class OverlayFactory {
} }
} }
} }
return ''; return fallback
} }
} }