-
-
Save pchristensenB/65761f2bec3c10a330be66be624f2476 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en-US"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="Cache-control" content="No-Cache"> | |
<title>Box Platform Tree View</title> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> | |
<!-- Bootstrap core CSS --> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> | |
<link href="https://cdn01.boxcdn.net/platform/elements/15.0.0/en-US/preview.css" rel="stylesheet" type="text/css"></link> | |
<script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script> | |
<script src="https://cdn01.boxcdn.net/platform/elements/15.0.0/en-US/preview.js"></script> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> | |
<script> | |
//BaseURL to load icons. This has Box styled icons - see https://github.com/pchristensenB/pchristensenB.github.io/tree/master/template2.0/img/iconsbox | |
var imageBaseUrl ="https://pchristensenb.github.io/template2.0/img/iconsbox/"; | |
//Add Box Folder ID here | |
var folderID = ""; | |
//Add Box Access Token here - you can use https://developer.box.com/guides/authentication/tokens/developer-tokens/ | |
var accessToken = ""; | |
// !! important !! | |
// | |
//Remember to add your host to the CORS exceptions in your app | |
// See https://developer.box.com/guides/security/cors/#enabling-cors-for-your-domain | |
var nodeName = 'all'; | |
var nodeId; | |
$(document).ready(function () { | |
//Initialize the tree | |
$('#jstree_demo_div').jstree({ | |
"plugins": ["json_data"], | |
'core': { | |
'data': { | |
'type': 'get', | |
'url': function (node) { | |
nodeId = (node.id == '#' ? folderId : node.id); | |
//Call Box API to get folders from item - used nodeId to allow deeper navigation | |
return node.id === '#' ? 'https://api.box.com/2.0/folders/' + nodeId + '/?fields=id,name,type,size,has_collaborations,is_externally_owned,item_collection' : | |
'https://api.box.com/2.0/folders/' + node.id + '/?fields=id,name,type,size,has_collaborations,is_externally_owned,item_collection' | |
}, | |
'headers': { | |
'Authorization': 'Bearer ' + accessToken | |
}, | |
'dataFilter': function (data) { | |
//Generate the JSON to populate the tree | |
var jsonData = []; | |
var jdata = JSON.parse(data); | |
var rootIcon = getRootIcon(jdata.has_collaborations, jdata.is_externally_owned); | |
var children = []; | |
$.each(JSON.parse(data).item_collection.entries, function (id, element) { | |
var hasKids = element.type == 'folder' ? true : false; | |
var icon = getIcon(element); | |
var childElement = (element.type == 'folder' || (element.size > 0 && hasKids)); | |
children.push({'id':element.id ,"parent": nodeId ,"text":element.name,"children":childElement,"icon":icon}); | |
}); | |
jsonData.push({"id":jdata.id ,"text":jdata.name,"icons": rootIcon, "children":children}); | |
return JSON.stringify(jsonData); | |
}, | |
'data': function (node) { | |
return { 'id': node.id }; | |
} | |
} | |
}, | |
}); | |
$('#jstree_demo_div').on("select_node.jstree", function (e, data) { | |
if (data.node.icon != true && !data.node.icon.includes('folder') && !data.node.text.includes('boxnote')) { | |
//Open preview for valid content | |
preview(data.node.id) | |
} | |
}); | |
}); | |
function preview(id) { | |
var preview = new Box.ContentPreview(); | |
preview.show(id, accessToken, { | |
container: ".preview", | |
contentSidebarProps: { | |
detailsSidebarProps: { | |
hasNotices: true, | |
hasProperties: true, | |
hasAccessStats: true, | |
hasVersions: true | |
}, | |
hasActivityFeed: true, | |
hasSkills: true, | |
hasMetadata: true | |
}, | |
hasHeader: true | |
}); | |
} | |
function getRootIcon(collabs, extOwned) { | |
if (extOwned) { | |
return imageBaseURL + "foldere.svg"; | |
} else if (collabs) { | |
return imageBaseURL + "folderc.svg"; | |
} | |
else { | |
return imageBaseURL + "folder.svg"; | |
} | |
} | |
function getIcon(element) { | |
if (element.type == 'file') { | |
return imageBaseURL + element.name.split('.').pop().toLowerCase() + ".svg"; | |
} | |
else if (element.type == 'folder') { | |
if (element.is_externally_owned) { | |
return imageBaseURL + "foldere.svg"; | |
} else if (element.has_collaborations) { | |
return imageBaseURL + "folderc.svg"; | |
} | |
else { | |
return imageBaseURL + "folder.svg"; | |
} | |
} | |
else if (element.type == 'web_link') { | |
return imageBaseURL + "bookmark.svg"; | |
} | |
return ''; | |
} | |
</script> | |
<style> | |
.preview { | |
height: 800px !important; | |
} | |
.jstree-node { | |
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 13px; | |
font-stretch: 100%; | |
font-style: normal; | |
font-variant-caps: normal; | |
font-variant-east-asian: normal; | |
font-variant-ligatures: normal; | |
font-variant-numeric: normal; | |
font-weight: 400; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container-fluid"> | |
<div class="row"> | |
<div class="col-xs"> | |
<div id="jstree_demo_div"></div> | |
</div> | |
<div class="col-lg"> | |
<div class="preview"></div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment