demo/index.html

<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="sh_custom.css" type="text/css" />
    <style type="text/css">
      
      html {
        color: #fff;
        margin: 0px;
        background: -moz-linear-gradient(0% 100% 90deg,#350a0a, #180505);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#350a0a), to(#180505));
        height: 100%;
      }

      body {
        width: 100%;
        margin: 0;
      }
      pre {
        background: none;
        border: none;
        padding: 30px;
        font-size: 25px;
        font-family: Courier;
        outline: none;
      }

      button {
        position: absolute;
        bottom: 15px;
        right: 15px;
        font-size: 20px;
        cursor: pointer;
      }

      .hidden {
        display: none;
      }
      .tabs {
      }
      .tabs p {
        font-family: Georgia;
        font-weight: bold;
        display: inline-block;
        font-size: 25px;
        cursor: pointer;
        padding: 6px 20px;
        color: #888;
        margin: 1px;
      }
      .tabs .active {
        color: #fff;
        background-color: rgba(255,255,255,0.1);
      }
      #stage {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30%;
        font-size: 17px;
        color: #eee;
      }

      #stage p {
        margin: 4px 0px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .item {
        font-size: 20px;
        display: inline-block;
        margin: 2px 5px;
      }

    </style>
  </head>
  <body spellcheck="false">
    <div class="tabs"></div>
  <pre>
// Create an instance
var api = new APIInterface();

  </pre>
  <pre>
// Create an instance
var api = new APIInterface();

// Set the domain
api.domain('search.twitter.com');

  </pre>
  <pre>
// Create an instance
var api = new APIInterface();

// Set the domain
api.domain('search.twitter.com');

// Connect the route
api.connect('search');

  </pre>
  <pre>
// Create an instance
var api = new APIInterface();

// Set the domain
api.domain('search.twitter.com');

// Connect the route
api.connect('search');

// Run the route
api.getSearch();
  </pre>
  <pre>
var api = new APIInterface();
api.domain('search.twitter.com');
api.connect('search');

// Only support JSONP
api.cors(false);

api.getSearch({ q: 'cookpad' }, {

  // All ajax options passed on to jQuery
  success: function(data) {
    showResults(data);
  }

});
  </pre>
  <pre>
var api = new APIInterface();
api.domain('search.twitter.com');
api.connect('search');
api.cors(false);

// Returns jQuery deferred objects
api.getSearch({ q: 'cookpad' }).then(showResults);
  </pre>
  <pre>
var api = new APIInterface();
api.domain('api.iknow.jp');
api.cors(false);

// Allow optional contexts
api.connect('goals/:goal_id/items.json');

api.getItems({ goal_id: 910 }).then(showItems);
  </pre>
  <pre>
var api = new APIInterface();
api.domain('api.twitter.com');

// Alternate HTTP methods
api.connect('POST :username/favorites');

api.createFavorites({ username: 'budday' });
  </pre>
  <pre>
var api = new APIInterface();
api.domain('api.twitter.com');

// RESTful resources
api.resource(':username/favorite');

api.getFavorite({ username: 'budday' });
api.createFavorite({ username: 'budday' });
api.updateFavorite({ username: 'budday' });
api.destroyFavorite({ username: 'budday' });

  </pre>
  <pre>
var api = new APIInterface();
api.domain('api.twitter.com');

// "favorites" indicates a collection
api.resource(':username/favorites');

// index
api.getFavorites({ username: 'budday' });
// show
api.getFavorite({ username: 'budday', id: 3 });

api.createFavorite({ username: 'budday' });
api.updateFavorite({ username: 'budday', id: 3 });
api.destroyFavorite({ username: 'budday', id: 3 });

  </pre>
  <pre>
var api = new APIInterface();
api.domain('andrewplummer.com');
api.format(false);

api.connect('recipes');

// Allow credentials
api.getRecipes({}).then(showResults);
  </pre>
  <pre>
api = api || new APIInterface();

api.domain('andrewplummer.com');
api.format(false);

api.connect('recipes');

// Internal caching
api.getRecipes({}, { cache: true }).then(showResults);
  </pre>
  <pre>
// All routes/options/params in the constructor
var api = new APIInterface({
  domain   : 'api.twitter.com',
  protocol : 'https',
  cors     :  false,
  routes   : [
    'GET  /status',
    'POST /statuses/update',
    'POST direct_messages/destroy/:id AS destroyMessage'
  ]
});

api.destroyMessage({ id: 7 });
  </pre>
  <pre>
// Future??
var api = new APIInterface();

api.getManifest(function() {

  api.getUserTweets();

  // ...

});

  </pre>
  <div id="stage"></div>
  <button>Punch it, Chewie</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="../lib/main.js"></script>
    <!--<script src="https://raw.github.com/andrewplummer/APIInterface/master/lib/main.js"></script>-->
    <script src="sh_main.min.js" type="text/javascript"></script>
    <script src="sh_javascript.min.js" type="text/javascript"></script>
    <script type="text/javascript">

      showItems = function(data) {
        $('#stage').html(data.items.map(function(i) {
              return '<span class="item">' + i.cue.content.text + '</span>';
        }).join(''));
      }

      showResults = function(data) {
        $('#stage').html(data.results.map(function(t) {
              return '<p>' + t.text + '</p>';
        }).join(''));
      }

      currentTab = 1;

      $(document).keydown(function(e) {
          if(e.which == 37) {
            setTab(currentTab - 1);
          } else if (e.which == 39) {
            setTab(currentTab + 1);
          }
      });

      $('pre').each(function(i) {
          var el = $(this);
          el.addClass('sh_javascript').attr('contentEditable', true);
          el.toggleClass('hidden', i > 0);
          $('<p>' + (i + 1) + '</p>').appendTo($('.tabs')).click(function() {
            currentTab = parseInt(i) + 1;
            window.location.hash = '#' + (i + 1);
            $('pre').hide();
            $('.tabs p').removeClass('active');
            $(this).addClass('active');
            el.show();
          }).toggleClass('active', i == 0);
      });
      $('button').click(function() {
          $('#stage').empty();
          eval($('pre:visible').text());
      });

      var match;
      if(match = window.location.hash.match(/#(\d+)/)) {
        setTab(parseInt(match[1]));
      }

      function setTab(i) {
        currentTab = Math.max(1, Math.min($('.tabs p').length, i));
        $('.tabs p').eq(currentTab - 1).click();
      }

      sh_highlightDocument();
    </script>
  </body>
</html>