@nent/core/dist/cjs/n-content-reveal.cjs.entry.js

Functional elements to add routing, data-binding, dynamic HTML, declarative actions, audio, video, and so much more. Supercharge static HTML files into web apps without script or builds.

/*!
 * NENT 2022
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-1829aebc.js');

const contentRevealCss = ":host{display:block}@keyframes slide-up{0%{transform:translateY(var(--distance))}100%{opacity:1}}@keyframes slide-down{0%{transform:translateY(var(--distance))}100%{opacity:1}}@keyframes slide-right{0%{transform:translateX(var(--distance))}100%{opacity:1}}@keyframes slide-left{0%{transform:translateX(var(--distance))}100%{opacity:1}}.n-reveal{opacity:0;animation-fill-mode:forwards;animation-timing-function:ease;animation-duration:500ms}.slide-up{animation-name:slide-up}.slide-down{animation-name:slide-down}.slide-right{animation-name:slide-right}.slide-left{animation-name:slide-right}";

const ContentReveal = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /**
     * 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 (index.h("div", { ref: el => (this.subject = el), class: 'n-reveal', style: {
        animationDuration: `${this.duration}ms`,
        animationDelay: `${this.delay}ms`,
      } }, index.h("slot", null)));
  }
  disconnectedCallback() {
    this.removeIntersectionObserver();
  }
  get el() { return index.getElement(this); }
};
ContentReveal.style = contentRevealCss;

exports.n_content_reveal = ContentReveal;