4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

slide_sign_ok

Browse Source
This commit is contained in:
Pascal 2024-11-26 16:56:49 +01:00
parent fbd635cec6
commit 44272137c5
2 changed files with 109 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
public/style/signature.css
View File

@ -1224,7 +1224,6 @@ body {
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
@ -1525,7 +1524,7 @@ input[type="file"] {
border-radius: 8px;
max-width: 800px;
width: 90%;
max-height: 90vh;
max-height: 95vh;
overflow-y: auto;
position: relative;
}
@ -1617,4 +1616,46 @@ input[type="file"] {
.sign-confirm-btn:hover {
background-color: #45a049;
}
.signature-slider-container {
margin: 20px 20%;
padding: 10px;
}
.slider-track {
position: relative;
background: #e0e0e0;
height: 40px;
border-radius: 20px;
display: flex;
align-items: center;
overflow: hidden;
}
.slider-handle {
position: absolute;
left: 0;
width: 40px;
height: 40px;
background: #4CAF50;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
touch-action: none;
z-index: 1;
}
.slider-arrow {
color: white;
font-size: 20px;
}
.slider-text {
width: 100%;
text-align: center;
color: #666;
user-select: none;
}

69
src/pages/signature/signature.ts
View File

@ -1593,9 +1593,14 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
<div class="confirmation-section">
<p class="warning-text">En signant ce document, vous confirmez avoir pris connaissance de son contenu.</p>
<button class="sign-confirm-btn" onclick="confirmSignature(${documentId}, ${processId}, ${isCommonDocument})">
Signer le document
</button>
<div class="signature-slider-container">
<div class="slider-track">
<div class="slider-handle" id="signatureSlider" draggable="true">
<span class="slider-arrow">➜</span>
</div>
<span class="slider-text">Glisser pour signer</span>
</div>
</div>
</div>
</div>
</div>
@ -1604,6 +1609,64 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
document.body.insertAdjacentHTML('beforeend', modalHtml);
// Ajouter la logique du slider après création de la modal
const slider = document.getElementById('signatureSlider');
const sliderTrack = slider?.parentElement;
let isDragging = false;
let startX: number;
let sliderLeft: number;
if (slider && sliderTrack) {
slider.addEventListener('mousedown', initDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
// Touch events pour mobile
slider.addEventListener('touchstart', initDrag);
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', stopDrag);
}
function initDrag(e: MouseEvent | TouchEvent) {
isDragging = true;
startX = 'touches' in e ? e.touches[0].clientX : e.clientX;
sliderLeft = slider?.offsetLeft || 0;
}
function drag(e: MouseEvent | TouchEvent) {
if (!isDragging || !slider || !sliderTrack) return;
e.preventDefault();
const rect = sliderTrack.getBoundingClientRect();
const x = 'touches' in e ? e.touches[0].clientX : e.clientX;
// Calculer la position relative à la track
let newLeft = x - rect.left - (slider.offsetWidth / 2);
// Limiter le déplacement
const maxLeft = sliderTrack.offsetWidth - slider.offsetWidth;
newLeft = Math.max(0, Math.min(newLeft, maxLeft));
// Mettre à jour la position
slider.style.left = `${newLeft}px`;
// Si le slider atteint 90% du chemin, déclencher la signature
if (newLeft > maxLeft * 0.9) {
stopDrag(e);
confirmSignature(documentId, processId, isCommonDocument);
}
}
function stopDrag(e: MouseEvent | TouchEvent) {
if (!isDragging || !slider) return;
isDragging = false;
// Réinitialiser la position si pas assez glissé
if (slider.offsetLeft < (sliderTrack?.offsetWidth || 0) * 0.9) {
slider.style.left = '0px';
}
}
} catch (error) {
console.error('Erreur lors de l\'affichage de la modal:', error);
showAlert(error instanceof Error ? error.message : 'Erreur lors de l\'affichage de la modal');