From f66c0b86738573a12861178646b2546557ce81f0 Mon Sep 17 00:00:00 2001
From: David Ball <david@daball.me>
Date: Mon, 24 Jun 2024 02:10:18 -0400
Subject: [PATCH] feat: Default tab automatically loads viewer, but other tabs
 are lazily loaded. OCR text moved to its own tab.

---
 app/helpers/functions.mts |  10 ++++
 app/views/directory.ejs   | 118 +++++++++++++++++++++++---------------
 2 files changed, 82 insertions(+), 46 deletions(-)

diff --git a/app/helpers/functions.mts b/app/helpers/functions.mts
index 5c6e2000..32601299 100644
--- a/app/helpers/functions.mts
+++ b/app/helpers/functions.mts
@@ -194,6 +194,15 @@ const isGoogleDocsViewerSupported = (file: string) => {
   return isMsOfficeViewerSupported(file) || path.extname(file).search(/^((?:.pdf))$/ig) != -1;
 }
 
+const defaultViewerForFile = (file: string) => {
+  if (isMsOfficeViewerSupported(file)) {
+    return "ms-office-viewer";
+  }
+  else if (path.extname(file).search(/^((?:.pdf))$/ig) != -1) {
+    return "built-in";
+  }
+}
+
 export default {
   leftTrimFirstDirectory,
   trimSlashes,
@@ -215,4 +224,5 @@ export default {
   moment,
   isMsOfficeViewerSupported,
   isGoogleDocsViewerSupported,
+  defaultViewerForFile,
 };
\ No newline at end of file
diff --git a/app/views/directory.ejs b/app/views/directory.ejs
index 76aef4ed..3c911eae 100644
--- a/app/views/directory.ejs
+++ b/app/views/directory.ejs
@@ -31,79 +31,105 @@
               <ul class="nav nav-tabs" id="readerTab" role="tablist">
                 <% if (h.isMsOfficeViewerSupported(h.readmeFm(directory).file)) { %>
                   <li class="nav-item" role="presentation">
-                    <button class="nav-link active" id="ms-office-viewer-tab" data-bs-toggle="tab" data-bs-target="#ms-office-viewer" type="button" role="tab" aria-controls="ms-office-viewer" aria-selected="true">Microsoft Office Web Viewer</button>
+                    <button class="nav-link<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'ms-office-viewer' ? ' active' : ''%>" id="ms-office-viewer-tab" data-bs-toggle="tab" data-bs-target="#ms-office-viewer" type="button" role="tab" aria-controls="ms-office-viewer" aria-selected="true">Microsoft Office Web Viewer</button>
                   </li>
                 <% } %>
                 <% if (h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %>
                   <li class="nav-item" role="presentation">
-                    <button class="nav-link<%=h.isMsOfficeViewerSupported(h.readmeFm(directory).file) ? '' : ' active'%>" id="google-docs-viewer-tab" data-bs-toggle="tab" data-bs-target="#google-docs-viewer" type="button" role="tab" aria-controls="google-docs-viewer" aria-selected="false">Google Docs Viewer</button>
+                    <button class="nav-link<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'google-docs-viewer' ? ' active' : ''%>" id="google-docs-viewer-tab" data-bs-toggle="tab" data-bs-target="#google-docs-viewer" type="button" role="tab" aria-controls="google-docs-viewer" aria-selected="false">Google Docs Viewer</button>
                   </li>
                 <% } %>
                 <li class="nav-item" role="presentation">
-                  <button class="nav-link" id="view-download-tab" data-bs-toggle="tab" data-bs-target="#view-download" type="button" role="tab" aria-controls="view-download" aria-selected="false">View/Download</button>
+                  <button class="nav-link<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'built-in' ? ' active' : ''%>" id="view-download-tab" data-bs-toggle="tab" data-bs-target="#view-download" type="button" role="tab" aria-controls="view-download" aria-selected="false">View/Download</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link" id="ocr-scan-tab" data-bs-toggle="tab" data-bs-target="#ocr-scan" type="button" role="tab" aria-controls="ocr-scan" aria-selected="false">OCR Scan</button>
                 </li>
               </ul>
               <div class="tab-content">
                 <% if (h.isMsOfficeViewerSupported(h.readmeFm(directory).file)) { %>
-                  <div class="tab-pane active" id="ms-office-viewer" role="tabpanel" aria-labelledby="ms-office-viewer-tab" tabindex="0">
-                    <iframe src="https://view.officeapps.live.com/op/embed.aspx?src=<%- encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/')))) %>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
+                  <div class="tab-pane<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'ms-office-viewer' ? ' active' : ''%>" id="ms-office-viewer" role="tabpanel" aria-labelledby="ms-office-viewer-tab" tabindex="0">
+                    <iframe src="<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'ms-office-viewer' ? `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/'))))}` : 'about:blank'%>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
                   </div>
+                  <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'ms-office-viewer') { %>
+                    <script>
+                      $(document).ready(function () {
+                        var msOfficeViewerTabButton = $('button#ms-office-viewer-tab');
+                        var msOfficeViewerTab = new bootstrap.Tab(msOfficeViewerTabButton);
+                        var msOfficeViewerTabPaneIFrame = $('#ms-office-viewer iframe');
+                        msOfficeViewerTabButton.on('click', function (event) {
+                          event.preventDefault();
+                          msOfficeViewerTab.show();
+                          if (msOfficeViewerTabPaneIFrame.attr('src') == 'about:blank') {
+                            msOfficeViewerTabPaneIFrame.attr('src', "https://view.officeapps.live.com/op/embed.aspx?src=<%- encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/')))) %>");
+                          }
+                        })
+                      })
+                    </script>
+                  <% } %>
                 <% } %>
                 <% if (h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %>
-                  <div class="tab-pane<%=h.isMsOfficeViewerSupported(h.readmeFm(directory).file) ? '' : ' active'%>" id="google-docs-viewer" role="tabpanel" aria-labelledby="google-docs-viewer-tab" tabindex="0">
-                    <iframe src="https://docs.google.com/gview?embedded=true&url=<%- encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/')))) %>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
+                  <div class="tab-pane<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'google-docs-viewer' ? ' active' : ''%>" id="google-docs-viewer" role="tabpanel" aria-labelledby="google-docs-viewer-tab" tabindex="0">
+                    <iframe src="<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'google-docs-viewer' ? `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/'))))}` : 'about:blank'%>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
                   </div>
+                  <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'google-docs-viewer') { %>
+                    <script>
+                      $(document).ready(function () {
+                        var googleDocsViewerTabButton = $('button#google-docs-viewer-tab');
+                        var googleDocsViewerTab = new bootstrap.Tab(googleDocsViewerTabButton);
+                        var googleDocsViewerTabPaneIFrame = $('#google-docs-viewer iframe');
+                        googleDocsViewerTabButton.on('click', function (event) {
+                          event.preventDefault();
+                          googleDocsViewerTab.show();
+                          if (googleDocsViewerTabPaneIFrame.attr('src') == 'about:blank') {
+                            googleDocsViewerTabPaneIFrame.attr('src', "https://docs.google.com/gview?embedded=true&url=<%- encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/')))) %>");
+                          }
+                        })
+                      })
+                    </script>
+                  <% } %>
                 <% } %>
-                <div class="tab-pane<%=(h.isMsOfficeViewerSupported(h.readmeFm(directory).file) || h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) ? '' : ' active'%>" id="view-download" role="tabpanel" aria-labelledby="view-download-tab" tabindex="0">
-                  <iframe src="about:blank" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
+                <div class="tab-pane<%=(h.defaultViewerForFile(h.readmeFm(directory).file) == 'built-in') ? ' active' : ''%>" id="view-download" role="tabpanel" aria-labelledby="view-download-tab" tabindex="0">
+                  <iframe src="<%=(h.defaultViewerForFile(h.readmeFm(directory).file) == 'built-in') ? encodeURI(h.readmeFm(directory).file) : 'about:blank'%>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
                 </div>
-                <script>
-                  $(document).ready(function () {
-                    var viewDownloadTabButton = $('button#view-download-tab');
-                    var viewDownloadTab = new bootstrap.Tab(viewDownloadTabButton);
-                    var viewDownloadTabPaneIFrame = $('#view-download iframe');
-                    viewDownloadTabButton.on('click', function (event) {
-                      event.preventDefault();
-                      viewDownloadTab.show();
-                      if (viewDownloadTabPaneIFrame.attr('src') == 'about:blank') {
-                        console.log('View/Download tab clicked. Loading iframe.');
-                        viewDownloadTabPaneIFrame.attr('src', '<%- encodeURI(h.readmeFm(directory).file) %>');
-                      } else {
-                        console.log('View/Download tab clicked. iframe previously loaded.');
-                      }
-                    })
-                  })
-                </script>
-                <% if (!h.isMsOfficeViewerSupported(h.readmeFm(directory).file) && !h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %>
+                <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'built-in') { %>
                   <script>
                     $(document).ready(function () {
-                      setTimeout(function () {
-                        var viewDownloadTabButton = $('button#view-download-tab');
-                        viewDownloadTabButton.click();
-                      }, 100);
-                    });
+                      var viewDownloadTabButton = $('button#view-download-tab');
+                      var viewDownloadTab = new bootstrap.Tab(viewDownloadTabButton);
+                      var viewDownloadTabPaneIFrame = $('#view-download iframe');
+                      viewDownloadTabButton.on('click', function (event) {
+                        event.preventDefault();
+                        viewDownloadTab.show();
+                        if (viewDownloadTabPaneIFrame.attr('src') == 'about:blank') {
+                          viewDownloadTabPaneIFrame.attr('src', '<%- encodeURI(h.readmeFm(directory).file) %>');
+                        }
+                      })
+                    })
                   </script>
                 <% } %>
+                <div class="tab-pane" id="ocr-scan" role="tabpanel" aria-labelledby="ocr-scan-tab" tabindex="0">
+                  <div style="overflow-y: scroll; width: 100%; height: 85vh; min-height: 85vh; max-height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;">
+                    <div class="col-lg-12 p-3 p-lg-5 pt-lg-3">
+                      <h2 class="title">OCR Scan (approximately)</h1>
+                      <p>
+                        This OCR scan may contain automatically generated text as generated using Apache Tika
+                        and Tesseract. It may not be correct. No effort has been made to correct any of these scans
+                        (so far). These OCR scans are also used in the site's Search feature. Please review the
+                        <a href="/search-policy" target="_blank">Search Policy</a> for details about the site features.
+                        The OCR scan is provided here for reference purposes. It provides searchable text when the
+                        underlying document might not. But the scan process may not always work perfectly.
+                      </p>
+                      <pre style="white-space:pre-wrap;overflow-wrap:anywhere"><%- h.printReadme(directory) %></pre>
+                    </div>
+                  </div>
+                </div>
               </div>
             <% } else { %>
               <%- h.printReadme(directory) %>
             <% } %>
           </div>
         </div>
-        <% if (typeof h.readmeFm(directory).file !== 'undefined') { %>
-          <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg" style="max-height:65vh;overflow-y:scroll">
-            <div class="col-lg-12 p-3 p-lg-5 pt-lg-3">
-              <h2 class="title">OCR Text Scan (approximately)</h1>
-              <p>
-                This text scan may contain automatically generated text as generated using Apache Tika
-                and Tesseract. It may not be correct. No effort has been made to correct any of these scans
-                (so far). These OCR scans are also used in the site's Search feature. Please review the
-                <a href="/search-policy" target="_blank">Search Policy</a> for details about the site features.
-              </p>
-              <pre style="white-space:pre-wrap;overflow-wrap:anywhere"><%- h.printReadme(directory) %></pre>
-            </div>
-          </div>
-        <% } %>
       <% } %>
       <ul id="files" class="list-group shadow-lg">
         <% files.forEach(function(value, index) { %>