Merge pull request #383 from data-handler/master

New option to display loading overlay

features/slidingChild/datatables.slidingChild.js

@@ -1,7 +1,7 @@
 /**
  * @summary     SlidingChild
  * @description Show / Hide row child plugin
- * @version     2.0.1
+ * @version     2.0.2
  * @file        dataTables.slidingChild.js
  * @author      Nick Adkinson (https://github.com/data-handler)
  * @copyright   Copyright 2018 Nick Adkinson
@@ -107,7 +107,11 @@ SlidingChild.prototype = {
 		}.bind( this, dtRow );
 	},
 	_showChild: function(dtRow) {	
-		this.s.source( $(dtRow.node() ), this._response(dtRow) );		
+		var $tr = $(dtRow.node());
+		if (this.s.displayLoadingIndicator) {
+			this._addLoadingIndicator($tr);
+		}
+		this.s.source( $tr, this._response(dtRow) );		
     },
 	_response: function(dtRow) {
 		return function( dtRow, childData ) {
@@ -117,11 +121,16 @@ SlidingChild.prototype = {
 	__showChild: function(dtRow, data) {   
 		var settings = this.s;                 
 		var slider = settings.slider;
+		var $tr = $(dtRow.node());
+
+		if (settings.displayLoadingIndicator) {
+			$('.'+this.s.loadingIndicatorClass).remove();
+		}
 
         slider.append(data);
 		dtRow.child(slider, settings.childClass).show();
 		
-		$(dtRow.node()).toggleClass('shown');
+		$tr.toggleClass('shown');
 		this._updateFadedRows();
 
         if (settings.animateShow) {
@@ -204,6 +213,16 @@ SlidingChild.prototype = {
 			.to$()
 			.css('opacity', 1)
 			.removeClass('faded');
+	},
+	_addLoadingIndicator: function($tr) {
+		var position = $tr.position();
+		var indicator = $(this.s.loadingIndicatorContent);
+		indicator.addClass(this.s.loadingIndicatorClass);
+		indicator.css('top', position.top);
+		indicator.css('left', position.left);
+		indicator.css('height', $tr.height());
+		
+		$tr.append(indicator);
 	}
 };
 
@@ -218,7 +237,10 @@ SlidingChild.defaults = {
 	fadeOpacity: 0.4,
 	animationSpeed: 200,
 	onShown: function() {},
-	onHidden: function() {}
+	onHidden: function() {},
+	displayLoadingIndicator: false,
+	loadingIndicatorClass: 'loading-indicator',
+	loadingIndicatorContent: '<div style="background: black; color: white; display: flex; align-items: center; justify-content: center; opacity: 0.5; position: absolute; width: 100%; z-index: 100;">Loading...</div>'
 };