demos/albums.html

<!DOCTYPE html>
<link rel="stylesheet" href="/adorn/adorn.css"/>
<script src="/adorn/adorn.js" async></script>
<script src="client_ids.js"></script>
<style>

img.picture{
	width:50%;
	border:1px solid #ccc;
	padding:1%;
	display: inline-block;
	float:left;
	vertical-align: top;
	background-color: white;
}
img.picture:nth-child(2n){
	-webkit-transform:rotate(10deg);
	-moz-transform:rotate(10deg);
	-ms-transform:rotate(10deg);
	transform:rotate(10deg);
}
img.picture:nth-child(3n){
	-webkit-transform:rotate(-10deg);
	-moz-transform:rotate(-10deg);
	-ms-transform:rotate(-10deg);
	transform:rotate(-10deg);
}
.demo{
	max-height:500px;
}
.column{
	display:inline-block;
	width:33%;
	padding:0.3%;
}
div.column{
	height:300px;
	overflow: auto;
	background-color: #eee;
	border: 2px solid white;
}
.column button{
	width:100%;
}

</style>
<title>Photo Albums w/ hello.js</title>
<h1>Photo Albums w/ hello.js</h1>

<h2>Demo</h2>

<div class="demo">

	<b class="column">Provider</b>
	<b class="column">Albums</b>
	<b class="column">Photos</b>
	<br />
	<div class="column">
		<button id="windows" onclick="getAlbums('windows')">Get Albums from Windows</button>
		<button id="facebook" onclick="getAlbums('facebook')">Get Albums from Facebook</button>
		<button id="google" onclick="getAlbums('google')">Get Albums from Google</button>
	</div><div class="column" id="albums">
	</div><div class="column" id="photos">
	</div>
</div>


<h2>Source</h2>

<p>Include hello.js + modules</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>

<p>Setup a listener</p>

<script class="pre">
// Get User
hello.on('auth.login', function(auth){

	// Get Profile
	hello.api(auth.network+':me', function(r){
		if(!r||r.error){
			return;
		}
		document.getElementById(auth.network).innerHTML = "Get Albums from " + r.name + " at "+auth.network+"";
	});
});
</script>


<h3>Initiate HelloJS</h3>
<p>Plug the app keys (client_id')</p>

<script class="pre">

// Initiate hellojs
hello.init( CLIENT_IDS, {
	scope: "files, photos",
	redirect_uri : "../redirect.html"
});
</script>


<h3>Get Albums</h3>

<script class="pre">

function getAlbums(network){

	// Target where to put the list of albums
	var list = document.getElementById('albums');
	list.innerHTML = ''; // flush its content

	//
	// Setting force:false means we'll only trigger auth flow if the user is not already signed in with the correct credentials
	hello( network ).login({
		force:false
	},function(auth){

		// Get albums
		hello.api( network+':me/albums', function(r){

			if(!r||r.error){
				message(list, "Could not open albums from "+network+", try resigning in");
				return;
			}
			else if(!r.data||r.data.length===0){
				message(list, "There are no albums in the users account");
				return
			}

			// Build buttons with the albums
			for(var i=0;i<r.data.length;i++){
				buildAlbumBtn( r.data[i], network );
			}
		});
	});

}
</script>

<h3>Album button control</h3>

<script class="pre">


// Create a button selecting the album
function buildAlbumBtn(item, network){

	// Target where to put the list of albums
	var list = document.getElementById('albums');

	// construct the button
	var o = document.createElement('button');
	o.innerHTML = item.name;

	// Add the controls
	o.onclick = function(){
		// Trigger get 
		getPhotos( network, item.id );
	};

	// Append to the list
	list.appendChild(o);
}
</script>

<h3>Get Photos</h3>

<script class="pre">
function getPhotos(network, id){

	var list = document.getElementById('photos');
	list.innerHTML = ''; // flush its content


	hello( network ).api('me/album', {
		id: id,
		limit:10
	}, function(r){
		if(r.error){
			message(list, r.error.message);
			return;
		}
		else if(!r.data||r.data.length===0){
			message(list, "There are no photos in this album");
			return
		}

		// Create a new image in the DOM, give it some randomness and insert it into the dom.
		for(var i=0;i<r.data.length;i++){
			buildPhotoThumnail( r.data[i] );
		}		
	});
}
</script>

<h3>Create photo thumbnail</h3>

<script class="pre">
function buildPhotoThumnail(item){

	var list = document.getElementById('photos');

	var o = document.createElement('img');
	o.className='picture';
	o.src = item.thumbnail;
	o.title = item.name;

	// Append to the list
	list.appendChild(o);
}

</script>

<script>
// Report any notifications to the containing element
function message(target, str){
	target.appendChild(document.createTextNode(str));
}
</script>