--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/jsonp/jsonp-github.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Getting Cross Domain JSON Data Using Y.jsonp()</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+
+ <h1>Example: Getting Cross Domain JSON Data Using Y.jsonp()</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><style scoped>
+#out {
+ margin-top: 1em;
+}
+#out caption {
+ color: #f80;
+ font-size: 123%;
+ display: table-caption;
+ *display: block;
+}
+</style>
+
+
+<div class="intro">
+ <p>This example illustrates basic use of the <code>Y.jsonp( url, callback )</code> method, provided by the <code>jsonp</code> module.</p>
+
+ <p>For this example, we will use <a href="http://develop.github.com/">GitHub's webservice API</a>, fetching user information about some members of the YUI team.</p>
+</div>
+
+<div class="example yui3-skin-sam">
+<div id="demo">
+ <select id="github_user">
+ <option value="yui">YUI Library</option>
+ <option value="allenrabinovich">Allen Rabinovich</option>
+ <option value="davglass">Dav Glass</option>
+ <option value="derek">Derek Gathright</option>
+ <option value="ericf">Eric Ferraiuolo</option>
+ <option value="jenny">Jenny Donnelly</option>
+ <option value="lsmith">Luke Smith</option>
+ <option value="msweeney">Matt Sweeney</option>
+ <option value="reid">Reid Burke</option>
+ <option value="rgrove">Ryan Grove</option>
+ <option value="sdesai">Satyen Desai</option>
+ <option value="tripp">Tripp Bridges</option>
+ </select>
+ <input type="button" id="demo_btn" value="Get user info">
+ <div id="out">
+ </div>
+</div>
+
+<script>
+YUI().use("jsonp", "node",function (Y) {
+
+ var user = Y.one("#github_user"),
+ githubAPI = "https://api.github.com/users/",
+ template = // assignment continued below
+
+ '<table>' +
+ '<caption>GitHub user <code>{login}</code> ({name})</caption>' +
+ '<thead>' +
+ '<tr>' +
+ '<th>Repositories</th>' +
+ '<th>Gists</th>' +
+ '<th>Followers</th>' +
+ '<th>Following</th>' +
+ '</tr>' +
+ '</thead>' +
+ '<tbody>' +
+ '<tr>' +
+ '<td>{public_repos}</td>' +
+ '<td>{public_gists}</td>' +
+ '<td>{followers}</td>' +
+ '<td>{following}</td>' +
+ '</tr>' +
+ '</tbody>' +
+ '</table>';
+
+ function handleJSONP(response) {
+ Y.one("#out").setHTML(Y.Lang.sub(template, response.data));
+ }
+
+ Y.one("#demo_btn").on("click", function (e) {
+ // e.g. https://api.github.com/users/yui?callback={callback}
+ var url = githubAPI + user.get("value") + "?callback={callback}";
+
+ Y.jsonp(url, handleJSONP);
+ });
+
+});
+</script>
+
+</div>
+
+<h3>The data</h3>
+<p>The structure of the JavaScript object returned from GitHub's JSONP API for user info will look like this:</p>
+
+<pre class="code prettyprint">{
+ data: {
+ avatar_id: "fc2cca...",
+ login: "username"
+ name: "User's Name",
+ ...,
+
+ public_repos: 10,
+ public_gists: 20,
+ following: 30,
+ followers: 40
+ }
+}</pre>
+
+
+<p>We'll use these objects to populate HTML templates with data <em>{placeholder}</em>s using <code>Y.Lang.sub( template, object )</code>. The resulting HTML can then simply be passed to any of YUI 3's DOM creation methods, such as <code>node.setHTML( html )</code> or <code>node.append( html )</code>. We'll do this in the function that will receive the JSONP response (seen below).</p>
+
+<h3>Format the JSONP url</h3>
+<p>Typical JSONP urls are formatted like</p>
+<p>"http://example.com/service?format=json&<em>callback=handleJSONP</em>".</p>
+<p>To use YUI 3's JSONP utility, replace the name of the callback function in the url with placeholder text "{callback}".</p>
+
+<pre class="code prettyprint">// BEFORE
+var url = "https://api.github.com/users/yui?callback=handleJSONP";
+
+//AFTER
+var url = "https://api.github.com/users/yui?callback={callback}";</pre>
+
+
+<p>Then simply pass the url and the function that should handle the JSONP response object to <code>Y.jsonp(<em>url</em>, <em>handleJSONP</em>)</code>.</p>
+
+<pre class="code prettyprint">function handleJSONP(response) {
+ Y.one("#out").setHTML(Y.Lang.sub(template, response.data));
+}
+
+Y.one("#demo_btn").on("click", function (e) {
+ // e.g. https://api.github.com/users/yui?callback={callback}
+ var url = githubAPI + user.get("value") + "?callback={callback}";
+
+ Y.jsonp(url, handleJSONP);
+});</pre>
+
+
+<h3 id="fullcode">Full Code Listing</h3>
+<h4>HTML</h4>
+<pre class="code prettyprint"><div id="demo">
+ <select id="github_user">
+ <option value="yui">YUI Library</option>
+ <option value="allenrabinovich">Allen Rabinovich</option>
+ <option value="davglass">Dav Glass</option>
+ <option value="derek">Derek Gathright</option>
+ <option value="ericf">Eric Ferraiuolo</option>
+ <option value="jenny">Jenny Donnelly</option>
+ <option value="lsmith">Luke Smith</option>
+ <option value="msweeney">Matt Sweeney</option>
+ <option value="reid">Reid Burke</option>
+ <option value="rgrove">Ryan Grove</option>
+ <option value="sdesai">Satyen Desai</option>
+ <option value="tripp">Tripp Bridges</option>
+ </select>
+ <input type="button" id="demo_btn" value="Get user info">
+ <div id="out">
+ </div>
+</div></pre>
+
+
+<h4>JavaScript</h4>
+<pre class="code prettyprint"><script>
+YUI().use("jsonp", "node",function (Y) {
+
+ var user = Y.one("#github_user"),
+ githubAPI = "https://api.github.com/users/",
+ template = // assignment continued below
+
+ '<table>' +
+ '<caption>GitHub user <code>{login}</code> ({name})</caption>' +
+ '<thead>' +
+ '<tr>' +
+ '<th>Repositories</th>' +
+ '<th>Gists</th>' +
+ '<th>Followers</th>' +
+ '<th>Following</th>' +
+ '</tr>' +
+ '</thead>' +
+ '<tbody>' +
+ '<tr>' +
+ '<td>{public_repos}</td>' +
+ '<td>{public_gists}</td>' +
+ '<td>{followers}</td>' +
+ '<td>{following}</td>' +
+ '</tr>' +
+ '</tbody>' +
+ '</table>';
+
+ function handleJSONP(response) {
+ Y.one("#out").setHTML(Y.Lang.sub(template, response.data));
+ }
+
+ Y.one("#demo_btn").on("click", function (e) {
+ // e.g. https://api.github.com/users/yui?callback={callback}
+ var url = githubAPI + user.get("value") + "?callback={callback}";
+
+ Y.jsonp(url, handleJSONP);
+ });
+
+});
+</script></pre>
+
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Get basic GitHub user info using a Y.jsonp(url, callback).">
+ <a href="jsonp-github.html">Getting Cross Domain JSON Data Using Y.jsonp()</a>
+ </li>
+
+
+
+ <li data-description="Create a reusable JSONPRequest object to poll the YUILibrary.com Gallery web service, fetching info on a random Gallery module.">
+ <a href="jsonp-gallery.html">Reusing a JSONPRequest Instance to Poll a Remote Server</a>
+ </li>
+
+
+
+
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples That Use This Component</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+
+
+
+
+ <li data-description="Wrapping async transactions with promises">
+ <a href="../promise/basic-example.html">Wrapping async transactions with promises</a>
+ </li>
+
+
+
+ <li data-description="Extend Y.Promise to create classes that encapsulate standard transaction logic in descriptive method names">
+ <a href="../promise/subclass-example.html">Subclassing Y.Promise</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/jsonp',
+ name: 'jsonp-github',
+ title: 'Getting Cross Domain JSON Data Using Y.jsonp()',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('jsonp-github');
+YUI.Env.Tests.examples.push('jsonp-gallery');
+YUI.Env.Tests.examples.push('basic-example');
+YUI.Env.Tests.examples.push('subclass-example');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>