forked from nm3clol/nm3clol-express-app
feat: Default tab automatically loads viewer, but other tabs are lazily loaded. OCR text moved to its own tab.
This commit is contained in:
parent
35851b1ddc
commit
f66c0b8673
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -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) { %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user