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

Hover différencié sur les boutons et double clique qui marche à tout les

coups dans les 2 sens
This commit is contained in:
Vincent LAURENT 2021-10-30 00:36:53 +02:00
parent 4b17604e66
commit 74ff8c8471
2 changed files with 26 additions and 8 deletions

View File

@ -91,7 +91,6 @@ loadingTask.promise.then(function(pdf) {
stateAddLock(false); stateAddLock(false);
var input_selected = document.querySelector('input[name="svg_2_add"]:checked'); var input_selected = document.querySelector('input[name="svg_2_add"]:checked');
if(input_selected) { if(input_selected) {
document.body.style.setProperty('cursor', 'copy'); document.body.style.setProperty('cursor', 'copy');
@ -101,8 +100,14 @@ loadingTask.promise.then(function(pdf) {
document.querySelectorAll('.btn-svg').forEach(function(item) { document.querySelectorAll('.btn-svg').forEach(function(item) {
if(input_selected && item.htmlFor == input_selected.id) { if(input_selected && item.htmlFor == input_selected.id) {
item.style.setProperty('cursor', 'copy'); item.style.setProperty('cursor', 'copy');
if(item.querySelector('.btn-svg-list-suppression')) {
item.querySelector('.btn-svg-list-suppression').classList.add('d-none');
}
} else { } else {
item.style.removeProperty('cursor'); item.style.removeProperty('cursor');
if(item.querySelector('.btn-svg-list-suppression')) {
item.querySelector('.btn-svg-list-suppression').classList.remove('d-none');
}
} }
}); });
@ -143,11 +148,12 @@ loadingTask.promise.then(function(pdf) {
document.getElementById(this.htmlFor).dispatchEvent(new Event("change")); document.getElementById(this.htmlFor).dispatchEvent(new Event("change"));
}); });
svgButton.addEventListener('click', function(event) { svgButton.addEventListener('click', function(event) {
if(event.detail > 1 && document.getElementById(this.htmlFor).checked){ if(event.detail == 1) {
stateAddLock(true); this.dataset.lock = parseInt(addLock*1);
} }
if(event.detail > 1 && !document.getElementById(this.htmlFor).checked){ if(event.detail > 1){
stateAddLock(false); console.log(parseInt(this.dataset.lock*1));
stateAddLock(parseInt(this.dataset.lock*1) != 1);
} }
if(event.detail > 1) { if(event.detail > 1) {
return; return;
@ -159,6 +165,11 @@ loadingTask.promise.then(function(pdf) {
document.getElementById(this.htmlFor).dispatchEvent(new Event("change")); document.getElementById(this.htmlFor).dispatchEvent(new Event("change"));
event.preventDefault(); event.preventDefault();
}); });
svgButton.addEventListener('dblclick', function(event) {
if(parseInt(this.dataset.lock*1) != 1) {
stateAddLock(true);
}
});
var svgImg = document.createElement('img'); var svgImg = document.createElement('img');
svgImg.src = svg.svg; svgImg.src = svg.svg;
svgImg.draggable = false; svgImg.draggable = false;

View File

@ -15,11 +15,18 @@
src: url(/vendor/fonts/Caveat-Regular.ttf) format('truetype'); src: url(/vendor/fonts/Caveat-Regular.ttf) format('truetype');
} }
.offcanvas .list-item-add label:hover, .offcanvas .list-item-add label:active, .offcanvas .list-item-add label.active, .offcanvas .list-item-add .btn-check:active + .btn-outline-secondary, .offcanvas .list-item-add .btn-check:checked + .btn-outline-secondary { .offcanvas .list-item-add label:hover {
background: #e8ebed;
border: 1px solid #505050;
}
.offcanvas .list-item-add label:active, .offcanvas .list-item-add label.active, .offcanvas .list-item-add .btn-check:active + .btn-outline-secondary, .offcanvas .list-item-add .btn-check:checked + .btn-outline-secondary {
background: #c9d1d8; background: #c9d1d8;
border: 1px solid #000; border: 1px solid #000;
box-shadow: 0 .25rem .5rem rgba(0,0,0,.075) !important box-shadow: 0 .25rem .5rem rgba(0,0,0,.075) !important;
} }
</style> </style>
<title>Signature PDF</title> <title>Signature PDF</title>
</head> </head>
@ -55,7 +62,7 @@
</div> </div>
<div class="d-grid gap-2 mb-2 list-item-add"> <div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_text" data-svg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdGV4dGFyZWEtdCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMS41IDIuNUExLjUgMS41IDAgMCAxIDMgMWgxMGExLjUgMS41IDAgMCAxIDEuNSAxLjV2My41NjNhMiAyIDAgMCAxIDAgMy44NzRWMTMuNUExLjUgMS41IDAgMCAxIDEzIDE1SDNhMS41IDEuNSAwIDAgMS0xLjUtMS41VjkuOTM3YTIgMiAwIDAgMSAwLTMuODc0VjIuNXptMSAzLjU2M2EyIDIgMCAwIDEgMCAzLjg3NFYxMy41YS41LjUgMCAwIDAgLjUuNWgxMGEuNS41IDAgMCAwIC41LS41VjkuOTM3YTIgMiAwIDAgMSAwLTMuODc0VjIuNUEuNS41IDAgMCAwIDEzIDJIM2EuNS41IDAgMCAwLS41LjV2My41NjN6TTIgN2ExIDEgMCAxIDAgMCAyIDEgMSAwIDAgMCAwLTJ6bTEyIDBhMSAxIDAgMSAwIDAgMiAxIDEgMCAwIDAgMC0yeiIvPjxwYXRoIGQ9Ik0xMS40MzQgNEg0LjU2Nkw0LjUgNS45OTRoLjM4NmMuMjEtMS4yNTIuNjEyLTEuNDQ2IDIuMTczLTEuNDk1bC4zNDMtLjAxMXY2LjM0M2MwIC41MzctLjExNi42NjUtMS4wNDkuNzQ4VjEyaDMuMjk0di0uNDIxYy0uOTM4LS4wODMtMS4wNTQtLjIxLTEuMDU0LS43NDhWNC40ODhsLjM0OC4wMWMxLjU2LjA1IDEuOTYzLjI0NCAyLjE3MyAxLjQ5NmguMzg2TDExLjQzNCA0eiIvPjwvc3ZnPgo=" name="svg_2_add" autocomplete="off" value="text"> <input type="radio" class="btn-check" id="radio_svg_text" data-svg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdGV4dGFyZWEtdCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMS41IDIuNUExLjUgMS41IDAgMCAxIDMgMWgxMGExLjUgMS41IDAgMCAxIDEuNSAxLjV2My41NjNhMiAyIDAgMCAxIDAgMy44NzRWMTMuNUExLjUgMS41IDAgMCAxIDEzIDE1SDNhMS41IDEuNSAwIDAgMS0xLjUtMS41VjkuOTM3YTIgMiAwIDAgMSAwLTMuODc0VjIuNXptMSAzLjU2M2EyIDIgMCAwIDEgMCAzLjg3NFYxMy41YS41LjUgMCAwIDAgLjUuNWgxMGEuNS41IDAgMCAwIC41LS41VjkuOTM3YTIgMiAwIDAgMSAwLTMuODc0VjIuNUEuNS41IDAgMCAwIDEzIDJIM2EuNS41IDAgMCAwLS41LjV2My41NjN6TTIgN2ExIDEgMCAxIDAgMCAyIDEgMSAwIDAgMCAwLTJ6bTEyIDBhMSAxIDAgMSAwIDAgMiAxIDEgMCAwIDAgMC0yeiIvPjxwYXRoIGQ9Ik0xMS40MzQgNEg0LjU2Nkw0LjUgNS45OTRoLjM4NmMuMjEtMS4yNTIuNjEyLTEuNDQ2IDIuMTczLTEuNDk1bC4zNDMtLjAxMXY2LjM0M2MwIC41MzctLjExNi42NjUtMS4wNDkuNzQ4VjEyaDMuMjk0di0uNDIxYy0uOTM4LS4wODMtMS4wNTQtLjIxLTEuMDU0LS43NDhWNC40ODhsLjM0OC4wMWMxLjU2LjA1IDEuOTYzLjI0NCAyLjE3MyAxLjQ5NmguMzg2TDExLjQzNCA0eiIvPjwvc3ZnPgo=" name="svg_2_add" autocomplete="off" value="text">
<label draggable="true" style="cursor: grab;" class="btn btn-outline-secondary text-black text-start btn-svg" for="radio_svg_text"><i class="bi bi-textarea-t"></i> Texte</label> <label draggable="true" class="btn btn-outline-secondary text-black text-start btn-svg" for="radio_svg_text"><i class="bi bi-textarea-t"></i> Texte</label>
</div> </div>
<div id="svg_list" class="d-grid gap-2 mt-2 mb-2 list-item-add"></div> <div id="svg_list" class="d-grid gap-2 mt-2 mb-2 list-item-add"></div>