<!DOCTYPE html>
<html>
<head>
<title>SkyDrive Test</title>
<script type='text/javascript'
src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js'></script>
<script src="jquery.ba-bbq.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//取得Access Token，未成功登入時傳回null
function getAccessToken() {
var session = WL.getSession();
if (session != null && !session.error)
return session.access_token;
return null;
}
//AJAX History支援，state改變時顥示不同資料夾內容
window.lastId = null;
$(window).bind("hashchange", function (e) {
var f = e.getState("f");
if (f) listFiles(f);
});
var goUpper = "回上層";
var frmViewer = document.getElementById("frmViewer");
//列出檔案
function listFiles(folderId) {
if (!getAccessToken()) return;
//REST folderId/files可列出資料夾下的檔案清單
WL.api({
path: folderId + "/files"
}, function (res) {
var $ul = $("<ul class='f-item' />");
//folderId若以"."分成三段，代表非根目錄
//增加一個"回上層"連結
if (folderId.split('.').length > 2)
$ul.append(
"<li><img src='images/parent.png' class='icon' />" +
goUpper + "</li>");
//每個資料夾或檔案對應一個li
for (var i = 0; i < res.data.length; i++) {
var item = res.data[i];
var $li = $("<li />", {
"data-id": item.id,
"data-count": item.count,
"data-name": item.name,
"data-parent-id": item.parent_id,
"data-link": item.link
});
//id若為folder****，表示為資料夾
var isFolder = item.id.indexOf("folder") == 0;
$li.html(
"<img class='icon' src='images/" +
//資料夾與檔案Icon不同
(isFolder ? "folder" : "save") + ".png' />" +
"<span class='item-name'></span>")
.find(".item-name").text(
item.name +
//資料夾時，加顯示其下檔案數量
(isFolder ? "(" + item.count + ")" : "")
);
$ul.append($li);
}
$("#dFolder").empty().append($ul);
frmViewer.src = "";
});
}
//下載檔案內容
function downloadFile(id, name) {
//REST fileId/content可取得下載檔案內容用的連結
WL.api({
path: id + "/content"
}, function (res) {
if (res.error)
alert(res.error.message);
else {
//res.location指向可直接下載檔案二進位內容的連結
//指定成為IFrame.src，
//可直接顯示或另存檔案(由瀏覽器依附檔名決定)
frmViewer.src = res.location;
}
});
}
//點選檔案項目觸發事件
$("#dFolder").on("click", "li", function () {
var $li = $(this);
//若為回上層，則透過記憶中的前一層目錄回去
if ($li.text() == goUpper) {
$.bbq.pushState({ f: lastId });
return;
}
var id = $li.data("id");
if (id.indexOf("file") == 0)
downloadFile(id);
else {
//保留目前的folderId供稍後回上層用
lastId = $.bbq.getState("f");
$.bbq.pushState({ f: id });
}
});
$("#bList").click(function () {
if (!getAccessToken()) return;
});
});
</script>
<style>
table { width: 400px; }
td { border: 1px solid gray; }
div { margin: 2px; }
#dFolder li { color: white; text-decoration: underline; cursor: pointer; }
.bw-style { background-color: Black; color: White; }
.bw-style .icon { width: 16px; height: 16px; vertical-align: middle; }
</style>
</head>
<body>
<h1>SkyDrive Test</h1>
<table>
<tr><td style="width: 120px; vertical-align: top;">
<div id="signin"></div>
<div id="meName" class="Name"></div>
<div id="meImg"></div>
</td><td style="vertical-align: top;" class='bw-style'>
<div id="dFolder">
</div>
</td></tr>
<tr><td colspan="2">
<iframe style="width: 100%; height: 400px;" id="frmViewer"></iframe>
</td></tr>
</table>
<script src="wl.debug.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
WL.Event.subscribe("auth.login", function () {
var session = WL.getSession();
if (session.error)
alert("Error:" + session.error);
else {
var token = session != null ? session.access_token : null;
if (token != null) {
var url = "https://apis.live.net/v5.0/me/picture?access_token="
+ escape(token);
$("#meImg").html("<img src='" + url + "' />");
WL.api({ path: "me", method: "get" }, function (response) {
if (!response.error) {
$("#meName").html(response.name);
}
});
//取得SkyDrive Id，透過AJAX History方式觸發瀏覽
$.bbq.pushState({ f: "" });
WL.api({
path: "me/skydrive"
}, function (prop) {
$.bbq.pushState({ f: prop.id });
});
}
}
});
WL.Event.subscribe("auth.logout", function () {
$("#meImg,#meName").html("");
});
WL.init({
client_id: "0000000048076EE5",
redirect_uri: "http://www.darkthread.net/LiveSDK/callback.aspx",
scope: ["wl.signin", "wl.basic", "wl.offline_access", "wl.skydrive" ],
response_type: "code"
});
WL.ui({
name: "signin",
element: "signin"
});
});
</script>
</body>
</html>