1 line
9.5 KiB
Plaintext
1 line
9.5 KiB
Plaintext
|
{"version":3,"file":"index.mjs","sources":["../../src/animateonscroll/BaseAnimateOnScroll.js","../../src/animateonscroll/AnimateOnScroll.js"],"sourcesContent":["import BaseDirective from '@primevue/core/basedirective';\nimport AnimateOnScrollStyle from 'primevue/animateonscroll/style';\n\nconst BaseAnimateOnScroll = BaseDirective.extend({\n style: AnimateOnScrollStyle\n});\n\nexport default BaseAnimateOnScroll;\n","import { addClass, removeClass } from '@primeuix/utils/dom';\nimport BaseAnimateOnScroll from './BaseAnimateOnScroll';\n\nconst AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {\n created() {\n this.$value = this.$value || {};\n this.$el.style.opacity = this.$value.enterClass ? '0' : '';\n },\n mounted() {\n this.$el.setAttribute('data-pd-animateonscroll', true);\n\n this.bindIntersectionObserver();\n },\n unmounted() {\n this.unbindAnimationEvents();\n this.unbindIntersectionObserver();\n },\n observer: undefined,\n resetObserver: undefined,\n isObserverActive: false,\n animationState: undefined,\n animationEndListener: undefined,\n methods: {\n bindAnimationEvents() {\n if (!this.animationEndListener) {\n this.animationEndListener = () => {\n removeClass(this.$el, [this.$value.enterClass, this.$value.leaveClass]);\n !this.$modifiers.once && this.resetObserver.observe(this.$el);\n this.unbindAnimationEvents();\n };\n\n this.$el.addEventListener('animationend', this.animationEndListener);\n }\n },\n bindIntersectionObserver() {\n const { root, rootMargin, threshold = 0.5 } = this.$value;\n const options = { root, rootMargin, threshold };\n\n // States\n this.observer = new IntersectionObserver(([entry]) => {\n if (this.isObserverActive) {\n if (entry.boundingClientRect.top > 0) {\n entry.isIntersecting ? this.enter() : this.leave();\n }\n } else if (entry.isIntersecting) {\n this.enter();\n }\n\n this.isObserverActive = true;\n }, options);\n\n setTimeout(() => this.observer.observe(this.$el), 0);\n\n // Reset\n this.resetObserver = new IntersectionObserver(\n ([entry]) => {\n if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) {\n this.$el.style.opacity = this.$value.enterClass ? '0' : '';\n removeClass(this.$el, [this.$value.enterClass, this.$value.leaveClass]);\n\n this.resetObserver.unobserve(this.$el);\n }\n\n this.animationState = undefined;\n },\n { ...options, threshold: 0 }\n );\n },\n enter() {\n if (this.animationState !== 'enter' && this.$value.enterClass) {\n this.$el.style.opacity = '';\n removeClass(this.$el, this.$value.leaveClass);\n addClass(this.$el, this.$value.enterClass);\n\n this.$modifiers.once && this.unbindIntersectionObserver(this.$el);\n\n this.bindAnimationEvents();\n this.animationState = 'enter';\n }\n },\n leave() {\n if (this.animationState !== 'leave' && this.$value.leaveClass) {\n this.$el.style.opacity = this.$value.enterClass ? '0' : '';\n removeClass(this.$el, this.$value.enterClass);\n addClass(this.$el, this.$value.leaveClass);\n\n this.bindAnimationEvents();\n this.animationState = 'leave';\n }\n },\n unbindAnimationEvents() {\n if (this.animationEndListener) {\n this.$el.removeEventListener('animationend', this.animationEndListener);\n
|