examples/facebook.html from onionskin/onionskin

examples/facebook.html
Summary

Maintainability

Test Coverage

Issues
<html>
<head>
  <title>OnionSkin Facebook example</title>
</head>
<body>
<h1>OnionSkin client side usage example</h1>
  <h3>Consuming Facebook API &nbsp; <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>