How to add options on the fly to LoadingOverlay with javascript?

[jm]

Been searching for it in faq and at Google with no luck…

I want to add options on the fly to LoadingOverlay with javascript.

I have been trying to use the plugin like this:
`$(container).loadingOverlay({
text: ‘testing’,
textColor: ‘#000000’,
background: “rgba(255, 255, 255, 0.8)”,
fontawesome: ‘fas fa-spinner’,
fontawesomeAnimation: true,
});

But it looks like the LoadingOverlay.prototype in theme.js line 1111 overwrites it. Is there antoher way to use a LoadingOverlay? Maybe api wise?

---

[Support2]

Hello,

First note that some of the options you are trying on the LoadingOverlay plugin don’t exists. Please follow the steps below to initialize the loading overlay manually trough JS:

1) Using as base the HTML of “Using on a Panel” example, just remove the attributes data-loading-overlay data-loading-overlay-options. Like this code below:

<section class="card">
	<header class="card-header">
		<div class="card-actions">
			<a href="#" class="card-action card-action-toggle" data-card-toggle></a>
			<a href="#" class="card-action card-action-dismiss" data-card-dismiss></a>
		</div>

		<h2 class="card-title">Using on a Panel</h2>
	</header>
	<div class="my-custom-loading-overlay card-body" style="min-height: 150px;">
		Content.
	</div>
</section>

* Also note the class my-custom-loading-overlay.

2) Add in (js/custom.js):

$.extend(theme.LoadingOverlay.prototype, {
	build: function() {
		
		// Change the HTML of loading
		loadingOverlayTemplate = [
			'<div class="loading-overlay">',
				'<div class="custom-text-loader">Testing / <i class="fas fa-spinner"></i></div>',
			'</div>'
		].join('');

		if ( !this.$overlay.closest(document.documentElement).get(0) ) {
			if ( !this.$cachedOverlay ) {
				this.$overlay = $( loadingOverlayTemplate ).clone();

				if ( this.options.css ) {
					this.$overlay.css( this.options.css );
					this.$overlay.find( '.loader' ).addClass( this.loaderClass );
				}
			} else {
				this.$overlay = this.$cachedOverlay.clone();
			}

			this.$wrapper.append( this.$overlay );
		}

		if ( !this.$cachedOverlay ) {
			this.$cachedOverlay = this.$overlay.clone();
		}

		return this;
	}
});

// Initialize the custom element with Loading Overlay
$('.my-custom-loading-overlay').loadingOverlay({
	startShowing: true,
	css: {
		color: '#000',
		'backgroundColor': 'rgba(255, 255, 255, 0.8)'
	}
});

* On the loadingOverlayTemplate is where you can change the HTML of loading overlay.

Please, try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[Author]

Posts