fix: remove conflicting css classes, improve controller

This commit is contained in:
Björn Fromme
2025-06-22 12:32:08 +02:00
parent a11dd1c8a0
commit acbc3e0267
2 changed files with 9 additions and 3 deletions
@@ -1,9 +1,10 @@
import { Controller } from '@hotwired/stimulus'
import { useDebounce} from 'stimulus-use'
import { useDebounce } from 'stimulus-use'
export default class extends Controller {
static debounces = [ 'toggle' ]
static classes = [ 'hidden', 'visible' ]
initialize() {
useDebounce(this)
@@ -13,10 +14,13 @@ export default class extends Controller {
window.addEventListener('scroll', () => {
this.toggle()
}, { passive: true })
this.toggle()
}
toggle() {
this.element.classList.toggle('hidden', window.scrollY < window.innerHeight / 3)
let isVisible = window.scrollY >= window.innerHeight / 3
this.element.classList.toggle(this.hiddenClass, false === isVisible)
this.element.classList.toggle(this.visibleClass, isVisible)
}
scroll() {
@@ -177,7 +177,9 @@
aria-label="zum Seitenanfang scrollen"
data-controller="scroll-top"
data-action="scroll-top#scroll"
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary/80 ser:bg-ser-secondary">
data-scroll-top-hidden-class="hidden"
data-scroll-top-visible-class="flex"
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 items-center justify-center rounded bg-ep-secondary/80 ser:bg-ser-secondary">
{ep:icon(icon: 'chevron-up', class: 'w-8 h-8 text-white')}
</button>