Media friendly Squarespace accordion - ui-workarounds.com

media-friendly-squarespace-accordion

  document.querySelectorAll>document.querySelectorAll('.accordion-item__description').forEach((item) => {
    const imageExtRegExp = /\.(jpg|jpeg|png|webp|avif|gif|svg)$/;
    const videoExtRegExp = /\.(mp4|avi|wmv|mov|flv|mkv|webm|vob|ogv|m4v|3gp|3g2|mpeg|mpg|m2v|m4v|svi|3gpp|3gpp2|mxf|roq|nsv|flv|f4v|f4p|f4a|f4b)$/;
    const youtubevimeoRegExp = /(?:https?:)?\/{2}(?:www\.)?youtu\.?be(?:\/|\.com\/watch\?v\=|\.com\/v\/|\.com\/embed\/)?([\w-]*)[?&]?.*|(?:http:|https:|)\/\/(?:player.|www.)?vimeo\.com\/(?:video\/|embed\/|watch\?\S*v=|v\/)?(\d*)/; 
    item.querySelectorAll('a').forEach((link) => {
        const linkParent = link.parentElement;
        const nodes = linkParent.childNodes;
        const columnize = () => {
            nodes.forEach(node => {
                if(node.nodeType === Node.TEXT_NODE) {
                    linkParent.querySelector('*').style.flexBasis = '50%';
                    linkParent.style.display = 'flex';
                    linkParent.style.alignItems = 'center';
                    linkParent.style.gap = '15px';
                }
            });        
        }

        if(imageExtRegExp.test(link.href)) {
            const wrapperLink = link;
            const imgSrc = link.href;
            const hasLink = /[\[.*\]]/.test(linkParent.textContent);
            const img = document.createElement('img');
            const linkHref = linkParent.textContent.replace(/(.+)\[(.+)\](.*)/, '$2');

            img.src = imgSrc;
            img.alt = link.innerText.replace('/\(.*?\)/','');
            img.style = 'max-width: 100%';

            if(hasLink) { 
                wrapperLink.innerHTML = '';
                wrapperLink.href = linkHref;
                wrapperLink.append(img);
                link.replaceWith(wrapperLink);
            }
            else { link.replaceWith(img); }

            nodes.forEach(node => {
                if(node.nodeType === Node.TEXT_NODE) {
                    if(/[\[.*\]]/.test(node.nodeValue)) {
                        node.nodeValue = node.nodeValue.replace(/\[.*\]/, '');
                    }

                    if(node.nodeValue.trim().length && !/\[.*\]/.test(node.nodeValue)) {
                        linkParent.querySelector('*').style.flexBasis = '50%';
                        linkParent.style.display = 'flex';
                        linkParent.style.alignItems = 'center';
                        linkParent.style.gap = '15px';
                    }
                } 
            });
        }
        else if(videoExtRegExp.test(link.href)) {
            const videoExt = link.href.match(videoExtRegExp)[1];
            const autoplay = link.target === "_blank" ? "autoplay loop muted" : "";
            const videoTag = `
                <video controls style="max-width: 100%" ${autoplay} playsinline>
                    <source type="video/${videoExt}" src="${link.href}"></source>
                </video>
            `;
            link.insertAdjacentHTML('afterend', videoTag);
            link.remove();
            columnize();
        }
        else if(youtubevimeoRegExp.test(link.href)) {
            const iframeTag = `<iframe src="${link.href}&autoplay=1" width="100%" style="aspect-ratio:16/9" />`;
            link.insertAdjacentHTML('afterend', iframeTag);
            link.remove();
            columnize();
        }
    });	
    item.querySelectorAll('p:empty').forEach(p => p.remove());
    Array.from(document.querySelectorAll('p'))
    .filter(p => p.querySelectorAll('img').length >= 2)
    .forEach(p => {
      p.style.display="flex";
      p.style.flexWrap="wrap";
      p.style.gap = '20px';
      p.querySelectorAll('img')
      .forEach(img => {
          img.style.maxWidth = 1;

      })
    });
});