chore: Add support for collections for start:dev (#1397)

box · Jun 4, 2021 · 4fa91c8 · 4fa91c8
1 parent cad6bee
commit 4fa91c8
Showing 1 changed file with 69 additions and 16 deletions.
diff --git a/src/index.html b/src/index.html
@@ -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,
@@ -28,6 +29,7 @@
             }
 
             .container {
+                flex: 1 1 auto;
                 text-align: center;
             }
 
@@ -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>
 
@@ -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');
@@ -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,
@@ -105,6 +157,7 @@
             // Try to load all properties from storage on page load
             setProperty('token');
             setProperty('fileid');
+            setProperty('collection');
             loadPreview();
         </script>
     </body>