daball/nm3clol-express-app
1
0
Fork 0
forked from nm3clol/nm3clol-express-app
Code Pull Requests Activity

feat: Default tab automatically loads viewer, but other tabs are lazily loaded. OCR text moved to its own tab.

Browse Source
This commit is contained in:
David Ball 2024-06-24 02:10:18 -04:00
parent 35851b1ddc
commit f66c0b8673
2 changed files with 82 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/helpers/functions.mts
View File

@ -194,6 +194,15 @@ const isGoogleDocsViewerSupported = (file: string) => {
return isMsOfficeViewerSupported(file) || path.extname(file).search(/^((?:.pdf))$/ig) != -1; 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 { export default {
leftTrimFirstDirectory, leftTrimFirstDirectory,
trimSlashes, trimSlashes,
@ -215,4 +224,5 @@ export default {
moment, moment,
isMsOfficeViewerSupported, isMsOfficeViewerSupported,
isGoogleDocsViewerSupported, isGoogleDocsViewerSupported,
defaultViewerForFile,
}; };

118
app/views/directory.ejs
View File

@ -31,79 +31,105 @@
<ul class="nav nav-tabs" id="readerTab" role="tablist"> <ul class="nav nav-tabs" id="readerTab" role="tablist">
<% if (h.isMsOfficeViewerSupported(h.readmeFm(directory).file)) { %> <% if (h.isMsOfficeViewerSupported(h.readmeFm(directory).file)) { %>
<li class="nav-item" role="presentation"> <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> </li>
<% } %> <% } %>
<% if (h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %> <% if (h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %>
<li class="nav-item" role="presentation"> <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>
<% } %> <% } %>
<li class="nav-item" role="presentation"> <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> </li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<% if (h.isMsOfficeViewerSupported(h.readmeFm(directory).file)) { %> <% 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"> <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="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> <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> </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)) { %> <% 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"> <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="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> <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> </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"> <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="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> <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> </div>
<script> <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'built-in') { %>
$(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)) { %>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
setTimeout(function () { var viewDownloadTabButton = $('button#view-download-tab');
var viewDownloadTabButton = $('button#view-download-tab'); var viewDownloadTab = new bootstrap.Tab(viewDownloadTabButton);
viewDownloadTabButton.click(); var viewDownloadTabPaneIFrame = $('#view-download iframe');
}, 100); viewDownloadTabButton.on('click', function (event) {
}); event.preventDefault();
viewDownloadTab.show();
if (viewDownloadTabPaneIFrame.attr('src') == 'about:blank') {
viewDownloadTabPaneIFrame.attr('src', '<%- encodeURI(h.readmeFm(directory).file) %>');
}
})
})
</script> </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> </div>
<% } else { %> <% } else { %>
<%- h.printReadme(directory) %> <%- h.printReadme(directory) %>
<% } %> <% } %>
</div> </div>
</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"> <ul id="files" class="list-group shadow-lg">
<% files.forEach(function(value, index) { %> <% files.forEach(function(value, index) { %>