@behold/widget 0.5.57 → 0.5.59

package/dist/Grid-2Aag90e0.js

@@ -1,338 +0,0 @@
-import { c as createElement, a as setClasses, f as forceLayout, s as setCssVars } from './index-R4lEDZFo.js';
-import { B as BaseWidget, I as ImagePost, V as VideoPost, A as AlbumPost, b as baseGridStyles, g as getMedianHSL } from './base-GZO73SkY.js';
-
-var css_248z = ".post--placeholder{background-color:#dedede;height:0;padding-bottom:calc(100%/var(--post-aspect-ratio))}";
-var styles = css_248z;
-
-/*
- *   Grid
- */
-class Grid extends BaseWidget {
-    label = 'Grid';
-    // Provided
-    widgetSettings;
-    feedMetadata;
-    posts;
-    previewLoadingColors = null;
-    // Internal
-    containerEl;
-    postEls;
-    popoverGalleryEl;
-    appliedBreakpoint;
-    medianPaletteHSL;
-    constructor() {
-        super();
-        // Register child components
-        ImagePost.register();
-        VideoPost.register();
-        AlbumPost.register();
-        // Bind event handlers
-        this._handlePostClick = this._handlePostClick.bind(this);
-        // Listen to focus
-        this.addEventListener('post-focus-next', this._handleFocusNextPost);
-        this.addEventListener('post-focus-previous', this._handleFocusPreviousPost);
-        // Define which props will trigger _handlePropChange
-        this.onPropChange(this._handlePropChange, ['widgetSettings', 'feedMetadata', 'posts', 'previewLoadingColors'], ['widgetSettings', 'feedMetadata', 'posts'], this.setup);
-        // Connect
-        this.onConnect(() => {
-            this.containerEl = createElement({
-                type: 'figure',
-                classes: 'posts',
-            });
-            this.renderWidget(this.containerEl, [baseGridStyles, styles]);
-            // A11y stuff
-            this.setAttribute('tabindex', '0');
-            this.setAttribute('aria-label', 'Gallery of Instagram posts. Shift + arrow keys to navigate');
-            // listen to resize
-            this.onResize(this, this, this._handleResize);
-        });
-    }
-    /*
-     *   Run initial setup that requires data to be fully loaded
-     */
-    setup() {
-        // Calculate medianPaletteHSL
-        if (this.widgetSettings.loadingColor !== 'transparent') {
-            const palettes = this.posts
-                .filter((post) => post.colorPalette)
-                .map((post) => post.colorPalette);
-            this.medianPaletteHSL = getMedianHSL(palettes, this.widgetSettings.loadingColor);
-        }
-        // Find initial breakpoint
-        const matchingBreakpoint = this.getMatchingBreakpoint(this.offsetWidth, this.widgetSettings.breakpoints);
-        // Render posts with current breakpoint styles
-        this.renderBreakpoint(matchingBreakpoint);
-        // Pass settings and metadata to posts
-        if (this.postEls) {
-            this.postEls.forEach((postEl) => {
-                postEl.widgetSettings = this.widgetSettings;
-                postEl.feedMetadata = this.feedMetadata;
-            });
-        }
-        // Enable popoverGallery if necessary
-        if (this.widgetSettings.onPostClick === 'openPopupGallery') {
-            this.enablePopoverGallery();
-        }
-    }
-    /*
-     *   Handle prop change
-     */
-    _handlePropChange({ changedProp, oldValue, newValue }) {
-        switch (changedProp) {
-            case 'posts':
-                this._handlePostsChange({ oldValue, newValue });
-                break;
-            case 'widgetSettings':
-                this._handleSettingsChange(oldValue, newValue);
-                break;
-            case 'feedMetadata':
-                this._handleMetadataChange();
-                break;
-            case 'previewLoadingColors':
-                this.postEls.forEach((postEl) => {
-                    postEl.previewLoadingColors = this.previewLoadingColors;
-                });
-                setClasses(this, {
-                    'is-previewing-loading-colors': !!this.previewLoadingColors,
-                });
-                break;
-        }
-    }
-    /*
-     *   Handle posts change
-     */
-    _handlePostsChange({ oldValue, newValue }) {
-        this.postEls = [];
-        this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth, this.widgetSettings.breakpoints), true);
-        if (this.popoverGalleryEl) {
-            this.popoverGalleryEl.posts = this.posts;
-        }
-    }
-    /*
-     *   Handle settings change
-     */
-    _handleSettingsChange(oldValue, newValue) {
-        if (oldValue?.onPostClick !== 'openPopupGallery' &&
-            newValue?.onPostClick === 'openPopupGallery') {
-            this.enablePopoverGallery();
-        }
-        const matchingBreakpoint = this.getMatchingBreakpoint(this.offsetWidth, this.widgetSettings.breakpoints);
-        this.renderBreakpoint(matchingBreakpoint);
-        this.postEls.forEach((postEl) => {
-            postEl.widgetSettings = this.widgetSettings;
-        });
-        if (this.popoverGalleryEl) {
-            this.popoverGalleryEl.widgetSettings = this.widgetSettings;
-        }
-    }
-    /*
-     *   Handle settings change
-     */
-    _handleMetadataChange() {
-        let description = `from @${this.feedMetadata.username}`;
-        if (this.feedMetadata.hashtags?.length) {
-            description = `from hashtag${this.feedMetadata.hashtags.length > 1 ? 's' : ''} ${this.feedMetadata.hashtags.join(', ')}`;
-        }
-        this.setAttribute('aria-label', `Gallery of Instagram posts ${description}. Shift + arrow keys to navigate`);
-        this.postEls.forEach((postEl) => {
-            postEl.feedMetadata = this.feedMetadata;
-        });
-        if (this.popoverGalleryEl) {
-            this.popoverGalleryEl.feedMetadata = this.feedMetadata;
-        }
-    }
-    /**
-     *   Enable popup carousel
-     */
-    async enablePopoverGallery() {
-        if (this.popoverGalleryEl)
-            return;
-        const { default: PopoverGallery } = await import('./PopoverGallery-pssVDO_O.js');
-        PopoverGallery.register();
-        this.popoverGalleryEl = document.createElement('behold-popover-gallery');
-        Object.assign(this.popoverGalleryEl, {
-            widgetSettings: this.widgetSettings,
-            feedMetadata: this.feedMetadata,
-            posts: this.posts,
-            closeFocusEl: this,
-            onSlideChange: (slideIndex) => {
-                this.popoverGalleryEl.closeFocusEl = this.postEls[slideIndex];
-            },
-        });
-    }
-    /*
-     *   Handle resize
-     */
-    _handleResize(entry) {
-        const widgetWidth = entry.contentBoxSize?.[0]?.inlineSize;
-        const breakpoints = this.widgetSettings.breakpoints;
-        const matchingBreakpoint = this.getMatchingBreakpoint(widgetWidth, breakpoints);
-        this.renderBreakpoint(matchingBreakpoint);
-    }
-    /**
-     * Handle prev post focus
-     */
-    _handleFocusPreviousPost() {
-        if (!this.postEls.length)
-            return;
-        let currentFocusIndex = [...this.containerEl.children].indexOf(this.shadow.activeElement?.parentElement);
-        if (currentFocusIndex > 0) {
-            currentFocusIndex = currentFocusIndex - 1;
-        }
-        else {
-            currentFocusIndex = this.postEls.length - 1;
-        }
-        this.postEls[currentFocusIndex].focus();
-    }
-    /**
-     * Handle next post focus
-     */
-    _handleFocusNextPost() {
-        if (!this.postEls.length)
-            return;
-        let currentFocusIndex = [...this.containerEl.children].indexOf(this.shadow.activeElement?.parentElement);
-        if (currentFocusIndex > -1 && currentFocusIndex < this.postEls.length - 1) {
-            currentFocusIndex = currentFocusIndex + 1;
-        }
-        else {
-            currentFocusIndex = 0;
-        }
-        this.postEls[currentFocusIndex].focus();
-    }
-    /**
-     * Handle post click
-     */
-    _handlePostClick(post) {
-        this.popoverGalleryEl.open(this.postEls.indexOf(post), post);
-    }
-    /*
-     *   Update postEls
-     */
-    renderPosts(breakpoint) {
-        this.postEls = this.createPostEls(breakpoint);
-        this.raf(() => {
-            this.containerEl.beholdReplaceChildren(...this.postEls);
-        }, 'renderPosts');
-    }
-    /*
-     *   Get breakpoint that matches a width
-     */
-    getMatchingBreakpoint(width, breakpoints) {
-        return Object.entries(breakpoints)
-            .map(([key, value]) => ({ width: key, ...value }))
-            .filter((bp) => bp.width !== 'default')
-            .sort((a, b) => parseInt(b.width) - parseInt(a.width))
-            .reduce((acc, curr) => {
-            return width <= parseInt(curr.width) ? curr : acc;
-        }, 
-        // numPosts doesn't exist on default breakpoint for some reason
-        // @todo fix that
-        { numPosts: this.posts.length, ...breakpoints.default });
-    }
-    /*
-     *   Render posts with breakpoint
-     */
-    renderBreakpoint(breakpoint, forceRender = false) {
-        if (!this.posts || !this.containerEl)
-            return;
-        if (!this.postEls?.length)
-            forceRender = true;
-        const applied = this.appliedBreakpoint;
-        const { numColumns, gap, borderRadius, numPosts, postAspectRatio } = breakpoint;
-        // If we're reducing the # of posts, first remove them all to prevent fouc
-        if (applied?.numPosts > numPosts) {
-            this.containerEl.beholdReplaceChildren();
-            forceLayout();
-        }
-        // First apply container styles to prevent FOUC
-        switch (this.widgetSettings.alignment) {
-            case 'left':
-                this.style.justifyContent = 'flex-start';
-                break;
-            case 'right':
-                this.style.justifyContent = 'flex-end';
-                break;
-            default:
-                this.style.justifyContent = 'center';
-                break;
-        }
-        if (this.widgetSettings.maxWidth &&
-            this.widgetSettings.constrainWidth &&
-            this.containerEl.style.maxWidth !== `${this.widgetSettings.maxWidth}px`) {
-            this.containerEl.style.maxWidth = `${this.widgetSettings.maxWidth}px`;
-        }
-        if (!this.widgetSettings.constrainWidth) {
-            this.containerEl.style.maxWidth = '';
-        }
-        this.containerEl.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;
-        this.containerEl.style.gap = `${gap.y}px ${gap.x}px`;
-        this.containerEl.setAttribute('data-hover-effect', this.widgetSettings.hoverEffect);
-        let aspectRatio = (postAspectRatio || [1, 1]).reduce((w, h) => w / h);
-        setCssVars(this.containerEl, {
-            '--post-border-radius': `${borderRadius}%`,
-            '--post-aspect-ratio': `${aspectRatio}`,
-        });
-        // Then render posts into updated container
-        if (applied?.numPosts !== numPosts || forceRender) {
-            this.renderPosts(breakpoint);
-        }
-        this.postEls.forEach((el, i) => {
-            el.hasRowGap = `${breakpoint.gap.y}` !== '0';
-        });
-        this.appliedBreakpoint = breakpoint;
-    }
-    /*
-     *   Create post Els based on a breakpoint
-     */
-    createPostEls(breakpoint) {
-        const { numPosts, numColumns, gap, postAspectRatio } = breakpoint;
-        const filteredArray = this.posts.filter((p, i) => {
-            const numPosts = breakpoint?.numPosts || this.posts?.length || 200;
-            return i < numPosts;
-        });
-        const postEls = filteredArray.map((post, i) => {
-            const numRows = Math.ceil((numPosts || this.posts.length) / numColumns);
-            let postType = 'behold-image-post';
-            if (post.mediaType === 'VIDEO') {
-                postType = 'behold-video-post';
-            }
-            if (post.mediaType === 'CAROUSEL_ALBUM') {
-                postType = 'behold-album-post';
-            }
-            const postEl = createElement({
-                type: postType,
-                props: {
-                    post,
-                    widgetSettings: this.widgetSettings,
-                    feedMetadata: this.feedMetadata,
-                    medianPaletteHSL: this.medianPaletteHSL,
-                    onClick: this._handlePostClick,
-                    hasRowGap: `${gap.y}` !== '0',
-                    isLastRow: Math.ceil((i + 1) / numColumns) === numRows,
-                    index: i,
-                    aspectRatio: postAspectRatio || [1, 1],
-                    totalPosts: filteredArray?.length || numPosts || this.posts?.length || 0,
-                },
-            });
-            return postEl;
-        });
-        while (postEls.length < breakpoint.numPosts) {
-            const placeholderEl = createElement({
-                classes: 'post post--placeholder',
-            });
-            postEls.push(placeholderEl);
-        }
-        return postEls;
-    }
-    /*
-     *   Register
-     */
-    static register(name = 'behold-grid') {
-        if (!customElements.get(name)) {
-            customElements.define(name, Grid);
-        }
-        return name;
-    }
-}
-
-export { Grid as default };