Skip to content

Commit 84b935a

Browse files
bencorlettbencorlett
committed
Adding ability to show an overlay and configure it through the javascript settings.
Signed-off-by: Ben Corlett <[email protected]>
1 parent 4574f4f commit 84b935a

File tree

3 files changed

+103
-24
lines changed

3 files changed

+103
-24
lines changed

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

+34-14
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,19 @@
3636
* @var Object
3737
*/
3838
var settings = {
39-
identifier : 'grid',
40-
url : '',
41-
vars : {
42-
limit : 'limit',
43-
page : 'page',
44-
sort : 'sort',
45-
direction : 'direction',
46-
filters : 'filters',
39+
identifier : 'grid',
40+
url : '',
41+
vars : {
42+
limit : 'limit',
43+
page : 'page',
44+
sort : 'sort',
45+
direction : 'direction',
46+
filters : 'filters',
4747
},
48-
ajax : true,
49-
currentParams : {}
48+
ajax : true,
49+
currentParams : {},
50+
showOverlay : true,
51+
fadeOverlaySpeed : 'fast',
5052
};
5153

5254
/**
@@ -235,6 +237,13 @@
235237
* When the handler needs to update
236238
*/
237239
handler.bind('update', function() {
240+
241+
/**
242+
* Fade in overlay
243+
*/
244+
if (settings.showOverlay) {
245+
handler.find('div.overlay').fadeIn(settings.fadeOverlaySpeed);
246+
}
238247

239248
/**
240249
* Update filter params
@@ -279,12 +288,23 @@
279288
// to use ajax or not
280289
if (settings.ajax) {
281290
$.ajax({
282-
url : settings.url,
283-
data : {
291+
url : settings.url,
292+
data : {
284293
grid_identifier : settings.identifier
285294
},
286-
success : function(data, textStatus, jqXHR) {
287-
handler.replaceWith(data);
295+
success : function(data, textStatus, jqXHR) {
296+
297+
if (settings.showOverlay) {
298+
handler.find('div.overlay').fadeOut(settings.showOverlaySpeed, function() {
299+
handler.replaceWith(data);
300+
});
301+
}
302+
else {
303+
handler.replaceWith(data);
304+
}
305+
},
306+
error : function(jqXHR, textStatus, errorThrown) {
307+
handler.find('div.overlay').fadeOut('fast');
288308
}
289309
});
290310
}

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

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎views/grid.php

+68-9
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,41 @@
2828
$(document).ready(function() {
2929

3030
$("#grid-<?php echo $grid->get_identifier()?>").sparkGrid({
31-
identifier : '<?php echo $grid->get_identifier(); ?>',
32-
url : '<?php echo $grid->get_url(); ?>',
33-
vars : {
34-
limit : '<?php echo $grid->get_var_name_limit(); ?>',
35-
page : '<?php echo $grid->get_var_name_page(); ?>',
36-
sort : '<?php echo $grid->get_var_name_sort(); ?>',
37-
direction : '<?php echo $grid->get_var_name_direction(); ?>',
38-
filters : '<?php echo $grid->get_var_name_filters(); ?>'
31+
identifier : '<?php echo $grid->get_identifier(); ?>',
32+
url : '<?php echo $grid->get_url(); ?>',
33+
vars : {
34+
limit : '<?php echo $grid->get_var_name_limit(); ?>',
35+
page : '<?php echo $grid->get_var_name_page(); ?>',
36+
sort : '<?php echo $grid->get_var_name_sort(); ?>',
37+
direction : '<?php echo $grid->get_var_name_direction(); ?>',
38+
filters : '<?php echo $grid->get_var_name_filters(); ?>'
3939
},
40-
ajax : <?php echo (int) $grid->get_uses_ajax(); ?>
40+
ajax : <?php echo (int) $grid->get_uses_ajax(); ?>,
41+
showOverlay : true,
42+
<?php
43+
/**
44+
* See http://api.jquery.com/fadeIn/
45+
* for fadeIn speed options, eg:
46+
* - 'fast'
47+
* - 'slow'
48+
* - 200
49+
* - 100
50+
*/
51+
?>
52+
fadeOverlaySpeed : 100
4153
<?php if (($params = $grid->get_current_params_json()) !== false): ?>
4254
, currentParams: <?php echo $params; ?>
4355
<?php endif ?>
4456
});
4557
});
4658

4759
</script>
60+
61+
<?php
62+
/**
63+
* The grid controls - pagination
64+
*/
65+
?>
4866
<table class="controls">
4967
<tbody>
5068
<tr>
@@ -66,15 +84,39 @@
6684
</tr>
6785
</tbody>
6886
</table>
87+
88+
<?php
89+
/**
90+
* The grid itself
91+
*/
92+
?>
6993
<table class="grid">
94+
95+
<?php
96+
/**
97+
* The head of the table
98+
*/
99+
?>
70100
<thead>
101+
102+
<?php
103+
/**
104+
* The headers for the grid
105+
*/
106+
?>
71107
<tr class="headers">
72108
<?php foreach ($grid->get_columns() as $column): ?>
73109
<th class="<?php echo $column->get_class(); ?>" style="<?php echo $column->get_style(); ?>">
74110
<?php echo $column->get_header(); ?>
75111
</th>
76112
<?php endforeach ?>
77113
</tr>
114+
115+
<?php
116+
/**
117+
* The filters for the grid
118+
*/
119+
?>
78120
<tr class="filters">
79121
<?php foreach ($grid->get_columns() as $column): ?>
80122
<th class="<?php echo $column->get_class(); ?>" style="<?php echo $column->get_style(); ?>">
@@ -83,6 +125,12 @@
83125
<?php endforeach ?>
84126
</tr>
85127
</thead>
128+
129+
<?php
130+
/**
131+
* The body of the table
132+
*/
133+
?>
86134
<tbody>
87135
<?php foreach ($grid->get_rows() as $row): ?>
88136
<tr class="<?php echo $row->get_class(); ?>">
@@ -95,4 +143,15 @@
95143
<?php endforeach ?>
96144
</tbody>
97145
</table>
146+
147+
<?php
148+
/**
149+
* The overlay div that's shown when the grid is loading
150+
*/
151+
?>
152+
<div class="overlay">
153+
<div class="loading">
154+
<h1>Loading</h1>
155+
</div>
156+
</div>
98157
</div>

0 commit comments

Comments
 (0)