YaiTabs Demo v1.0.x

Chunk 4A — Dark / Manual

Open this one yourself to compare with the auto panel next to it.

Chunk 4B — Dark / Auto

Opens the moment this tablist comes into view. That’s the lazy content behavior in a nutshell.

You can still switch manually; auto triggers only fire when the button is actually in view.

YaiViewport - Advanced Viewport Tracking System

High-performance viewport visibility tracking with spatial optimization for elements.

No Observer involved.

Implementing a lazy tab activator, when components become visible. The auto-open functionality on this page is for demonstration only.

// Requires peer-dependency YEH
const { YaiViewport } = window.YaiJS;

const defaultRegisteredEvents= {
    window: [
    { type: 'load',       options: { once: true } },
    { type: 'resize',     throttle: throttle?.resize || 500 },
    { type: 'scroll',      throttle: throttle?.scroll || 250 },
    { type: 'scrollend', throttle: throttle?.scrollend || 250 },
    ]
};

/* Init Viewport Tracker */
const yViewport = new YaiViewport({
    throttle:  {
    esize: 500,
    scroll: 150,
    scrollend: 150
    },
    set: {
        // CSS classes and data attributes for automatic state management
        selector: {
            // Set null to disable specific marker
            pageTop: 'yvp-is-page-top',          // CSS class added to body when at page top
            pageEnd: 'yvp-is-page-end',          // CSS class added to body when at page bottom
            pageScrolled: 'yvp-is-scrolled',         // CSS class added to body when scrolled past threshold

            trackDistance: 'data-yvp-position',      // Attribute for element's viewport position
            isVisibleAttr: 'data-yvp-is-visible',      // Boolean attribute for visibility state
            isVisibleClass: 'yvp-is-visible',        // CSS class when element is visible
            hasBeenVisibleClass: 'yvp-was-visible',    // CSS class added once element has been visible

            isLeavingClass: 'yvp-is-leaving',        // CSS class when element starts leaving viewport
            isLeavingTopClass: 'yvp-is-leaving-top',     // CSS class when element starts leaving from top
            isLeavingBottomClass: 'yvp-is-leaving-bottom', // CSS class when element starts leaving from bottom

            hasLeftClass: 'yvp-has-left',          // CSS class when element left viewport
            hasLeftTopClass: 'yvp-has-left-top',       // CSS class when element left from top
            hasLeftBottomClass: 'yvp-has-left-bottom',   // CSS class when element left from bottom
        }
    },
    // Threshold configuration - pixel offsets for detection
    threshold: {
    pageTop: 0,           // Trigger pageTop when scrollY <= this value
    pageEnd: 50,          // Trigger pageEnd when near bottom (viewport height - this value)
    pageScrolled: 0,        // Trigger pageScrolled when scrollY > this value

    // Global fallbacks
    elementVisible: 0,        // Element considered visible when within viewport + this buffer
    elementHidden: 0,         // Element considered hidden when outside viewport - this buffer
    elementLeaving: 0,        // Element starts leaving when beyond viewport + this buffer
    elementLeft: 0,         // Element completely left when beyond viewport + this buffer

    // Direction-specific thresholds
    elementVisibleTop: null,    // Top visibility buffer
    elementVisibleBottom: null,   // Bottom visibility buffer
    elementLeavingTop: null,    // Top leaving threshold
    elementLeavingBottom: null,   // Bottom leaving threshold
    elementLeftTop: null,       // Top left threshold
    elementLeftBottom: null,    // Bottom left threshold
    },
});

/**
    * Track viewport
    * Use our hook system to react to changes live
    *
    * Set any css selector for elements to "watch" and
    * chain the hooks you want to react.
    */
yViewport.track(`
    body main > .box,
    body main > .section,
    .lazy-tabs-section [data-yai-tabs]
`)
// After load hook, fires when the page is loaded.
.hook('afterLoad', ({ event, trackedElementsSize, trackedElements }) => {
    console.log('Yai Viewport Tracker!', trackedElements);
})
// If any of the selected elements becomed visible. Can be used for all kinds of lazy stuff.
.hook('elementVisibleCheck', ({ element, rect, state, isLeaving }) => {
    const button = element.querySelector(`.yvp-is-visible nav [data-inview-default]`);
    if (button && !button.classList.contains('default-active')) {
    button.classList.add('default-active');
    requestAnimationFrame(() => {
        button.click();
    });
    }
})
// React on special events
.hook('elementLeavingBottom', ({ element, rect, state }) => {
    const button = element.querySelector(`.yvp-was-visible nav [data-inview-default]`);
    if (button && button.classList.contains('active')) {
    requestAnimationFrame(() => {
        button.classList.add('default-active');
        button.click();
    });
    }
})
// Element is out of view, left from bottom
.hook('elementLeftBottom', ({ element, rect, state }) => {
    const button = element.querySelector(`.yvp-was-visible > nav .default-active`);
    if (button) {
    requestAnimationFrame(() => {
        button.classList.remove('default-active');
        if (button.classList.contains('active')) button.click();
    });
    }
});

/**
    * Available hooks, lifecycle events
    */
const callbacks = {
    pageTop: null,        // Called when page reaches top
    pageEnd: null,        // Called when page reaches bottom
    pageScrolled: null,     // Called when page is scrolled past threshold
    afterLoad: null,      // Called once when page finishes loading
    afterResize: null,      // Called after viewport resize
    afterScroll: null,      // Called after scrolling
    elementVisible: null,     // Called when tracked element becomes visible
    elementHidden: null,    // Called when tracked element becomes hidden
    elementVisibleCheck: null,  // Permanent call to check visibility
    elementLeaving: null,     // Called when tracked element starts leaving viewport
    elementLeavingTop: null,  // Called when tracked element starts leaving viewport from top
    elementLeavingBottom: null, // Called when tracked element starts leaving viewport from bottom
    elementLeft: null,      // Called when tracked element completely leaves viewport
    elementLeftTop: null,     // Called when tracked element completely leaves viewport from top
    elementLeftBottom: null,  // Called when tracked element completely leaves viewport from bottom
};