demos/friends.html

<!DOCTYPE html>
<html>
<head>
	<title>hello.js - Javascript API for OAuth2 authentication and REST services</title>
	<link rel="stylesheet" href="/_packages/document.css" />
	<script src="/_packages/document.js"></script>

	<script src="client_ids.js"></script>
	<style>ul:empty:after{content:'empty';font-weight:bold;color:#aaa;}</style>
</head>
<body>
	<h1>hello.js - me/friends</h1>


	<button onclick="getFriends('google', 'me/friends')">Get Google me/friends</button>
	<button onclick="getFriends('facebook', 'me/friends')">Get Facebook me/friends</button>
	<button onclick="getFriends('windows', 'me/friends')">Get Windows me/friends</button>
	<button onclick="getFriends('yahoo', 'me/friends')">Get Yahoo me/friends</button>
	<button onclick="getFriends('google', 'me/contacts')">Get Google me/contacts</button>
	<button onclick="getFriends('windows', 'me/contacts')">Get Windows me/contacs</button>

	<h2>Friends list</h2>
	<ul id="list"></ul>
	<button id="more" style="display:none;"></button>


<h2>Include hello.js and the modules</h2>
<p>One should merge these for performance.</p>
<script class="pre" src="../src/hello.js"></script>
<script class="pre" src="../src/modules/windows.js"></script>
<script class="pre" src="../src/modules/facebook.js"></script>
<script class="pre" src="../src/modules/google.js"></script>
<script class="pre" src="../src/modules/yahoo.js"></script>

<h2>Initiate</h2>
<script class="pre">
hello.init( {
		windows : CLIENT_IDS_ALL.windows,
		google : CLIENT_IDS_ALL.google,
		facebook : CLIENT_IDS_ALL.facebook,
		yahoo : CLIENT_IDS_ALL.yahoo
	}
	, {
		redirect_uri:'../redirect.html', 
		oauth_proxy : OAUTH_PROXY_URL, 
		scope:"friends"
	}
);
</script>

<h2>Build Button events</h2>
<script class="pre">
function getFriends(network, path){

	var list = document.getElementById('list');
	list.innerHTML = '';
	var btn_more = document.getElementById('more');
	btn_more.style.display = 'none';

	// login
	hello.login( network, {scope:'friends'}, function(auth){
		if(!auth||auth.error){
			console.log("Signin aborted");
			return;
		}
		// Get the friends
		// using path, me/friends or me/contacts
		hello( network ).api( path , {limit:10}, function(r, next){
			for(var i=0;i<r.data.length;i++){
				var o = r.data[i];
				var li = document.createElement('li');
				li.innerHTML = o.name + (o.thumbnail?" <img src="+o.thumbnail+" />":'');
				list.appendChild(li);
			};

			btn_more.onclick = next;
			btn_more.innerHTML = "Next from "+network;
			btn_more.style.display = 'block';
		});
	});
}
</script>

</body>
</html>