Update: Open Preview Thumbnails by default

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

@@ -59,6 +59,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,
@@ -135,7 +136,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.getCachedThumbnailsToggledState()) {
+                this.rootEl.classList.add(CLASS_BOX_PREVIEW_THUMBNAILS_OPEN);
+            }
         }
     }
 
@@ -1085,8 +1090,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.getCachedThumbnailsToggledState(),
+            onClick: this.onThumbnailClickHandler
         });
     }
 
@@ -1345,6 +1351,8 @@ class DocBaseViewer extends BaseViewer {
 
         const { pagesCount } = this.pdfViewer;
 
+        this.cacheThumbnailsToggledState(this.thumbnailsSidebar.isOpen);
+
         let metricName;
         let eventName;
         if (!this.thumbnailsSidebar.isOpen) {
@@ -1396,6 +1404,42 @@ class DocBaseViewer extends BaseViewer {
             default:
         }
     }
+
+    /**
+     * Gets the cached thumbnails toggled state based on file id. Will retrieve from
+     * localStorage if not cached. Defaults to true if not found.
+     * @return {boolean} Whether thumbnails is toggled open or not
+     */
+    getCachedThumbnailsToggledState() {
+        let toggledOpen = true;
+
+        if (this.cache.has(THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY)) {
+            const thumbnailsToggledMap = this.cache.get(THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY);
+            toggledOpen = thumbnailsToggledMap[this.options.file.id];
+
+            // If cached toggled state is anything other than false, set it to true
+            if (toggledOpen !== false) {
+                toggledOpen = true;
+            }
+        }
+
+        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) {
+        let thumbnailsToggledMap = {};
+        if (this.cache.has(THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY)) {
+            thumbnailsToggledMap = this.cache.get(THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY);
+        }
+
+        thumbnailsToggledMap[this.options.file.id] = !!isOpen;
+        this.cache.set(THUMBNAILS_SIDEBAR_TOGGLED_MAP_KEY, thumbnailsToggledMap, true /* useLocalStorage */);
+    }
 }
 
 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>