fix: remove conflicting css classes, improve controller
This commit is contained in:
+6
-2
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user