saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-06-23 07:55:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add elements first draft

Browse Source
This commit is contained in:
Saud Fatayerji 2023-09-28 19:31:43 +03:00
parent e998426b3b
commit 86984f2142
5 changed files with 140 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/main/resources/messages_en_GB.properties
View File

@ -25,6 +25,9 @@ downloadPdf=Download PDF
text=Text
font=Font
element-id=Element ID
group-id=Group ID
comma-separated-values=Element values (separated by commas)
element-value=Element value
selectFillter=-- Select --
pageNum=Page Number
sizes.small=Small
@ -521,8 +524,11 @@ add-elements.header=Add Elements
add-elements.upload=Upload Image
add-elements.draw=Draw Signature
add-elements.text=Text Input
add-elements.textbox=Text Box
add-elements.checkbox=Check Box
add-elements.dropdown=Dropdown
add-elements.optionList=Option List
add-elements.radioButton=Radio Button
add-elements.textbox=Text Box
add-elements.clear=Clear
add-elements.add=Add

44
src/main/resources/static/js/draggable-utils.js
View File

@ -184,7 +184,9 @@ const DraggableUtils = {
parseTransform(element) {
},
async getOverlayedPdfDocument() {
async getOverlaidPdfDocument() {
var radioGroups = new Map();
const pdfBytes = await this.pdfDoc.getData();
const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes, { ignoreEncryption: true });
this.storePageContents();
@ -213,18 +215,46 @@ const DraggableUtils = {
// draw the image
page.drawImage(pdfImageObject, translatedPositions);
} else if (draggableElement.firstChild.nodeName == "INPUT" && draggableElement.firstChild.getAttribute("type") == "textarea") {
const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
const fieldKey = draggableElement.firstChild.getAttribute("name");
const form = pdfDocModified.getForm();
const field = form.createTextField(fieldKey);
field.addToPage(page, translatedPositions);
} else if (draggableElement.firstChild.nodeName == "INPUT" && draggableElement.firstChild.getAttribute("type") == "checkbox") {
const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
const fieldKey = draggableElement.firstChild.getAttribute("name");
const form = pdfDocModified.getForm();
const field = form.createCheckBox(fieldKey);
field.addToPage(page, translatedPositions);
} else if (draggableElement.firstChild.nodeName == "DIV" && draggableElement.firstChild.getAttribute("type") == "dropdown") {
const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
const fieldKey = draggableElement.firstChild.getAttribute("name");
const fieldValues = JSON.parse(draggableElement.firstChild.getAttribute("values"));
const form = pdfDocModified.getForm();
const field = form.createDropdown(fieldKey);
field.addOptions(fieldValues)
field.addToPage(page, translatedPositions);
} else if (draggableElement.firstChild.nodeName == "DIV" && draggableElement.firstChild.getAttribute("type") == "optionList") {
const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
const fieldKey = draggableElement.firstChild.getAttribute("name");
const fieldValues = JSON.parse(draggableElement.firstChild.getAttribute("values"));
const form = pdfDocModified.getForm();
const field = form.createOptionList(fieldKey);
field.addOptions(fieldValues)
field.addToPage(page, translatedPositions);
} else if (draggableElement.firstChild.nodeName == "INPUT" && draggableElement.firstChild.getAttribute("type") == "radio") { //
const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
const fieldKey = draggableElement.firstChild.getAttribute("name");
const buttonValue = draggableElement.firstChild.getAttribute("buttonValue");
const form = pdfDocModified.getForm();
var radioGroup = radioGroups.get(fieldKey);
if (!radioGroup) {
radioGroup = form.createRadioGroup(fieldKey);
radioGroups.set(fieldKey, radioGroup);
}
radioGroup.addOptionToPage(buttonValue, page, translatedPositions)
console.log("added radio")
} else if (draggableElement.firstChild.nodeName == "INPUT" && draggableElement.firstChild.getAttribute("type") == "textarea") {
const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
const fieldKey = draggableElement.firstChild.getAttribute("name");
const form = pdfDocModified.getForm();
const field = form.createTextField(fieldKey);
field.addToPage(page, translatedPositions);
}
}
}

121
src/main/resources/templates/add-elements.html
View File

@ -64,16 +64,6 @@
</script>
<!-- add elements UIs -->
<div class="add-element-list">
<button id="addCheckBoxButton">Add Checkbox</button>
<script>
document.getElementById("addCheckBoxButton").addEventListener("click", () => {
const inp = document.createElement('input');
inp.setAttribute("type", "checkbox");
DraggableUtils.addDraggableElement(inp, false);
});
</script>
</div>
<div class="tab-group show-on-file-selected">
<div class="tab-container" th:title="#{add-elements.upload}">
<div th:replace="~{fragments/common :: fileSelector(name='image-upload', multiple=true, accept='image/*', inputText=#{imgPrompt})}"></div>
@ -251,6 +241,92 @@
</th:block>
</div>
<div class="tab-container" th:title="#{add-elements.checkbox}">
<label class="form-check-label" for="checkboxId" th:text="#{element-id}"></label>
<input type="text" class="form-control" id="checkboxId" name="checkboxId">
<div class="margin-auto-parent">
<button id="save-checkbox" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromCheckBox()" th:text="#{sign.add}"></button>
</div>
<script>
function addDraggableFromCheckBox() {
const id = document.getElementById('checkboxId').value;
const checkbox = document.createElement('input');
checkbox.setAttribute('type', 'checkbox');
checkbox.setAttribute('name', id);
const wrapper = DraggableUtils.addDraggableElement(checkbox, false);
}
</script>
</div>
<div class="tab-container" th:title="#{add-elements.dropdown}">
<label class="form-check-label" for="dropdownId" th:text="#{element-id}"></label>
<input type="text" class="form-control" id="dropdownId" name="dropdownId">
<label class="form-check-label" for="dropdownValues" th:text="#{comma-separated-values}"></label>
<input type="text" class="form-control" id="dropdownValues" name="dropdownValues">
<div class="margin-auto-parent">
<button id="save-dropdown" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromDropdown()" th:text="#{sign.add}"></button>
</div>
<script th:inline="javascript">
function addDraggableFromDropdown() {
const dropdownLabel = /*[[#{add-elements.dropdown}]]*/ '';
const id = document.getElementById('dropdownId').value;
const values = document.getElementById('dropdownValues').value.split(",");
const dropdown = document.createElement('div');
dropdown.setAttribute('type', 'dropdown');
dropdown.setAttribute('name', id);
dropdown.setAttribute('values', JSON.stringify(values));
dropdown.innerHTML = `${dropdownLabel}: ${id}`;
const wrapper = DraggableUtils.addDraggableElement(dropdown, true);
}
</script>
</div>
<div class="tab-container" th:title="#{add-elements.optionList}">
<label class="form-check-label" for="optionListId" th:text="#{element-id}"></label>
<input type="text" class="form-control" id="optionListId" name="optionListId">
<label class="form-check-label" for="optionListValues" th:text="#{comma-separated-values}"></label>
<input type="text" class="form-control" id="optionListValues" name="optionListValues">
<div class="margin-auto-parent">
<button id="save-optionList" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromoptionList()" th:text="#{sign.add}"></button>
</div>
<script th:inline="javascript">
function addDraggableFromoptionList() {
const optionListLabel = /*[[#{add-elements.optionList}]]*/ '';
const id = document.getElementById('optionListId').value;
const values = document.getElementById('optionListValues').value.split(",");
const optionList = document.createElement('div');
optionList.setAttribute('type', 'optionList');
optionList.setAttribute('name', id);
optionList.setAttribute('values', JSON.stringify(values));
optionList.innerHTML = `${optionListLabel}: ${id}`;
const wrapper = DraggableUtils.addDraggableElement(optionList, true);
}
</script>
</div>
<div class="tab-container" th:title="#{add-elements.radioButton}">
<label class="form-check-label" for="radioButtonId" th:text="#{group-id}"></label>
<input type="text" class="form-control" id="radioButtonId" name="radioButton">
<label class="form-check-label" for="radioButtonValue" th:text="#{element-value}"></label>
<input type="text" class="form-control" id="radioButtonValue" name="radioButton">
<div class="margin-auto-parent">
<button id="save-radioButton" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromRadioButton()" th:text="#{sign.add}"></button>
</div>
<script>
function addDraggableFromRadioButton() {
const id = document.getElementById('radioButtonId').value;
const value = document.getElementById('radioButtonValue').value;
const radioButton = document.createElement('input');
radioButton.setAttribute('type', 'radio');
radioButton.setAttribute('name', id);
radioButton.setAttribute('buttonValue', value);
const wrapper = DraggableUtils.addDraggableElement(radioButton, false);
}
</script>
</div>
<div class="tab-container" th:title="#{add-elements.textbox}">
<label class="form-check-label" for="textboxId" th:text="#{element-id}"></label>
<input type="text" class="form-control" id="textboxId" name="textboxId">
@ -272,22 +348,6 @@
}
</script>
</div>
<div class="tab-container" th:title="#{add-elements.checkbox}">
<label class="form-check-label" for="checkboxId" th:text="#{element-id}"></label>
<input type="text" class="form-control" id="checkboxId" name="checkboxId">
<div class="margin-auto-parent">
<button id="save-checkbox" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromCheckBox()" th:text="#{sign.add}"></button>
</div>
<script>
function addDraggableFromCheckBox() {
const id = document.getElementById('checkboxId').value;
const checkbox = document.createElement('input');
checkbox.setAttribute('type', 'checkbox');
checkbox.setAttribute('name', id);
const wrapper = DraggableUtils.addDraggableElement(checkbox, false);
}
</script>
</div>
</div>
@ -338,6 +398,13 @@
top: 0px;
left: 0;
}
.draggable-canvas > div {
width: 100%;
height: 100%;
line-height: normal;
color: rgb(var(--base-font-color));
background-color: rgba(var(--body-background-color), 0.5);
}
</style>
</div>
@ -348,7 +415,7 @@
<script>
document.getElementById("download-pdf").addEventListener('click', async() => {
const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
const modifiedPdf = await DraggableUtils.getOverlaidPdfDocument();
const modifiedPdfBytes = await modifiedPdf.save();
const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
const link = document.createElement('a');

2
src/main/resources/templates/other/add-image.html
View File

@ -122,7 +122,7 @@
</div>
<script>
document.getElementById("download-pdf").addEventListener('click', async() => {
const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
const modifiedPdf = await DraggableUtils.getOverlaidPdfDocument();
const modifiedPdfBytes = await modifiedPdf.save();
const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
const link = document.createElement('a');

2
src/main/resources/templates/sign.html
View File

@ -299,7 +299,7 @@ select#font-select, select#font-select option {
<script>
document.getElementById("download-pdf").addEventListener('click', async() => {
const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
const modifiedPdf = await DraggableUtils.getOverlaidPdfDocument();
const modifiedPdfBytes = await modifiedPdf.save();
const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
const link = document.createElement('a');