Home Forums Porto Admin Template How to add options on the fly to LoadingOverlay with javascript?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10030207
    jm
    Participant

    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?


    #10030209
    Support2
    Keymaster

    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.


Viewing 2 posts - 1 through 2 (of 2 total)