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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
window.AnimTrek = {
//parametri di configurazione
//qui vanno inserite tutte le immagini di loading necessarie con le info relative ad ognuna (l'url da cui prenderla, il numero di blocchi di cui è composta l'animazione, l'altezza e la larghezza delle singole immagini dell'animazione
//l'immagine deve essere una sola composta dalle singole immagini dell'animazione poste una di fianco all'altra nell'ordine in cui si vuole che appaiano
//il parametro animSpeed indica ogni quanti millisecondi bisogna passare da un'immagine alla successiva dell'animazione
//il parametro forcedKillTime indica dopo quanti millisecondi l'animazione verrà tolta anche se non è stata invocata la sua rimozione
conf: {
images: {
"default": {
"url": "url(./loading_FairPlay.png)",
"blocks": 16,
"height": 80,
"width": 80,
"animSpeed": 100,
"forcedKillTime": 20000
},
"big": {"url": "url(./loading_FairPlay_big.png)",
"blocks": 16,
"height": 160,
"width": 160,
"animSpeed": 100,
"forcedKillTime": 20000
},
"medium": {
"url": "url(./loading_FairPlay.png)",
"blocks": 16,
"height": 80,
"width": 80,
"animSpeed": 100,
"forcedKillTime": 20000
},
"small": {
"url": "url(./loading_FairPlay_small.png)",
"blocks": 16,
"height": 40,
"width": 40,
"animSpeed": 100,
"forcedKillTime": 20000
}
}
},
//conterrà l'elenco dei blocchi di animazione che è stato già creato nel dom
alreadyLoaded: {},
//conterrà le informazioni specifiche dei blocchi di animazione che sono stati creati nel dom
created: {},
//conterrà per ognuna delle animazioni create il passo dell'animazione a cui si è arrivati
sel: {},
//conterrà per ognuna delle animazioni create un riferimento all'interval che la anima in modo da poterlo fermare
loadingInterval: {},
//conterrà per ognuca delle animazioni create un riferimento al timer che la fermerà se non ne viene invocato il blocco prima
killer: {},
//template dell'html che si utilizza per creare i blocchi di animazione
templateHTML: '<div class="animDiv animDiv-||name||" style="display: none; position: ||position||; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 15000;"><div style="height: 100%; width: 100%; background-color: white; opacity: 0.3; position: relative;"></div><div class="imgAnim" style="height: ||height||px; margin-top: -||marginTop||px; top: 50%; width: ||width||px; margin-left: -||marginLeft||px; left: 50%; position: absolute; background-image: ||image||;background-position: 0 0;"></div></div>',
//per ogni blocco di animazione, la prima volta che viene eseguito viene costruito il suo html
loaded: function(blockToLoad, selImage, selector){
//se non gli viene dato un nome consideriamo "global" (cioè il loading a tuttoschermo)
var blockName = blockToLoad;
if (!blockName || typeof(blockName) != "string"){
blockName = "global";
}
//se risulta già caricato un loading con quel nome ignora la costruzione
if (!AnimTrek.alreadyLoaded[blockName]){
//se il nome dell'immagine non gli viene passato allora utilizziamo il default
var imageToPut = selImage;
if (!imageToPut || typeof(imageToPut) != "string"){
imageToPut = "default";
}
//utilizziamo il default anche se ci viene passato un nome di immagine non presente in configurazione
if (!AnimTrek.conf.images[imageToPut]){
imageToPut = "default";
}
//selezionamo l'elemento del dom in cui mettere il loading, se il selector passato non è una stringa o è vuoto o ancora non è un oggetto presente nel dom allora viene selezionato il body
var objectToFill = selector;
if (!objectToFill || typeof(objectToFill) != "string"){
objectToFill = document.body;
}else{
objectToFill = document.querySelectorAll(objectToFill);
if (objectToFill) {
objectToFill = objectToFill[0];
}else{
objectToFill = document.body;
}
}
//se l'oggetto in cui mettere il loading non ha position: absolute allora gli mettiamo position: relative
if (window.getComputedStyle(objectToFill).getPropertyValue("position") != "absolute"){
objectToFill.style.position = "relative";
}
//creiamo l'html necessario in base alle configurazioni passate
objectToFill.innerHTML += AnimTrek.templateHTML.replace("||name||", blockName).replace("||image||", AnimTrek.conf.images[imageToPut].url).replace("||position||", blockName=="global" ? "fixed" : "absolute").replace("||height||", AnimTrek.conf.images[imageToPut].height).replace("||width||", AnimTrek.conf.images[imageToPut].width).replace("||marginTop||", parseInt(AnimTrek.conf.images[imageToPut].height/2)).replace("||marginLeft||", parseInt(AnimTrek.conf.images[imageToPut].width/2));
//segnamo come creato il loading con tutte le sue configurazioni
AnimTrek.alreadyLoaded[blockName] = true;
AnimTrek.created[blockName] ={
"blocks": AnimTrek.conf.images[imageToPut].blocks,
"height": AnimTrek.conf.images[imageToPut].height,
"width": AnimTrek.conf.images[imageToPut].width,
"animSpeed": AnimTrek.conf.images[imageToPut].animSpeed,
"forcedKillTime": AnimTrek.conf.images[imageToPut].forcedKillTime
}
AnimTrek.sel[blockName] = 0;
}
},
loadingOn: function(blockToLoad, selImage, selector){
//se non viene passato il nome di un loading da mostrare allora consideriamo si stia parlando del global
var blockName = blockToLoad;
if (!blockName || typeof(blockName) != "string"){
blockName = "global";
}
//se il loading scelto non è stato ancora inserito nel dom allora lo creiamo
if (!AnimTrek.alreadyLoaded[blockName]){
AnimTrek.loaded(blockToLoad, selImage, selector);
}
//mostriamo il loading
var animDiv = document.querySelectorAll(".animDiv-"+blockName);
animDiv[0].style.display = "block";
//lanciamo l'animazione
if (!AnimTrek.loadingInterval[blockName]) {
AnimTrek.loadingInterval[blockName] = window.setInterval(function(){
AnimTrek.sel[blockName] = (AnimTrek.sel[blockName]+1) % AnimTrek.created[blockName].blocks;
var animImgs = document.querySelectorAll(".animDiv-"+blockName+" .imgAnim")[0].style.backgroundPosition = (AnimTrek.sel[blockName] * AnimTrek.created[blockName].width) + " 0";
}, AnimTrek.created[blockName].animSpeed);
}
//lanciamo il killer che ucciderà l'applicazione se scade il timeout
AnimTrek.killer[blockName] = window.setTimeout(function(){
AnimTrek.loadingOff(blockToLoad, selImage, selector);
}, AnimTrek.created[blockName].forcedKillTime);
},
loadingOff: function(blockToLoad, selImage, selector){
//se non viene passato il nome di un loading da mostrare allora consideriamo si stia parlando del global
var blockName = blockToLoad;
if (!blockName || typeof(blockName) != "string"){
blockName = "global";
}
//se il loading scelto non è stato ancora inserito nel dom allora lo creiamo
if (!AnimTrek.alreadyLoaded[blockName]){
AnimTrek.loaded(blockToLoad, selImage, selector);
}
//nascondiamo il loading
var animDiv = document.querySelectorAll(".animDiv-"+blockName);
animDiv[0].style.display = "none";
//se esiste l'interval dell'animazione allora lo fermiamo e fermiamo il timeout del killer
if (AnimTrek.loadingInterval[blockName]) {
window.clearInterval(AnimTrek.loadingInterval[blockName]);
AnimTrek.loadingInterval[blockName] = undefined;
if (AnimTrek.killer[blockName]){
window.clearTimeout(AnimTrek.killer[blockName]);
}
}
}
};
|