mirror of
https://github.com/we-promise/sure.git
synced 2026-04-08 14:54:49 +00:00
d5d450fc1a
- Move privacy toggle button from dashboard-only to global breadcrumbs bar (desktop) and mobile top nav so it's accessible on every page - Add _privacy_mode_check.html.erb inline script in <head> to prevent flash of unblurred content on first page load (same pattern as dark mode) - Improve Stimulus controller: add iconOn/iconOff targets to toggle between eye/eye-off icons; update aria-pressed on all toggle targets simultaneously - Remove hover-unblur (blur(4px) on hover) from CSS for security; add pointer-events: none to prevent interaction with blurred values - Move i18n key from pages.dashboard scope to layouts.application scope; add privacy_mode translation to all 12 locales (EN, DE, FR, ES, CA, NL, NB, PT-BR, RO, TR, ZH-CN, ZH-TW)
43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
// Privacy Mode Controller
|
|
// Toggles visibility of financial numbers across the page.
|
|
// Elements with class "privacy-sensitive" will be blurred when active.
|
|
// State persists in localStorage so it survives page navigations.
|
|
// A synchronous inline script in <head> pre-applies the class to prevent
|
|
// a flash of unblurred content on first paint (see _privacy_mode_check.html.erb).
|
|
export default class extends Controller {
|
|
static targets = ["toggle", "iconOn", "iconOff"]
|
|
|
|
connect() {
|
|
this.active = localStorage.getItem("privacyMode") === "true"
|
|
this._apply()
|
|
}
|
|
|
|
toggle() {
|
|
this.active = !this.active
|
|
localStorage.setItem("privacyMode", this.active.toString())
|
|
this._apply()
|
|
}
|
|
|
|
_apply() {
|
|
if (this.active) {
|
|
document.documentElement.classList.add("privacy-mode")
|
|
} else {
|
|
document.documentElement.classList.remove("privacy-mode")
|
|
}
|
|
|
|
// Update button state
|
|
this.toggleTargets.forEach((el) => {
|
|
el.setAttribute("aria-pressed", this.active.toString())
|
|
})
|
|
|
|
// Toggle icon visibility: show eye when active (click to reveal), eye-off when inactive
|
|
this.iconOnTargets.forEach((el) => {
|
|
el.classList.toggle("hidden", !this.active)
|
|
})
|
|
this.iconOffTargets.forEach((el) => {
|
|
el.classList.toggle("hidden", this.active)
|
|
})
|
|
}
|
|
} |