mirror of
https://github.com/purplecabbage/phonegap-plugins.git
synced 2026-01-14 08:57:53 -05:00
170 lines
4.1 KiB
HTML
170 lines
4.1 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<!-- Change this if you want to allow scaling -->
|
|
<meta name="viewport" content="width=default-width; user-scalable=no" />
|
|
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
|
<title>FBConnectBrowser</title>
|
|
|
|
<script type="text/javascript">
|
|
// provide our own console if it does not exist, huge dev aid!
|
|
if (typeof window.console == "undefined") {
|
|
window.console = { log: function (str) { window.external.Notify(str); } };
|
|
}
|
|
|
|
// output any errors to console log, created above.
|
|
window.onerror = function (e) {
|
|
console.log("window.onerror ::" + JSON.stringify(e));
|
|
};
|
|
|
|
console.log("Installed console ! ");
|
|
</script>
|
|
|
|
<!-- iPad/iPhone specific css below, add after your main css >
|
|
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
|
|
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
|
|
-->
|
|
|
|
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="FBConnect.js"></script>
|
|
|
|
|
|
<style>
|
|
|
|
body
|
|
{
|
|
background-color:#3B5998;
|
|
color:#FFF;
|
|
font-family: Helvetica, Verdana;
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
#loading
|
|
{
|
|
z-index:1;
|
|
width:100%;
|
|
top:200px;
|
|
position:absolute;
|
|
text-align:center;
|
|
}
|
|
|
|
#gbWrap
|
|
{
|
|
overflow:hidden;
|
|
position:absolute;
|
|
top:60px;
|
|
bottom:0px;
|
|
}
|
|
|
|
.view
|
|
{
|
|
width:320px;
|
|
float:left;
|
|
clear:none;
|
|
|
|
}
|
|
|
|
|
|
#fbFriends li
|
|
{
|
|
list-style:none;
|
|
|
|
height:56px;
|
|
background:-webkit-gradient(
|
|
linear,
|
|
left top,
|
|
left bottom,
|
|
color-stop(0, rgba(0,0,0,0.1)),
|
|
color-stop(1, rgba(128,128,128,0.1))
|
|
)
|
|
}
|
|
|
|
#fbFriends li:active
|
|
{
|
|
background-color:rgba(255,255,255,0.5);
|
|
}
|
|
|
|
#fbFriends li img
|
|
{
|
|
margin:2px 12px;
|
|
min-height:48px;
|
|
min-width:48px;s
|
|
}
|
|
|
|
#fbFriends li span
|
|
{
|
|
position:relative;
|
|
top:-12px;
|
|
}
|
|
|
|
#details
|
|
{
|
|
position:absolute;
|
|
left:320px;
|
|
height:100%;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
var client_id = "311961255484993";
|
|
var redir_url = "http://www.facebook.com/connect/login_success.html";
|
|
var friendsMap = {};
|
|
|
|
function onBodyLoad() {
|
|
document.addEventListener("deviceready", onDeviceReady, false);
|
|
}
|
|
|
|
/* When this function is called, PhoneGap has been initialized and is ready to roll */
|
|
function onDeviceReady() {
|
|
// do your thing!
|
|
var fb = FBConnect.install(client_id, redir_url, "touch");
|
|
fb.connect('email, read_stream, read_friendlists');
|
|
fb.onConnect = onFBConnected;
|
|
}
|
|
|
|
function onFBConnected() {
|
|
document.getElementById("loading").innerHTML = "Connected! Getting your friends ...";
|
|
var req = window.plugins.fbConnect.getFriends();
|
|
req.onload = onGotFriends;
|
|
}
|
|
|
|
function onGotFriends(evt) {
|
|
document.getElementById("loading").style.visibility = "hidden";
|
|
|
|
var json = JSON.parse(evt.target.responseText);
|
|
|
|
|
|
var listItems = [];
|
|
var template = "<li id='FBID' onclick='showUser(\"FBID\")'><img src='https://graph.facebook.com/FBID/picture'/><span>NAME</span></li>";
|
|
for (var n = 0, len = json.data.length; n < len; n++) {
|
|
var friend = json.data[n];
|
|
friendsMap[friend.id] = friend;
|
|
listItems.push(template.replace(/FBID/g, friend.id).replace(/NAME/g, friend.name));
|
|
}
|
|
document.getElementById("fbFriends").innerHTML = listItems.join("");
|
|
}
|
|
|
|
function showUser(id) {
|
|
// TODO: Do something with user id ...
|
|
alert(friendsMap[id].name);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="onBodyLoad()">
|
|
<h3 id="loading">Loading ...</h3>
|
|
|
|
<ul id="fbFriends">
|
|
<!-- Placeholder for later -->
|
|
</ul>
|
|
|
|
|
|
</body>
|
|
</html>
|