Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Chore: Add Annotations test page to be hosted by github pages
- Loading branch information
Jeremy Press
committed
Nov 21, 2018
1 parent
0d9fefd
commit ae805d5
Showing
2 changed files
with
119 additions
and
0 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
<html> | ||
<head> | ||
<meta name="viewport" content="width=device-width"> | ||
<link rel="stylesheet" href='./styles.css' /> | ||
<link rel="stylesheet" href='https://cdn01.boxcdn.net/platform/preview/1.58.2/en-US/preview.css' /> | ||
<link rel="stylesheet" href='https://unpkg.com/box-annotations@3.3.0/lib/annotations.css' /> | ||
<script src='https://cdn01.boxcdn.net/platform/preview/1.58.2/en-US/preview.js'></script> | ||
<script src='https://unpkg.com/box-annotations@3.3.0/lib/annotations.js'></script> | ||
|
||
|
||
</head> | ||
|
||
<body> | ||
<div class='setters-container'> | ||
<div class='container' id='token'> | ||
<div> Token: <span id='token-display'></span> </div> | ||
<input id='token-set' placeholder='Enter token' /> | ||
<button onClick="setProperty('token')">Set new token</button> | ||
</div> | ||
|
||
<div class='container' id='file'> | ||
<div> File ID: <span id='fileid-display'></span></div> | ||
<input id='fileid-set' placeholder='Enter file ID' /> | ||
<button onClick="setProperty('fileid')">Set new file ID</button> | ||
</div> | ||
</div> | ||
|
||
<div class='preview-container'> </div> | ||
<script> | ||
function setProperty(selector) { | ||
// Get new value, fallback to local storage | ||
const inputValue = document.querySelector('#' + selector + '-set') | ||
value = inputValue && inputValue.value || localStorage.getItem(selector); | ||
|
||
|
||
if (!value) { | ||
return; | ||
} | ||
|
||
// Set it for display purposes | ||
displayElement = document.querySelector('#' + selector + '-display'); | ||
displayElement.textContent = value; | ||
|
||
// Cache it in local storage | ||
localStorage.setItem(selector, value) | ||
|
||
// Attempt to load Preview + Annotations | ||
loadPreview(); | ||
} | ||
|
||
function loadPreview() { | ||
const token = localStorage.getItem('token'); | ||
const fileid = localStorage.getItem('fileid'); | ||
|
||
if ( !token || !fileid) { | ||
return; | ||
} | ||
|
||
// Load Preview + Annotations with the passed in file ID | ||
const options = { | ||
Image: { | ||
enabledTypes: ["point"] | ||
}, | ||
Document: { | ||
enabledTypes: ["draw", "point", "highlight-comment", "highlight"] | ||
}, | ||
Presentation: { | ||
enabledTypes: ["draw", "point", "highlight-comment", "highlight"] | ||
} | ||
}; | ||
|
||
/* global BoxAnnotations */ | ||
const boxAnnotations = new BoxAnnotations(options); | ||
|
||
/* global Box */ | ||
var preview = new Box.Preview(); | ||
preview.show(fileid, token, { | ||
container: ".preview-container", | ||
boxAnnotations | ||
}); | ||
|
||
} | ||
|
||
// Try to load all properties from storage on page load | ||
setProperty('token'); | ||
setProperty('fileid'); | ||
</script> | ||
</body> | ||
</html> |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
* { | ||
font-family: sans-serif; | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
} | ||
.setters-container { | ||
height: 25vh; | ||
display: flex; | ||
font-size: 75%; | ||
justify-content: space-around; | ||
padding: 20px; | ||
} | ||
|
||
.setters-container button,input { | ||
padding: 5px; | ||
} | ||
|
||
.container { | ||
text-align: center; | ||
} | ||
|
||
.container > input { | ||
text-align: center; | ||
} | ||
|
||
#preview-container { | ||
width: 100vw; | ||
height: 75vh; | ||
} |