ghost 4.27.1 → 4.30.0

package/core/frontend/src/cards/css/video.css

@@ -0,0 +1,340 @@
+
+.kg-video-card {
+    position: relative;
+    --seek-before-width: 0%;
+    --volume-before-width: 100%;
+    --buffered-width: 0%;
+}
+
+.kg-video-card video {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.kg-video-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.kg-video-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: linear-gradient(180deg,rgba(0,0,0,0.3) 0,transparent 70%,transparent 100%);
+    z-index: 999;
+    transition: opacity .2s ease-in-out;
+}
+
+.kg-video-large-play-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 72px;
+    height: 72px;
+    padding: 0;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: opacity .2s ease-in-out;
+}
+
+.kg-video-large-play-icon svg {
+    width: 20px;
+    height: auto;
+    margin-left: 2px;
+    fill: #fff;
+}
+
+.kg-video-player-container {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 80px;
+    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
+    z-index: 999;
+    transition: opacity .2s ease-in-out;
+
+}
+
+.kg-video-player {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    z-index: 9999;
+    padding: 12px 16px;
+}
+
+.kg-video-current-time {
+    min-width: 38px;
+    padding: 0 4px;
+    color: #fff;
+    font-family: inherit;
+    font-size: .85em;
+    font-weight: 500;
+    line-height: 1.4em;
+    white-space: nowrap;
+}
+
+.kg-video-time {
+    color: rgba(255, 255, 255, 0.6);
+    font-family: inherit;
+    font-size: .85em;
+    font-weight: 500;
+    line-height: 1.4em;
+    white-space: nowrap;
+}
+
+.kg-video-duration {
+    padding: 0 4px;
+}
+
+.kg-video-play-icon,
+.kg-video-pause-icon {
+    position: relative;
+    padding: 0px 4px 0 0;
+    font-size: 0;
+    background: transparent;
+}
+
+.kg-video-hide {
+    display: none !important;
+}
+
+.kg-video-hide-animated {
+    opacity: 0 !important;
+    transition: opacity .2s ease-in-out;
+    cursor: initial;
+}
+
+.kg-video-play-icon svg,
+.kg-video-pause-icon svg {
+    width: 14px;
+    height: 14px;
+    fill: #fff;
+}
+
+.kg-video-seek-slider {
+    flex-grow: 1;
+    margin: 0 4px;
+}
+
+@media (max-width: 520px) {
+    .kg-video-seek-slider {
+        display: none;
+    }
+}
+
+.kg-video-playback-rate {
+    min-width: 37px;
+    padding: 0 4px;
+    color: #fff;
+    font-family: inherit;
+    font-size: .85em;
+    font-weight: 600;
+    line-height: 1.4em;
+    text-align: left;
+    background: transparent;
+    white-space: nowrap;
+}
+
+@media (max-width: 520px) {
+    .kg-video-playback-rate {
+        padding-left: 8px;
+    }
+}
+
+.kg-video-mute-icon,
+.kg-video-unmute-icon {
+    position: relative;
+    bottom: -1px;
+    padding: 0 4px;
+    font-size: 0;
+    background: transparent;
+}
+
+@media (max-width: 520px) {
+    .kg-video-mute-icon,
+    .kg-video-unmute-icon  {
+        margin-left: auto;
+    }
+}
+
+.kg-video-mute-icon svg,
+.kg-video-unmute-icon svg {
+    width: 16px;
+    height: 16px;
+    fill: #fff;
+}
+
+.kg-video-volume-slider {
+    width: 80px;
+}
+
+@media (max-width: 300px) {
+    .kg-video-volume-slider {
+        display: none;
+    }
+}
+
+.kg-video-seek-slider::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: var(--seek-before-width) !important;
+    height: 4px;
+    cursor: pointer;
+    background-color: #EBEEF0;
+    border-radius: 2px;
+}
+
+.kg-video-volume-slider::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: var(--volume-before-width) !important;
+    height: 4px;
+    cursor: pointer;
+    background-color: #EBEEF0;
+    border-radius: 2px;
+}
+
+/* Resetting browser styles
+/* --------------------------------------------------------------- */
+
+.kg-video-card input[type=range] {
+    position: relative;
+    -webkit-appearance: none;
+    background: transparent;
+}
+
+.kg-video-card input[type=range]:focus {
+    outline: none;
+}
+
+.kg-video-card input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+}
+
+.kg-video-card input[type=range]::-ms-track {
+    cursor: pointer;
+    border-color: transparent;
+    color: transparent;
+    background: transparent;
+}
+
+.kg-video-card button {
+    display: flex;
+    align-items: center;
+    border: 0;
+    cursor: pointer;
+}
+
+.kg-video-card input[type="range"] {
+    height: auto;
+    padding: 0;
+    border: 0;
+}
+
+/* Chrome & Safari styles
+/* --------------------------------------------------------------- */
+
+.kg-video-card input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+}
+
+.kg-video-card input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    box-sizing: content-box;
+    width: 13px;
+    height: 13px;
+    margin: -5px 0 0 0;
+    border: 0;
+    cursor: pointer;
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
+}
+
+.kg-video-card input[type="range"]:active::-webkit-slider-thumb {
+    transform: scale(1.2);
+}
+
+/* Firefox styles
+/* --------------------------------------------------------------- */
+
+.kg-video-card input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+}
+
+.kg-video-card input[type="range"]::-moz-range-progress {
+    background: #EBEEF0;
+    border-radius: 2px;
+}
+
+.kg-video-card input[type="range"]::-moz-range-thumb {
+    box-sizing: content-box;
+    width: 13px;
+    height: 13px;
+    border: 0;
+    cursor: pointer;
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
+}
+
+.kg-video-card input[type="range"]:active::-moz-range-thumb {
+    transform: scale(1.2);
+}
+
+/* Edge & IE styles
+/* --------------------------------------------------------------- */
+
+.kg-video-card input[type="range"]::-ms-track {
+    width: 100%;
+    height: 3px;
+    border: solid transparent;
+    color: transparent;
+    cursor: pointer;
+    background: transparent;
+}
+
+.kg-video-card input[type="range"]::-ms-fill-lower {
+    background: #fff;
+}
+
+.kg-video-card input[type="range"]::-ms-fill-upper {
+    background: #EBEEF0;
+}
+
+.kg-video-card input[type="range"]::-ms-thumb {
+    box-sizing: content-box;
+    width: 13px;
+    height: 13px;
+    border: 0;
+    cursor: pointer;
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
+}
+
+.kg-video-card input[type="range"]:active::-ms-thumb {
+    transform: scale(1.2);
+}
+

package/core/frontend/src/cards/js/audio.js

@@ -1,147 +1,146 @@
-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;
-
-    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 + '%');
+(function() {
+    const handleAudioPlayer = function (audioElementContainer) {
+        const audioPlayerContainer = audioElementContainer.querySelector('.kg-audio-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;
+
+        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 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 displayDuration = () => {
+            durationContainer.textContent = calculateTime(audio.duration);
+        }
 
-    const setSliderMax = () => {
-        seekSlider.max = Math.floor(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 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', () => {
+        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);
         });
-    }
 
-    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) {
+        pauseIconContainer.addEventListener('click', () => {
+            pauseIconContainer.classList.add("kg-audio-hide");
+            playIconContainer.classList.remove("kg-audio-hide");
+            audio.pause();
             cancelAnimationFrame(raf);
-        }
-    });
+        });
 
-    seekSlider.addEventListener('change', () => {
-        audio.currentTime = seekSlider.value;
-        if (!audio.paused) {
-            requestAnimationFrame(whilePlaying);
-        }
-    });
+        muteIconContainer.addEventListener('click', () => {
+            muteIconContainer.classList.add("kg-audio-hide");
+            unmuteIconContainer.classList.remove("kg-audio-hide");
+            audio.muted = false;
+        });
 
-    volumeSlider.addEventListener('input', (e) => {
-        const value = e.target.value;
-        showRangeProgress(e.target);
-        audio.volume = value / 100;
-    });
-}
+        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;
+        });
 
-const audioCardElements = document.querySelectorAll('.kg-audio-card');
+        audio.addEventListener('progress', displayBufferedAmount);
 
-for (let i = 0; i < audioCardElements.length; i++) {
-    handleAudioPlayer(audioCardElements[i]);
-}
+        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]);
+    }
+})();

package/core/frontend/src/cards/js/before-after.js

@@ -0,0 +1,41 @@
+(function () {
+    const beforeAfterCards = [...document.querySelectorAll('.kg-before-after-card')];
+
+    for (let card of beforeAfterCards) {
+        const isFullWidth = card.classList.contains('kg-width-full');
+        const input = card.querySelector('input');
+        const overlay = card.querySelector('.kg-before-after-card-image-before');
+        const orientation = card.querySelector('div').getAttribute('data-orientation');
+        const images = [...card.querySelectorAll('img')];
+        const smallestImageWidth = Math.min(
+            ...images.map(img => parseInt(img.getAttribute('width')))
+        );
+
+        function updateSlider() {
+            if (orientation === 'vertical') {
+                overlay.setAttribute('style', `height: ${input.value}%`);
+            } else {
+                overlay.setAttribute('style', `width: ${input.value}%`);
+            }
+        }
+
+        function updateDimensions() {
+            const containerWidth = parseInt(getComputedStyle(card).getPropertyValue('width'));
+            const width = isFullWidth ? containerWidth : Math.min(smallestImageWidth, containerWidth);
+            for (let image of images) {
+                image.setAttribute('style', `width: ${width.toString()}px;`);
+            }
+        }
+
+        input.addEventListener('input', function () {
+            updateSlider();
+        });
+
+        window.addEventListener('resize', function () {
+            updateDimensions();
+        });
+
+        updateDimensions();
+        updateSlider();
+    }
+})();

package/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%';
+    })
+})();