hello.js/demos/albums.html at master · Ruudieboy/hello.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<link rel="stylesheet" href="/_packages/document.css"></script>
<script src="/_packages/document.js"></script>
<script src="client_ids.js"></script>
<style>
img{
	position: fixed;
	top:0;
	left:50%;
	width:200px;
	border:1px solid #ccc;
	padding:10px;
}
img:nth-child(2n){
	-webkit-transform:rotate(10deg);
	-moz-transform:rotate(10deg);
	-ms-transform:rotate(10deg);
	transform:rotate(10deg);
}
img:nth-child(3n){
	-webkit-transform:rotate(-10deg);
	-moz-transform:rotate(-10deg);
	-ms-transform:rotate(-10deg);
	transform:rotate(-10deg);
}
</style>

<h1>Load album photos with Hello.js</h1>

<blockquote>

	<h2>Signin</h2>

	<button id="windows" onclick="hello.login('windows');">Login Windows</button>
	<button id="facebook" onclick="hello.login('facebook');">Login Facebook</button>
	<button id="google" onclick="hello.login('google');">Login Google</button>

	<h2>Select an album to load</h2>

	<select id="albums"></select>

	<button type="button" onclick="getPhotos()">Get Photos</button>
	<div id="result"></div>
</blockquote>

<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>Listener: On login authenticated. Request users profile + Albums. </p>

<script class="pre">
// Windows Live
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 = "Connected to "+auth.network+" as " + r.name;
	});

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

		if(!r||r.error){
			console.error("Could not open albums from "+auth.network+", try resigning in");
			return;
		}

		var grp = document.createElement('optgroup');
		grp.label = auth.network;
		document.getElementById('albums').appendChild(grp);

		for(var i=0;i<r.data.length;i++){
			var o = document.createElement('option');
			o.value = auth.network+":"+ ( r.data[i].photos || r.data[i].id );
			o.innerHTML = r.data[i].name;
			grp.appendChild(o);
		}

	});
});
</script>

<p>On album selected: Load photos</p>

<script class="pre">
function getPhotos(){
	if(!document.getElementById('albums').value){
		alert("Please signin and wait for an album content to load");
	}
	hello.api(document.getElementById('albums').value, function(r){
		if(r.error){
			alert(r.error.message);
			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++){
			var obj = r.data[i];
			var img = document.createElement('img');
			img.src = obj.thumbnail;
			img.style.top = (parseInt(Math.random()*85,10))+'%';
			img.style.left = (50+parseInt(Math.random()*50,10))+'%';
			document.body.appendChild(img);
		}
	});
}
</script>


<p>Plug the app keys (client_id') and voila</p>
<script class="pre">

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