Materiali realizzati durante la lezione del 21/07/2017
Abbiamo realizzato la Classe personalizzata FbPageFeed che legge una pagina pubblica Facebook e mette il contenuto a disposizione per la visualizzazione in forma di oggetto JavaScript utilizzando AJAX (XMLAttpRequest) e JSON
FbPageFeed.js
(function(win){
"use strict";
function FbPageFeed(options) {
options = options || {};
for (var prop in this.config) {
if (options[prop]) {
this.config[prop] = options[prop];
}
}
this.init();
}
// Configuazione dell'oggetto
FbPageFeed.prototype.config = {
appId: null,
appSecret: null,
fbService: "https://graph.facebook.com",
fields: 'id,from,name,message,created_time,story,description,link,permalink_url,picture,object_id',
fbPageId: null,
callBack: null
};
// Inizializzazione dell'oggetto
FbPageFeed.prototype.init = function() {
var self = this;
self.callBack = self.config.callBack;
self.config.httpRequest = new XMLHttpRequest();
self.config.httpRequest.addEventListener('load', function() {
if(this.responseText) {
self.response = JSON.parse(this.responseText);
} else {
sekf.response = {
error: {
message: this.statusText,
code: this.status
}
}
};
if (typeof(self.callBack === "function")) {
self.callBack(self.success(), self.response);
}
})
};
// La richiesta ha avuto successo ?
FbPageFeed.prototype.success = function() {
if (this.response) {
if (this.response.data) {
return true;
}
}
return false;
}
// Recupero dell'access_token
// Assegnando alla proprietà access_token un'altra
// funzione posso cambiare il metodo di default
// con cui viene ottenuto l'access_token
FbPageFeed.prototype.access_token = function () {
if (this.config.appId && this.config.appSecret) {
return this.config.appId + "|" + this.config.appSecret;
}
return null;
}
// Costruzione dell'url della richiesta
FbPageFeed.prototype.feedUrl = function() {
var addTrailingSlash = function (path) {
if (path.substr(-1) == '/') {
return path;
}
return path + '/';
}
var at = this.access_token();
var self = this;
var url = addTrailingSlash(self.config.fbService) +
addTrailingSlash(self.config.fbPageId) +
'feed' + '?fields=' +
self.config.fields +
(at ? '&access_token=' + at : '');
return url;
}
// Invio della richiesta e caricamento dei dati
FbPageFeed.prototype.load = function () {
try {
this.response = null;
this.config.httpRequest.open('GET', this.feedUrl());
this.config.httpRequest.send();
} catch (err) {
console.log(err);
}
}
win.FbPageFeed = FbPageFeed;
})(window)
Pagina html che utilizza FbPageFeed per visualizzare il contenuto di una pagina Facebook. Visualizza la pagina.
fb-test.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>Facebook Page Feed</h1>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-sm-10 form-group">
<input type="text" id="fb-pageid" class="form-control input-lg" placeholder="Pagina facebook da mostrare">
</div>
<div class="col-sm-2 form-group">
<button id="test" type="button" class="btn btn-lg btn-primary btn-block">test</button>
</div>
</div>
</div>
<div class="container">
<h1>Output</h1>
<div id="test-output">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<div class="row slim hidden" id="post0">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row slim hidden" id="post1">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<div class="row slim hidden" id="post2">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row slim hidden" id="post3">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<div class="row slim hidden" id="post4">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row slim hidden" id="post5">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<div class="row slim hidden" id="post6">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row slim hidden" id="post7">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<div class="row slim hidden" id="post8">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row slim hidden" id="post9">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6">
<div class="row slim hidden" id="post10">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row slim hidden" id="post11">
<div class="col-xs-4">
<div class="picture h3" style="background-image:url(https://unsplash.it/130/90)"></div>
</div>
<div class="col-xs-8">
<h3 class="post-date">21-3-2017</h3>
<p class="post-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eaque doloribus vitae in qui, cumque praesentium.</p>
<a href="#" class="btn btn-primary btn-xs is-post">post</a>
<a href="#" class="btn btn-primary btn-xs is-link">link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/estensioni.js"></script>
<script src="js/FbPageFeed.js"></script>
<script>
var opt = {
appId: '287180921751313',
appSecret: '33a1febcc4d1ce4d947828635cfe3d83',
fbPageId: 'palazzonadimaggio',
callBack: function (success, resp) {
if (success) {
var arr = resp.data;
if (arr) {
for (var i = 0; i < 12; i++) {
var panelId = 'post' + i;
var obj = arr[i];
var panel = document.getElementById(panelId);
var pic = panel.querySelector('.picture');
var postBody = panel.querySelector('.post-body');
if (obj) {
var data = new Date(obj.created_time);
pic.style.backgroundImage = 'url(\"' + obj.picture + '\")';
panel.querySelector('.post-date').innerHTML = data.toDataItaliana('dd/mm/aaaa') +
'<br><small>ore ' + data.toTimeFormatted('hh:mm');
postBody.innerHTML = obj.message || obj.story || obj.name;
postBody.classList.add('sized');
panel.querySelector('.is-post').href = obj.permalink_url;
if (obj.link == obj.permalink_url) {
panel.querySelector('.is-link').classList.add('hidden');
} else {
panel.querySelector('.is-link').classList.remove('hidden');
panel.querySelector('.is-link').href = obj.link;
}
panel.classList.remove('hidden');
} else {
panel.classList.add('hidden');
}
}
} else {
alert(data.error.message);
}
}
}
};
var fb = new FbPageFeed(opt);
fb.load();
var pb = document.getElementsByClassName('post-body');
for (var i = 0; i < pb.length; i++) {
pb[i].addEventListener('click', function() {
this.classList.toggle('sized');
})
}
// Ho completato il codice aggiungendo le istruzioni che modificano interattivamente
// la pagina Facebook visualizzata
document.getElementById('test').addEventListener('click', function () {
fb.config.fbPageId = document.getElementById('fb-pageid').value;
fb.load();
})
</script>
</body>
</html>
Infine il foglio di stile comune a tutte le pagine web con le modifica apportate nelle ultime lezione del corso.
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;
}
.fullscreen {
min-height: 100vh;
margin-bottom: 0;
}
.jumbotron .page-header {
margin-top: 0;
padding-bottom: 50px;
}
.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: toin-right: -5px;
-webkit-box-shadow: #400 0 0 10px;
box-shadow: #400 0 0 10px;
}
.btn-history {
margin-top: 40px;
border-radius: 20px;
}
.row.slim {
margin-left: -5px;
margin-right: -5px;
}
.row.slim [class^="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.row.slim .picture {
padding-bottom: 100%;
background-size: cover;
border-radius: 50%;
}
.post-body {
overflow: hidden;
position: relative;
cursor: pointer;
}
.post-body.sized {
height: 60px;
}
.post-body.sized::after {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
content:"";
height: 30px;
background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
}
.side-menu {
position: fixed;
top: 20vh;
right: 0;
min-height: 300px;
transition: all 0.7s;
}
.side-menu .btn-menu {
border-radius: 0;
background-color: black;
color: white;
padding: 10px;
display:block;
float: left;
}
.side-menu .form {
background-color: black;
color: white;
padding: 20px;
min-height: 300px;
width: 270px;
float: left;
}
.side-menu.offscreen {
transition: all 0.7;
right: -270px;
}
.selezionato {
background-color: yellow;
border: 1px red solid;
}