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

feat: Preliminary support for resizing iframes scrollable divs.

Browse Source
This commit is contained in:
David Ball 2024-06-24 21:52:30 -04:00
parent e001f141e3
commit 21ce16d3e0
4 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/views/directory.ejs
View File

@ -49,7 +49,7 @@
<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<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'ms-office-viewer' ? ' 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="<%=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> <iframe class="resizable" 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="min-width: 80%; width: 100%; max-width: 100%; min-height: 50vh; height: 82vh; max-height: 90vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; resize: both;" frameborder="0" allowfullscreen></iframe>
</div> </div>
<% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'ms-office-viewer') { %> <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'ms-office-viewer') { %>
<script> <script>
@ -70,7 +70,7 @@
<% } %> <% } %>
<% if (h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %> <% if (h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %>
<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"> <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> <iframe class="resizable" 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="min-width: 80%; width: 100%; max-width: 100%; min-height: 50vh; height: 82vh; max-height: 90vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; resize: both;" frameborder="0" allowfullscreen></iframe>
</div> </div>
<% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'google-docs-viewer') { %> <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'google-docs-viewer') { %>
<script> <script>
@ -90,7 +90,7 @@
<% } %> <% } %>
<% } %> <% } %>
<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"> <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> <iframe class="resizable" src="<%=(h.defaultViewerForFile(h.readmeFm(directory).file) == 'built-in') ? encodeURI(h.readmeFm(directory).file) : 'about:blank'%>" style="min-width: 80%; width: 100%; max-width: 100%; min-height: 50vh; height: 82vh; max-height: 90vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; resize: both;" frameborder="0" allowfullscreen></iframe>
</div> </div>
<% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'built-in') { %> <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'built-in') { %>
<script> <script>
@ -109,7 +109,7 @@
</script> </script>
<% } %> <% } %>
<div class="tab-pane" id="ocr-scan" role="tabpanel" aria-labelledby="ocr-scan-tab" tabindex="0"> <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="resizable" style="overflow-y: scroll; width: 100%; min-width: 80%; max-width: 100%; height: 85vh; min-height: 50vh; max-height: 100vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; resize: both;">
<div class="col-lg-12 p-3 p-lg-5 pt-lg-3"> <div class="col-lg-12 p-3 p-lg-5 pt-lg-3">
<h2 class="title">OCR Scan (approximately)</h1> <h2 class="title">OCR Scan (approximately)</h1>
<p> <p>

14
app/views/includes/bottom-scripts.ejs
View File

@ -2,4 +2,16 @@
<script src="https://daball.me/vendor/popper.js/dist/popper.min.js"></script> <script src="https://daball.me/vendor/popper.js/dist/popper.min.js"></script>
<script src="https://daball.me/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="https://daball.me/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://daball.me/vendor/jquery-easing/jquery.easing.min.js"></script> <script src="https://daball.me/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://daball.me/layouts/blog/js/blog.min.js"></script> <script src="https://daball.me/layouts/blog/js/blog.min.js"></script>
<script>
$(function () {
var resizables = $('.resizable');
resizables.each(function (index, resizable) {
resizable.resizable({
animate: true,
helper: 'ui-resizable-helper',
ghost: true,
});
});
})
</script>

7
app/views/includes/common-head.ejs
View File

@ -11,7 +11,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8937572456576531" crossorigin="anonymous"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8937572456576531" crossorigin="anonymous"></script>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="https://daball.me/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:100,200,300,400,500,600,700,800,900" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:100,200,300,400,500,600,700,800,900" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Alegreya+SC:100,200,300,400,500,600,700,800,900" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Alegreya+SC:100,200,300,400,500,600,700,800,900" rel="stylesheet" />
@ -25,4 +25,7 @@
<link href="https://daball.me/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" /> <link href="https://daball.me/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" />
<link href="https://daball.me/layouts/blog/css/blog.min.css" rel="stylesheet" /> <link href="https://daball.me/layouts/blog/css/blog.min.css" rel="stylesheet" />
<link href="/css/nm3clol.css" rel="stylesheet" /> <link href="/css/nm3clol.css" rel="stylesheet" />
<script src="https://daball.me/vendor/jquery/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.13.3/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js" integrity="sha256-sw0iNNXmOJbQhYFuC9OF2kOlD5KQKe1y5lfBn4C9Sjg=" crossorigin="anonymous"></script>

4
assets/css/nm3clol.css
View File

@ -320,4 +320,6 @@ tr.write-in td:first-child {
.nmc3clol-navbar-brand { color: #f44336; } .nmc3clol-navbar-brand { color: #f44336; }
.daball-navbar-brand { color: #000; } .daball-navbar-brand { color: #000; }
.pt-1500 { padding-top: 150px;} .pt-1500 { padding-top: 150px;}
} }
.ui-resizable-helper { border: 2px dotted #f44336; }