v1.0.1

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## v1.0.1
+
+- Added the `InterObs` island for abstracting the native Intersection Observer
+  js functionality.
+- Added the `effects.transparent` global style for animations that start from
+  `opacity: 0;`.
+
 ## v1.0.0
 
-- This updates marks the beginning of Lunchbox as a fully released product. Everything is official from now on.
+- This updates marks the beginning of Lunchbox as a fully released product.
+  Everything is official from now on.

islands/InterObs/index.tsx

@@ -0,0 +1,60 @@
+//   ___     _            ___  _
+//  |_ _|_ _| |_ ___ _ _ / _ \| |__ ___
+//   | || ' \  _/ -_) '_| (_) | '_ (_-<
+//  |___|_||_\__\___|_|  \___/|_.__/__/
+//
+////////////////////////////////////////////////////////////////////////////////////////////////////////
+/**
+ * ### InterObs
+ * *Organism*
+ *
+ * This module contains the render function for the `<InterObs />` island.
+ *
+ * @module
+ */
+import { useEffect, useRef, useState } from 'preact/hooks';
+import setup, { iInterObs } from './setup.ts';
+import { cn } from '../../src/utils.ts';
+import { effects } from '../../src/styles.ts';
+
+export default function (props: Partial<iInterObs>) {
+  const { animation, isIntersectingCb, observerOptions, ...p } = setup(props);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observerCallback: IntersectionObserverCallback = (
+      entries,
+      observer,
+    ) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          isIntersectingCb();
+          observer.unobserve(entry.target);
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(
+      observerCallback,
+      observerOptions,
+    );
+    observer.observe(ref.current);
+
+    return () => {
+      if (ref.current) observer.unobserve(ref.current);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      {...p}
+      class={cn(p.class, isVisible ? animation : effects.transparent)}
+    />
+  );
+}

islands/InterObs/setup.ts

@@ -0,0 +1,44 @@
+//   ___     _            ___  _
+//  |_ _|_ _| |_ ___ _ _ / _ \| |__ ___
+//   | || ' \  _/ -_) '_| (_) | '_ (_-<
+//  |___|_||_\__\___|_|  \___/|_.__/__/
+//
+////////////////////////////////////////////////////////////////////////////////////////////////////////
+/**
+ * This module contains the prop type, default values, and styles for the `<InterObs />` island.
+ *
+ * @module
+ */
+import { apDef, o } from '../../src/utils.ts';
+import { iComponent } from '../../src/types.ts';
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/** Properties of the `<InterObs />` island. */
+export type iInterObs = iComponent<HTMLDivElement> & {
+  /** Class that makes a CSS animation. */
+  animation: string;
+  /** Function that will run whenever the island is intersecting. */
+  isIntersectingCb: () => void;
+  observerOptions: IntersectionObserverInit;
+};
+
+/** These are the default values of the `<Menu />` island's props. */
+const defaults: iInterObs = {
+  animation: '',
+  isIntersectingCb: () => null,
+  observerOptions: {
+    root: null,
+    rootMargin: '0px',
+    threshold: 1,
+  },
+};
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/** Setup function of the `<Menu />` island. */
+export default (props: Partial<iInterObs>) => {
+  const p = apDef<iInterObs>(defaults, props);
+
+  p.class = o('interObs', { ...p });
+
+  return p;
+};

src/styles.ts

@@ -5,6 +5,10 @@ export const effects = {
   blur: css`
     filter: blur(var(--s-three-quarters));
   `,
+
+  transparent: css`
+    opacity: 0;
+  `,
 };
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -