svelte-aos 0.0.2 → 0.1.0

package/dist/aos.js

@@ -1,32 +1,4 @@
-// import './styles.css';
-// TODO: Improve this device detection logic
-function detectDeviceType() {
-    if (typeof navigator === 'undefined')
-        return 'desktop';
-    const ua = navigator.userAgent;
-    if (/Mobi|Android/i.test(ua)) {
-        return 'mobile';
-    }
-    else if (/Tablet|iPad/i.test(ua)) {
-        return 'tablet';
-    }
-    else {
-        return 'desktop';
-    }
-}
-const computeRootMargin = (anchorPlacement, offset = 0) => {
-    // simple handling for common placements; expand if needed
-    if (anchorPlacement === 'top-bottom') {
-        return `0px 0px -${offset}px 0px`; // trigger when element top hits viewport bottom - offset
-    }
-    if (anchorPlacement === 'bottom-top') {
-        return `-${offset}px 0px 0px 0px`;
-    }
-    if (anchorPlacement === 'center-center') {
-        return `-50% 0px -50% 0px`;
-    }
-    return `0px 0px 0px 0px`;
-};
+import { computeRootMargin, detectDeviceType } from "./utils.js";
 const defaultOptions = {
     delay: 0,
     easing: 'ease',
@@ -42,173 +14,126 @@ const defaultOptions = {
     // useClassNames: false,
     // disableMutationObserver: false
 };
-function setipObserver(params, node) {
-    if (params?.duration) {
-        node.style.setProperty('--aos-duration', `${params.duration}ms`);
-    }
-    // handle disable option
-    if (typeof params?.disable === 'boolean' && params.disable) {
-        node.classList.add('aos-disabled');
-    }
-    else if (typeof params?.disable === 'string') {
-        const deviceType = detectDeviceType();
-        if (params.disable === deviceType) {
-            node.classList.add('aos-disabled');
+function isValidDistance(value) {
+    const el = document.createElement('div');
+    el.style.width = '';
+    el.style.width = value;
+    return el.style.width !== '';
+}
+class IntersectionObserverManager {
+    observer;
+    options;
+    elements = new Map();
+    constructor(options) {
+        this.options = options;
+        this.observer = new IntersectionObserver(this.handleIntersect.bind(this), {
+            threshold: options.threshold,
+            rootMargin: computeRootMargin(options.anchorPlacement, options.offset)
+        });
+        // handle disable option
+        if (typeof options?.disable === 'boolean' && options.disable) {
+            document.body.classList.add('aos-disabled');
         }
-    }
-    else if (typeof params?.disable === 'function') {
-        if (params.disable()) {
-            node.classList.add('aos-disabled');
+        else if (typeof options?.disable === 'string') {
+            const deviceType = detectDeviceType();
+            if (options.disable === deviceType) {
+                document.body.classList.add('aos-disabled');
+            }
+        }
+        else if (typeof options?.disable === 'function') {
+            if (options.disable()) {
+                document.body.classList.add('aos-disabled');
+            }
         }
     }
-    if (params?.delay) {
-        node.style.setProperty('--aos-delay', `${params.delay}ms`);
-    }
-    const io = new IntersectionObserver((entries) => {
+    handleIntersect(entries) {
         entries.forEach((entry) => {
             if (entry.isIntersecting && entry.intersectionRatio > 0.05) {
-                // handle intersection
-                entry.target.classList.add('aos-animate');
-                if (params?.once) {
-                    // why keep observing if we only want once?
-                    io.unobserve(entry.target);
+                if (this.elements.has(entry.target)) {
+                    entry.target.classList.add('aos-animate');
+                    const elementOptions = this.elements.get(entry.target);
+                    if (elementOptions?.once) {
+                        // if only once why keep observing
+                        this.observer.unobserve(entry.target);
+                    }
+                }
+                else {
+                    // this should never happen if it does don't observe the element
+                    console.warn('No options found for element:', entry.target);
+                    this.observer.unobserve(entry.target);
                 }
             }
             else {
-                const once = entry.target.hasAttribute('data-aos-once') || params?.once;
+                const once = entry.target.hasAttribute('data-aos-once') || this.options.once;
                 if (!once) {
                     entry.target.classList.remove('aos-animate');
                 }
             }
         });
-    }, {
-        threshold: params?.threshold ?? 0.1,
-        rootMargin: computeRootMargin(params?.anchorPlacement ?? 'top-bottom', params?.offset ?? 0)
-    });
-    const observeNode = (el) => {
-        if (!el.classList.contains('aos-animate')) {
-            // set al lthe custom css variable and values here we do not to do that on intersection
-            const dataDuration = el.getAttribute('data-aos-duration') || params?.duration;
-            if (dataDuration) {
-                el.style.setProperty('--aos-duration', `${dataDuration}ms`);
-            }
-            const dataDelay = el.getAttribute('data-aos-delay') || params?.delay;
-            if (dataDelay) {
-                el.style.setProperty('--aos-delay', `${dataDelay}ms`);
-            }
-            const easing = el.getAttribute('data-aos-easing');
-            if (!easing && params?.easing) {
-                el.setAttribute('data-aos-easing', params.easing);
-            }
-            io.observe(el);
+    }
+    observe(element, options) {
+        this.elements.set(element, this.options);
+        if (options.animation) {
+            element.setAttribute('data-aos', options.animation);
         }
-    };
-    // Observe all existing [data-aos] elements
-    node.querySelectorAll('[data-aos]').forEach(observeNode);
-    // Watch for new elements or attribute changes
-    const mo = new MutationObserver((mutations) => {
-        mutations.forEach((m) => {
-            // New nodes
-            m.addedNodes.forEach((n) => {
-                if (n.nodeType === 1) {
-                    const el = n;
-                    if (el.matches('[data-aos]'))
-                        observeNode(el);
-                    el.querySelectorAll('[data-aos]').forEach(observeNode);
-                }
-            });
-            // Attribute changes
-            if (m.type === 'attributes' && m.attributeName === 'data-aos') {
-                const target = m.target;
-                observeNode(target);
-            }
-        });
-    });
-    mo.observe(node, {
-        childList: true,
-        subtree: true,
-        // attributes: true,
-        attributeFilter: ['data-aos']
-    });
-    return { io, mo };
+        if (options.duration) {
+            element.style.setProperty('--aos-duration', `${options.duration}ms`);
+        }
+        if (options.delay) {
+            element.style.setProperty('--aos-delay', `${options.delay}ms`);
+        }
+        if (options.easing) {
+            element.style.setProperty('--aos-easing', options.easing);
+        }
+        if (options.distance && isValidDistance(options.distance)) {
+            element.style.setProperty('--aos-distance', options.distance);
+        }
+        this.observer.observe(element);
+    }
+    unobserve(element) {
+        this.observer.unobserve(element);
+        this.elements.delete(element);
+    }
 }
-/**
- * Create a Svelte attacheemnt that observes elements with `data-aos` and toggles
- * animation classes when they intersect the viewport.
- *
- * The attachement will:
- * - Apply per-element CSS variables (duration/delay) from `data-aos-*` attributes
- *   or from the `params` defaults.
- * - Add the `.aos-animate` class when the element meets the `threshold`/`rootMargin` criteria.
- * - Remove `.aos-animate` on exit unless `once` is true (or element has `data-aos-once="true").
- * - If `once` is true, the element will be unobserved after its first entry.
- * - Applies `params.easing` to elements that do not have `data-aos-easing` set.
- *
- * @param {Object} [params] - Global observer and animation options.
- */
-export function aosObserver(params) {
-    params = { ...defaultOptions, ...params };
-    return function (node) {
-        const { io, mo } = setipObserver(params, node);
-        return () => {
-            io.disconnect();
-            mo.disconnect();
-        };
+let observerManager = null;
+export function initAOS(options = {}) {
+    if (typeof window === 'undefined') {
+        console.warn('AOS can only be initialized in a browser environment.');
+        return;
+    }
+    const requiredOptions = { ...defaultOptions, ...options };
+    if (!observerManager) {
+        observerManager = new IntersectionObserverManager(requiredOptions);
+    }
+    else {
+        console.warn('AOS already initialzed, ');
+    }
+}
+function observe(node, options) {
+    if (observerManager) {
+        observerManager.observe(node, options);
+    }
+    else {
+        console.warn('AOS not initialized. Please call initialize it first.');
+    }
+    return () => observerManager?.unobserve(node);
+}
+export function aosAttachment(options = {
+    animation: 'fade'
+}) {
+    return (node) => {
+        const unobserve = observe(node, options);
+        return unobserve;
     };
 }
-/**
- * This is to use if attachements are not available in your svelte setup.
- * @param node - HTML element to attach AOS behavior to
- *
- * @param params - AOS options
- * @returns
- */
-export function aosAction(node, params) {
-    params = { ...defaultOptions, ...params };
-    const { io, mo } = setipObserver(params, node);
+export function aosAction(node, options = {
+    animation: 'fade'
+}) {
+    const unobserve = observe(node, options);
     return {
-        update: () => {
-            // NOTHING
-        },
+        update: () => { },
         destroy() {
-            console.log('AOS Action destroyed for	 node:', node);
-            io.disconnect();
-            mo.disconnect();
+            unobserve();
         }
     };
 }
-/**
- * Convert a small configuration object into a map of `data-aos-*` attributes.
- *
- * Useful for demos or programmatically attaching attributes to an element (e.g. in Svelte
- * you can spread the returned object with `{...toAosAttributes({...})}`).
- *
- * @param {Object} options - Per-element options
- * @param {number} [options.delay] - Delay in ms
- * @param {number} [options.duration] - Duration in ms
- * @param {EasingType} [options.easing] - Easing name
- * @param {AnimationType} [options.animation] - Animation name
- * @param {boolean} [options.once] - If true, set `data-aos-once` on the element
- * @returns {Record<string,string>} Map of attributes (keys are attribute names, values are strings)
- *
- * @example
- * const attrs = toAosAttributes({ animation: 'fade-up', delay: 150, duration: 400 });
- * // => { 'data-aos': 'fade-up', 'data-aos-delay': '150', 'data-aos-duration': '400' }
- */
-export function toAosAttributes(options) {
-    const attrs = {};
-    if (options.delay !== undefined) {
-        attrs['data-aos-delay'] = options.delay.toString();
-    }
-    if (options.duration !== undefined) {
-        attrs['data-aos-duration'] = options.duration.toString();
-    }
-    if (options.easing !== undefined) {
-        attrs['data-aos-easing'] = options.easing;
-    }
-    if (options.once) {
-        attrs['data-aos-once'] = '';
-    }
-    attrs['data-aos'] = options.animation ?? 'fade';
-    return attrs;
-}

package/dist/aos.ts.old

@@ -0,0 +1,243 @@
+import type {
+	AOSOptions,
+	AnimationType,
+	DisableOption,
+	EasingType,
+	AnchorPlacement
+} from './types.ts';
+import { computeRootMargin, detectDeviceType } from './utils.ts';
+// import './styles.css';
+
+const defaultOptions: Required<AOSOptions> = {
+	delay: 0,
+	easing: 'ease',
+	duration: 600,
+	disable: 'mobile',
+	once: false,
+	anchorPlacement: 'top-bottom',
+	offset: 120,
+	threshold: 0.1
+
+	// TODO: implement these later
+	// animatedClassName: 'aos-animate',
+	// initClassName?: 'aos-init',
+	// useClassNames: false,
+	// disableMutationObserver: false
+};
+
+function initializeIntersectionObserver(params: AOSOptions, node: HTMLElement) {
+	if (params?.duration) {
+		node.style.setProperty('--aos-duration', `${params.duration}ms`);
+	}
+
+	// handle disable option
+	if (typeof params?.disable === 'boolean' && params.disable) {
+		node.classList.add('aos-disabled');
+	} else if (typeof params?.disable === 'string') {
+		const deviceType = detectDeviceType();
+		if (params.disable === deviceType) {
+			node.classList.add('aos-disabled');
+		}
+	} else if (typeof params?.disable === 'function') {
+		if (params.disable()) {
+			node.classList.add('aos-disabled');
+		}
+	}
+
+	if (params?.delay) {
+		node.style.setProperty('--aos-delay', `${params.delay}ms`);
+	}
+
+	const io = new IntersectionObserver(
+		(entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting && entry.intersectionRatio > 0.05) {
+					// handle intersection
+					entry.target.classList.add('aos-animate');
+					if (params?.once) {
+						// why keep observing if we only want once?
+						io.unobserve(entry.target);
+					}
+				} else {
+					const once = entry.target.hasAttribute('data-aos-once') || params?.once;
+					if (!once) {
+						entry.target.classList.remove('aos-animate');
+					}
+				}
+			});
+		},
+		{
+			threshold: params?.threshold ?? 0.1,
+			rootMargin: computeRootMargin(params?.anchorPlacement ?? 'top-bottom', params?.offset ?? 0)
+		}
+	);
+
+	const observeNode = (el: HTMLElement) => {
+		if (!el.classList.contains('aos-animate')) {
+			// set al lthe custom css variable and values here we do not to do that on intersection
+			const dataDuration = el.getAttribute('data-aos-duration') || params?.duration;
+			if (dataDuration) {
+				el.style.setProperty('--aos-duration', `${dataDuration}ms`);
+			}
+			const dataDelay = el.getAttribute('data-aos-delay') || params?.delay;
+			if (dataDelay) {
+				el.style.setProperty('--aos-delay', `${dataDelay}ms`);
+			}
+
+			const easing = el.getAttribute('data-aos-easing');
+
+			if (!easing && params?.easing) {
+				el.setAttribute('data-aos-easing', params.easing);
+			}
+
+			io.observe(el);
+		}
+	};
+
+	// Observe all existing [data-aos] elements
+	node.querySelectorAll<HTMLElement>('[data-aos]').forEach(observeNode);
+
+	// Watch for new elements or attribute changes
+	const mo = new MutationObserver((mutations) => {
+		mutations.forEach((m) => {
+			// New nodes
+			m.addedNodes.forEach((n) => {
+				if (n.nodeType === 1) {
+					const el = n as HTMLElement;
+					if (el.matches('[data-aos]')) observeNode(el);
+					el.querySelectorAll<HTMLElement>('[data-aos]').forEach(observeNode);
+				}
+			});
+
+			// Attribute changes
+			if (m.type === 'attributes' && m.attributeName === 'data-aos') {
+				const target = m.target as HTMLElement;
+				observeNode(target);
+			}
+		});
+	});
+
+	mo.observe(node, {
+		childList: true,
+		subtree: true,
+		// attributes: true,
+		attributeFilter: ['data-aos']
+	});
+
+	return { io, mo };
+}
+
+/**
+ * Create a Svelte attachment that observes elements with `data-aos` and toggles
+ * animation classes when they intersect the viewport.
+ *
+ * The attachment will:
+ * - Apply per-element CSS variables (duration/delay) from `data-aos-*` attributes
+ *   or from the `params` defaults.
+ * - Add the `.aos-animate` class when the element meets the `threshold`/`rootMargin` criteria.
+ * - Remove `.aos-animate` on exit unless `once` is true (or element has `data-aos-once="true").
+ * - If `once` is true, the element will be unobserved after its first entry.
+ * - Applies `params.easing` to elements that do not have `data-aos-easing` set.
+ *
+ * @param {Object} [params] - Global observer and animation options.
+ */
+export function aosObserver(params?: {
+	duration?: number;
+	threshold?: number;
+	delay?: number;
+	once?: boolean;
+	disable?: DisableOption;
+	anchorPlacement?: AnchorPlacement;
+	offset?: number;
+	easing?: EasingType;
+}) {
+	params = { ...defaultOptions, ...params };
+
+	return function (node: HTMLElement) {
+		const { io, mo } = initializeIntersectionObserver(params!, node);
+		return () => {
+			io.disconnect();
+			mo.disconnect();
+		};
+	};
+}
+
+/**
+ * This is to use if attachements are not available in your svelte setup.
+ * @param node - HTML element to attach AOS behavior to
+ *
+ * @param params - AOS options
+ * @returns
+ */
+export function aosAction(
+	node: HTMLElement,
+	params?: {
+		duration?: number;
+		threshold?: number;
+		delay?: number;
+		once?: boolean;
+		disable?: DisableOption;
+		anchorPlacement?: AnchorPlacement;
+		offset?: number;
+		easing?: EasingType;
+	}
+) {
+	params = { ...defaultOptions, ...params };
+
+	const { io, mo } = initializeIntersectionObserver(params!, node);
+
+	return {
+		update: () => {
+			// NOTHING
+		},
+		destroy() {
+			io.disconnect();
+			mo.disconnect();
+		}
+	};
+}
+
+/**
+ * Convert a small configuration object into a map of `data-aos-*` attributes.
+ *
+ * Useful for demos or programmatically attaching attributes to an element (e.g. in Svelte
+ * you can spread the returned object with `{...toAosAttributes({...})}`).
+ *
+ * @param {Object} options - Per-element options
+ * @param {number} [options.delay] - Delay in ms
+ * @param {number} [options.duration] - Duration in ms
+ * @param {EasingType} [options.easing] - Easing name
+ * @param {AnimationType} [options.animation] - Animation name
+ * @param {boolean} [options.once] - If true, set `data-aos-once` on the element
+ * @returns {Record<string,string>} Map of attributes (keys are attribute names, values are strings)
+ *
+ * @example
+ * const attrs = toAosAttributes({ animation: 'fade-up', delay: 150, duration: 400 });
+ * // => { 'data-aos': 'fade-up', 'data-aos-delay': '150', 'data-aos-duration': '400' }
+ */
+export function toAosAttributes(options: {
+	delay?: number;
+	duration?: number;
+	easing?: EasingType;
+	animation?: AnimationType;
+	once?: boolean;
+}): Record<string, string> {
+	const attrs: Record<string, string> = {};
+	if (options.delay !== undefined) {
+		attrs['data-aos-delay'] = options.delay.toString();
+	}
+	if (options.duration !== undefined) {
+		attrs['data-aos-duration'] = options.duration.toString();
+	}
+	if (options.easing !== undefined) {
+		attrs['data-aos-easing'] = options.easing;
+	}
+
+	if (options.once) {
+		attrs['data-aos-once'] = '';
+	}
+
+	attrs['data-aos'] = options.animation ?? 'fade';
+
+	return attrs;
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export { aosObserver, aosAction, toAosAttributes } from './aos.ts';
+export { default as AOS } from './AOS.svelte';
+export { aosAttachment, aosAction } from './aos.ts';
 export type { AOSOptions, AnimationType, EasingType } from './types.ts';

package/dist/index.js

@@ -1,2 +1,2 @@
-// Reexport your entry components here
-export { aosObserver, aosAction, toAosAttributes } from "./aos.js";
+export { default as AOS } from './AOS.svelte';
+export { aosAttachment, aosAction } from "./aos.js";

package/dist/styles/base.css

@@ -6,36 +6,35 @@
 
 @media screen {
 	html:not(.no-js) {
-		:not(.aos-disabled) {
-			/* CSS Custom Properties (defaults) */
-			--aos-duration: 600ms;
-			--aos-delay: 50ms;
-			--aos-distance: 100px;
+		/* CSS Custom Properties (defaults) */
+		--aos-duration: 600ms;
+		--aos-delay: 50ms;
+		--aos-distance: 100px;
 
-			/* Base transition for all [data-aos] elements */
-			[data-aos] {
-				transition-duration: var(--aos-duration);
-				transition-delay: var(--aos-delay);
-				transition-timing-function: ease;
-			}
+		/* Base transition for all [data-aos] elements */
+		[data-aos] {
+			transition-duration: var(--aos-duration);
+			transition-delay: var(--aos-delay);
+			transition-timing-function: ease;
+		}
 
-			/* Default animated state */
-			[data-aos].aos-animate {
-				transform: translate3d(0, 0, 0) scale(1) rotate(0);
-			}
+		/* Default animated state */
+		[data-aos].aos-animate {
+			transform: translate3d(0, 0, 0) scale(1) rotate(0);
+		}
 
-			/* Reduced motion support */
-			@media (prefers-reduced-motion: reduce) {
-				[data-aos] {
-					opacity: 1 !important;
-					transform: none !important;
-					transition: none !important;
-				}
+		/* Reduced motion support */
+		@media (prefers-reduced-motion: reduce) {
+			[data-aos] {
+				opacity: 1 !important;
+				transform: none !important;
+				transition: none !important;
 			}
+		}
 
-			/* Disabled state */
-			[data-aos-disabled] [data-aos],
-			[data-aos][data-aos-disabled] {
+		/* this is used for the global disable option */
+		.aos-disabled {
+			* {
 				opacity: 1 !important;
 				transform: none !important;
 				transition: none !important;