Skip to content

Commit

Permalink
chore: Add support for collections for start:dev (#1397)
Browse files Browse the repository at this point in the history
  • Loading branch information
Conrad Chan authored Jun 4, 2021
1 parent cad6bee commit 4fa91c8
Showing 1 changed file with 69 additions and 16 deletions.
85 changes: 69 additions & 16 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,18 @@
<style>
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
font-family: sans-serif;
}

.setters-container {
display: flex;
font-size: 75%;
flex-direction: column;
height: 10vh;
justify-content: space-around;
padding: 20px;
overflow: auto;
font-size: 75%;
}

.setters-container button,
Expand All @@ -28,6 +29,7 @@
}

.container {
flex: 1 1 auto;
text-align: center;
}

Expand All @@ -36,28 +38,62 @@
}

.preview-container {
height: 90vh;
width: 100vw;
height: 90vh;
}

.primary-setters,
.secondary-setters {
display: flex;
}

.secondary-setters {
margin-top: 10px;
}

@media only screen and (max-width: 375px) {
.setters-container {
padding: 0;
}

.input-display {
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
</style>
</head>

<body>
<div class="setters-container">
<div class="container" id="token">
<div>Token: <span id="token-display"></span></div>
<input id="token-set" data-testid="token" placeholder="Enter token" />
<button onClick="setProperty('token')" data-testid="token-set">Set new token</button>
<div class="primary-setters">
<div class="container" id="token">
<div class="input-display">Token: <span id="token-display"></span></div>
<input id="token-set" data-testid="token" placeholder="Enter token" />
<button onClick="setProperty('token')" data-testid="token-set">Set new token</button>
</div>

<div class="container" id="file">
<div class="input-display">File ID: <span id="fileid-display"></span></div>
<input id="fileid-set" placeholder="Enter file ID" data-testid="fileid" />
<button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
</div>

<div class="container" id="load">
<button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
</div>
</div>

<div class="container" id="file">
<div>File ID: <span id="fileid-display"></span></div>
<input id="fileid-set" placeholder="Enter file ID" data-testid="fileid" />
<button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
</div>

<div class="container" id="load">
<button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
<div class="secondary-setters">
<div class="container" id="collection">
<div class="input-display">Collection: <span id="collection-display"></span></div>
<input id="collection-set" data-testid="collection" placeholder="Enter list of file ids" />
<button onClick="setProperty('collection')" data-testid="collection-set">Set new collection</button>
<button onClick="clearProperty('collection')" data-testid="collection-clear">Clear</button>
<div>Enter 2+ comma separated list of file ids</div>
</div>
</div>
</div>

Expand All @@ -67,6 +103,14 @@
/* global Box */
preview = new Box.Preview();

function clearProperty(selector) {
var inputEl = document.getElementById(selector + '-set');
var displayEl = document.getElementById(selector + '-display');
inputEl.value = '';
displayEl.textContent = '';
localStorage.setItem(selector, '');
}

function setProperty(selector) {
// Get new value, fallback to local storage
var inputValue = document.querySelector('#' + selector + '-set');
Expand All @@ -87,12 +131,20 @@
function loadPreview(options) {
var token = localStorage.getItem('token');
var fileid = localStorage.getItem('fileid');
var fileidList = localStorage.getItem('collection') || '';

if (!token || !fileid) {
return;
}

var collection =
fileidList &&
fileidList.split(',').map(function(fileid) {
return fileid.trim();
});

var previewOptions = options || {
collection,
enableThumbnailsSidebar: true,
showAnnotations: true,
showDownload: true,
Expand All @@ -105,6 +157,7 @@
// Try to load all properties from storage on page load
setProperty('token');
setProperty('fileid');
setProperty('collection');
loadPreview();
</script>
</body>
Expand Down

0 comments on commit 4fa91c8

Please sign in to comment.