@nent/core
Version:
170 lines (169 loc) • 4.56 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, Element, h, Prop } from '@stencil/core';
/**
* Use this element to add a little flair to any HTML.
* It creates an entrance animation using the configured
* attributes to add pop to any page.
*
* @system content
*/
export class ContentReveal {
constructor() {
/**
* Direction the element moves when animating in
*/
this.direction = 'up';
/**
* How long to delay the animation (ms)
*/
this.delay = 0;
/**
* How long the animation runs (ms)
*/
this.duration = 500;
/**
* How far the element moves in the animation (% of element width/height)
*/
this.animationDistance = '30%';
/**
* How much of the element must be visible before it animates (% of element height)
*/
this.triggerDistance = '33%';
}
componentDidLoad() {
this.addIntersectionObserver();
const animationDistance = this.direction === 'right' || this.direction === 'down'
? '-' + this.animationDistance
: this.animationDistance;
this.subject.style.setProperty('--distance', animationDistance);
}
/* istanbul ignore next */
addIntersectionObserver() {
this.io = new window.IntersectionObserver((data) => {
if (data[0].isIntersecting) {
this.subject.classList.add(`slide-${this.direction}`);
this.removeIntersectionObserver();
}
}, {
threshold: parseFloat(this.triggerDistance) / 100,
});
this.io.observe(this.subject);
}
removeIntersectionObserver() {
var _a;
(_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
}
render() {
return (h("div", { ref: el => (this.subject = el), class: 'n-reveal', style: {
animationDuration: `${this.duration}ms`,
animationDelay: `${this.delay}ms`,
} },
h("slot", null)));
}
disconnectedCallback() {
this.removeIntersectionObserver();
}
static get is() { return "n-content-reveal"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["content-reveal.css"]
}; }
static get styleUrls() { return {
"$": ["content-reveal.css"]
}; }
static get properties() { return {
"direction": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'up' | 'down' | 'right' | 'left'",
"resolved": "\"down\" | \"left\" | \"right\" | \"up\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Direction the element moves when animating in"
},
"attribute": "direction",
"reflect": false,
"defaultValue": "'up'"
},
"delay": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "How long to delay the animation (ms)"
},
"attribute": "delay",
"reflect": false,
"defaultValue": "0"
},
"duration": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "How long the animation runs (ms)"
},
"attribute": "duration",
"reflect": false,
"defaultValue": "500"
},
"animationDistance": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "How far the element moves in the animation (% of element width/height)"
},
"attribute": "animation-distance",
"reflect": false,
"defaultValue": "'30%'"
},
"triggerDistance": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "How much of the element must be visible before it animates (% of element height)"
},
"attribute": "trigger-distance",
"reflect": false,
"defaultValue": "'33%'"
}
}; }
static get elementRef() { return "el"; }
}