Skip to content

Commit f7de4d9

Browse files
lanesCSOlanesCSO
committed
added new component loader
Added new specific component loader in addition to full screen loader >> extra parameter added to api.spinner.start and api.spinner.stop >> extra parameter added to api.ajax.jsonrpc.request
1 parent e5d2169 commit f7de4d9

File tree

3 files changed

+137
-22
lines changed

3 files changed

+137
-22
lines changed

‎src/css/api.plugin.css

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,83 @@ API - Plugin - Spinner
112112
transform: scaleY(1.0);
113113
-webkit-transform: scaleY(1.0);
114114
}
115-
}
115+
}
116+
117+
/* spinner for a particular html component */
118+
.item-spinner {
119+
display: none;
120+
background: rgba(255, 255, 255, 0.7);
121+
color: #666666;
122+
position: absolute;
123+
/*one index lower than full screen spinner*/
124+
z-index: 9998;
125+
float: left;
126+
text-align: center;
127+
height:100%;
128+
width:100%;
129+
}
130+
131+
132+
.item-loader .circle {
133+
display: inline-block;
134+
height: 30px;
135+
width: 30px;
136+
border-radius: 30px;
137+
}
138+
139+
140+
.item-loader .animate {
141+
animation-duration: 1.25s;
142+
animation-delay: 0.5s;
143+
-webkit-animation-duration: 1.25s;
144+
-webkit-animation-delay: 0.5s;
145+
}
146+
147+
148+
.item-loader .glow {
149+
animation: item-loader-animate-glow 1.2s infinite ease;
150+
-webkit-animation: item-loader-animate-glow 1.2s infinite ease;
151+
}
152+
153+
@-webkit-keyframes item-loader-animate-glow {
154+
0% {
155+
opacity: 0;
156+
-webkit-transform: scale(0.8, 0.8);
157+
}
158+
100% {
159+
opacity: 1;
160+
-webkit-transform: scale(1, 1);
161+
}
162+
}
163+
164+
@keyframes item-loader-animate-glow {
165+
0% {
166+
opacity: 0;
167+
transform: scale(0.8, 0.8);
168+
}
169+
100% {
170+
opacity: 1;
171+
transform: scale(1, 1);
172+
}
173+
}
174+
175+
.item-loader .delay-1 {
176+
animation-delay: 1.0s;
177+
-webkit-animation-delay: 1.0s;
178+
}
179+
.item-loader .delay-2 {
180+
animation-delay: 1.2s;
181+
-webkit-animation-delay:1.2s;
182+
}
183+
.item-loader .delay-3 {
184+
animation-delay: 1.4s;
185+
-webkit-animation-delay: 1.4s;
186+
}
187+
.item-loader .delay-4 {
188+
animation-delay: 1.6s;
189+
-webkit-animation-delay: 1.6s;
190+
}
191+
.item-loader .delay-5 {
192+
animation-delay: 1.8s;
193+
-webkit-animation-delay: 1.8s;
194+
}

‎src/js/api.library.js

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,38 +17,62 @@ api.spinner.progress.timeout = 0;
1717
/**
1818
* Show the Overlay and start the Spinner
1919
*/
20-
api.spinner.start = function () {
21-
if (!api.spinner.count++) {
20+
api.spinner.start = function (pItemSpinner = null) {
21+
if (pItemSpinner != null) {
22+
//remove existing div
23+
$(pItemSpinner).find(".item-spinner").remove();
24+
var item = $('#spinner-holder').find('.item-spinner').clone();
25+
$(pItemSpinner).prepend($(item));
26+
27+
$(item).removeClass("d-none");
28+
$(pItemSpinner).find(".item-spinner").show();
29+
30+
/** if element changes size then reposition the loader */
31+
let resizeObserver = new ResizeObserver(() => {
32+
//15px is half the circle height
33+
$(pItemSpinner).find(item).find('.item-loader').css('margin-top', ($(pItemSpinner).height() * 0.5) - 15);
34+
});
35+
36+
resizeObserver.observe($(pItemSpinner)[0]);
37+
/**** end of resizing listener */
38+
39+
} else if (!api.spinner.count++) {
2240
$("#spinner").show();
2341
}
2442
};
2543

2644
/**
2745
* Hide the Overlay and stop the Spinner
2846
*/
29-
api.spinner.stop = function () {
30-
if (api.spinner.count) {
31-
// Do not go negative
32-
api.spinner.count--;
33-
}
47+
api.spinner.stop = function (pItemSpinner = null) {
48+
if (pItemSpinner != null) {
49+
$(pItemSpinner).find(".item-spinner").find('.item-loader').addClass('d-none');
50+
$(pItemSpinner).find(".item-spinner").remove();
51+
} else {
52+
if (api.spinner.count) {
53+
// Do not go negative
54+
api.spinner.count--;
55+
}
3456

35-
if (!api.spinner.count) {
36-
if (api.spinner.progress.instance) {
37-
// End the progress bar
38-
api.spinner.progress.stop();
57+
if (!api.spinner.count) {
58+
if (api.spinner.progress.instance) {
59+
// End the progress bar
60+
api.spinner.progress.stop();
3961

40-
// Close the spinner after 1 second to show 100% in the progress bar
41-
setTimeout(function () {
62+
// Close the spinner after 1 second to show 100% in the progress bar
63+
setTimeout(function () {
64+
$("#spinner").fadeOut('slow');
65+
}, 1000);
66+
}
67+
else {
68+
// Close the spinner immediatelly
4269
$("#spinner").fadeOut('slow');
43-
}, 1000);
44-
}
45-
else {
46-
// Close the spinner immediatelly
47-
$("#spinner").fadeOut('slow');
70+
}
4871
}
4972
}
5073
};
5174

75+
5276
/**
5377
* Start the iterative Timeout method for the progress bar
5478
*/
@@ -366,7 +390,7 @@ api.ajax.jsonrpc = {};
366390
* @param {*} callbackParams_onError
367391
* @param {*} pAJAX_Params
368392
*/
369-
api.ajax.jsonrpc.request = function (pAPI_URL, pAPI_Method, pAPI_Params, callbackFunctionName_onSuccess, callbackParams_onSuccess, callbackFunctionName_onError, callbackParams_onError, pAJAX_Params) {
393+
api.ajax.jsonrpc.request = function (pAPI_URL, pAPI_Method, pAPI_Params, callbackFunctionName_onSuccess, callbackParams_onSuccess, callbackFunctionName_onError, callbackParams_onError, pAJAX_Params, pItemSpinner = null) {
370394
// Default API parameters
371395
pAPI_Params = pAPI_Params || {};
372396

@@ -468,7 +492,7 @@ api.ajax.jsonrpc.request = function (pAPI_URL, pAPI_Method, pAPI_Params, callbac
468492
complete: function () {
469493
// Simulate sync behaviour
470494
if (simulateSync)
471-
api.spinner.stop();
495+
api.spinner.stop(pItemSpinner);
472496

473497
// Stop the nav loader
474498
$("#nav-loader").removeClass('text-yellow fa-spin').addClass('text-navbar');
@@ -486,7 +510,7 @@ api.ajax.jsonrpc.request = function (pAPI_URL, pAPI_Method, pAPI_Params, callbac
486510

487511
// Simulate sync behaviour
488512
if (simulateSync)
489-
api.spinner.start();
513+
api.spinner.start(pItemSpinner);
490514
// Extend the session if any
491515
api.cookie.session.extend();
492516

‎test/template/spinner.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,15 @@
1515
<p name="percentage" class="h4 pl-2 pr-5 py-0 m-0">0%</p>
1616
</div>
1717
</div>
18+
19+
<div id="spinner-holder">
20+
<div class="item-spinner d-none">
21+
<div class="item-loader">
22+
<div class="ball-1 animate glow circle delay-1 bg-warning"></div>
23+
<div class="ball-2 animate glow circle delay-2 bg-danger"></div>
24+
<div class="ball-3 animate glow circle delay-3 bg-primary"></div>
25+
<div class="ball-4 animate glow circle delay-4 bg-secondary"></div>
26+
<div class="ball-5 animate glow circle delay-5 bg-tertiary"></div>
27+
</div>
28+
</div>
29+
</div>

0 commit comments

Comments
 (0)