1
0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-08-20 13:20:39 +02:00

Merge pull request #424 from DimK10/Bug-Multitool-Filename

Bug multitool filename
This commit is contained in:
Anthony Stirling 2023-10-15 17:37:46 +01:00 committed by GitHub
commit 3be12c8988
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 168 additions and 9 deletions

8
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

View File

@ -91,3 +91,26 @@ 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> */
}
#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;
}

View File

@ -2,4 +2,23 @@
body {
--body-background-color: 255, 255, 255;
--base-font-color: 33, 37, 41;
}
}
#global-buttons-container input {
background-color: #ffffff;
/*caret-color: #ffffff;*/
/*color: #ffffff;*/
}
/*#global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/
/* color: #98A0AB;*/
/*}*/
/*#global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/
/* color: #98A0AB;*/
/*}*/
/*#global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/
/* color: #98A0AB;*/
/*}*/
/*#global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/
/* color: #98A0AB;*/
/*}*/

View File

@ -55,6 +55,17 @@ class PdfActionsManager {
deletePageButtonCallback(e) {
var imgContainer = this.getPageContainer(e.target);
this.pagesContainer.removeChild(imgContainer);
if (this.pagesContainer.childElementCount === 0) {
const filenameInput = document.getElementById('filename-input');
const filenameParagraph = document.getElementById('filename');
const downloadBtn = document.getElementById('export-button');
filenameInput.disabled = true;
filenameInput.value = "";
filenameParagraph.innerText = "";
downloadBtn.disabled = true;
}
};
insertFileButtonCallback(e) {

View File

@ -3,17 +3,21 @@ class PdfContainer {
pagesContainer;
pagesContainerWrapper;
pdfAdapters;
downloadLink;
constructor(id, wrapperId, pdfAdapters) {
this.fileName = null;
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;
@ -28,6 +32,15 @@ class PdfContainer {
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 = true;
filenameInput.innerText = "";
downloadBtn.disabled = true;
}
movePageTo(startElement, endElement, scrollTo = false) {
@ -60,6 +73,29 @@ class PdfContainer {
input.setAttribute("accept", "application/pdf");
input.onchange = async(e) => {
const files = e.target.files;
if (files.length > 0) {
const filenameInput = document.getElementById('filename-input');
const pagesContainer = document.getElementById('pages-container');
const downloadBtn = document.getElementById('export-button');
filenameInput.disabled = false;
if (pagesContainer.childElementCount === 0) {
filenameInput.value = "";
this.filename = null;
downloadBtn.disabled = true;
} else {
this.filename = filenameInput.value;
}
if (this.filename === null || this.filename === undefined) {
filenameInput.value = files[0].name;
} else {
filenameInput.value = this.filename;
}
}
this.addPdfsFromFiles(files, nextSiblingElement);
}
@ -192,6 +228,27 @@ class PdfContainer {
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;
@ -200,12 +257,45 @@ class PdfContainer {
window.open(url, '_blank');
} else {
// Download the file
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
downloadLink.click();
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() {
const filenameInput = document.getElementById('filename-input');
const downloadBtn = document.getElementById('export-button');
if (filenameInput.value === "") {
downloadBtn.disabled = true;
return;
}
downloadBtn.disabled = false;
this.filename = filenameInput.value;
}
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;

View File

@ -20,15 +20,22 @@
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6" style="text-align: center">
<div id="global-buttons-container" class="d-flex align-content-center justify-content-center">
<div class="form-group">
<label for="filename-input">Filename</label>
<input type="text" class="form-control" id="filename-input" placeholder="filename">
</div>
</div>
<div id="global-buttons-container">
<button class="btn btn-primary" onclick="addPdfs()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
</svg>
</button>
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
@ -58,7 +65,7 @@
<div th:insert="~{fragments/footer.html :: footer}"></div>
</div>
<div id="drag-container"></div>
<script type="module">
import PdfContainer from './js/multitool/PdfContainer.js';
import DragDropManager from "./js/multitool/DragDropManager.js";
@ -114,6 +121,7 @@
#global-buttons-container > * {
padding: 0.6rem 0.75rem;
}
#global-buttons-container svg {
width: 20px;
height: 20px;