resource-grid-element.html

<template id="resource_grid_element_tpl">
    <style>
        @media screen and (max-width: 819px) {
            :host {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                row-gap: 1.5em;
            }
        }
        @media screen and (min-width: 820px) {
            :host {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                column-gap: 20px;
                row-gap: 1em;
                flex-wrap: wrap;
            }
        }
        @media screen and (min-width: 820px) and (max-width: 1220px) {
            :host {
                row-gap: 2em;
            }
        }
    </style>
    <slot name="grid-item"></slot>
</template>
<template id="resource_grid_item_element_tpl">
    <style>
        :host {
            background-color: #f5f7f7;
            padding: 1em;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
        }
        .thumbnail {
            position: relative;
            padding-top: 66.66%;
            width: 100%;
            overflow: hidden;
        }
        
        @media screen and (min-width: 1270px) {
            .thumbnail {
                height: auto;
            }
        }
        .thumbnail img {
            width: 100%;
            height: auto;
            object-fit: contain;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .title {
            flex-grow: 1;
            text-align: left;
            width: 100%;
            display: flex;
            align-items: flex-end;
        }
        .title > div {
            display: -webkit-box;
            overflow: hidden;
            max-width: 100%;
            font-size: 18px;
            line-height: 1.2;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 2.4em;
        }
        .title-type {
            text-transform: capitalize;
            width: 100%;
            text-align: left;
            padding: 0;
            color: #002a3a;
            font-weight: bold;
        }
        .title-text {
            vertical-align: text-top;
        }
        a {
            text-decoration: none;
            line-height: 1;
        }
        @media screen and (max-width: 819px) {
            :host {
                min-height: auto;
                max-height: unset;
                min-width: auto;
                max-width: unset;
                height: auto;
                justify-content: flex-start;
            }
            .thumbnail {
                height: auto;
            }
        }
        @media screen and (max-width: 861px) {
            :host {
                height: auto;
                width: 100%;
            }
        }
        @media screen and (min-width: 820px) and (max-width: 919px) {
            :host {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                flex-grow: 1;
                flex-shrink: 1;
            }
        }
        @media screen and (min-width: 920px) and (max-width: 1220px) {
            :host {
                width: calc(50% - 2em);
                max-width: calc(50% - 2em);
                flex-grow: 1;
                flex-shrink: 1;
                box-sizing: border-box;
            }
        }
        @media screen and (min-width: 1221px) {
            :host {
                flex-grow: 1;
                flex-shrink: 1;
                width: calc(33% - 2em);
                max-width: calc(33% - 2em);
                box-sizing: border-box;
            }
        }
    </style>
    <div class="thumbnail">
        <a href="" target="_blank">
            <img>
        </a>
    </div>
    <div class="title-type"></div>
    <div class="title">
        <div>
            <a href="" target="_blank">
                <span class="title-text"></span>
            </a>
        </div>
    </div>
</template>
<script type="module">
    class ResourceGridElement extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({ mode: 'open' });
            const tpl = document.getElementById('resource_grid_element_tpl');
            this.shadowRoot.appendChild(tpl.content.cloneNode(true));
        }
    }

    class ResourceGridItemElement extends HTMLElement {
        static get observedAttributes() {
            return ['url', 'type', 'title', 'thumbnail', 'aspect-ratio'];
        }
        attributeChangedCallback(name, oldValue, newValue) {
            if (oldValue !== newValue) {
                if (name === 'aspect-ratio') {
                    if (this.isValidAspectRatio(newValue) === false) {
                        console.error('ResourceGridItemElement aspect-ratio attribute must be a number between 0 and 100');
                        return;
                    }
                    const thumbnail = this.shadowRoot.querySelector('.thumbnail');
                    thumbnail.style.paddingTop = `${this.aspectRatioToPercent(newValue)}%`;
                }
                this.render();
            }
        }

        isValidAspectRatio(value) {
            const ratioPattern = /^\d+:\d+$/;
            return ratioPattern.test(value);
        }

        aspectRatioToPercent(value) {
            const [width, height] = value.split(':');
            return (height / width) * 100;
        }
        
        render() {
            if (!this.hasAttribute('url') || !this.hasAttribute('title')) {
                console.error('ResourceGridItemElement needs a url attribute');
                return;
            }
            const url = this.getAttribute('url')?.trim() ?? '';
            const title = this.getAttribute('title')?.trim() ?? '';
            if (!url || !title) {
                console.error('ResourceGridItemElement needs a url and title attribute');
                return;
            }
            const thumbnail = this.getAttribute('thumbnail');
            if (thumbnail) {
                const img = this.shadowRoot.querySelector('img');
                img.src = this.getAttribute('thumbnail');
            } else {
                const thumbnail = this.shadowRoot.querySelector('.thumbnail');
                thumbnail.style.visibility = 'hidden';
            }
            const type = this.getAttribute('type') || 'Uncategorized';
            const titleType = this.shadowRoot.querySelector('.title-type');
            titleType.textContent = this.getAttribute('type');

            const titleText = this.shadowRoot.querySelector('.title-text');
            titleText.textContent = title;

            const allA = this.shadowRoot.querySelectorAll('a');
            allA.forEach(a => a.href = url);
        }

        constructor() {
            super();
            this.attachShadow({ mode: 'open' });
            const tpl = document.getElementById('resource_grid_item_element_tpl');
            this.shadowRoot.appendChild(tpl.content.cloneNode(true));
        }
    }

    customElements.define('resource-grid', ResourceGridElement);
    customElements.define('resource-grid-item', ResourceGridItemElement);
</script>