pchristensenB/treeview.html Secret

## treeview.html
<!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>
	<!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>