Update: Open Preview Thumbnails by default (#971)

src/lib/ThumbnailsSidebar.js

@@ -127,6 +127,9 @@ class ThumbnailsSidebar {
 
             // Specify the current page to be selected
             this.currentPage = options.currentPage || 1;
+
+            // Specify whether the sidebar is open to start
+            this.isOpen = !!options.isOpen;
         }
 
         // Get the first page of the document, and use its dimensions

src/lib/viewers/doc/DocBaseViewer.js

@@ -62,6 +62,7 @@ const SAFARI_PRINT_TIMEOUT_MS = 1000; // Wait 1s before trying to print
 const SCROLL_END_TIMEOUT = this.isMobile ? 500 : 250;
 const SCROLL_EVENT_THROTTLE_INTERVAL = 200;
 const THUMBNAILS_SIDEBAR_TRANSITION_TIME = 301; // 301ms
+const THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY = 'doc-thumbnails-toggled-map';
 // List of metrics to be emitted only once per session
 const METRICS_WHITELIST = [
     USER_DOCUMENT_THUMBNAIL_EVENTS.CLOSE,
@@ -138,7 +139,11 @@ class DocBaseViewer extends BaseViewer {
             this.thumbnailsSidebarEl = document.createElement('div');
             this.thumbnailsSidebarEl.className = `${CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER}`;
             this.thumbnailsSidebarEl.setAttribute('data-testid', 'thumbnails-sidebar');
-            this.containerEl.parentNode.insertBefore(this.thumbnailsSidebarEl, this.containerEl);
+            this.rootEl.insertBefore(this.thumbnailsSidebarEl, this.containerEl);
+
+            if (this.shouldThumbnailsBeToggled()) {
+                this.rootEl.classList.add(CLASS_BOX_PREVIEW_THUMBNAILS_OPEN);
+            }
         }
     }
 
@@ -1088,8 +1093,9 @@ class DocBaseViewer extends BaseViewer {
     initThumbnails() {
         this.thumbnailsSidebar = new ThumbnailsSidebar(this.thumbnailsSidebarEl, this.pdfViewer);
         this.thumbnailsSidebar.init({
-            onClick: this.onThumbnailClickHandler,
-            currentPage: this.pdfViewer.currentPageNumber
+            currentPage: this.pdfViewer.currentPageNumber,
+            isOpen: this.shouldThumbnailsBeToggled(),
+            onClick: this.onThumbnailClickHandler
         });
     }
 
@@ -1348,6 +1354,8 @@ class DocBaseViewer extends BaseViewer {
 
         const { pagesCount } = this.pdfViewer;
 
+        this.cacheThumbnailsToggledState(this.thumbnailsSidebar.isOpen);
+
         let metricName;
         let eventName;
         if (!this.thumbnailsSidebar.isOpen) {
@@ -1409,6 +1417,46 @@ class DocBaseViewer extends BaseViewer {
             default:
         }
     }
+
+    /**
+     * Gets the cached thumbnails toggled state based on file id. Will retrieve from
+     * localStorage if not cached.
+     * @return {boolean} Whether thumbnails is toggled open or not from the cache
+     */
+    getCachedThumbnailsToggledState() {
+        const { [this.options.file.id]: toggledOpen } = this.cache.get(THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY) || {};
+        return toggledOpen;
+    }
+
+    /**
+     * Caches the toggled state of the thumbnails sidebar, also saving to localStorage
+     * @param {boolean} isOpen Toggled state of the sidebar
+     * @return {void}
+     */
+    cacheThumbnailsToggledState(isOpen) {
+        const thumbnailsToggledMap = this.cache.get(THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY) || {};
+        const newThumbnailsToggledMap = { ...thumbnailsToggledMap, [this.options.file.id]: !!isOpen };
+
+        this.cache.set(THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY, newThumbnailsToggledMap, true /* useLocalStorage */);
+    }
+
+    /**
+     * Determines if the thumbnails sidebar is toggled based on the value from the cache
+     * as well as defaulting to true if there is no cache entry for this file id.
+     * @return {boolean} Whether thumbnails is toggled open or not
+     */
+    shouldThumbnailsBeToggled() {
+        const cachedToggledState = this.getCachedThumbnailsToggledState();
+        let toggledState = cachedToggledState;
+
+        // If cached toggled state is anything other than false, set it to true
+        // because we want the default state to be true
+        if (toggledState !== false) {
+            toggledState = true;
+        }
+
+        return toggledState;
+    }
 }
 
 export default DocBaseViewer;

src/lib/viewers/doc/__tests__/DocBaseViewer-test.html

@@ -1,7 +1,6 @@
 <div class="container">
     <div class="bp-container">
         <div class="bp">
-            <div class="bp-thumbnails-container bp-is-hidden"></div>
             <div class="bp-content"></div>
         </div>
     </div>