39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { onBeforeUnmount, onMounted, type Ref } from 'vue'
|
||
|
||
/** Cloudflare Turnstile varsayılan genişliği (px) */
|
||
const TURNSTILE_WIDTH = 300
|
||
|
||
/**
|
||
* Turnstile widget'ı sarmalayan elementin genişliğine göre --turnstile-scale CSS değişkenini günceller.
|
||
* Böylece widget form alanı genişliğinde görünür.
|
||
*/
|
||
export function useTurnstileScale(wrapperRef: Ref<HTMLElement | null>) {
|
||
function updateScale() {
|
||
const el = wrapperRef.value
|
||
if (!el) return
|
||
const w = el.offsetWidth
|
||
if (w > 0) {
|
||
const scale = w / TURNSTILE_WIDTH
|
||
el.style.setProperty('--turnstile-scale', String(scale))
|
||
}
|
||
}
|
||
|
||
let observer: ResizeObserver | null = null
|
||
|
||
onMounted(() => {
|
||
updateScale()
|
||
const el = wrapperRef.value
|
||
if (el && typeof ResizeObserver !== 'undefined') {
|
||
observer = new ResizeObserver(updateScale)
|
||
observer.observe(el)
|
||
}
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
if (observer && wrapperRef.value) {
|
||
observer.unobserve(wrapperRef.value)
|
||
observer = null
|
||
}
|
||
})
|
||
}
|