{"version":3,"sources":["node_modules/browser-pack/_prelude.js","frontend/Common/js/modules/StoryModalsContainer/entry/story-modals-container.js","frontend/Common/js/modules/StoryModalsContainer/initStoryModalsContainer.js"],"names":["r","e","n","t","o","i","f","c","require","u","a","Error","code","p","exports","call","length","1","module","_initStoryModalsContainer","__esModule","default","document","addEventListener","breakpointLargeMin","window","matchMedia","querySelectorAll","forEach","componentEl","parentIndex","querySelector","tabsEl","modalsEl","tabVideosEl","let","navButtonData","hoveredVideoTab","focusedVideoTab","tab","tabIndex","dataset","navTitle","modal","button","video","event","showModal","iframe","contentWindow","postMessage","focus","matches","pause","play","paused","activeElement","contains","modalIndex","previousEl","nextEl","closeButton","close","target","currentTarget","label","previousModalIndex","textContent","remove","nextModalIndex"],"mappings":"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","file":"story-modals-container-generated.js","sourcesContent":["(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()","import initStoryModalsContainer from \"../initStoryModalsContainer.js\";\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  initStoryModalsContainer();\r\n});\r\n","function pauseYoutubeVideos(modal) {\r\n  modal.querySelectorAll(\".js-youtube-video-mount iframe\").forEach((iframe) => {\r\n    iframe.contentWindow.postMessage(\r\n      '{\"event\":\"command\",\"func\":\"pauseVideo\",\"args\":\"\"}',\r\n      \"https://www.youtube-nocookie.com\",\r\n    );\r\n  });\r\n}\r\n\r\nconst breakpointLargeMin = window.matchMedia(\"(min-width: 911px)\");\r\n\r\nexport default () => {\r\n  document\r\n    .querySelectorAll(\".js-story-modals-container\")\r\n    .forEach((componentEl, parentIndex) => {\r\n      if (document.querySelector(\".is-page-editor\")) {\r\n        return;\r\n      }\r\n\r\n      const tabsEl = componentEl.querySelectorAll(\".js-story-tab\");\r\n      const modalsEl = componentEl.querySelectorAll(\".js-story-modal\");\r\n      const tabVideosEl = componentEl.querySelectorAll(\".js-story-tab__video\");\r\n\r\n      let navButtonData = []; // labels for next / previous buttons\r\n\r\n      let hoveredVideoTab = null;\r\n      let focusedVideoTab = null;\r\n\r\n      function pauseAllVideos() {\r\n        for (const video of tabVideosEl) {\r\n          if (!video.paused) video.pause();\r\n        }\r\n      }\r\n\r\n      // If user stops hovering, play focused tab\r\n      function playFocusedVideo() {\r\n        if (!focusedVideoTab) return;\r\n\r\n        const video = focusedVideoTab.querySelector(\".js-story-tab__video\");\r\n\r\n        if (video) video.play();\r\n      }\r\n\r\n      tabsEl.forEach((tab, tabIndex) => {\r\n        // get the labels from the eyebrow text.\r\n        navButtonData[tabIndex] = tab.dataset.navTitle || \"\";\r\n\r\n        // add eventhandler\r\n        const modal = tab.querySelector(\".js-story-modal\");\r\n        const button = tab.querySelector(\".js-story-tab__button\");\r\n        const video = tab.querySelector(\".js-story-tab__video\");\r\n\r\n        if (modal) {\r\n          // show the modal\r\n          button.addEventListener(\"click\", (event) => {\r\n            modal.showModal();\r\n          });\r\n          // listen for close event (esc key)\r\n          modal.addEventListener(\"close\", (event) => {\r\n            pauseYoutubeVideos(modal);\r\n            button.focus();\r\n          });\r\n        }\r\n\r\n        if (video) {\r\n          // Pause videos on hover/focus out\r\n          button.addEventListener(\"focusout\", () => {\r\n            if (hoveredVideoTab !== button && breakpointLargeMin.matches)\r\n              video.pause();\r\n            focusedVideoTab = null;\r\n          });\r\n          button.addEventListener(\"mouseout\", () => {\r\n            if (focusedVideoTab !== button && breakpointLargeMin.matches) {\r\n              video.pause();\r\n              // If another tab is focused and has a video, play it\r\n              playFocusedVideo();\r\n            }\r\n            hoveredVideoTab = null;\r\n          });\r\n\r\n          // Play videos on hover/focus in\r\n          button.addEventListener(\"focusin\", () => {\r\n            if (\r\n              !hoveredVideoTab &&\r\n              video.paused &&\r\n              breakpointLargeMin.matches\r\n            ) {\r\n              video.play();\r\n            }\r\n            focusedVideoTab = button;\r\n          });\r\n          button.addEventListener(\"mouseover\", () => {\r\n            if (video.paused && breakpointLargeMin.matches) {\r\n              // Pause previously focused video to avoid two playing at the same time\r\n              pauseAllVideos();\r\n              video.play();\r\n            }\r\n            hoveredVideoTab = button;\r\n          });\r\n\r\n          breakpointLargeMin.addEventListener(\"change\", (event) => {\r\n            // Pause videos on resize to mobile view\r\n            if (!event.matches && !video.paused) {\r\n              video.pause();\r\n              return;\r\n            }\r\n\r\n            // Play videos on resize with focus\r\n            if (\r\n              event.matches &&\r\n              (document.activeElement === button ||\r\n                button.contains(document.activeElement))\r\n            ) {\r\n              video.play();\r\n            }\r\n          });\r\n        }\r\n      });\r\n\r\n      modalsEl.forEach((modal, modalIndex) => {\r\n        const previousEl = modal.querySelector(\".js-story-modal__prev-area\");\r\n        const nextEl = modal.querySelector(\".js-story-modal__next-area\");\r\n        const closeButton = modal.querySelector(\r\n          \".js-story-modal__close-button\",\r\n        );\r\n\r\n        // init close button\r\n        closeButton.addEventListener(\"click\", (event) => {\r\n          modal.close();\r\n        });\r\n\r\n        // add clickaway\r\n        modal.addEventListener(\"click\", (event) => {\r\n          if (event.target === event.currentTarget) {\r\n            modal.close();\r\n          }\r\n        });\r\n\r\n        // init previous button\r\n        if (modalIndex > 0) {\r\n          const button = previousEl.querySelector(\r\n            \".js-story-modal__prev-button\",\r\n          );\r\n          const label = previousEl.querySelector(\r\n            \".js-story-modal__button-label\",\r\n          );\r\n          const previousModalIndex = modalIndex - 1;\r\n          // set the label on the button\r\n          label.textContent = navButtonData[previousModalIndex];\r\n\r\n          button.addEventListener(\"click\", (event) => {\r\n            modal.close();\r\n            modalsEl[previousModalIndex].showModal();\r\n          });\r\n        } else {\r\n          previousEl.remove();\r\n        }\r\n\r\n        // init next button\r\n        if (modalIndex < modalsEl.length - 1) {\r\n          const button = nextEl.querySelector(\".js-story-modal__next-button\");\r\n          const label = nextEl.querySelector(\".js-story-modal__button-label\");\r\n          const nextModalIndex = modalIndex + 1;\r\n\r\n          // set the label on the button\r\n          label.textContent = navButtonData[nextModalIndex];\r\n\r\n          button.addEventListener(\"click\", (event) => {\r\n            modal.close();\r\n            modalsEl[nextModalIndex].showModal();\r\n          });\r\n        } else {\r\n          nextEl.remove();\r\n        }\r\n      });\r\n    });\r\n};\r\n"]}