feat(header-file-name): PoC for file name in header

src/index.html

@@ -148,6 +148,7 @@
                     enableThumbnailsSidebar: true,
                     showAnnotations: true,
                     showDownload: true,
+                    showFileName: true, // <- Note: Example of usage here
                 };
                 previewOptions.container = '.preview-container';
 

src/lib/Preview.js

@@ -855,6 +855,12 @@ class Preview extends EventEmitter {
      * @return {void}
      */
     setupUI() {
+        /*
+
+        Note: this.file.name is not present when this function is called - therefore, have to set the name later
+
+        */
+
         // Setup the shell
         this.container = this.ui.setup(
             this.options,
@@ -928,6 +934,9 @@ class Preview extends EventEmitter {
         // Whether the loading indicator should be shown
         this.options.showLoading = options.showLoading !== false;
 
+        // Whether to show the file name in the header
+        this.options.showFileName = options.showFileName;
+
         // Whether annotations v4 buttons should be shown in toolbar
         this.options.showAnnotationsControls = !!options.showAnnotationsControls;
 
@@ -1326,6 +1335,10 @@ class Preview extends EventEmitter {
             this.ui.showPrintButton(this.print);
         }
 
+        if (this.options.showFileName && this.file.name) {
+            this.ui.showFileName(this.file.name);
+        }
+
         const { error } = data;
         if (error) {
             // Bump up preview count

src/lib/PreviewUI.js

@@ -341,6 +341,24 @@ class PreviewUI {
         }
     }
 
+    /**
+     * Sets the file name in the header
+     *
+     * @param {string} fileName - Name of the file
+     * @return {void}
+     */
+    showFileName(fileName) {
+        const headerContainerEl = this.container.querySelector(SELECTOR_BOX_PREVIEW_HEADER_CONTAINER);
+
+        const headerEl = headerContainerEl.firstElementChild;
+
+        const fileNameEl = headerEl.querySelector('.bp-file-name');
+        if (fileNameEl) {
+            fileNameEl.classList.remove(CLASS_HIDDEN);
+            fileNameEl.innerText = fileName;
+        }
+    }
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
@@ -368,6 +386,14 @@ class PreviewUI {
      * @return {void}
      */
     setupHeader(headerTheme, logoUrl) {
+        /*
+
+        NOTE: May have some setup that should be done in this function for showing file name
+
+        However, when this function is called, this.file in Preview.js does not yet know the file name. Therefore, can't
+        do everything in here for setting the file name
+
+        */
         const headerContainerEl = this.container.querySelector(SELECTOR_BOX_PREVIEW_HEADER_CONTAINER);
         headerContainerEl.classList.remove(CLASS_HIDDEN);
 

src/lib/shell.html

@@ -9,6 +9,8 @@
                 </svg>
             </span>
             <img class="bp-is-hidden bp-custom-logo" />
+            <!-- Note: Might need to remove this from here and also style it differently -->
+            <p class="bp-file-name bp-is-hidden"></p>
             <div class="bp-header-btns">
                 <button
                     class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden"