From 2d43c12276b979f136b7a90a9866727c1aad4bde Mon Sep 17 00:00:00 2001 From: Rishabh Date: Wed, 8 Dec 2021 22:58:22 +0530 Subject: [PATCH] Fixed global variable leak for new card scripts no issue - wraps the card js scripts into an IIFE to avoid polluting global variables on the site - also any fixes errors caused by `swup` and its scripts-plugin that trips over already created global variables --- core/frontend/src/cards/js/audio.js | 265 +++++++++++++------------- core/frontend/src/cards/js/gallery.js | 18 +- core/frontend/src/cards/js/toggle.js | 30 +-- 3 files changed, 159 insertions(+), 154 deletions(-) diff --git a/core/frontend/src/cards/js/audio.js b/core/frontend/src/cards/js/audio.js index 3531000146..5f5b678e3c 100644 --- a/core/frontend/src/cards/js/audio.js +++ b/core/frontend/src/cards/js/audio.js @@ -1,147 +1,148 @@ -const handleAudioPlayer = function (audioElementContainer) { - const audioPlayerContainer = audioElementContainer.querySelector('.kg-player-container'); - const playIconContainer = audioElementContainer.querySelector('.kg-audio-play-icon'); - const pauseIconContainer = audioElementContainer.querySelector('.kg-audio-pause-icon'); - const seekSlider = audioElementContainer.querySelector('.kg-audio-seek-slider'); - const playbackRateContainer = audioElementContainer.querySelector('.kg-audio-playback-rate'); - const muteIconContainer = audioElementContainer.querySelector('.kg-audio-mute-icon'); - const unmuteIconContainer = audioElementContainer.querySelector('.kg-audio-unmute-icon'); - const volumeSlider = audioElementContainer.querySelector('.kg-audio-volume-slider'); - const audio = audioElementContainer.querySelector('audio'); - const durationContainer = audioElementContainer.querySelector('.kg-audio-duration'); - const currentTimeContainer = audioElementContainer.querySelector('.kg-audio-current-time'); - let playbackRates = [{ - rate: 0.75, - label: '0.7×' - }, { - rate: 1.0, - label: '1×' - }, { - rate: 1.25, - label: '1.2×' - }, { - rate: 1.75, - label: '1.7×' - }, { - rate: 2.0, - label: '2×' - }]; +(function() { + const handleAudioPlayer = function (audioElementContainer) { + const audioPlayerContainer = audioElementContainer.querySelector('.kg-player-container'); + const playIconContainer = audioElementContainer.querySelector('.kg-audio-play-icon'); + const pauseIconContainer = audioElementContainer.querySelector('.kg-audio-pause-icon'); + const seekSlider = audioElementContainer.querySelector('.kg-audio-seek-slider'); + const playbackRateContainer = audioElementContainer.querySelector('.kg-audio-playback-rate'); + const muteIconContainer = audioElementContainer.querySelector('.kg-audio-mute-icon'); + const unmuteIconContainer = audioElementContainer.querySelector('.kg-audio-unmute-icon'); + const volumeSlider = audioElementContainer.querySelector('.kg-audio-volume-slider'); + const audio = audioElementContainer.querySelector('audio'); + const durationContainer = audioElementContainer.querySelector('.kg-audio-duration'); + const currentTimeContainer = audioElementContainer.querySelector('.kg-audio-current-time'); + let playbackRates = [{ + rate: 0.75, + label: '0.7×' + }, { + rate: 1.0, + label: '1×' + }, { + rate: 1.25, + label: '1.2×' + }, { + rate: 1.75, + label: '1.7×' + }, { + rate: 2.0, + label: '2×' + }]; - let raf = null; - let currentPlaybackRateIdx = 1; + let raf = null; + let currentPlaybackRateIdx = 1; - audio.src = audioElementContainer.getAttribute('data-kg-audio-src'); + audio.src = audioElementContainer.getAttribute('data-kg-audio-src'); - const whilePlaying = () => { - seekSlider.value = Math.floor(audio.currentTime); - currentTimeContainer.textContent = calculateTime(seekSlider.value); - audioPlayerContainer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`); - raf = requestAnimationFrame(whilePlaying); - } - - const showRangeProgress = (rangeInput) => { - if (rangeInput === seekSlider) { - audioPlayerContainer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%'); + const whilePlaying = () => { + seekSlider.value = Math.floor(audio.currentTime); + currentTimeContainer.textContent = calculateTime(seekSlider.value); + audioPlayerContainer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`); + raf = requestAnimationFrame(whilePlaying); } - else { - audioPlayerContainer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%'); + + const showRangeProgress = (rangeInput) => { + if (rangeInput === seekSlider) { + audioPlayerContainer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%'); + } + else { + audioPlayerContainer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%'); + } } - } - const calculateTime = (secs) => { - const minutes = Math.floor(secs / 60); - const seconds = Math.floor(secs % 60); - const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`; - return `${minutes}:${returnedSeconds}`; - } - - const displayDuration = () => { - durationContainer.textContent = calculateTime(audio.duration); - } - - const setSliderMax = () => { - seekSlider.max = Math.floor(audio.duration); - } - - const displayBufferedAmount = () => { - if (audio.buffered.length > 0) { - const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1)); - audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`); + const calculateTime = (secs) => { + const minutes = Math.floor(secs / 60); + const seconds = Math.floor(secs % 60); + const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`; + return `${minutes}:${returnedSeconds}`; } - } - if (audio.readyState > 0) { - displayDuration(); - setSliderMax(); - displayBufferedAmount(); - } else { - audio.addEventListener('loadedmetadata', () => { + const displayDuration = () => { + durationContainer.textContent = calculateTime(audio.duration); + } + + const setSliderMax = () => { + seekSlider.max = Math.floor(audio.duration); + } + + const displayBufferedAmount = () => { + if (audio.buffered.length > 0) { + const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1)); + audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`); + } + } + + if (audio.readyState > 0) { displayDuration(); setSliderMax(); displayBufferedAmount(); + } else { + audio.addEventListener('loadedmetadata', () => { + displayDuration(); + setSliderMax(); + displayBufferedAmount(); + }); + } + + playIconContainer.addEventListener('click', () => { + playIconContainer.classList.add("kg-audio-hide"); + pauseIconContainer.classList.remove("kg-audio-hide"); + audio.play(); + requestAnimationFrame(whilePlaying); + }); + + pauseIconContainer.addEventListener('click', () => { + pauseIconContainer.classList.add("kg-audio-hide"); + playIconContainer.classList.remove("kg-audio-hide"); + audio.pause(); + cancelAnimationFrame(raf); + }); + + muteIconContainer.addEventListener('click', () => { + muteIconContainer.classList.add("kg-audio-hide"); + unmuteIconContainer.classList.remove("kg-audio-hide"); + audio.muted = false; + }); + + unmuteIconContainer.addEventListener('click', () => { + unmuteIconContainer.classList.add("kg-audio-hide"); + muteIconContainer.classList.remove("kg-audio-hide"); + audio.muted = true; + }); + + playbackRateContainer.addEventListener('click', () => { + let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5]; + currentPlaybackRateIdx = currentPlaybackRateIdx + 1; + audio.playbackRate = nextPlaybackRate.rate; + playbackRateContainer.textContent = nextPlaybackRate.label; + }); + + audio.addEventListener('progress', displayBufferedAmount); + + seekSlider.addEventListener('input', (e) => { + showRangeProgress(e.target); + currentTimeContainer.textContent = calculateTime(seekSlider.value); + if (!audio.paused) { + cancelAnimationFrame(raf); + } + }); + + seekSlider.addEventListener('change', () => { + audio.currentTime = seekSlider.value; + if (!audio.paused) { + requestAnimationFrame(whilePlaying); + } + }); + + volumeSlider.addEventListener('input', (e) => { + const value = e.target.value; + showRangeProgress(e.target); + audio.volume = value / 100; }); } - playIconContainer.addEventListener('click', () => { - playIconContainer.classList.add("kg-audio-hide"); - pauseIconContainer.classList.remove("kg-audio-hide"); - audio.play(); - requestAnimationFrame(whilePlaying); - }); - - pauseIconContainer.addEventListener('click', () => { - pauseIconContainer.classList.add("kg-audio-hide"); - playIconContainer.classList.remove("kg-audio-hide"); - audio.pause(); - cancelAnimationFrame(raf); - }); - - muteIconContainer.addEventListener('click', () => { - muteIconContainer.classList.add("kg-audio-hide"); - unmuteIconContainer.classList.remove("kg-audio-hide"); - audio.muted = false; - }); - - unmuteIconContainer.addEventListener('click', () => { - unmuteIconContainer.classList.add("kg-audio-hide"); - muteIconContainer.classList.remove("kg-audio-hide"); - audio.muted = true; - }); - - playbackRateContainer.addEventListener('click', () => { - let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5]; - currentPlaybackRateIdx = currentPlaybackRateIdx + 1; - audio.playbackRate = nextPlaybackRate.rate; - playbackRateContainer.textContent = nextPlaybackRate.label; - }); - - audio.addEventListener('progress', displayBufferedAmount); - - seekSlider.addEventListener('input', (e) => { - showRangeProgress(e.target); - currentTimeContainer.textContent = calculateTime(seekSlider.value); - if (!audio.paused) { - cancelAnimationFrame(raf); - } - }); - - seekSlider.addEventListener('change', () => { - audio.currentTime = seekSlider.value; - if (!audio.paused) { - requestAnimationFrame(whilePlaying); - } - }); - - volumeSlider.addEventListener('input', (e) => { - const value = e.target.value; - showRangeProgress(e.target); - audio.volume = value / 100; - }); -} - -const audioCardElements = document.querySelectorAll('.kg-audio-card'); - -for (let i = 0; i < audioCardElements.length; i++) { - handleAudioPlayer(audioCardElements[i]); -} + const audioCardElements = document.querySelectorAll('.kg-audio-card'); + for (let i = 0; i < audioCardElements.length; i++) { + handleAudioPlayer(audioCardElements[i]); + } +})(); diff --git a/core/frontend/src/cards/js/gallery.js b/core/frontend/src/cards/js/gallery.js index 1099f214c0..38df607d1d 100644 --- a/core/frontend/src/cards/js/gallery.js +++ b/core/frontend/src/cards/js/gallery.js @@ -1,8 +1,10 @@ -var images = document.querySelectorAll('.kg-gallery-image img'); -images.forEach(function (image) { - var container = image.closest('.kg-gallery-image'); - var width = image.attributes.width.value; - var height = image.attributes.height.value; - var ratio = width / height; - container.style.flex = ratio + ' 1 0%'; -}) +(function() { + const images = document.querySelectorAll('.kg-gallery-image img'); + images.forEach(function (image) { + const container = image.closest('.kg-gallery-image'); + const width = image.attributes.width.value; + const height = image.attributes.height.value; + const ratio = width / height; + container.style.flex = ratio + ' 1 0%'; + }) +})(); diff --git a/core/frontend/src/cards/js/toggle.js b/core/frontend/src/cards/js/toggle.js index c154ffa045..71d1f44d5b 100644 --- a/core/frontend/src/cards/js/toggle.js +++ b/core/frontend/src/cards/js/toggle.js @@ -1,16 +1,18 @@ -const toggleHeadingElements = document.getElementsByClassName("kg-toggle-heading"); +(function() { + const toggleHeadingElements = document.getElementsByClassName("kg-toggle-heading"); -const toggleFn = function(event) { - const targetElement = event.target; - const parentElement = targetElement.closest('.kg-toggle-card'); - var toggleState = parentElement.getAttribute("data-kg-toggle-state"); - if (toggleState === 'close') { - parentElement.setAttribute('data-kg-toggle-state', 'open'); - } else { - parentElement.setAttribute('data-kg-toggle-state', 'close'); + const toggleFn = function(event) { + const targetElement = event.target; + const parentElement = targetElement.closest('.kg-toggle-card'); + var toggleState = parentElement.getAttribute("data-kg-toggle-state"); + if (toggleState === 'close') { + parentElement.setAttribute('data-kg-toggle-state', 'open'); + } else { + parentElement.setAttribute('data-kg-toggle-state', 'close'); + } + }; + + for (let i = 0; i < toggleHeadingElements.length; i++) { + toggleHeadingElements[i].addEventListener('click', toggleFn, false); } -}; - -for (let i = 0; i < toggleHeadingElements.length; i++) { - toggleHeadingElements[i].addEventListener('click', toggleFn, false); -} +})();