Virtual List

/**
 * 100,000 fixed-height rows - only the rows on screen exist in the page.
 */
export function mount(root) {
    const rows = Array.from({length: 100000}, (_v, i) => ({id: i, name: 'Customer ' + i, total: (i * 7919) % 10000}));

    const big = E.virtualList($(root).find('#demo-big').get(0), {
        items: rows,
        itemHeight: 40,
        keyField: 'id',
        label: 'Customers',
        render: (r) => '<span class="sx-vl-num">#' + r.id + '</span>' +
            '<span class="sx-vl-grow">' + _.escape(r.name) + '</span>' +
            '<span class="sx-vl-amount">£' + (r.total / 100).toFixed(2) + '</span>',
        onItemClick: (r) => E.toast('Clicked ' + r.name, {type: 'info'})
    });

    // The rows on screen, and how many row elements the page holds.
    const show = () => {
        const {start, end} = big.getVisibleRange();
        $(root).find('#demo-big-range').text(start + ' - ' + end);
        $(root).find('#demo-big-dom').text(String($(root).find('.dm-vlist-row').length));
    };
    big.on('scroll', show);
    big.on('render', show);
    show();

    $(root).find('#demo-big-go').on('click', () => {
        big.scrollToIndex(Number($(root).find('#demo-big-index').val()) || 0, {align: 'center'});
    });
    $(root).find('#demo-big-top').on('click', () => big.scrollToIndex(0, {align: 'start'}));

    return () => big.destroy();
}

/* Rows are the list's own .dm-vlist-row elements. */
.sx-vl .dm-vlist-row {
    display: flex;
    align-items: center;
    gap: var(--dm-space-3);
    padding: 0 var(--dm-space-4);
    border-bottom: 1px solid var(--dm-border);
    cursor: pointer;
}

.sx-vl .dm-vlist-row:hover {
    background: var(--dm-hover-bg);
}

/**
 * Rows of different heights - measured rows, a chat that opens at the bottom and grows upwards.
 */
export function mount(root) {
    // A small seeded generator, so every visit shows the same messages.
    let seed = 7;
    const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
    const pick = (list) => list[Math.floor(rand() * list.length)];
    const WORDS = ('lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut ' +
        'labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris').split(' ');
    const sentence = (min, max) => {
        const n = min + Math.floor(rand() * (max - min));
        const text = Array.from({length: n}, () => pick(WORDS)).join(' ');
        return text.charAt(0).toUpperCase() + text.slice(1) + '.';
    };

    const PEOPLE = ['Ada', 'Grace', 'Alan', 'Katherine', 'Tim', 'Margaret'];
    let messageId = 0;
    let minutesAgo = 0;
    const message = () => {
        minutesAgo += 1 + Math.floor(rand() * 9);
        return {
            id: 'm' + (messageId++),
            who: pick(PEOPLE),
            when: D().subtract(minutesAgo, 'minutes').format('D MMM HH:mm'),
            text: sentence(3, rand() < 0.2 ? 90 : 25)
        };
    };
    // Generated newest first, shown oldest first.
    const olderMessages = (n) => Array.from({length: n}, message).reverse();
    const messages = olderMessages(5000);

    const chat = E.virtualList($(root).find('#demo-chat').get(0), {
        items: messages,
        itemHeight: 'auto',
        estimatedItemHeight: 72,
        keyField: 'id',
        rowClass: 'sx-vl-msg',
        label: 'Messages',
        render: (m) => '<span class="sx-vl-who">' + _.escape(m.who) + '</span>' +
            '<span class="sx-vl-when">' + _.escape(m.when) + '</span>' +
            '<p class="sx-vl-text">' + _.escape(m.text) + '</p>',
        onItemClick: (m) => E.toast(m.who + ' at ' + m.when, {type: 'info'})
    });
    const latest = () => chat.scrollToIndex(chat.count - 1, {align: 'end'});
    const showCount = () => $(root).find('#demo-chat-count').text(String(chat.count));
    latest();
    showCount();

    $(root).find('#demo-chat-older').on('click', () => {
        chat.prepend(olderMessages(20));   // the message you are reading stays put
        showCount();
    });
    $(root).find('#demo-chat-bottom').on('click', latest);

    return () => chat.destroy();
}

/* rowClass adds .sx-vl-msg to every row. */
.sx-vl .dm-vlist-row {
    display: flex;
    align-items: center;
    gap: var(--dm-space-3);
    padding: 0 var(--dm-space-4);
    border-bottom: 1px solid var(--dm-border);
    cursor: pointer;
}

.sx-vl .dm-vlist-row:hover {
    background: var(--dm-hover-bg);
}

.sx-vl-msg.dm-vlist-row {
    display: block;
    padding: var(--dm-space-3) var(--dm-space-4);
}

/**
 * Infinite feed - loadMore() pages in posts; page three fails once, and the feed ends after eight.
 */
export function mount(root) {
    let seed = 7;
    const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
    const pick = (list) => list[Math.floor(rand() * list.length)];
    const WORDS = ('lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut ' +
        'labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris').split(' ');
    const sentence = (min, max) => {
        const n = min + Math.floor(rand() * (max - min));
        const text = Array.from({length: n}, () => pick(WORDS)).join(' ');
        return text.charAt(0).toUpperCase() + text.slice(1) + '.';
    };

    // A pretend server: half a second a page.
    const timers = new Set();
    let failedOnce = false;
    let postId = 0;
    const fetchPage = (page) => new Promise((resolve, reject) => {
        const timer = setTimeout(() => {
            timers.delete(timer);
            if (page === 2 && !failedOnce) {
                failedOnce = true;
                reject(new Error('The network went away (on purpose). Press Retry.'));
                return;
            }
            const items = Array.from({length: 20}, () => ({
                id: 'p' + (++postId),
                title: 'Post ' + postId + ': ' + sentence(3, 8),
                body: sentence(10, rand() < 0.3 ? 60 : 24)
            }));
            resolve({items, done: page >= 7});
        }, 500);
        timers.add(timer);
    });

    const feed = E.virtualList($(root).find('#demo-feed').get(0), {
        itemHeight: 'auto',
        estimatedItemHeight: 96,
        keyField: 'id',
        rowClass: 'sx-vl-post',
        label: 'Posts',
        threshold: 300,
        loadMore: ({page}) => fetchPage(page),
        endTemplate: 'You are all caught up.',
        render: (p) => '<p class="sx-vl-post-title">' + _.escape(p.title) + '</p>' +
            '<p class="sx-vl-post-body">' + _.escape(p.body) + '</p>',
        onItemClick: (p) => E.toast('Opened ' + p.title, {type: 'info'})
    });

    return () => {
        timers.forEach(clearTimeout);
        feed.destroy();
    };
}

/* rowClass adds .sx-vl-post to every row. */
.sx-vl .dm-vlist-row {
    display: flex;
    align-items: center;
    gap: var(--dm-space-3);
    padding: 0 var(--dm-space-4);
    border-bottom: 1px solid var(--dm-border);
    cursor: pointer;
}

.sx-vl .dm-vlist-row:hover {
    background: var(--dm-hover-bg);
}

.sx-vl-post.dm-vlist-row {
    display: block;
    padding: var(--dm-space-4);
}

/**
 * Events - one document listener logs the lists on this page (the feed's loading, and clicks on any row).
 */
export function mount(root) {
    const list = $(root).find('#demo-log');
    const EVENTS = 'dm:virtual-list:loadmore dm:virtual-list:loaded dm:virtual-list:end ' +
        'dm:virtual-list:error dm:virtual-list:itemclick';

    const log = (message) => {
        list.find('li').filter((i, el) => /^Nothing yet/.test(el.textContent)).remove();
        list.prepend($('<li>').text(D().format('HH:mm:ss') + ' - ' + message));
        list.find('li').filter((i) => i >= 8).remove();
    };

    // detail = {instance, args}: the list that fired, and the event's arguments.
    const describe = {
        loadmore: ({page}) => 'loading page ' + (page + 1),
        loaded: (items) => 'loaded ' + items.length + ' items',
        end: () => 'nothing more to load',
        error: (err) => 'error: ' + err.message,
        itemclick: (item, index) => 'clicked row ' + index
    };
    const onEvent = (e) => {
        const name = e.type.split(':').pop();
        const label = e.detail.instance.options.label || 'A list';
        log(label + ': ' + describe[name](...e.detail.args));
    };

    $(document).on(EVENTS, onEvent);
    return () => $(document).off(EVENTS, onEvent);
}