onionskin
Version:
Multilayer Cache Manager for JavaScript
91 lines (80 loc) • 2.65 kB
HTML
<html>
<head>
<title>OnionSkin Facebook example</title>
</head>
<body>
<h1>OnionSkin client side usage example</h1>
<h3>Consuming Facebook API <a href="https://github.com/onionskin/onionskin/blob/master/examples/facebook.html">[source code]</a></h3>
<form name="facebook" action="#">
<input type="text" name="username" size="40" placeholder="Facebook username">
<input type="submit" value="fetch">
</form>
<p id="loader" style="display: none;">Loading...</p>
<div id="profile" style="display: none;">
<img class="pic" alt="user name" src="">
<b class="name">User Name</b>
</div>
<pre id="log"></pre>
<script src="../dist/onionskin.js"></script>
<script>
(function () {
var OnionSkin = require('onionskin');
var Promise = require('bluebird');
var pool = new OnionSkin([
new OnionSkin.Drivers.Ephemeral(),
new OnionSkin.Drivers.LocalStorage()
]);
var loader = document.getElementById('loader');
var profile = document.getElementById('profile');
var pic = profile.querySelector('.pic');
var name = profile.querySelector('.name');
var log = document.getElementById('log');
document.facebook.onsubmit = function (e) {
e.preventDefault();
loader.style.display = 'block';
publicUserData(this.username.value)
.then(fillProfile)
.catch(function (err) {
console.log(err.message, err.stack);
profile.style.display = 'none';
alert('could not load user data');
})
.finally(function () {
loader.style.display = 'none';
}).done();
};
function publicUserData(username) {
return pool.get(['facebook', username])
.then(function (data) {
log.innerHTML += this.key.join('/') + ': Loading from cache!\n';
return data;
}).catch(function () {
log.innerHTML += this.key.join('/') + ': Cache not found... requesting!\n';
return requestUserData(username).then(this.save);
});
}
function requestUserData(username) {
return new Promise(function (resolve, reject) {
var request = new XMLHttpRequest();
request.open('GET', 'http://graph.facebook.com/' + username, true);
request.onload = function () {
if (request.status === 200) {
resolve(JSON.parse(request.response));
} else {
reject(request.statusText);
}
};
request.onerror = reject;
request.send(null);
});
}
function fillProfile(data) {
profile.style.display = 'block';
pic.src = 'http://graph.facebook.com/' + data.username + '/picture';
pic.alt = data.name;
name.innerHTML = data.name;
}
})();
</script>
</body>
</html>