Skip to content

Commit

Permalink
feat(lib): aos - adding anchor option (#219)
Browse files Browse the repository at this point in the history
  • Loading branch information
@LouisMazel
LouisMazel committed Mar 15, 2022
1 parent 3849e05 commit b1c8b02
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 31 deletions.
23 changes: 13 additions & 10 deletions packages/docs/docs/plugins/aos.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,23 @@ This plugin use the browser native [Intersection Observer API](https://developer

<br />

<MazCard overflow-hidden data-maz-aos="scale-out" >
<MazCard overflow-hidden data-maz-aos="scale-out" id="parentCard">
<MazAvatar
size="2rem"
data-maz-aos-delay="300"
data-maz-aos="scale-in"
size="2rem"
src="https://pbs.twimg.com/profile_images/598181608198381570/-cFG43y2_400x400.jpg"
/>
<h1
data-maz-aos="slide-right"
data-maz-aos-delay="600"
data-maz-aos-anchor="#parentCard"
style="margin-top: 12px; margin-bottom: 12px;"
>
Gérard Depardieu
</h1>
<p
data-maz-aos="fade-right"
data-maz-aos="zoom-in-left"
data-maz-aos-delay="900"
style="margin-top: 0"
class="maz-text-muted"
Expand All @@ -46,22 +47,23 @@ This plugin use the browser native [Intersection Observer API](https://developer

```vue
<template>
<MazCard overflow-hidden data-maz-aos="scale-out" >
<MazCard overflow-hidden data-maz-aos="scale-out" id="parentCard">
<MazAvatar
size="2rem"
data-maz-aos-delay="300"
data-maz-aos="scale-in"
size="2rem"
src="https://pbs.twimg.com/profile_images/598181608198381570/-cFG43y2_400x400.jpg"
/>
<h1
data-maz-aos="slide-right"
data-maz-aos-delay="600"
data-maz-aos-anchor="#parentCard"
style="margin-top: 12px; margin-bottom: 12px;"
>
Gérard Depardieu
</h1>
<p
data-maz-aos="fade-right"
data-maz-aos="zoom-in-left"
data-maz-aos-delay="900"
style="margin-top: 0"
class="maz-text-muted"
Expand All @@ -85,10 +87,11 @@ This plugin use the browser native [Intersection Observer API](https://developer
| Attribute | Description | Example value | Default value |
|---------------------------|-------------|---------------|---------|
| data-maz-aos | animation name | fade-up | - |
| data-aos-duration | *Duration of animation (ms) | 50 to 3000 | 400 |
| data-aos-easing | Choose timing function to ease elements in different ways | ease-in-sine | linear |
| data-aos-delay | Delay animation (ms) | 50 to 3000 | 0 |
| data-aos-once | Choose wheter animation should fire once, or every time you scroll up/down to element | true | false |
| data-maz-aos-duration | *Duration of animation (ms) | 50 to 3000 | 400 |
| data-maz-aos-easing | Choose timing function to ease elements in different ways | ease-in-sine | linear |
| data-maz-aos-delay | Delay animation (ms) | 50 to 3000 | 0 |
| data-maz-aos-anchor | Anchor element, whose offset will be counted to trigger animation instead of actual elements offset. ONLY with ID attribute | #selector | undefined |
| data-maz-aos-once | Choose wheter animation should fire once, or every time you scroll up/down to element | true | false |

## Animations

Expand Down
85 changes: 64 additions & 21 deletions packages/lib/package/plugins/aos/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,36 +61,79 @@ class AosHandler {
...this.options.observer,
})

document.querySelectorAll('[data-maz-aos]').forEach((elem) => {
observer.observe(elem)
document.querySelectorAll('[data-maz-aos]').forEach((element) => {
const anchorAttr = element.getAttribute('data-maz-aos-anchor')
if (anchorAttr) {
const anchorElement = document.querySelector(anchorAttr)
if (anchorElement) {
anchorElement.setAttribute('data-maz-aos-children', 'true')
observer.observe(anchorElement)
} else {
// eslint-disable-next-line no-console
console.warn(
`[maz-ui](aos) no element found with selector "${anchorAttr}"`,
)
}
} else {
observer.observe(element)
}
})
}

handleIntersect: IntersectionObserverCallback = (entries, observer) => {
entries.forEach((entry) => {
const target = entry.target as HTMLElement
const once = target.getAttribute('data-maz-aos-once')
const useOnce: boolean =
typeof once === 'string' ? once === 'true' : this.options.animation.once

if (entry.intersectionRatio > this.options.observer.threshold) {
const duration = target.getAttribute('data-maz-aos-duration')

if (!duration) {
target.style.transitionDuration = `${this.options.animation.duration}ms`
setTimeout(() => {
target.style.transitionDuration = '0'
}, 1000)
}
const hasChildren =
target.getAttribute('data-maz-aos-children') === 'true'
const animateElements: HTMLElement[] = entry.target.getAttribute(
'data-maz-aos',
)
? [entry.target as HTMLElement]
: []

if (hasChildren) {
const children = Array.from(
document.querySelectorAll('[data-maz-aos-anchor]'),
).map((child) =>
child.getAttribute('data-maz-aos-anchor') === `#${entry.target.id}`
? child
: undefined,
)

children.forEach((child) => {
if (child) {
animateElements.push(child as HTMLElement)
}
})
}

animateElements.forEach((element) => {
const once = element.getAttribute('data-maz-aos-once')

target.classList.add('maz-aos-animate')
const useOnce: boolean =
typeof once === 'string'
? once === 'true'
: this.options.animation.once

if (useOnce) {
observer.unobserve(target)
if (entry.intersectionRatio > this.options.observer.threshold) {
const duration = element.getAttribute('data-maz-aos-duration')

if (!duration) {
element.style.transitionDuration = `${this.options.animation.duration}ms`
setTimeout(() => {
element.style.transitionDuration = '0'
}, 1000)
}

element.classList.add('maz-aos-animate')

if (useOnce) {
observer.unobserve(element)
}
} else {
element.classList.remove('maz-aos-animate')
}
} else {
target.classList.remove('maz-aos-animate')
}
})
})
}
}
Expand Down

0 comments on commit b1c8b02

Please sign in to comment.