Source: admin/javascript/engine/extensions/datatable_loading_spinner.js

/* --------------------------------------------------------------
 datatable_loading_spinner.js 2017-03-16
 Gambio GmbH
 http://www.gambio.de
 Copyright (c) 2017 Gambio GmbH
 Released under the GNU General Public License (Version 2)
 [http://www.gnu.org/licenses/gpl-2.0.html]
 --------------------------------------------------------------
 */

/**
 * ## Enable DataTable Loading Spinner
 *
 * The loading spinner will be visible during every DataTable AJAX request.
 * 
 * ### Options 
 * 
 * ** Z-Index Reference Selector | `data-datatable_loading_spinner-z-index-reference-selector` | String | Optional**
 * Provide a reference selector that will be used as a z-index reference. Defaults to ".table-fixed-header thead.fixed".
 *
 * @module Admin/Extensions/datatable_loading_spinner
 */
gx.extensions.module('datatable_loading_spinner', ['loading_spinner'], function(data) {
	
	'use strict';
	
	// ------------------------------------------------------------------------
	// VARIABLES
	// ------------------------------------------------------------------------
	
	/**
	 * Module Selector
	 *
	 * @type {jQuery}
	 */
	const $this = $(this);
	
	/**
	 * Default Options 
	 * 
	 * @type {Object}
	 */
	const defaults = {
		zIndexReferenceSelector: '.table-fixed-header thead.fixed'	
	};
	
	/**
	 * Final Options
	 * 
	 * @type {Object}
	 */
	const options = $.extend(true, {}, defaults, data);
	
	/**
	 * Module Instance
	 *
	 * @type {Object}
	 */
	const module = {};
	
	/**
	 * Loading Spinner Selector
	 *
	 * @type {jQuery}
	 */
	let $spinner;
	
	// ------------------------------------------------------------------------
	// FUNCTIONS
	// ------------------------------------------------------------------------
	
	/**
	 * On Pre DataTable XHR Event
	 *
	 * Display the loading spinner on the table.
	 */
	function _onDataTablePreXhr() {
		const zIndex = parseInt($(options.zIndexReferenceSelector).css('z-index'));
		$spinner = jse.libs.loading_spinner.show($this, zIndex);
	}
	
	/**
	 * On XHR DataTable Event
	 *
	 * Hide the displayed loading spinner.
	 */
	function _onDataTableXhr() {
		if ($spinner) {
			jse.libs.loading_spinner.hide($spinner);
		}
	}
	
	// ------------------------------------------------------------------------
	// INITIALIZATION
	// ------------------------------------------------------------------------
	
	module.init = function(done) {
		$this
			.on('preXhr.dt', _onDataTablePreXhr)
			.on('xhr.dt', _onDataTableXhr);
		
		$(window).on('JSENGINE_INIT_FINISHED', () => {
			_onDataTablePreXhr();
			
			// Hide the spinner if the table is already loaded.  
			if ($this.DataTable().ajax.json() !== undefined) {
				_onDataTableXhr();
			}
		});
		
		done();
	};
	
	return module;
	
});