diff --git a/app/javascript/controllers/sticky_top_controller.ts b/app/javascript/controllers/sticky_top_controller.ts new file mode 100644 index 000000000..c8490cea0 --- /dev/null +++ b/app/javascript/controllers/sticky_top_controller.ts @@ -0,0 +1,43 @@ +import { ApplicationController } from './application_controller'; + +export class StickyTopController extends ApplicationController { + // Ajusts top of sticky top components when there is a sticky header. + + connect(): void { + const header = document.getElementById('sticky-header'); + + if (!header) { + return; + } + + this.adjustTop(header); + + window.addEventListener('resize', () => this.adjustTop(header)); + + this.listenHeaderMutations(header); + } + + private listenHeaderMutations(header: HTMLElement) { + const config = { childList: true, subtree: true }; + + const callback: MutationCallback = (mutationsList) => { + for (const mutation of mutationsList) { + if (mutation.type === 'childList') { + this.adjustTop(header); + break; + } + } + }; + + const observer = new MutationObserver(callback); + observer.observe(header, config); + } + + private adjustTop(header: HTMLElement) { + const headerHeight = header.clientHeight; + + if (headerHeight > 0) { + (this.element as HTMLElement).style.top = `${headerHeight + 8}px`; + } + } +} diff --git a/app/views/administrateurs/attestation_template_v2s/edit.html.haml b/app/views/administrateurs/attestation_template_v2s/edit.html.haml index 43eb99c8e..7c995e6b2 100644 --- a/app/views/administrateurs/attestation_template_v2s/edit.html.haml +++ b/app/views/administrateurs/attestation_template_v2s/edit.html.haml @@ -120,7 +120,7 @@ - c.with_hint { "Exemple: 20 avenue de Ségur, 75007 Paris" } #preview-column.fr-col-12.fr-col-lg-5.fr-background-alt--blue-france - .sticky--top.fr-px-1w + .sticky--top.fr-px-1w{ data: { controller: "sticky-top" } } .flex.justify-between.align-center %h2.fr-h4 Aperçu %p= link_to 'Prévisualiser en taille réelle', admin_procedure_attestation_template_v2_path(@procedure, format: :pdf), class: 'fr-link', target: '_blank', rel: 'noopener'