refactor: normalize line endings
This commit is contained in:
sbplat
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,135 +1,135 @@
|
||||
/* Dark Mode Styles */
|
||||
body, select, textarea {
|
||||
--body-background-color: 51, 51, 51;
|
||||
--base-font-color: 255, 255, 255;
|
||||
background-color: rgb(var(--body-background-color)) !important;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
.card {
|
||||
background-color: rgb(var(--body-background-color)) !important;
|
||||
border: 1px solid #999;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #add8e6;
|
||||
}
|
||||
a:hover {
|
||||
color: #87ceeb; /* Slightly brighter blue on hover for accessibility */
|
||||
}
|
||||
|
||||
.dark-card {
|
||||
background-color: rgb(var(--body-background-color)) !important;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
.jumbotron {
|
||||
background-color: #222; /* or any other dark color */
|
||||
color: rgb(var(--base-font-color)) !important; /* or any other light color */
|
||||
}
|
||||
|
||||
.list-group {
|
||||
background-color: #222 !important;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
.list-group-item {
|
||||
background-color: #222 !important;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
#support-section {
|
||||
background-color: #444 !important;
|
||||
}
|
||||
|
||||
#pages-container-wrapper {
|
||||
--background-color: rgba(255, 255, 255, 0.046) !important;
|
||||
--scroll-bar-color: #4c4c4c !important;
|
||||
--scroll-bar-thumb: #d3d3d3 !important;
|
||||
--scroll-bar-thumb-hover: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
|
||||
.favorite-icon img {
|
||||
filter: brightness(0) invert(1) !important;
|
||||
}
|
||||
table thead {
|
||||
background-color: #333 !important;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
table th, table td {
|
||||
border: 1px solid #444 !important;
|
||||
color: white;
|
||||
}
|
||||
.btn {
|
||||
background-color: #444 !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #007bff !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-secondary {
|
||||
background-color: #6c757d !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-info {
|
||||
background-color: #17a2b8 !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-danger {
|
||||
background-color: #dc3545 !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #ffc107 !important;
|
||||
border: none;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: #fff !important;
|
||||
border-color: #fff;
|
||||
}
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: #444 !important;
|
||||
color: #007bff !important;
|
||||
border-color: #007bff;
|
||||
}
|
||||
.blackwhite-icon {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
hr {
|
||||
border-color: rgba(255, 255, 255, 0.6); /* semi-transparent white */
|
||||
background-color: rgba(255, 255, 255, 0.6); /* for some browsers that might use background instead of border for <hr> */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
color: #fff !important;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
#global-buttons-container input {
|
||||
background-color: #323948;
|
||||
caret-color: #ffffff;
|
||||
color: #ffffff;
|
||||
}
|
||||
#global-buttons-container input::placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#global-buttons-container input:disabled::-webkit-input-placeholder { /* WebKit browsers */
|
||||
color: #6E6865;
|
||||
}
|
||||
#global-buttons-container input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color: #6E6865;
|
||||
}
|
||||
#global-buttons-container input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: #6E6865;
|
||||
}
|
||||
#global-buttons-container input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
|
||||
color: #6E6865;
|
||||
}
|
||||
|
||||
/* Dark Mode Styles */
|
||||
body, select, textarea {
|
||||
--body-background-color: 51, 51, 51;
|
||||
--base-font-color: 255, 255, 255;
|
||||
background-color: rgb(var(--body-background-color)) !important;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
.card {
|
||||
background-color: rgb(var(--body-background-color)) !important;
|
||||
border: 1px solid #999;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #add8e6;
|
||||
}
|
||||
a:hover {
|
||||
color: #87ceeb; /* Slightly brighter blue on hover for accessibility */
|
||||
}
|
||||
|
||||
.dark-card {
|
||||
background-color: rgb(var(--body-background-color)) !important;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
.jumbotron {
|
||||
background-color: #222; /* or any other dark color */
|
||||
color: rgb(var(--base-font-color)) !important; /* or any other light color */
|
||||
}
|
||||
|
||||
.list-group {
|
||||
background-color: #222 !important;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
.list-group-item {
|
||||
background-color: #222 !important;
|
||||
color: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
#support-section {
|
||||
background-color: #444 !important;
|
||||
}
|
||||
|
||||
#pages-container-wrapper {
|
||||
--background-color: rgba(255, 255, 255, 0.046) !important;
|
||||
--scroll-bar-color: #4c4c4c !important;
|
||||
--scroll-bar-thumb: #d3d3d3 !important;
|
||||
--scroll-bar-thumb-hover: rgb(var(--base-font-color)) !important;
|
||||
}
|
||||
|
||||
.favorite-icon img {
|
||||
filter: brightness(0) invert(1) !important;
|
||||
}
|
||||
table thead {
|
||||
background-color: #333 !important;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
table th, table td {
|
||||
border: 1px solid #444 !important;
|
||||
color: white;
|
||||
}
|
||||
.btn {
|
||||
background-color: #444 !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #007bff !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-secondary {
|
||||
background-color: #6c757d !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-info {
|
||||
background-color: #17a2b8 !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
.btn-danger {
|
||||
background-color: #dc3545 !important;
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #ffc107 !important;
|
||||
border: none;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: #fff !important;
|
||||
border-color: #fff;
|
||||
}
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: #444 !important;
|
||||
color: #007bff !important;
|
||||
border-color: #007bff;
|
||||
}
|
||||
.blackwhite-icon {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
hr {
|
||||
border-color: rgba(255, 255, 255, 0.6); /* semi-transparent white */
|
||||
background-color: rgba(255, 255, 255, 0.6); /* for some browsers that might use background instead of border for <hr> */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
color: #fff !important;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
#global-buttons-container input {
|
||||
background-color: #323948;
|
||||
caret-color: #ffffff;
|
||||
color: #ffffff;
|
||||
}
|
||||
#global-buttons-container input::placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#global-buttons-container input:disabled::-webkit-input-placeholder { /* WebKit browsers */
|
||||
color: #6E6865;
|
||||
}
|
||||
#global-buttons-container input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color: #6E6865;
|
||||
}
|
||||
#global-buttons-container input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: #6E6865;
|
||||
}
|
||||
#global-buttons-container input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
|
||||
color: #6E6865;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,94 +1,94 @@
|
||||
#page-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#footer {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.navbar {
|
||||
height: auto; /* Adjusts height automatically based on content */
|
||||
white-space: nowrap; /* Prevents wrapping of navbar contents */
|
||||
}
|
||||
/* TODO enable later
|
||||
.navbar .container {
|
||||
|
||||
|
||||
max-width: 100%; //Allows the container to expand up to full width
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}*/
|
||||
|
||||
html[lang-direction=ltr] * {
|
||||
direction: ltr;
|
||||
}
|
||||
html[lang-direction=rtl] * {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
.ignore-rtl {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.align-center-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.align-center-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.align-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.btn-group > label:first-of-type {
|
||||
border-top-left-radius: 0.25rem !important;
|
||||
border-bottom-left-radius: 0.25rem !important;
|
||||
}
|
||||
|
||||
html[lang-direction="rtl"] input.form-check-input {
|
||||
position: relative;
|
||||
margin-left: 0px;
|
||||
}
|
||||
html[lang-direction="rtl"] label.form-check-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.margin-auto-parent {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.margin-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#pdf-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
width: 100%;
|
||||
}
|
||||
.fixed-shadow-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
width: 100%;
|
||||
}
|
||||
.shadow-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
#page-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#footer {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.navbar {
|
||||
height: auto; /* Adjusts height automatically based on content */
|
||||
white-space: nowrap; /* Prevents wrapping of navbar contents */
|
||||
}
|
||||
/* TODO enable later
|
||||
.navbar .container {
|
||||
|
||||
|
||||
max-width: 100%; //Allows the container to expand up to full width
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}*/
|
||||
|
||||
html[lang-direction=ltr] * {
|
||||
direction: ltr;
|
||||
}
|
||||
html[lang-direction=rtl] * {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
.ignore-rtl {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.align-center-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.align-center-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.align-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.btn-group > label:first-of-type {
|
||||
border-top-left-radius: 0.25rem !important;
|
||||
border-bottom-left-radius: 0.25rem !important;
|
||||
}
|
||||
|
||||
html[lang-direction="rtl"] input.form-check-input {
|
||||
position: relative;
|
||||
margin-left: 0px;
|
||||
}
|
||||
html[lang-direction="rtl"] label.form-check-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.margin-auto-parent {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.margin-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#pdf-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
width: 100%;
|
||||
}
|
||||
.fixed-shadow-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
width: 100%;
|
||||
}
|
||||
.shadow-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,29 +1,29 @@
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filename {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.arrows .btn {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.move-up span,
|
||||
.move-down span {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
|
||||
}
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filename {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.arrows .btn {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.move-up span,
|
||||
.move-down span {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
|
||||
}
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650" viewBox="0 0 7410 3900">
|
||||
<rect width="7410" height="3900" fill="#b22234"/>
|
||||
<path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="#fff" stroke-width="300"/>
|
||||
<rect width="2964" height="2100" fill="#3c3b6e"/>
|
||||
<g fill="#fff">
|
||||
<g id="s18">
|
||||
<g id="s9">
|
||||
<g id="s5">
|
||||
<g id="s4">
|
||||
<path id="s" d="M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z"/>
|
||||
<use xlink:href="#s" y="420"/>
|
||||
<use xlink:href="#s" y="840"/>
|
||||
<use xlink:href="#s" y="1260"/>
|
||||
</g>
|
||||
<use xlink:href="#s" y="1680"/>
|
||||
</g>
|
||||
<use xlink:href="#s4" x="247" y="210"/>
|
||||
</g>
|
||||
<use xlink:href="#s9" x="494"/>
|
||||
</g>
|
||||
<use xlink:href="#s18" x="988"/>
|
||||
<use xlink:href="#s9" x="1976"/>
|
||||
<use xlink:href="#s5" x="2470"/>
|
||||
</g>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650" viewBox="0 0 7410 3900">
|
||||
<rect width="7410" height="3900" fill="#b22234"/>
|
||||
<path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="#fff" stroke-width="300"/>
|
||||
<rect width="2964" height="2100" fill="#3c3b6e"/>
|
||||
<g fill="#fff">
|
||||
<g id="s18">
|
||||
<g id="s9">
|
||||
<g id="s5">
|
||||
<g id="s4">
|
||||
<path id="s" d="M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z"/>
|
||||
<use xlink:href="#s" y="420"/>
|
||||
<use xlink:href="#s" y="840"/>
|
||||
<use xlink:href="#s" y="1260"/>
|
||||
</g>
|
||||
<use xlink:href="#s" y="1680"/>
|
||||
</g>
|
||||
<use xlink:href="#s4" x="247" y="210"/>
|
||||
</g>
|
||||
<use xlink:href="#s9" x="494"/>
|
||||
</g>
|
||||
<use xlink:href="#s18" x="988"/>
|
||||
<use xlink:href="#s9" x="1976"/>
|
||||
<use xlink:href="#s5" x="2470"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 899 B After Width: | Height: | Size: 874 B |
@@ -1,285 +1,285 @@
|
||||
class PdfContainer {
|
||||
fileName;
|
||||
pagesContainer;
|
||||
pagesContainerWrapper;
|
||||
pdfAdapters;
|
||||
downloadLink;
|
||||
|
||||
constructor(id, wrapperId, pdfAdapters) {
|
||||
this.pagesContainer = document.getElementById(id)
|
||||
this.pagesContainerWrapper = document.getElementById(wrapperId);
|
||||
this.downloadLink = null;
|
||||
this.movePageTo = this.movePageTo.bind(this);
|
||||
this.addPdfs = this.addPdfs.bind(this);
|
||||
this.addPdfsFromFiles = this.addPdfsFromFiles.bind(this);
|
||||
this.rotateElement = this.rotateElement.bind(this);
|
||||
this.rotateAll = this.rotateAll.bind(this);
|
||||
this.exportPdf = this.exportPdf.bind(this);
|
||||
this.updateFilename = this.updateFilename.bind(this);
|
||||
this.setDownloadAttribute = this.setDownloadAttribute.bind(this);
|
||||
this.preventIllegalChars = this.preventIllegalChars.bind(this);
|
||||
|
||||
this.pdfAdapters = pdfAdapters;
|
||||
|
||||
this.pdfAdapters.forEach(adapter => {
|
||||
adapter.setActions({
|
||||
movePageTo: this.movePageTo,
|
||||
addPdfs: this.addPdfs,
|
||||
rotateElement: this.rotateElement,
|
||||
updateFilename: this.updateFilename
|
||||
})
|
||||
})
|
||||
|
||||
window.addPdfs = this.addPdfs;
|
||||
window.exportPdf = this.exportPdf;
|
||||
window.rotateAll = this.rotateAll;
|
||||
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
const downloadBtn = document.getElementById('export-button');
|
||||
|
||||
filenameInput.onkeyup = this.updateFilename;
|
||||
filenameInput.onkeydown = this.preventIllegalChars;
|
||||
filenameInput.disabled = false;
|
||||
filenameInput.innerText = "";
|
||||
downloadBtn.disabled = true;
|
||||
}
|
||||
|
||||
movePageTo(startElement, endElement, scrollTo = false) {
|
||||
const childArray = Array.from(this.pagesContainer.childNodes);
|
||||
const startIndex = childArray.indexOf(startElement);
|
||||
const endIndex = childArray.indexOf(endElement);
|
||||
this.pagesContainer.removeChild(startElement);
|
||||
if(!endElement) {
|
||||
this.pagesContainer.append(startElement);
|
||||
} else {
|
||||
this.pagesContainer.insertBefore(startElement, endElement);
|
||||
}
|
||||
|
||||
if(scrollTo) {
|
||||
const { width } = startElement.getBoundingClientRect();
|
||||
const vector = (endIndex !== -1 && startIndex > endIndex)
|
||||
? 0-width
|
||||
: width;
|
||||
|
||||
this.pagesContainerWrapper.scroll({
|
||||
left: this.pagesContainerWrapper.scrollLeft + vector,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
addPdfs(nextSiblingElement) {
|
||||
var input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.multiple = true;
|
||||
input.setAttribute("accept", "application/pdf");
|
||||
input.onchange = async(e) => {
|
||||
const files = e.target.files;
|
||||
|
||||
this.addPdfsFromFiles(files, nextSiblingElement);
|
||||
this.updateFilename(files ? files[0].name : "");
|
||||
}
|
||||
|
||||
input.click();
|
||||
}
|
||||
|
||||
async addPdfsFromFiles(files, nextSiblingElement) {
|
||||
this.fileName = files[0].name;
|
||||
for (var i=0; i < files.length; i++) {
|
||||
await this.addPdfFile(files[i], nextSiblingElement);
|
||||
}
|
||||
|
||||
document.querySelectorAll(".enable-on-file").forEach(element => {
|
||||
element.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
rotateElement(element, deg) {
|
||||
var lastTransform = element.style.rotate;
|
||||
if (!lastTransform) {
|
||||
lastTransform = "0";
|
||||
}
|
||||
const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
|
||||
const newAngle = lastAngle + deg;
|
||||
|
||||
element.style.rotate = newAngle + "deg";
|
||||
}
|
||||
|
||||
async addPdfFile(file, nextSiblingElement) {
|
||||
const { renderer, pdfDocument } = await this.loadFile(file);
|
||||
|
||||
for (var i=0; i < renderer.pageCount; i++) {
|
||||
const div = document.createElement('div');
|
||||
|
||||
div.classList.add("page-container");
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.classList.add('page-image')
|
||||
const imageSrc = await renderer.renderPage(i)
|
||||
img.src = imageSrc;
|
||||
img.pageIdx = i;
|
||||
img.rend = renderer;
|
||||
img.doc = pdfDocument;
|
||||
div.appendChild(img);
|
||||
|
||||
this.pdfAdapters.forEach((adapter) => {
|
||||
adapter.adapt?.(div)
|
||||
})
|
||||
if (nextSiblingElement) {
|
||||
this.pagesContainer.insertBefore(div, nextSiblingElement);
|
||||
} else {
|
||||
this.pagesContainer.appendChild(div);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async loadFile(file) {
|
||||
var objectUrl = URL.createObjectURL(file);
|
||||
var pdfDocument = await this.toPdfLib(objectUrl);
|
||||
var renderer = await this.toRenderer(objectUrl);
|
||||
return { renderer, pdfDocument };
|
||||
}
|
||||
|
||||
async toRenderer(objectUrl) {
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
|
||||
const pdf = await pdfjsLib.getDocument(objectUrl).promise;
|
||||
return {
|
||||
document: pdf,
|
||||
pageCount: pdf.numPages,
|
||||
renderPage: async function(pageIdx) {
|
||||
const page = await this.document.getPage(pageIdx+1);
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
// set the canvas size to the size of the page
|
||||
if (page.rotate == 90 || page.rotate == 270) {
|
||||
canvas.width = page.view[3];
|
||||
canvas.height = page.view[2];
|
||||
} else {
|
||||
canvas.width = page.view[2];
|
||||
canvas.height = page.view[3];
|
||||
}
|
||||
|
||||
// render the page onto the canvas
|
||||
var renderContext = {
|
||||
canvasContext: canvas.getContext("2d"),
|
||||
viewport: page.getViewport({ scale: 1 })
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async toPdfLib(objectUrl) {
|
||||
const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
|
||||
const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes, { ignoreEncryption: true });
|
||||
return pdfDoc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
rotateAll(deg) {
|
||||
for (var i=0; i<this.pagesContainer.childNodes.length; i++) {
|
||||
const img = this.pagesContainer.childNodes[i].querySelector("img");
|
||||
if (!img) continue;
|
||||
this.rotateElement(img, deg)
|
||||
}
|
||||
}
|
||||
|
||||
async exportPdf() {
|
||||
const pdfDoc = await PDFLib.PDFDocument.create();
|
||||
const pageContainers = this.pagesContainer.querySelectorAll('.page-container'); // Select all .page-container elements
|
||||
for (var i = 0; i < pageContainers.length; i++) {
|
||||
const img = pageContainers[i].querySelector("img"); // Find the img element within each .page-container
|
||||
if (!img) continue;
|
||||
const pages = await pdfDoc.copyPages(img.doc, [img.pageIdx])
|
||||
const page = pages[0];
|
||||
|
||||
const rotation = img.style.rotate;
|
||||
if (rotation) {
|
||||
const rotationAngle = parseInt(rotation.replace(/[^\d-]/g, ''));
|
||||
page.setRotation(PDFLib.degrees(page.getRotation().angle + rotationAngle))
|
||||
}
|
||||
|
||||
pdfDoc.addPage(page);
|
||||
}
|
||||
const pdfBytes = await pdfDoc.save();
|
||||
const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
|
||||
const url = URL.createObjectURL(pdfBlob);
|
||||
const downloadOption = localStorage.getItem('downloadOption');
|
||||
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
|
||||
let inputArr = filenameInput.value.split('.');
|
||||
|
||||
if (inputArr !== null && inputArr !== undefined && inputArr.length > 0) {
|
||||
|
||||
inputArr = inputArr.filter(n => n); // remove all empty strings, nulls or undefined
|
||||
|
||||
if (inputArr.length > 1) {
|
||||
inputArr.pop(); // remove right part after last dot
|
||||
}
|
||||
|
||||
filenameInput.value = inputArr.join('');
|
||||
this.fileName = filenameInput.value;
|
||||
}
|
||||
|
||||
if (!filenameInput.value.includes('.pdf')) {
|
||||
filenameInput.value = filenameInput.value + '.pdf';
|
||||
this.fileName = filenameInput.value;
|
||||
}
|
||||
|
||||
if (downloadOption === 'sameWindow') {
|
||||
// Open the file in the same window
|
||||
window.location.href = url;
|
||||
} else if (downloadOption === 'newWindow') {
|
||||
// Open the file in a new window
|
||||
window.open(url, '_blank');
|
||||
} else {
|
||||
// Download the file
|
||||
this.downloadLink = document.createElement('a');
|
||||
this.downloadLink.id = 'download-link';
|
||||
this.downloadLink.href = url;
|
||||
// downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
|
||||
// downloadLink.download = this.fileName;
|
||||
this.downloadLink.setAttribute('download', this.fileName ? this.fileName : 'managed.pdf');
|
||||
this.downloadLink.setAttribute('target', '_blank');
|
||||
this.downloadLink.onclick = this.setDownloadAttribute;
|
||||
this.downloadLink.click();
|
||||
}
|
||||
}
|
||||
|
||||
setDownloadAttribute() {
|
||||
this.downloadLink.setAttribute("download", this.fileName ? this.fileName : 'managed.pdf');
|
||||
}
|
||||
|
||||
updateFilename(fileName = "") {
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
const downloadBtn = document.getElementById('export-button');
|
||||
|
||||
downloadBtn.disabled = pagesContainer.childElementCount === 0
|
||||
|
||||
if (!this.fileName) {
|
||||
this.fileName = fileName;
|
||||
}
|
||||
|
||||
if (!filenameInput.value) {
|
||||
filenameInput.value = this.fileName;
|
||||
}
|
||||
}
|
||||
|
||||
preventIllegalChars(e) {
|
||||
// const filenameInput = document.getElementById('filename-input');
|
||||
//
|
||||
// filenameInput.value = filenameInput.value.replace('.pdf', '');
|
||||
//
|
||||
// // prevent .
|
||||
// if (filenameInput.value.includes('.')) {
|
||||
// filenameInput.value.replace('.','');
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
export default PdfContainer;
|
||||
class PdfContainer {
|
||||
fileName;
|
||||
pagesContainer;
|
||||
pagesContainerWrapper;
|
||||
pdfAdapters;
|
||||
downloadLink;
|
||||
|
||||
constructor(id, wrapperId, pdfAdapters) {
|
||||
this.pagesContainer = document.getElementById(id)
|
||||
this.pagesContainerWrapper = document.getElementById(wrapperId);
|
||||
this.downloadLink = null;
|
||||
this.movePageTo = this.movePageTo.bind(this);
|
||||
this.addPdfs = this.addPdfs.bind(this);
|
||||
this.addPdfsFromFiles = this.addPdfsFromFiles.bind(this);
|
||||
this.rotateElement = this.rotateElement.bind(this);
|
||||
this.rotateAll = this.rotateAll.bind(this);
|
||||
this.exportPdf = this.exportPdf.bind(this);
|
||||
this.updateFilename = this.updateFilename.bind(this);
|
||||
this.setDownloadAttribute = this.setDownloadAttribute.bind(this);
|
||||
this.preventIllegalChars = this.preventIllegalChars.bind(this);
|
||||
|
||||
this.pdfAdapters = pdfAdapters;
|
||||
|
||||
this.pdfAdapters.forEach(adapter => {
|
||||
adapter.setActions({
|
||||
movePageTo: this.movePageTo,
|
||||
addPdfs: this.addPdfs,
|
||||
rotateElement: this.rotateElement,
|
||||
updateFilename: this.updateFilename
|
||||
})
|
||||
})
|
||||
|
||||
window.addPdfs = this.addPdfs;
|
||||
window.exportPdf = this.exportPdf;
|
||||
window.rotateAll = this.rotateAll;
|
||||
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
const downloadBtn = document.getElementById('export-button');
|
||||
|
||||
filenameInput.onkeyup = this.updateFilename;
|
||||
filenameInput.onkeydown = this.preventIllegalChars;
|
||||
filenameInput.disabled = false;
|
||||
filenameInput.innerText = "";
|
||||
downloadBtn.disabled = true;
|
||||
}
|
||||
|
||||
movePageTo(startElement, endElement, scrollTo = false) {
|
||||
const childArray = Array.from(this.pagesContainer.childNodes);
|
||||
const startIndex = childArray.indexOf(startElement);
|
||||
const endIndex = childArray.indexOf(endElement);
|
||||
this.pagesContainer.removeChild(startElement);
|
||||
if(!endElement) {
|
||||
this.pagesContainer.append(startElement);
|
||||
} else {
|
||||
this.pagesContainer.insertBefore(startElement, endElement);
|
||||
}
|
||||
|
||||
if(scrollTo) {
|
||||
const { width } = startElement.getBoundingClientRect();
|
||||
const vector = (endIndex !== -1 && startIndex > endIndex)
|
||||
? 0-width
|
||||
: width;
|
||||
|
||||
this.pagesContainerWrapper.scroll({
|
||||
left: this.pagesContainerWrapper.scrollLeft + vector,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
addPdfs(nextSiblingElement) {
|
||||
var input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.multiple = true;
|
||||
input.setAttribute("accept", "application/pdf");
|
||||
input.onchange = async(e) => {
|
||||
const files = e.target.files;
|
||||
|
||||
this.addPdfsFromFiles(files, nextSiblingElement);
|
||||
this.updateFilename(files ? files[0].name : "");
|
||||
}
|
||||
|
||||
input.click();
|
||||
}
|
||||
|
||||
async addPdfsFromFiles(files, nextSiblingElement) {
|
||||
this.fileName = files[0].name;
|
||||
for (var i=0; i < files.length; i++) {
|
||||
await this.addPdfFile(files[i], nextSiblingElement);
|
||||
}
|
||||
|
||||
document.querySelectorAll(".enable-on-file").forEach(element => {
|
||||
element.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
rotateElement(element, deg) {
|
||||
var lastTransform = element.style.rotate;
|
||||
if (!lastTransform) {
|
||||
lastTransform = "0";
|
||||
}
|
||||
const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
|
||||
const newAngle = lastAngle + deg;
|
||||
|
||||
element.style.rotate = newAngle + "deg";
|
||||
}
|
||||
|
||||
async addPdfFile(file, nextSiblingElement) {
|
||||
const { renderer, pdfDocument } = await this.loadFile(file);
|
||||
|
||||
for (var i=0; i < renderer.pageCount; i++) {
|
||||
const div = document.createElement('div');
|
||||
|
||||
div.classList.add("page-container");
|
||||
|
||||
var img = document.createElement('img');
|
||||
img.classList.add('page-image')
|
||||
const imageSrc = await renderer.renderPage(i)
|
||||
img.src = imageSrc;
|
||||
img.pageIdx = i;
|
||||
img.rend = renderer;
|
||||
img.doc = pdfDocument;
|
||||
div.appendChild(img);
|
||||
|
||||
this.pdfAdapters.forEach((adapter) => {
|
||||
adapter.adapt?.(div)
|
||||
})
|
||||
if (nextSiblingElement) {
|
||||
this.pagesContainer.insertBefore(div, nextSiblingElement);
|
||||
} else {
|
||||
this.pagesContainer.appendChild(div);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async loadFile(file) {
|
||||
var objectUrl = URL.createObjectURL(file);
|
||||
var pdfDocument = await this.toPdfLib(objectUrl);
|
||||
var renderer = await this.toRenderer(objectUrl);
|
||||
return { renderer, pdfDocument };
|
||||
}
|
||||
|
||||
async toRenderer(objectUrl) {
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
|
||||
const pdf = await pdfjsLib.getDocument(objectUrl).promise;
|
||||
return {
|
||||
document: pdf,
|
||||
pageCount: pdf.numPages,
|
||||
renderPage: async function(pageIdx) {
|
||||
const page = await this.document.getPage(pageIdx+1);
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
// set the canvas size to the size of the page
|
||||
if (page.rotate == 90 || page.rotate == 270) {
|
||||
canvas.width = page.view[3];
|
||||
canvas.height = page.view[2];
|
||||
} else {
|
||||
canvas.width = page.view[2];
|
||||
canvas.height = page.view[3];
|
||||
}
|
||||
|
||||
// render the page onto the canvas
|
||||
var renderContext = {
|
||||
canvasContext: canvas.getContext("2d"),
|
||||
viewport: page.getViewport({ scale: 1 })
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async toPdfLib(objectUrl) {
|
||||
const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
|
||||
const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes, { ignoreEncryption: true });
|
||||
return pdfDoc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
rotateAll(deg) {
|
||||
for (var i=0; i<this.pagesContainer.childNodes.length; i++) {
|
||||
const img = this.pagesContainer.childNodes[i].querySelector("img");
|
||||
if (!img) continue;
|
||||
this.rotateElement(img, deg)
|
||||
}
|
||||
}
|
||||
|
||||
async exportPdf() {
|
||||
const pdfDoc = await PDFLib.PDFDocument.create();
|
||||
const pageContainers = this.pagesContainer.querySelectorAll('.page-container'); // Select all .page-container elements
|
||||
for (var i = 0; i < pageContainers.length; i++) {
|
||||
const img = pageContainers[i].querySelector("img"); // Find the img element within each .page-container
|
||||
if (!img) continue;
|
||||
const pages = await pdfDoc.copyPages(img.doc, [img.pageIdx])
|
||||
const page = pages[0];
|
||||
|
||||
const rotation = img.style.rotate;
|
||||
if (rotation) {
|
||||
const rotationAngle = parseInt(rotation.replace(/[^\d-]/g, ''));
|
||||
page.setRotation(PDFLib.degrees(page.getRotation().angle + rotationAngle))
|
||||
}
|
||||
|
||||
pdfDoc.addPage(page);
|
||||
}
|
||||
const pdfBytes = await pdfDoc.save();
|
||||
const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
|
||||
const url = URL.createObjectURL(pdfBlob);
|
||||
const downloadOption = localStorage.getItem('downloadOption');
|
||||
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
|
||||
let inputArr = filenameInput.value.split('.');
|
||||
|
||||
if (inputArr !== null && inputArr !== undefined && inputArr.length > 0) {
|
||||
|
||||
inputArr = inputArr.filter(n => n); // remove all empty strings, nulls or undefined
|
||||
|
||||
if (inputArr.length > 1) {
|
||||
inputArr.pop(); // remove right part after last dot
|
||||
}
|
||||
|
||||
filenameInput.value = inputArr.join('');
|
||||
this.fileName = filenameInput.value;
|
||||
}
|
||||
|
||||
if (!filenameInput.value.includes('.pdf')) {
|
||||
filenameInput.value = filenameInput.value + '.pdf';
|
||||
this.fileName = filenameInput.value;
|
||||
}
|
||||
|
||||
if (downloadOption === 'sameWindow') {
|
||||
// Open the file in the same window
|
||||
window.location.href = url;
|
||||
} else if (downloadOption === 'newWindow') {
|
||||
// Open the file in a new window
|
||||
window.open(url, '_blank');
|
||||
} else {
|
||||
// Download the file
|
||||
this.downloadLink = document.createElement('a');
|
||||
this.downloadLink.id = 'download-link';
|
||||
this.downloadLink.href = url;
|
||||
// downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
|
||||
// downloadLink.download = this.fileName;
|
||||
this.downloadLink.setAttribute('download', this.fileName ? this.fileName : 'managed.pdf');
|
||||
this.downloadLink.setAttribute('target', '_blank');
|
||||
this.downloadLink.onclick = this.setDownloadAttribute;
|
||||
this.downloadLink.click();
|
||||
}
|
||||
}
|
||||
|
||||
setDownloadAttribute() {
|
||||
this.downloadLink.setAttribute("download", this.fileName ? this.fileName : 'managed.pdf');
|
||||
}
|
||||
|
||||
updateFilename(fileName = "") {
|
||||
const filenameInput = document.getElementById('filename-input');
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
const downloadBtn = document.getElementById('export-button');
|
||||
|
||||
downloadBtn.disabled = pagesContainer.childElementCount === 0
|
||||
|
||||
if (!this.fileName) {
|
||||
this.fileName = fileName;
|
||||
}
|
||||
|
||||
if (!filenameInput.value) {
|
||||
filenameInput.value = this.fileName;
|
||||
}
|
||||
}
|
||||
|
||||
preventIllegalChars(e) {
|
||||
// const filenameInput = document.getElementById('filename-input');
|
||||
//
|
||||
// filenameInput.value = filenameInput.value.replace('.pdf', '');
|
||||
//
|
||||
// // prevent .
|
||||
// if (filenameInput.value.includes('.')) {
|
||||
// filenameInput.value.replace('.','');
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
export default PdfContainer;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,75 +1,75 @@
|
||||
// Toggle search bar when the search icon is clicked
|
||||
document.querySelector('#search-icon').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
var searchBar = document.querySelector('#navbarSearch');
|
||||
searchBar.classList.toggle('show');
|
||||
});
|
||||
window.onload = function() {
|
||||
var items = document.querySelectorAll('.dropdown-item, .nav-link');
|
||||
var dummyContainer = document.createElement('div');
|
||||
dummyContainer.style.position = 'absolute';
|
||||
dummyContainer.style.visibility = 'hidden';
|
||||
dummyContainer.style.whiteSpace = 'nowrap'; // Ensure we measure full width
|
||||
document.body.appendChild(dummyContainer);
|
||||
|
||||
var maxWidth = 0;
|
||||
|
||||
items.forEach(function(item) {
|
||||
var clone = item.cloneNode(true);
|
||||
dummyContainer.appendChild(clone);
|
||||
var width = clone.offsetWidth;
|
||||
if (width > maxWidth) {
|
||||
maxWidth = width;
|
||||
}
|
||||
dummyContainer.removeChild(clone);
|
||||
});
|
||||
|
||||
document.body.removeChild(dummyContainer);
|
||||
|
||||
// Store max width for later use
|
||||
window.navItemMaxWidth = maxWidth;
|
||||
};
|
||||
|
||||
// Show search results as user types in search box
|
||||
document.querySelector('#navbarSearchInput').addEventListener('input', function(e) {
|
||||
var searchText = e.target.value.toLowerCase();
|
||||
var items = document.querySelectorAll('.dropdown-item, .nav-link');
|
||||
var resultsBox = document.querySelector('#searchResults');
|
||||
|
||||
// Clear any previous results
|
||||
resultsBox.innerHTML = '';
|
||||
|
||||
items.forEach(function(item) {
|
||||
var titleElement = item.querySelector('.icon-text');
|
||||
var iconElement = item.querySelector('.icon');
|
||||
var itemHref = item.getAttribute('href');
|
||||
var tags = item.getAttribute('data-bs-tags') || ""; // If no tags, default to empty string
|
||||
|
||||
if (titleElement && iconElement && itemHref !== '#') {
|
||||
var title = titleElement.innerText;
|
||||
if ((title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) && !resultsBox.querySelector(`a[href="${item.getAttribute('href')}"]`)) {
|
||||
var result = document.createElement('a');
|
||||
result.href = itemHref;
|
||||
result.classList.add('dropdown-item');
|
||||
|
||||
var resultIcon = document.createElement('img');
|
||||
resultIcon.src = iconElement.src;
|
||||
resultIcon.alt = 'icon';
|
||||
resultIcon.classList.add('icon');
|
||||
result.appendChild(resultIcon);
|
||||
|
||||
var resultText = document.createElement('span');
|
||||
resultText.textContent = title;
|
||||
resultText.classList.add('icon-text');
|
||||
result.appendChild(resultText);
|
||||
|
||||
resultsBox.appendChild(result);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Set the width of the search results box to the maximum width
|
||||
resultsBox.style.width = window.navItemMaxWidth + 'px';
|
||||
});
|
||||
|
||||
|
||||
// Toggle search bar when the search icon is clicked
|
||||
document.querySelector('#search-icon').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
var searchBar = document.querySelector('#navbarSearch');
|
||||
searchBar.classList.toggle('show');
|
||||
});
|
||||
window.onload = function() {
|
||||
var items = document.querySelectorAll('.dropdown-item, .nav-link');
|
||||
var dummyContainer = document.createElement('div');
|
||||
dummyContainer.style.position = 'absolute';
|
||||
dummyContainer.style.visibility = 'hidden';
|
||||
dummyContainer.style.whiteSpace = 'nowrap'; // Ensure we measure full width
|
||||
document.body.appendChild(dummyContainer);
|
||||
|
||||
var maxWidth = 0;
|
||||
|
||||
items.forEach(function(item) {
|
||||
var clone = item.cloneNode(true);
|
||||
dummyContainer.appendChild(clone);
|
||||
var width = clone.offsetWidth;
|
||||
if (width > maxWidth) {
|
||||
maxWidth = width;
|
||||
}
|
||||
dummyContainer.removeChild(clone);
|
||||
});
|
||||
|
||||
document.body.removeChild(dummyContainer);
|
||||
|
||||
// Store max width for later use
|
||||
window.navItemMaxWidth = maxWidth;
|
||||
};
|
||||
|
||||
// Show search results as user types in search box
|
||||
document.querySelector('#navbarSearchInput').addEventListener('input', function(e) {
|
||||
var searchText = e.target.value.toLowerCase();
|
||||
var items = document.querySelectorAll('.dropdown-item, .nav-link');
|
||||
var resultsBox = document.querySelector('#searchResults');
|
||||
|
||||
// Clear any previous results
|
||||
resultsBox.innerHTML = '';
|
||||
|
||||
items.forEach(function(item) {
|
||||
var titleElement = item.querySelector('.icon-text');
|
||||
var iconElement = item.querySelector('.icon');
|
||||
var itemHref = item.getAttribute('href');
|
||||
var tags = item.getAttribute('data-bs-tags') || ""; // If no tags, default to empty string
|
||||
|
||||
if (titleElement && iconElement && itemHref !== '#') {
|
||||
var title = titleElement.innerText;
|
||||
if ((title.toLowerCase().indexOf(searchText) !== -1 || tags.toLowerCase().indexOf(searchText) !== -1) && !resultsBox.querySelector(`a[href="${item.getAttribute('href')}"]`)) {
|
||||
var result = document.createElement('a');
|
||||
result.href = itemHref;
|
||||
result.classList.add('dropdown-item');
|
||||
|
||||
var resultIcon = document.createElement('img');
|
||||
resultIcon.src = iconElement.src;
|
||||
resultIcon.alt = 'icon';
|
||||
resultIcon.classList.add('icon');
|
||||
result.appendChild(resultIcon);
|
||||
|
||||
var resultText = document.createElement('span');
|
||||
resultText.textContent = title;
|
||||
resultText.classList.add('icon-text');
|
||||
result.appendChild(resultText);
|
||||
|
||||
resultsBox.appendChild(result);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Set the width of the search results box to the maximum width
|
||||
resultsBox.style.width = window.navItemMaxWidth + 'px';
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}" data-bs-tags="${tags}">
|
||||
<a th:href="${cardLink}">
|
||||
<div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
|
||||
<img th:if="${svgPath}" id="card-icon" class="home-card-icon home-card-icon-colour" th:src="${svgPath}" alt="Icon" width="30" height="30">
|
||||
<h5 class="card-title ms-2" th:text="${cardTitle}"></h5> <!-- Add some margin-left (ms-2) for spacing between SVG and title -->
|
||||
</div>
|
||||
<p class="card-text" th:text="${cardText}"></p>
|
||||
</a>
|
||||
<div class="favorite-icon" onclick="toggleFavorite(this)">
|
||||
<img src="images/star.svg" alt="Favorite">
|
||||
</div>
|
||||
</div>
|
||||
<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}" data-bs-tags="${tags}">
|
||||
<a th:href="${cardLink}">
|
||||
<div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
|
||||
<img th:if="${svgPath}" id="card-icon" class="home-card-icon home-card-icon-colour" th:src="${svgPath}" alt="Icon" width="30" height="30">
|
||||
<h5 class="card-title ms-2" th:text="${cardTitle}"></h5> <!-- Add some margin-left (ms-2) for spacing between SVG and title -->
|
||||
</div>
|
||||
<p class="card-text" th:text="${cardText}"></p>
|
||||
</a>
|
||||
<div class="favorite-icon" onclick="toggleFavorite(this)">
|
||||
<img src="images/star.svg" alt="Favorite">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,58 +1,58 @@
|
||||
<div th:fragment="footer">
|
||||
<footer id="footer" class="text-center py-3">
|
||||
<div class="footer-center">
|
||||
|
||||
<a href="https://github.com/Stirling-Tools/Stirling-PDF"
|
||||
target="_blank" class="mx-1" title="Visit Github Repository"><img
|
||||
src="images/github.svg"></img></a> <a
|
||||
href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank"
|
||||
class="mx-1" title="See Docker Hub"><img src="images/docker.svg"></img></a>
|
||||
<a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1"
|
||||
title="Join Discord Channel"><img src="images/discord.svg"></img></a>
|
||||
<a href="https://github.com/sponsors/Frooodle" target="_blank"
|
||||
class="mx-1" title="Donate"><img
|
||||
src="images/suit-heart-fill.svg"></img></a>
|
||||
|
||||
|
||||
|
||||
<div style="color: grey;" th:if="${@appName} != 'Stirling PDF'" class="footer-powered-by" th:text="#{poweredBy} + ' Stirling PDF'"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="licenses" id="licenses" target="_blank" class="mx-1" title="" th:text="#{licenses.nav}">Licenses</a>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
#footer {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack children vertically */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-center {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack items vertically */
|
||||
justify-content: center; /* Center children vertically */
|
||||
align-items: center; /* Center children horizontally */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.footer-powered-by {
|
||||
margin-top: auto; /* Pushes the text to the bottom */
|
||||
color: grey;
|
||||
text-align: center; /* Centers the text inside the div */
|
||||
width: 100%; /* Full width to center the text properly */
|
||||
}
|
||||
|
||||
.right-link-container {
|
||||
align-self: flex-end; /* Align to the end of the flex container */
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div th:fragment="footer">
|
||||
<footer id="footer" class="text-center py-3">
|
||||
<div class="footer-center">
|
||||
|
||||
<a href="https://github.com/Stirling-Tools/Stirling-PDF"
|
||||
target="_blank" class="mx-1" title="Visit Github Repository"><img
|
||||
src="images/github.svg"></img></a> <a
|
||||
href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank"
|
||||
class="mx-1" title="See Docker Hub"><img src="images/docker.svg"></img></a>
|
||||
<a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1"
|
||||
title="Join Discord Channel"><img src="images/discord.svg"></img></a>
|
||||
<a href="https://github.com/sponsors/Frooodle" target="_blank"
|
||||
class="mx-1" title="Donate"><img
|
||||
src="images/suit-heart-fill.svg"></img></a>
|
||||
|
||||
|
||||
|
||||
<div style="color: grey;" th:if="${@appName} != 'Stirling PDF'" class="footer-powered-by" th:text="#{poweredBy} + ' Stirling PDF'"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="licenses" id="licenses" target="_blank" class="mx-1" title="" th:text="#{licenses.nav}">Licenses</a>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
#footer {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack children vertically */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-center {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack items vertically */
|
||||
justify-content: center; /* Center children vertically */
|
||||
align-items: center; /* Center children horizontally */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.footer-powered-by {
|
||||
margin-top: auto; /* Pushes the text to the bottom */
|
||||
color: grey;
|
||||
text-align: center; /* Centers the text inside the div */
|
||||
width: 100%; /* Full width to center the text properly */
|
||||
}
|
||||
|
||||
.right-link-container {
|
||||
align-self: flex-end; /* Align to the end of the flex container */
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user