mirror of
https://github.com/24eme/signaturepdf
synced 2024-06-03 14:32:13 +02:00
organisation: processing icon on dowload button
This commit is contained in:
parent
24b24bddc7
commit
238d4b582f
|
@ -205,8 +205,9 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
|
||||||
movePagesDragged(this.parentNode, 'right');
|
movePagesDragged(this.parentNode, 'right');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
canvasContainer.querySelector('.btn-download').addEventListener('click', function(e) {
|
canvasContainer.querySelector('.btn-download').addEventListener('click', async function(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
startProcessingMode(canvasContainer.querySelector('.btn-download'));
|
||||||
let container = this.parentNode;
|
let container = this.parentNode;
|
||||||
let pageValue = container.querySelector('.checkbox-page').value;
|
let pageValue = container.querySelector('.checkbox-page').value;
|
||||||
let orientation = container.querySelector('.input-rotate').value;
|
let orientation = container.querySelector('.input-rotate').value;
|
||||||
|
@ -214,7 +215,8 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
|
||||||
pageValue = pageValue + "-" + orientation;
|
pageValue = pageValue + "-" + orientation;
|
||||||
}
|
}
|
||||||
document.querySelector('#input_pages').value = pageValue;
|
document.querySelector('#input_pages').value = pageValue;
|
||||||
save();
|
await save(pageValue);
|
||||||
|
endProcessingMode(canvasContainer.querySelector('.btn-download'));
|
||||||
});
|
});
|
||||||
canvasContainer.querySelector('.btn-rotate').addEventListener('click', function(e) {
|
canvasContainer.querySelector('.btn-rotate').addEventListener('click', function(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
@ -564,7 +566,35 @@ const DL = function (d,f) {
|
||||||
setTimeout(() => URL.revokeObjectURL(u))
|
setTimeout(() => URL.revokeObjectURL(u))
|
||||||
}
|
}
|
||||||
|
|
||||||
let save = async function () {
|
let saveAll = async function () {
|
||||||
|
let order = [];
|
||||||
|
let selectionMode = isSelectionMode();
|
||||||
|
|
||||||
|
document.querySelectorAll('.canvas-container').forEach(function(canvasContainer) {
|
||||||
|
let checkbox = canvasContainer.querySelector('.checkbox-page');
|
||||||
|
if(selectionMode) {
|
||||||
|
checkbox = canvasContainer.querySelector('.input-select');
|
||||||
|
}
|
||||||
|
let inputRotate = canvasContainer.querySelector('.input-rotate');
|
||||||
|
let pageValue = "";
|
||||||
|
if(checkbox.checked) {
|
||||||
|
pageValue = checkbox.value;
|
||||||
|
}
|
||||||
|
let orientation = inputRotate.value;
|
||||||
|
if(pageValue && orientation) {
|
||||||
|
pageValue = pageValue + "-" + orientation;
|
||||||
|
}
|
||||||
|
if(pageValue) {
|
||||||
|
order.push(pageValue);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('#input_pages').value = order.join(',');
|
||||||
|
|
||||||
|
await save(order.join(','));
|
||||||
|
}
|
||||||
|
|
||||||
|
let save = async function (order) {
|
||||||
const PDFDocument = window['PDFLib'].PDFDocument
|
const PDFDocument = window['PDFLib'].PDFDocument
|
||||||
const Rotation = window['PDFLib'].Rotation
|
const Rotation = window['PDFLib'].Rotation
|
||||||
|
|
||||||
|
@ -585,11 +615,10 @@ let save = async function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const pagesOrganize = document.querySelector('#input_pages').value.split(',');
|
const pagesOrganize = order.split(',');
|
||||||
|
|
||||||
for(let i in pagesOrganize) {
|
for(let i in pagesOrganize) {
|
||||||
const pageOrganize = pagesOrganize[i].split('-')[0];
|
const pageOrganize = pagesOrganize[i].split('-')[0];
|
||||||
console.log(pageOrganize);
|
|
||||||
const rotation = pagesOrganize[i].split('-')[1];
|
const rotation = pagesOrganize[i].split('-')[1];
|
||||||
const pdfPage = pages[pageOrganize];
|
const pdfPage = pages[pageOrganize];
|
||||||
if(rotation) {
|
if(rotation) {
|
||||||
|
@ -602,59 +631,30 @@ let save = async function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
var createEventsListener = function() {
|
var createEventsListener = function() {
|
||||||
document.getElementById('save-select_mobile').addEventListener('click', function(event) {
|
document.getElementById('save-select_mobile').addEventListener('click', async function(event) {
|
||||||
document.getElementById('save-select').click();
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
startProcessingMode(document.getElementById('save-select_mobile'));
|
||||||
|
await saveAll();
|
||||||
|
endProcessingMode(document.getElementById('save-select_mobile'));
|
||||||
});
|
});
|
||||||
document.getElementById('save-select').addEventListener('click', function(event) {
|
document.getElementById('save-select').addEventListener('click', async function(event) {
|
||||||
let buttonSave = document.getElementById('save');
|
|
||||||
let buttonSaveDisabledState = buttonSave.disabled;
|
|
||||||
if(buttonSave.disabled) {
|
|
||||||
buttonSave.disabled = false;
|
|
||||||
}
|
|
||||||
buttonSave.click();
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
buttonSave.disabled = true;
|
startProcessingMode(document.getElementById('save-select'));
|
||||||
|
await saveAll();
|
||||||
|
endProcessingMode(document.getElementById('save-select'));
|
||||||
});
|
});
|
||||||
document.getElementById('save').addEventListener('click', async function(e) {
|
document.getElementById('save').addEventListener('click', async function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
let btn = document.getElementById('save');
|
startProcessingMode(document.getElementById('save'));
|
||||||
btn.disabled = true;
|
await saveAll();
|
||||||
btn.querySelector('.spinner-grow').classList.remove('d-none');
|
endProcessingMode(document.getElementById('save'));
|
||||||
btn.querySelector('.bi').classList.add('d-none');
|
|
||||||
|
|
||||||
let order = [];
|
|
||||||
let selectionMode = isSelectionMode();
|
|
||||||
|
|
||||||
document.querySelectorAll('.canvas-container').forEach(function(canvasContainer) {
|
|
||||||
let checkbox = canvasContainer.querySelector('.checkbox-page');
|
|
||||||
if(selectionMode) {
|
|
||||||
checkbox = canvasContainer.querySelector('.input-select');
|
|
||||||
}
|
|
||||||
let inputRotate = canvasContainer.querySelector('.input-rotate');
|
|
||||||
let pageValue = "";
|
|
||||||
if(checkbox.checked) {
|
|
||||||
pageValue = checkbox.value;
|
|
||||||
}
|
|
||||||
let orientation = inputRotate.value;
|
|
||||||
if(pageValue && orientation) {
|
|
||||||
pageValue = pageValue + "-" + orientation;
|
|
||||||
}
|
|
||||||
if(pageValue) {
|
|
||||||
order.push(pageValue);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
document.querySelector('#input_pages').value = order.join(',');
|
|
||||||
await save();
|
|
||||||
|
|
||||||
btn.querySelector('.spinner-grow').classList.add('d-none');
|
|
||||||
btn.querySelector('.bi').classList.remove('d-none');
|
|
||||||
btn.disabled = false;
|
|
||||||
});
|
});
|
||||||
document.getElementById('save_mobile').addEventListener('click', function(event) {
|
document.getElementById('save_mobile').addEventListener('click', async function(event) {
|
||||||
document.getElementById('save').click();
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
startProcessingMode(document.getElementById('save_mobile'));
|
||||||
|
await saveAll();
|
||||||
|
endProcessingMode(document.getElementById('save_mobile'));
|
||||||
});
|
});
|
||||||
document.getElementById('input_pdf_upload_2').addEventListener('change', async function(event) {
|
document.getElementById('input_pdf_upload_2').addEventListener('change', async function(event) {
|
||||||
await uploadAndLoadPDF(this);
|
await uploadAndLoadPDF(this);
|
||||||
|
@ -733,6 +733,18 @@ var createEventsListener = function() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function startProcessingMode(btn) {
|
||||||
|
btn.disabled = true;
|
||||||
|
btn.querySelector('.bi').classList.add('position-relative');
|
||||||
|
btn.querySelector('.bi').insertAdjacentHTML('afterbegin', '<span class="spinner-grow spinner-grow-sm position-absolute top-50 start-50 translate-middle"></span>');
|
||||||
|
}
|
||||||
|
|
||||||
|
function endProcessingMode(btn) {
|
||||||
|
btn.querySelector('.spinner-grow').remove();
|
||||||
|
btn.querySelector('.bi').classList.remove('position-relative');
|
||||||
|
btn.disabled = false;
|
||||||
|
}
|
||||||
|
|
||||||
async function getPDFBlobFromCache(cacheUrl) {
|
async function getPDFBlobFromCache(cacheUrl) {
|
||||||
const cache = await caches.open('pdf');
|
const cache = await caches.open('pdf');
|
||||||
let responsePdf = await cache.match(cacheUrl);
|
let responsePdf = await cache.match(cacheUrl);
|
||||||
|
|
|
@ -82,7 +82,7 @@
|
||||||
<input id="input_pdf" name="pdf[]" type="file" class="d-none" />
|
<input id="input_pdf" name="pdf[]" type="file" class="d-none" />
|
||||||
<input id="input_pages" type="hidden" value="" name="pages" />
|
<input id="input_pages" type="hidden" value="" name="pages" />
|
||||||
<div id="btn_container" class="d-grid gap-2 mt-2">
|
<div id="btn_container" class="d-grid gap-2 mt-2">
|
||||||
<button class="btn btn-primary" type="submit" id="save"><span class="spinner-grow spinner-grow-sm d-none"></span><?php echo sprintf(_("%s Download the full PDF"), '<i class="bi bi-download"></i>'); ?></button>
|
<button class="btn btn-primary" type="submit" id="save"><?php echo sprintf(_("%s Download the full PDF"), '<i class="bi bi-download"></i>'); ?></button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
@ -111,7 +111,7 @@
|
||||||
<button class="btn btn-primary" type="submit" id="save_mobile"><?php echo sprintf(_("%s Download the full PDF"), '<i class="bi bi-download"></i>'); ?></button>
|
<button class="btn btn-primary" type="submit" id="save_mobile"><?php echo sprintf(_("%s Download the full PDF"), '<i class="bi bi-download"></i>'); ?></button>
|
||||||
</div>
|
</div>
|
||||||
<div id="bottom_bar_action_selection" class="d-grid gap-2 d-none">
|
<div id="bottom_bar_action_selection" class="d-grid gap-2 d-none">
|
||||||
<button id="save-select_mobile" class="btn btn-outline-primary" type="submit" form="form_pdf"><?php echo sprintf(_("Download the selection"), '<i class="bi bi-download"></i>'); ?></button>
|
<button id="save-select_mobile" class="btn btn-outline-primary" type="submit" form="form_pdf"><i class="bi bi-download"></i> <?php echo _("Download the selection"); ?></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue