Adding ability to show an overlay and configure it through the javascript settings.

Signed-off-by: Ben Corlett <[email protected]>

Author: bencorlett

assets/js/jquery/grid-1.0.js

@@ -36,17 +36,19 @@
 			 * @var	Object
 			 */
 			var settings = {
-				identifier		: 'grid',
-				url				: '',
-				vars			: {
-					limit			: 'limit',
-					page			: 'page',
-					sort			: 'sort',
-					direction		: 'direction',
-					filters			: 'filters',
+				identifier			: 'grid',
+				url					: '',
+				vars				: {
+					limit				: 'limit',
+					page				: 'page',
+					sort				: 'sort',
+					direction			: 'direction',
+					filters				: 'filters',
 				},
-				ajax			: true,
-				currentParams	: {}
+				ajax				: true,
+				currentParams		: {},
+				showOverlay			: true,
+				fadeOverlaySpeed	: 'fast',
 			};
 
 			/**
@@ -235,6 +237,13 @@
 			 * When the handler needs to update
 			 */
 			handler.bind('update', function() {
+
+				/**
+				 * Fade in overlay
+				 */
+				if (settings.showOverlay) {
+					handler.find('div.overlay').fadeIn(settings.fadeOverlaySpeed);
+				}
 
 				/**
 				 * Update filter params
@@ -279,12 +288,23 @@
 				// to use ajax or not
 				if (settings.ajax) {
 					$.ajax({
-						url			: settings.url,
-						data		: {
+						url     : settings.url,
+						data    : {
 							grid_identifier	: settings.identifier
 						},
-						success		: function(data, textStatus, jqXHR) {
-							handler.replaceWith(data);
+						success : function(data, textStatus, jqXHR) {
+
+							if (settings.showOverlay) {
+								handler.find('div.overlay').fadeOut(settings.showOverlaySpeed, function() {
+									handler.replaceWith(data);
+								});
+							}
+							else {
+								handler.replaceWith(data);
+							}
+						},
+						error   : function(jqXHR, textStatus, errorThrown) {
+							handler.find('div.overlay').fadeOut('fast');
 						}
 					});
 				}

assets/js/jquery/grid-1.0.min.js

@@ -28,23 +28,41 @@
 	$(document).ready(function() {
 
 		$("#grid-<?php echo $grid->get_identifier()?>").sparkGrid({
-			identifier		: '<?php echo $grid->get_identifier(); ?>',
-			url				: '<?php echo $grid->get_url(); ?>',
-			vars			: {
-				limit			: '<?php echo $grid->get_var_name_limit(); ?>',
-				page			: '<?php echo $grid->get_var_name_page(); ?>',
-				sort			: '<?php echo $grid->get_var_name_sort(); ?>',
-				direction		: '<?php echo $grid->get_var_name_direction(); ?>',
-				filters			: '<?php echo $grid->get_var_name_filters(); ?>'
+			identifier			: '<?php echo $grid->get_identifier(); ?>',
+			url					: '<?php echo $grid->get_url(); ?>',
+			vars				: {
+				limit				: '<?php echo $grid->get_var_name_limit(); ?>',
+				page				: '<?php echo $grid->get_var_name_page(); ?>',
+				sort				: '<?php echo $grid->get_var_name_sort(); ?>',
+				direction			: '<?php echo $grid->get_var_name_direction(); ?>',
+				filters				: '<?php echo $grid->get_var_name_filters(); ?>'
 			},
-			ajax			: <?php echo (int) $grid->get_uses_ajax(); ?>
+			ajax				: <?php echo (int) $grid->get_uses_ajax(); ?>,
+			showOverlay			: true,
+			<?php
+			/**
+			 * See http://api.jquery.com/fadeIn/
+			 * for fadeIn speed options, eg:
+			 *    - 'fast'
+			 *    - 'slow'
+			 *    - 200
+			 *    - 100
+			 */
+			?>
+			fadeOverlaySpeed	: 100
 			<?php if (($params = $grid->get_current_params_json()) !== false): ?>
 				, currentParams: <?php echo $params; ?>
 			<?php endif ?>
 		});
 	});
 
 	</script>
+
+	<?php
+	/**
+	 * The grid controls - pagination
+	 */
+	?>
 	<table class="controls">
 		<tbody>
 			<tr>
@@ -66,15 +84,39 @@
 			</tr>
 		</tbody>
 	</table>
+
+	<?php
+	/**
+	 * The grid itself
+	 */
+	?>
 	<table class="grid">
+
+		<?php
+		/**
+		 * The head of the table
+		 */
+		?>
 		<thead>
+			
+			<?php
+			/**
+			 * The headers for the grid
+			 */
+			?>
 			<tr class="headers">
 				<?php foreach ($grid->get_columns() as $column): ?>
 					<th class="<?php echo $column->get_class(); ?>" style="<?php echo $column->get_style(); ?>">
 						<?php echo $column->get_header(); ?>
 					</th>
 				<?php endforeach ?>
 			</tr>
+
+			<?php
+			/**
+			 * The filters for the grid
+			 */
+			?>
 			<tr class="filters">
 				<?php foreach ($grid->get_columns() as $column): ?>
 					<th class="<?php echo $column->get_class(); ?>" style="<?php echo $column->get_style(); ?>">
@@ -83,6 +125,12 @@
 				<?php endforeach ?>
 			</tr>
 		</thead>
+
+		<?php
+		/**
+		 * The body of the table
+		 */
+		?>
 		<tbody>
 			<?php foreach ($grid->get_rows() as $row): ?>
 				<tr class="<?php echo $row->get_class(); ?>">
@@ -95,4 +143,15 @@
 			<?php endforeach ?>
 		</tbody>
 	</table>
+
+	<?php
+	/**
+	 * The overlay div that's shown when the grid is loading
+	 */
+	?>
+	<div class="overlay">
+		<div class="loading">
+			<h1>Loading</h1>
+		</div>
+	</div>
 </div>