Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Add a color palette in the signing component #2373 (#2448)

Browse Source 
Co-authored-by: Valentine <valentine@pop-os.Dlink>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
This commit is contained in:
Valentine Frolov
2025-07-23 20:15:14 +03:00
committed by GitHub
parent b8b63d7e94
commit ad22d046c3
2 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/chilled-pans-cheer.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/preview": minor
---
Add a color palette in the signing component

13
preview/pages/signatures.html
View File

@@ -13,12 +13,6 @@ signaturePad.fromDataURL("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
{% capture advanced-js %} {% capture advanced-js %}
function randomColor() {
const r = Math.round(Math.random() * 255);
const g = Math.round(Math.random() * 255);
const b = Math.round(Math.random() * 255);
return `rgb(${r},${g},${b})`;
}
function download(dataURL, filename) { function download(dataURL, filename) {
const blob = dataURLToBlob(dataURL); const blob = dataURLToBlob(dataURL);
@@ -49,9 +43,8 @@ function dataURLToBlob(dataURL) {
return new Blob([uInt8Array], { type: contentType }); return new Blob([uInt8Array], { type: contentType });
} }
document.querySelector("#signature-advanced-color").addEventListener("input", function (e) {
document.querySelector("#signature-advanced-color").addEventListener("click", function () { signaturePad.penColor = e.target.value;
signaturePad.penColor = randomColor();
}); });
document.querySelector("#signature-advanced-svg").addEventListener("click", function () { document.querySelector("#signature-advanced-svg").addEventListener("click", function () {
@@ -112,7 +105,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
<div class="mt-4"> <div class="mt-4">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<button href="" class="btn w-100" id="signature-advanced-color">Change color</button> <input href="" type="color" id="signature-advanced-color" class="w-100 form-control form-control-color" />
</div> </div>
<div class="col"> <div class="col">
<button href="" class="btn w-100" id="signature-advanced-svg">Download SVG</button> <button href="" class="btn w-100" id="signature-advanced-svg">Download SVG</button>