This repository has been archived by the owner on Jul 13, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindicator.js
140 lines (115 loc) · 3.09 KB
/
indicator.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/**
* jquery.indicator
*
* @version 1.0.7
* @author Şakir ŞENSOY | [email protected]
* @depend jQuery
* @return object
*/
var indicator = function() {
/**
* Remove hash and dot from element name.
*
* @param string elementId
* @return string
*/
var elementNameFixer = function(elementId) {
return elementId.replace('.', '').replace('#', '');
};
var elementExPosition = null;
var parentElementPosition = null;
return {
/**
* Create temporarily layer for indicator
*
* @param string elementId
* @return void
*/
show: function(elementId) {
// dom
el = $(elementId);
// element position
elementExPosition = el.css('position');
parentElementPosition = el.parent().css('position');
if (! (elementExPosition == 'absolute' && parentElementPosition == 'relative')) {
el.css('position', 'relative');
}
// temporarily indicator layer
tempIndicator = $('<div />')
.attr('id', elementNameFixer(elementId) + '-indicator')
.css({
width: el.outerWidth(),
height: el.outerHeight()
})
.addClass('indicator indicator-loader')
.html('<div class="loading-pane">\
<div class="loading-message">\
<div class="spinner">\
<div class="double-bounce1"></div>\
<div class="double-bounce2"></div>\
</div>\
</div>\
</div>\
');
// indicator append to element
el.append(tempIndicator);
// spinner margin-top
$('#' + elementNameFixer(elementId) + '-indicator').find('.spinner').css('margin-top', (el.outerHeight() - 40) / 2);
},
/**
* Destroy loading indicator
*
* @param string elementId
* @return void
*/
hide: function(elementId) {
// dom
el = $(elementId);
// parent layer position restore
el.css('position', elementExPosition);
elementExPosition = null;
parentElementPosition = null;
// find indicator and destroy
el.find('#' + elementNameFixer(elementId) + '-indicator').remove();
},
/**
* Create fullscreen indicator layer
*
* @return void
*/
showFS: function() {
if ($('#fullscreen-indicator').length < 1) {
// temporarily indicator layer
tempIndicator = $('<div />')
.attr('id', 'fullscreen-indicator')
.css({
width: $(window).width(),
height: $(window).height()
})
.addClass('indicator indicator-loader indicator-fullscreen-loader')
.html('<div class="loading-pane">\
<div class="loading-message">\
<div class="spinner">\
<div class="double-bounce1"></div>\
<div class="double-bounce2"></div>\
</div>\
</div>\
</div>\
');
// indicator append to body
$('body').append(tempIndicator);
// spinner margin-top
$('#fullscreen-indicator').find('.spinner').css('margin-top', ($(window).outerHeight() - 40) / 2);
}
},
/**
* Destroy fullscreen loading indicator
*
* @return void
*/
hideFS: function() {
// find indicator and destroy
$('#fullscreen-indicator').remove();
}
};
}();