@iamproperty/components 3.4.5 → 3.4.7

package/assets/js/modules/tabs.js

@@ -0,0 +1,97 @@
+// @ts-nocheck
+export const createTabsLinks = function (tabsElement) {
+    const details = tabsElement.querySelectorAll(':scope > details');
+    let summaries = tabsElement.querySelectorAll(':scope > details > summary');
+    let tabLinks = tabsElement.querySelector(':scope > .tabs__links');
+    if (tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))
+        tabLinks = tabsElement.shadowRoot.querySelector('.tabs__links');
+    if (!tabLinks) {
+        tabLinks = document.createElement('div');
+        tabLinks.classList.add('tabs__links');
+        tabsElement.prepend(tabLinks);
+    }
+    // Create the tab buttons from the summary titles
+    details.forEach((detail, index) => {
+        let summary = detail.querySelector(':scope > summary');
+        summary.classList.add('visually-hidden');
+        let button = document.createElement('button');
+        if (detail.hasAttribute('id')) {
+            button = document.createElement('a');
+            button.setAttribute('href', `#${detail.getAttribute('id')}`);
+        }
+        if (detail.hasAttribute('open')) {
+            button.setAttribute('aria-pressed', true);
+        }
+        button.innerHTML = `${summary.innerText}`;
+        button.classList.add('link');
+        button.setAttribute('data-index', index);
+        button.setAttribute('tabindex', '-1');
+        tabLinks.appendChild(button);
+    });
+};
+export const setTabsEventHandlers = function (tabsElement) {
+    let details = tabsElement.querySelectorAll(':scope > details');
+    let summaries = tabsElement.querySelectorAll(':scope > details > summary');
+    let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+    if (tabsElement.shadowRoot)
+        buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
+    // Set the on click for the tab buttons, these will open the details box it matches too
+    buttons.forEach((button) => {
+        button.addEventListener("click", (e) => {
+            e.preventDefault();
+            buttons.forEach((buttonLoopItem) => {
+                let buttonPressed = buttonLoopItem == button ? true : false;
+                buttonLoopItem.setAttribute('aria-pressed', buttonPressed);
+            });
+            details.forEach((detail, detailsIndex) => {
+                let detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
+                if (detailsOpen)
+                    detail.setAttribute('open', detailsOpen);
+                else
+                    detail.removeAttribute('open');
+            });
+            if (button.hasAttribute('href'))
+                history.pushState(undefined, undefined, button.getAttribute('href'));
+            // Data layer Open Event
+            window.dataLayer = window.dataLayer || [];
+            window.dataLayer.push({
+                "event": "openTab",
+                "tabTitle": button.textContent
+            });
+        });
+    });
+    // Make sure we dont loose existing summary functionality
+    summaries.forEach((summary, index) => {
+        // Maintain the focus on the summary element but visually highlight the tab button
+        summary.addEventListener("focus", (e) => {
+            buttons.forEach((button) => {
+                button.classList.remove('focus');
+            });
+            buttons[index].classList.add('focus');
+        });
+        summary.addEventListener("click", (e) => {
+            e.preventDefault();
+            buttons[index].click();
+        });
+    });
+};
+export const openFirstTab = function (tabsElement) {
+    let details = tabsElement.querySelectorAll(':scope > details');
+    let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+    if (tabsElement.shadowRoot)
+        buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
+    if (location.hash && tabsElement.querySelector(`.tabs__links [href="${location.hash}"]`)) {
+        tabsElement.querySelector(`[href="${location.hash}"]`).setAttribute('open', true);
+        tabsElement.querySelector(`details[id="${location.hash.replace('#', '')}"]`).setAttribute('open', true);
+    }
+    else if (!tabsElement.querySelector(`details[open]`)) {
+        details[0].setAttribute('open', true);
+        buttons[0].setAttribute('aria-pressed', true);
+    }
+};
+const tabs = function (tabsElement) {
+    createTabsLinks(tabsElement);
+    setTabsEventHandlers(tabsElement);
+    openFirstTab(tabsElement);
+};
+export default tabs;

package/assets/js/modules/youtubevideo.js

@@ -5,15 +5,14 @@
 class youtubeVideo {
     /** @param {Element} embed dom element */
     constructor(embed) {
-        let createEmbed = this.createEmbed;
         // If the scripts is already loaded then lets just create the embed
         if (document.body.classList.contains('youtubeLoaded')) {
             embed.addEventListener('click', function (e) {
                 // loop parent nodes from the target to the delegation node
                 for (var target = e.target; target && target != this; target = target.parentNode) {
-                    if (target.matches('a:not([data-modal-youtube]')) {
+                    if (target.matches('a')) {
                         e.preventDefault();
-                        createEmbed(embed, target);
+                        createEmbed(target);
                         break;
                     }
                 }
@@ -26,9 +25,8 @@ class youtubeVideo {
     /**
      * Load the YouTube scripts before trying to create the embed
      * @param {HTMLElement} embed dom element
-     * @param {Function} createEmbed function to create the embed after script loaded.
      */
-    loadScripts(embed, createEmbed) {
+    loadScripts(embed) {
         return new Promise((resolve, reject) => {
             const image = new Image();
             image.onload = function () {
@@ -41,14 +39,12 @@ class youtubeVideo {
                 resolve(true);
                 // script has loaded, you can now use it safely
                 tag.onload = () => {
-                    embed.addEventListener('click', function (e) {
+                    embed.addEventListener('click', function (event) {
+                        console.log('click');
                         // loop parent nodes from the target to the delegation node
-                        for (var target = e.target; target && target != this; target = target.parentNode) {
-                            if (target.matches('a:not([data-modal-youtube]')) {
-                                e.preventDefault();
-                                createEmbed(embed, target);
-                                break;
-                            }
+                        if (event && event.target instanceof HTMLElement && event.target.closest('a')) {
+                            event.preventDefault();
+                            createEmbed(event.target.closest('a'));
                         }
                     }, false);
                 };
@@ -59,56 +55,52 @@ class youtubeVideo {
             image.src = "https://youtube.com/favicon.ico";
         });
     }
-    /**
-     * Create the YouTube embed after the user has clicked on it.
-     * @param {HTMLElement} embed dom element
-     */
-    createEmbed(embed, target) {
-        // If there is more than one video lets make sure there is only one playing at a time.
-        if (typeof window.player != "undefined" && typeof window.player.pauseVideo == "function")
-            window.player.pauseVideo();
-        var video_id = target.getAttribute('data-id');
-        var link_id = target.getAttribute('id');
-        // create an id to pass t the script if one isn't present
-        if (typeof link_id == 'undefined' || link_id == null) {
-            var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
-            link_id = randLetter + Date.now();
-            target.setAttribute('id', link_id);
-        }
-        // This function creates an <iframe> (and YouTube player) after the API code downloads.
-        function onYouTubeIframeAPIReady() {
-            window.player = new YT.Player(link_id, {
-                height: '100%',
-                width: '100%',
-                videoId: video_id,
-                playerVars: {
-                    'modestbranding': 1,
-                    'playsinline': 1,
-                    'rel': 0,
-                    'showinfo': 0
-                },
-                events: {
-                    'onReady': onPlayerReady,
-                    'onStateChange': onPlayerStateChange
-                }
-            });
-        }
-        onYouTubeIframeAPIReady();
-        // The API will call this function when the video player is ready.
-        function onPlayerReady(event) {
-            // Play the video straight away
-            event.target.playVideo();
-        }
-        // The API calls this function when the player's state changes.
-        // The function indicates that when playing a video (state=1)
-        var done = false;
-        function onPlayerStateChange(event) {
-            if (event.data == YT.PlayerState.PLAYING && !done) {
-                var link = document.getElementById(link_id);
-                link.classList.add('player-ready');
-                done = true;
+}
+export const createEmbed = function (target) {
+    // If there is more than one video lets make sure there is only one playing at a time.
+    if (typeof window.player != "undefined" && typeof window.player.pauseVideo == "function")
+        window.player.pauseVideo();
+    var video_id = target.getAttribute('data-id');
+    var link_id = target.getAttribute('id');
+    // create an id to pass t the script if one isn't present
+    if (typeof link_id == 'undefined' || link_id == null) {
+        var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
+        link_id = randLetter + Date.now();
+        target.setAttribute('id', link_id);
+    }
+    // This function creates an <iframe> (and YouTube player) after the API code downloads.
+    function onYouTubeIframeAPIReady() {
+        window.player = new YT.Player(link_id, {
+            height: '100%',
+            width: '100%',
+            videoId: video_id,
+            playerVars: {
+                'modestbranding': 1,
+                'playsinline': 1,
+                'rel': 0,
+                'showinfo': 0
+            },
+            events: {
+                'onReady': onPlayerReady,
+                'onStateChange': onPlayerStateChange
             }
+        });
+    }
+    onYouTubeIframeAPIReady();
+    // The API will call this function when the video player is ready.
+    function onPlayerReady(event) {
+        // Play the video straight away
+        event.target.playVideo();
+    }
+    // The API calls this function when the player's state changes.
+    // The function indicates that when playing a video (state=1)
+    var done = false;
+    function onPlayerStateChange(event) {
+        if (event.data == YT.PlayerState.PLAYING && !done) {
+            var link = document.getElementById(link_id);
+            link.classList.add('player-ready');
+            done = true;
         }
     }
-}
+};
 export default youtubeVideo;