Materiali realizzati durante la lezione
Abbiamo modificato la componente interruttore. Ora aggiungendo la classe pulsante la componente si comporta come un pulsante., Abbiamo fatto in modo che la componente rimanesse compatibile con la versione precedente. Per provare la componente aggiornata l'abbiamo semplicemente aggiunta la file animazione.html senza assegnarle alcuna funzionalità
animazione.html (file principale)
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/miostile.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron bg-sfumato">
<div class="container">
<h1 class="slide off">Prove di animazione</h1>
<p class="dissolvenza off">Gli elementi della pagina appriranno con dissolvenze.</p>
</div>
</div>
<div class="container">
<h1 class="off slide">Immagini</h1>
<div class="row">
<div class="col-sm-4">
<img src="https://unsplash.it/800/600?image=100" alt="Immagine n. 100" class="img-responsive off rotazione">
<div class="text-center">
<button class="interruttore" id="mybtn1"></button>
</div>
</div>
<div class="col-sm-4">
<img src="https://unsplash.it/800/600?image=350" alt="Immagine n. 300" class="img-responsive off zoom">
<div class="text-center">
<button class="interruttore pulsante" id="mybtn2"></button>
</div>
</div>
<div class="col-sm-4">
<img src="https://unsplash.it/800/600?image=500" alt="Immagine n. 500" class="img-responsive off zoom">
</div>
</div>
</div>
<script>
window.onload = function () {
"use strict";
var elementi = document.getElementsByClassName('off');
setTimeout (function() {
while (elementi.length > 0) {
elementi[0].classList.remove('off');
}
}, 1000);
};
</script>
<script src="js/interruttore.js"></script>
</body>
</html>
Abbiamo fatto anche alcune piccole modifice al foglio di stile personalizzato creato la scorsa lezione: miostile.css. Abbiamo aggiunto a brakets il plugin Autoprefixer che rende compatibile il codice CSS con versione meno recenti dei vari browser che richiedono i nomi delle proprietà CSS con i prefissi specifici.
miostile.css
.bg-darkblue {
background-color: darkblue;
color: white;
}
.bg-sfumato {
background-image: -webkit-gradient(linear,left top, left bottom,from(#000033),to(#800));
background-image: -webkit-linear-gradient(#000033,#800);
background-image: linear-gradient(#000033,#800);
color: white;
}
.off.dissolvenza {
opacity: 0;
}
.dissolvenza {
opacity: 1;
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
.off.rotazione {
opacity: 0;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.rotazione {
opacity: 1;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.off.zoom {
-webkit-transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
}
.zoom {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
-webkit-transition: all 1s;
transition: all 1s;
}
.off.slide {
-webkit-transform: translateY(-20%);
-ms-transform: translateY(-20%);
transform: translateY(-20%);
opacity: 0;
}
.slide {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all .7s;
transition: all .7s;
}
/* Interruttore */
.interruttore {
border:0;
background-image: url(/img/on-off.png);
background-position: top left;
width: 80px;
height: 80px;
border-radius: 50%;
-webkit-box-shadow: #000 0 0 10px;
box-shadow: #000 0 0 10px;
margin: 10px;
}
.interruttore:focus {
outline: 0;
}
.interruttore.on {
background-position: top right;
-webkit-box-shadow: #400 0 0 10px;
box-shadow: #400 0 0 10px;
}
Infine il codice javascript che fa funzionare la componente interruttore con l'aggiunta pulsante.
interruttore.js
// Viene utilizzata una self invoking function perchè le variabili qui utilizzate
// non interferiscano con eventuali variabili globali e la direttiva "use strict"
// sia limitata a questo codice
(function() {
"use strict";
// Crea una nodeList con tutti gli elementi con classe interruttore
var elementi = document.getElementsByClassName('interruttore');
// Assegna ad ogni elemento della lista gestori dell'evento che
// ne cambiano lo stato aggiungendo o togliento la classe 'on'.
// Se il bottone contiene la classe pulsante si gestiscono gli
// eventi 'mousedown' e 'mouseup' e i corrispettivi eventi
// 'touchstart' e 'touchend' dei dispositivi con touch-screen
// altrimenti si gestisce l'evento 'click'
for (var i = 0; i < elementi.length; i++) {
if (elementi[i].classList.contains('pulsante')) {
elementi[i].addEventListener('mousedown', function() {
this.classList.add('on');
});
elementi[i].addEventListener('touchstart', function() {
this.classList.add('on');
});
elementi[i].addEventListener('mouseup', function() {
this.classList.remove('on');
});
elementi[i].addEventListener('touchend', function() {
this.classList.remove('on');
});
} else {
elementi[i].addEventListener('click', function () {
this.classList.toggle('on');
});
}
}
})()
Abbiamo utilizzato la componente interruttore per visualizzare e nascodere le proprietà dell'oggetto 'Frullatore' in una tabella bootstrap.
flullatore.html
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/miostile.css" rel="stylesheet">
</head>
<body>
<header class="jumbotron bg-sfumato">
<div class="container">
<h1>Frullatore</h1>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-sm-3 text-center">
<button class="interruttore" id="btn-show"></button>
</div>
<div class="col-sm-9">
<table class="table table-striped">
<thead>
<tr>
<th>Proprietà</th>
<th>Valore</th>
</tr>
</thead>
<tbody id="frull"></tbody>
</table>
</div>
</div>
</div>
<script src="js/interruttore.js"></script>
<script>
(function() {
var frullatore = {
marca: 'SMEG',
modello: 'H234',
colore: "rosso",
volume: 1.2,
potenza: 300,
nomeCompleto: function() {
return "Frullatore " + this.marca + ' ' + this.modello + ' ' + this.colore;
}
};
document.getElementById('btn-show').addEventListener('click', function() {
if (this.classList.contains('on')) {
for (prop in frullatore) {
var tr = document.createElement('tr');
if (typeof frullatore[prop] === "function")
tr.innerHTML = "<td>" + prop + "</td><td>" + frullatore[prop]() + '</td>';
else
tr.innerHTML = "<td>" + prop + "</td><td>" + frullatore[prop] + '</td>';
document.getElementById('frull').appendChild(tr);
}
} else {
document.getElementById('frull').innerHTML = '';
}
})
})();
</script>
</body>
</html>
Infine abbiamo iniziato a lavorare si estesioni.js in cui iserireme estensioni per la classe predefinita Array e la Classe predefinita Date.
estensioni.js
/*==========================================
Array.forEach
==========================================*/
if (typeof Array.prototype.forEach !== "function"){
Array.prototype.forEach = function(func) {
for (var i = 0; i < this.lenght; i++) {
func(this[i], i, this);
}
}
}
Date.proptotype.toDataItaliana = function (formato) {
var mesi = ("Gennaio,Febbaraio,Marzo,Aprile,Maggio,Giugno,Luglio,Agosto,Settembre,Ottobre,Novembre,Dicembre").split(',');
var giorni = ("Domenica,Lunedì,Martedì,Mercoledì,Giovedì,Venerdì,Sbato").split(',');
var sep = ' ', formatArray, self = this;
formato = formato || 'dd/mm/aaaa';
}