New: Thumbnails Sidebar (#932)

UPGRADING.md

@@ -0,0 +1,36 @@
+Upgrading Guide
+=========================
+
+Upgrading from 1.x to 2.x
+-------------------------
+Version 2 includes a breaking change to the DOM structure of the Preview element.
+
+In version 1, the `.bp-navigate` buttons were siblings with the `.bp` container div
+```
+<div class="bp" tabindex="0">
+    ...
+</div>
+<button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden">
+    ...
+</button>
+<button class="bp-btn-plain bp-navigate bp-navigate-right bp-is-hidden">
+    ...
+</button>
+```
+But in version 2, the buttons are now inside a new container div `.bp-content`.
+```
+<div class="bp" tabindex="0">
+    <div class="bp-content">
+        <button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden">
+            ...
+        </button>
+        <button class="bp-btn-plain bp-navigate bp-navigate-right bp-is-hidden">
+            ...
+        </button>
+    </div>
+</div>
+```
+
+`.bp-content` is also the new point in which the various viewers will be dynamically inserted as children, i.e. `.bp-doc`, `.bp-image`, etc...
+
+This change in structure is to account for the new thumbnails sidebar which will appear to the left of the viewer content.

src/i18n/en-US.properties

@@ -34,6 +34,8 @@ loading_preview=Loading Preview...
 download_file=Download File
 # Text shown when a text file has been truncated due to size limits.
 text_truncated=This file has been truncated due to size limits. Please download to view the whole file.
+# Button tooltip to toggle Thumbnails Sidebar
+toggle_thumbnails=Toggle thumbnails
 
 # Error messages
 # Default preview error message

src/index.html

@@ -57,6 +57,10 @@
                         <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='preview-container' data-testid="preview-container"> </div>
@@ -77,9 +81,6 @@
 
                 // Cache it in local storage
                 localStorage.setItem(selector, value)
-
-                // Attempt to load Preview
-                loadPreview();
             }
 
             function loadPreview(options) {
@@ -102,6 +103,7 @@
             // Try to load all properties from storage on page load
             setProperty('token');
             setProperty('fileid');
+            loadPreview();
         </script>
     </body>
 </html>

src/lib/BoundedCache.js

@@ -0,0 +1,62 @@
+import Cache from './Cache';
+
+class BoundedCache extends Cache {
+    /** @property {Array} - Maintains the list of cache keys in order in which they were added to the cache */
+    cacheQueue;
+
+    /** @property {number} - The maximum number of entries in the cache */
+    maxEntries;
+
+    /**
+     * [constructor]
+     *
+     * @param {number} [maxEntries] - Override the maximum number of cache entries
+     */
+    constructor(maxEntries) {
+        super();
+
+        this.maxEntries = maxEntries || 500;
+        this.cache = {};
+        this.cacheQueue = [];
+    }
+
+    /**
+     * Destroys the bounded cache
+     *
+     * @return {void}
+     */
+    destroy() {
+        this.cache = null;
+        this.cacheQueue = null;
+    }
+
+    /**
+     * Caches a simple object in memory. If the number of cache entries
+     * then exceeds the maxEntries value, then the earliest key in cacheQueue
+     * will be removed from the cache.
+     *
+     * @param {string} key - The cache key
+     * @param {*} value - The cache value
+     * @return {void}
+     */
+    set(key, value) {
+        // If this key is not already in the cache, then add it
+        // to the cacheQueue. This avoids adding the same key to
+        // the cacheQueue multiple times if the cache entry gets updated
+        if (!this.inCache(key)) {
+            this.cacheQueue.push(key);
+        }
+
+        super.set(key, value);
+
+        // If the cacheQueue exceeds the maxEntries then remove the first
+        // key from the front of the cacheQueue and unset that entry
+        // from the cache
+        if (this.cacheQueue.length > this.maxEntries) {
+            const deleteKey = this.cacheQueue.shift();
+            this.unset(deleteKey);
+        }
+    }
+}
+
+export default BoundedCache;

src/lib/Preview.js

@@ -937,6 +937,9 @@ class Preview extends EventEmitter {
         // Options that are applicable to certain file ids
         this.options.fileOptions = options.fileOptions || {};
 
+        // Option to enable use of thumbnails sidebar for document types
+        this.options.enableThumbnailsSidebar = !!options.enableThumbnailsSidebar;
+
         // Prefix any user created loaders before our default ones
         this.loaders = (options.loaders || []).concat(loaderList);
 

src/lib/Preview.scss

@@ -3,3 +3,4 @@
 @import 'navigation';
 @import './Controls';
 @import './ProgressBar';
+@import './VirtualScroller';