No notes defined.
<div class="sds-box -boxInsetSm -boxSunken sds-boxSignature -isDisabled">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse sds-boxSignature__resetBtn">
<span aria-hidden="true" class="sds-icon sds-icon-reset"></span>
<div class="sr-only">Réinitialiser</div>
</button>
<div class="sds-boxSignature__body">
<div class="sds-boxSignature__infos sds-staticStackLg">
<p class="sds-metaColor">Signez ici avec votre doigt ou votre souris</p>
<svg width="241" height="84" viewBox="0 0 241 84" fill="none" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M3.65387 82.8126C15.8042 62.539 29.8869 43.0638 48.1934 27.8817C56.8143 20.7304 66.3494 14.6206 76.5903 10.0729C81.5777 7.86268 86.8197 5.90707 92.1427 4.66889C94.1562 4.19445 96.7482 3.7663 98.646 4.86561C100.914 6.19636 100.578 9.26286 100.347 11.4962C98.9353 24.9425 92.1311 37.1275 85.7088 48.7571C85.0492 49.9605 86.1833 51.9046 87.6644 51.3029C94.4455 48.5719 101.412 46.3502 108.528 44.6607L106.33 42.9828C106.353 44.0127 106.387 45.0541 106.411 46.084C106.434 46.975 107.186 47.8892 108.146 47.8198C109.489 47.7272 110.819 47.6462 112.162 47.5536L110.426 45.8179L110.843 49.0348C111.039 50.5276 112.601 51.326 113.805 50.2614C118.862 45.8179 126.441 47.3222 132.435 48.5141C140.478 50.111 148.474 51.0714 156.678 51.4417C174.105 52.2286 191.567 52.4948 209.005 52.6799C218.911 52.784 228.816 52.8188 238.721 52.784C240.955 52.784 240.955 49.301 238.721 49.3125C220.635 49.382 202.548 49.2084 184.473 48.8034C175.575 48.6067 166.676 48.3868 157.789 48.0165C153.392 47.8314 148.994 47.5768 144.62 47.0792C140.674 46.6279 136.809 45.8526 132.91 45.0773C125.643 43.6424 117.381 42.4968 111.34 47.7966L114.302 49.0232L113.886 45.8063C113.77 44.9269 113.18 44.0011 112.15 44.0705C110.808 44.1631 109.477 44.2441 108.135 44.3367L109.871 46.0725C109.847 45.0426 109.813 44.0011 109.79 42.9712C109.755 41.8141 108.702 41.0388 107.591 41.2933C100.474 42.9828 93.5081 45.193 86.7271 47.9355L88.6827 50.4813C94.7695 39.4534 101.041 28.0437 103.228 15.4884C104.096 10.4895 105.126 3.46544 99.132 1.27838C96.7367 0.398934 94.0289 0.676655 91.5872 1.20895C88.7753 1.81068 85.9981 2.73642 83.2903 3.6853C60.3089 11.6929 40.8453 27.4189 25.293 45.841C16.0587 56.8341 8.02797 68.7761 0.656794 81.0653C-0.500376 82.9862 2.50827 84.7335 3.65387 82.8126Z" fill="#B3C1CF" />
</svg>
</div>
<canvas class="sds-boxSignature__pad" aria-label="Zone de signature" data-js-signature-pad>
<p class="sds-metaColor">Your browser does not support the canvas element.</p>
</canvas>
</div>
</div>
<div class="{{ namespace }}box -boxInsetSm -boxSunken {{ namespace }}boxSignature{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% render "@icon-btn-secondary-inverse", {
icon: "icon-reset",
classes: [namespace+"boxSignature__resetBtn"],
action: "Réinitialiser"
},true %}
<div class="{{ namespace }}boxSignature__body">
<div class="{{ namespace }}boxSignature__infos {{ namespace }}staticStackLg">
<p class="{{ namespace }}metaColor">{{ text }}</p>
<svg width="241" height="84" viewBox="0 0 241 84" fill="none" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M3.65387 82.8126C15.8042 62.539 29.8869 43.0638 48.1934 27.8817C56.8143 20.7304 66.3494 14.6206 76.5903 10.0729C81.5777 7.86268 86.8197 5.90707 92.1427 4.66889C94.1562 4.19445 96.7482 3.7663 98.646 4.86561C100.914 6.19636 100.578 9.26286 100.347 11.4962C98.9353 24.9425 92.1311 37.1275 85.7088 48.7571C85.0492 49.9605 86.1833 51.9046 87.6644 51.3029C94.4455 48.5719 101.412 46.3502 108.528 44.6607L106.33 42.9828C106.353 44.0127 106.387 45.0541 106.411 46.084C106.434 46.975 107.186 47.8892 108.146 47.8198C109.489 47.7272 110.819 47.6462 112.162 47.5536L110.426 45.8179L110.843 49.0348C111.039 50.5276 112.601 51.326 113.805 50.2614C118.862 45.8179 126.441 47.3222 132.435 48.5141C140.478 50.111 148.474 51.0714 156.678 51.4417C174.105 52.2286 191.567 52.4948 209.005 52.6799C218.911 52.784 228.816 52.8188 238.721 52.784C240.955 52.784 240.955 49.301 238.721 49.3125C220.635 49.382 202.548 49.2084 184.473 48.8034C175.575 48.6067 166.676 48.3868 157.789 48.0165C153.392 47.8314 148.994 47.5768 144.62 47.0792C140.674 46.6279 136.809 45.8526 132.91 45.0773C125.643 43.6424 117.381 42.4968 111.34 47.7966L114.302 49.0232L113.886 45.8063C113.77 44.9269 113.18 44.0011 112.15 44.0705C110.808 44.1631 109.477 44.2441 108.135 44.3367L109.871 46.0725C109.847 45.0426 109.813 44.0011 109.79 42.9712C109.755 41.8141 108.702 41.0388 107.591 41.2933C100.474 42.9828 93.5081 45.193 86.7271 47.9355L88.6827 50.4813C94.7695 39.4534 101.041 28.0437 103.228 15.4884C104.096 10.4895 105.126 3.46544 99.132 1.27838C96.7367 0.398934 94.0289 0.676655 91.5872 1.20895C88.7753 1.81068 85.9981 2.73642 83.2903 3.6853C60.3089 11.6929 40.8453 27.4189 25.293 45.841C16.0587 56.8341 8.02797 68.7761 0.656794 81.0653C-0.500376 82.9862 2.50827 84.7335 3.65387 82.8126Z" fill="#B3C1CF"/>
</svg>
</div>
<canvas class="{{ namespace }}boxSignature__pad" aria-label="Zone de signature" data-js-signature-pad>
<p class="{{ namespace }}metaColor">Your browser does not support the canvas element.</p>
</canvas>
</div>
</div>
import SignaturePad from "signature_pad";
export default class BoxSignature {
constructor() {
this._canvases = [];
this._resizeDebounce = new Map();
this._init();
}
_init() {
const nodes = document.querySelectorAll("[data-js-signature-pad]");
nodes.forEach((canvasEl) => {
const signaturePad = new SignaturePad(canvasEl);
const parentEl = canvasEl.closest(".sds-boxSignature");
const infosEl = parentEl.querySelector(".sds-boxSignature__infos");
const resetBtn = parentEl.querySelector(".sds-boxSignature__resetBtn");
// Stocker pour gestion centralisée
this._canvases.push({ canvasEl, signaturePad, parentEl });
// Masquer les infos au premier trait
signaturePad.addEventListener("beginStroke", () => {
infosEl.style.visibility = "hidden";
});
// Reset
resetBtn.addEventListener("click", (e) => {
e.preventDefault();
signaturePad.clear();
infosEl.style.visibility = "visible";
});
// Bouton reset désactivé si parent a -isDisabled
const updateResetBtn = () => {
resetBtn.disabled = parentEl.classList.contains("-isDisabled");
};
updateResetBtn();
new MutationObserver(updateResetBtn).observe(parentEl, {
attributes: true,
attributeFilter: ["class"],
});
});
// Central : ResizeObserver sur tous les parents
this._canvases.forEach(({ parentEl }) => {
const ro = new ResizeObserver(() => this._debouncedResizeAll());
ro.observe(parentEl);
});
// Central : écouter Collapse et Tabs Bootstrap
document.addEventListener("shown.bs.collapse", () => this._debouncedResizeAll());
document.addEventListener("shown.bs.tab", () => this._debouncedResizeAll());
// Resize initial
this._debouncedResizeAll(10);
}
_debouncedResizeAll(wait = 60) {
console.log("test")
if (this._resizeTimer) clearTimeout(this._resizeTimer);
this._resizeTimer = setTimeout(() => {
this._canvases.forEach(({ canvasEl, signaturePad }) =>
this._resizeCanvas(signaturePad, canvasEl)
);
this._resizeTimer = null;
}, wait);
}
_resizeCanvas(signaturePad, canvasEl) {
const rect = canvasEl.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0) {
setTimeout(() => this._resizeCanvas(signaturePad, canvasEl), 100);
return;
}
const ratio = Math.max(window.devicePixelRatio || 1, 1);
const data = signaturePad.toData();
canvasEl.width = rect.width * ratio;
canvasEl.height = rect.height * ratio;
const ctx = canvasEl.getContext("2d");
if (ctx.resetTransform) ctx.resetTransform();
ctx.scale(ratio, ratio);
signaturePad.clear();
if (data.length) signaturePad.fromData(data);
}
destroy() {
this._canvases = [];
if (this._resizeTimer) clearTimeout(this._resizeTimer);
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}boxSignature {
/* Save root element context for easy access if nesting is needed */
$self: &;
--comp-input-signature-border-color: var(--comp-input-signature-background-color);
/* properties of current element + media queries */
position: relative;
display: flex !important;
height: map-deep-get($design-tokens, "comp-input-signature-large-height");
border: map-deep-get($design-tokens, "comp-framed-choice-border-width") solid map-deep-get($design-tokens, "comp-input-signature-background-color");
border-color: var(--comp-input-signature-border-color);
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// boxSignature__body
&__body,
&__infos {
display: flex;
justify-content: center;
align-items: center;
}
&__body {
position: relative;
z-index: z("zero");
width: 100%;
}
// boxSignature__pad
&__pad {
position: absolute;
z-index: z("low");
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// boxSignature__infos
&__infos {
flex-direction: column;
pointer-events: none;
}
// boxSignature__svg
&__svg {
max-width: 100%;
}
// boxSignature__resetBtn
&__resetBtn {
position: absolute;
z-index: z("low");
right: var(--comp-input-signature-large-inset-h-r);
bottom: var(--comp-input-signature-large-inset-v);
}
// boxSignature__modalTriggerText
&__modalTriggerText {
@include custom-prop-fallback("color", "comp-input-signature-text-color");
}
/* modifiers */
&.-isDisabled {
pointer-events: none;
@include custom-prop-fallback-override("comp-input-signature-border-color", "comp-input-signature-disabled-border-color");
@include custom-prop-fallback-override("comp-input-signature-background-color", "comp-input-signature-disabled-background-color");
#{$self}__text {
@include custom-prop-fallback-override("comp-input-signature-placeholder-text-color", "comp-input-signature-disabled-text-color");
}
}
&.-hasError {
@include custom-prop-fallback-override("comp-input-signature-border-color", "comp-input-signature-error-border-color");
@include custom-prop-fallback-override("comp-input-signature-background-color", "comp-input-signature-error-background-color");
#{$self}__text {
@include custom-prop-fallback-override("comp-input-signature-placeholder-text-color", "comp-input-signature-text-color");
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:not(.-isDisabled) {
&:hover {
@include custom-prop-fallback("border-color", "comp-input-signature-hover-border-color");
cursor: crosshair;
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}