-
Notifications
You must be signed in to change notification settings - Fork 4
/
bottom-navbar.html
119 lines (107 loc) · 7.5 KB
/
bottom-navbar.html
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
<!--Bottone del QR Code-->
<button id="bottom-nav_button-qr" onclick="clickQR()">
<img id="qrc" src="./res/qr-code.svg" alt="qr-code"/>
</button>
#Bocci puzza
<nav id="bottom-nav">
<!--Le due celle della tabella contengono i due pulsanti "home" e "cerca" della barra di navigazione inferiore-->
<table>
<tr id="nav_options">
<td>
<button id="bottom-nav_button-H" class="bottom-nav_button-opt">
<img id="homeF" src="./res/home_f.svg" alt="home-full"/>
<p id="homeFp" class="button-opt_info">Home</p>
<img id="homeE" src="./res/home_e.svg" alt="home-empty"/>
</button>
</td>
<td>
<button id="bottom-nav_button-C" class="bottom-nav_button-opt">
<img id="searchF" src="./res/search_f.svg" alt="search-full"/>
<p id="searchFp" class="button-opt_info">Cerca</p>
<img id="searchE" src="./res/search_e.svg" alt="search-empty"/>
</button>
<script>
/* Funzioni per l'animazione del simbolo QR e cose esteticamente fighe della pagina */
function clickQR() {
// quando si clicca QR Code, porta il logo al centro della pagina
document.getElementById('bottom-nav_button-qr').style.zIndex = "101";
document.getElementById('bottom-nav_button-qr').style.bottom = "calc(50% - 6vh)";
document.getElementById('bottom-nav_button-qr').style.transform = "rotate(360deg)";
setTimeout(fillBlu, 600);
}
function fillBlu() {
document.getElementById('divOscuramento').style.zIndex = "100";
document.getElementById('divOscuramento').style.opacity = "0.7";
document.getElementById('bottom-nav_button-qr').style.backgroundPosition = "bottom";
setTimeout(fillGiallo, 600);
}
function fillGiallo() {
document.getElementById('qrc').src = "./res/logo_icona.png";
document.getElementById('bottom-nav_button-qr').style.backgroundPosition = "top";
setTimeout(paginaScannerizzazione, 700);
}
function paginaScannerizzazione() {
document.getElementById('divOscuramento').style.opacity = "0";
document.getElementById('divOscuramento').style.zIndex = "-100";
document.getElementById('bottom-nav_button-qr').style.bottom = "3vh";
document.getElementById('bottom-nav_button-qr').style.transform = "rotate(0deg)";
document.getElementById('bottom-nav_button-qr').style.zIndex = "3";
document.getElementById('qrc').src = "../res/iconaFotografia.png";
caricaPaginaQR();
}
/*Funzioni per le animazioni dei bottoni "Home" e "Cerca", usate da page_navigation.js*/
function animOptHF(){
//operazioni dopo 150ms dal click di Home
document.getElementById('searchE').style.top = "calc(45% - 2.25vh)";
document.getElementById('homeF').style.opacity = "1";
document.getElementById('homeE').style.opacity = "0";
}
function fullHome() {
//quando si clicca Home
//Sostituisci l'icona vuota con quella piena e fai visualizzare la scritta "Home"
document.getElementById('homeE').style.top = "calc(35% - 2.25vh)";
document.getElementById('searchF').style.top = "calc(45% - 2.25vh)";
document.getElementById('searchF').style.opacity = "0";
document.getElementById('searchE').style.opacity = "1";
document.getElementById('homeFp').style.top = "2.7vh";
document.getElementById('searchFp').style.top = "7vh";
document.getElementById('homeF').style.top = "calc(35% - 2.25vh)";
document.getElementById('searchE').style.top = "calc(45% - 2.25vh)";
setTimeout(animOptHF, 150);
//[...] VISUALIZZAZIONE PAGINA HOME
}
function animOptSF(){ //operazioni dopo 150ms dal click di Cerca
document.getElementById('homeE').style.top = "calc(45% - 2.25vh)";
document.getElementById('searchF').style.opacity = "1";
document.getElementById('searchE').style.opacity = "0";
}
function fullSearch() {
// quando si clicca Cerca
document.getElementById('searchE').style.top = "calc(35% - 2.25vh)";
document.getElementById('homeF').style.top = "calc(45% - 2.25vh)";
document.getElementById('homeF').style.opacity = "0";
document.getElementById('homeE').style.opacity = "1";
document.getElementById('searchFp').style.top = "2.7vh";
document.getElementById('homeFp').style.top = "7vh";
document.getElementById('searchF').style.top = "calc(35% - 2.25vh)";
document.getElementById('homeE').style.top = "calc(45% - 2.25vh)";
setTimeout(animOptSF, 150);
//[...] VISUALIZZAZIONE PAGINA CERCA
}
/*Rende entrambe le icone, sia "Home" che "Cerca", deselezionate*/
function bothEmpty() {
// quando si preme qualsiasi cosa dopo il pulsante Cerca (es. sezione o Search)
document.getElementById('homeE').style.opacity = "1";
document.getElementById('homeF').style.opacity = "0";
document.getElementById('searchE').style.opacity = "1";
document.getElementById('searchF').style.opacity = "0";
document.getElementById('homeFp').style.top = "7vh";
document.getElementById('searchFp').style.top = "7vh";
document.getElementById('searchE').style.top = "calc(45% - 2.25vh)";
document.getElementById('searchF').style.top = "calc(45% - 2.25vh)";
}
</script>
</td>
</tr>
</table>
</nav>