24eme/signaturepdf
24eme/signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf.git synced 2023-08-25 09:33:08 +02:00
Code Issues Releases Wiki Activity

[Organization] Modal to manage docs in mobile

Browse Source
This commit is contained in:
Vincent LAURENT 2022-10-17 00:49:32 +02:00
parent e7dacf528c
commit a04123b846
2 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/js/organization.js
View File

@ -314,7 +314,8 @@ var getFilesStats = function() {
var updateListePDF = function() {
document.querySelector('#list_pdf').innerHTML = "";
for (var i = 0; i < document.querySelector('#input_pdf').files.length; i++) {
let nbFiles = document.querySelector('#input_pdf').files.length;
for (var i = 0; i < nbFiles; i++) {
let pdfLetter = String.fromCharCode(96 + i+1).toUpperCase();
const pdfFile = document.querySelector('#input_pdf').files.item(i);
document.querySelector('#list_pdf').insertAdjacentHTML('beforeend', '<li id="file_' + pdfLetter + '" class="list-group-item small ps-2 pe-5" title="'+decodeURI(pdfFile.name)+'" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;"><i class="bi bi-files"></i><span class="ms-2">'+decodeURI(pdfFile.name)+'</span> <input class="form-check-input float-end position-absolute" style="right: 10px;" type="checkbox" /> </li>');
@ -328,6 +329,10 @@ var updateListePDF = function() {
updateGlobalState();
});
document.querySelector('#liste_pdf_titre_mobile').innerText = decodeURI(pdfFile.name);
document.querySelector('#btn_liste_pdf_bar span').innerText = nbFiles;
if(nbFiles > 1) {
document.querySelector('#liste_pdf_titre_mobile').innerText = nbFiles + ' documents PDF';
}
}
updateGlobalState();
}
@ -515,7 +520,7 @@ var updateGlobalState = function() {
if(isSelectionMode()) {
document.querySelector('#container_btn_select .card-header span').innerText = document.querySelectorAll('.canvas-container .input-select:checked').length;
document.querySelector('#top_bar_action_selection_recap span').innerText = document.querySelectorAll('.canvas-container .input-select:checked').length;
document.querySelector('#top_bar_action_selection_recap_nb_pages').innerText = document.querySelectorAll('.canvas-container .input-select:checked').length;
document.querySelector('#container_btn_select').classList.remove('opacity-50');
document.querySelector('#container_btn_select').classList.add('border-primary');
document.querySelector('#container_btn_select .card-header').classList.remove('text-muted');
@ -675,6 +680,16 @@ var createEventsListener = function() {
});
updateGlobalState();
});
document.querySelector('#btn_liste_pdf').addEventListener('click', function(event) {
bootstrap.Modal.getOrCreateInstance(document.querySelector('#modalFichier')).show();
document.querySelector('#modalFichier .modal-body').insertAdjacentElement('afterbegin', document.querySelector('#list_pdf'));
});
document.querySelector('#btn_liste_pdf_bar').addEventListener('click', function(event) {
document.querySelector('#btn_liste_pdf').click();
});
document.querySelector('#modalDrag').addEventListener('hidden.bs.modal', event => {
document.querySelector('#list_pdf_container').insertAdjacentElement('afterbegin', document.querySelector('#list_pdf'));
});
}
async function getPDFBlobFromCache(cacheUrl) {

24
templates/organization.html.php
View File

@ -62,8 +62,10 @@
<button type="button" class="btn-close text-reset d-md-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body pt-3" style="padding-bottom: 60px;">
<ul id="list_pdf" class="list-group">
</ul>
<div id="list_pdf_container">
<ul id="list_pdf" class="list-group">
</ul>
</div>
<div class="d-grid gap-2 mt-2">
<button type="button" class="btn btn-sm btn-outline-dark" onclick="document.getElementById('input_pdf_upload_2').click();"><i class="bi bi-plus-circle"></i> Ajouter un PDF</button>
<input id="input_pdf_upload_2" class="form-control d-none" type="file" accept=".pdf,application/pdf" multiple="true">
@ -94,14 +96,14 @@
<div id="top_bar" class="position-fixed top-0 start-0 bg-white w-100 shadow-sm d-md-none p-2">
<div id="top_bar_action">
<div class="d-flex" role="group">
<button type="button" class="btn btn-dark flex-grow-1 me-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<button id="btn_liste_pdf" type="button" data-bs-toggle="modal" data-bs-target="#modalFichier" class="btn btn-dark flex-grow-1 me-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<i class="bi bi-files"></i> <span id="liste_pdf_titre_mobile"></span>
</button>
<button type="button" class="btn btn-outline-dark position-relative" style="padding-left: 30px;" onclick="document.getElementById('input_pdf_upload_2').click(); this.blur();"><i class="bi bi-plus-circle position-absolute" style="left: 10px;"></i>Ajouter&nbsp;un&nbsp;PDF</button>
</div>
</div>
<div id="top_bar_action_selection" class="d-none">
<div id="top_bar_action_selection_recap" class="bg-primary text-white text-center rounded-top p-1 position-relative"><span>Aucune</span> page(s)<button id="btn_cancel_select_mobile" type="button" style="text-decoration: none;right: 0px; top:0px;" class="btn bg-white bg-opacity-50 text-primary position-absolute p-0 ps-1 pe-1 mt-1 me-1"><i class="bi bi-x-lg"></i>&nbsp;Annuler</button></div>
<div id="top_bar_action_selection_recap" class="bg-primary text-white text-center rounded-top p-1 position-relative"><button id="btn_liste_pdf_bar" type="button" style="text-decoration: none;left: 0px; top:0px;" class="btn bg-white bg-opacity-50 text-primary position-absolute p-0 ps-1 pe-1 mt-1 ms-1"><i class="bi bi-files"></i>&nbsp;<span></span> PDF</button><span id="top_bar_action_selection_recap_nb_pages">Aucune</span> page(s)<button id="btn_cancel_select_mobile" type="button" style="text-decoration: none;right: 0px; top:0px;" class="btn bg-white bg-opacity-50 text-primary position-absolute p-0 ps-1 pe-1 mt-1 me-1"><i class="bi bi-x-lg"></i>&nbsp;Annuler</button></div>
<div class="btn-group w-100">
<button id="btn_rotate_select_mobile" type="button" class="btn btn-outline-primary" style="border-top-left-radius: 0 !important;"><i class="bi bi-arrow-clockwise"></i> Tourner</button>
<button id="btn_drag_select_mobile" type="button" class="btn btn-outline-primary"><i class="bi bi-arrows-move"></i> Déplacer</button>
@ -130,6 +132,18 @@
</div>
</div>
</div>
<div class="modal fade" id="modalFichier" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Documents PDF</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<span id="is_mobile" class="d-md-none"></span>
@ -138,6 +152,6 @@
<script>
var maxSize = <?php echo $maxSize ?>;
</script>
<script src="/js/organization.js?202210140020"></script>
<script src="/js/organization.js?202210170048"></script>
</body>
</html>