@behold/widget 0.5.64 → 0.5.65

package/dist/Grid--7TepH_z.js

@@ -0,0 +1,339 @@
+import { c as createElement, a as setClasses, f as forceLayout, s as setCssVars } from './index-zGq7k0wG.js';
+import { B as BaseWidget, I as ImagePost, V as VideoPost, A as AlbumPost, b as baseGridStyles, g as getMedianHSL } from './base-D7ZLOWQ5.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();
+        // Define which props will trigger _handlePropChange
+        this.onPropChange(this._handlePropChange, ['widgetSettings', 'feedMetadata', 'posts', 'previewLoadingColors'], ['widgetSettings', 'feedMetadata', 'posts'], this.setup);
+        // 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);
+        // 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-oswhxqGK.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) {
+        const matchingBreakpoint = 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 });
+        return { numPosts: this.posts.length, ...breakpoints.default, ...matchingBreakpoint };
+    }
+    /*
+     *   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 };