Commit 70dacdc5 authored by Fabian Galinski's avatar Fabian Galinski 😾
Browse files

[FEATURE] Adds a new feature to disable the lightbox on mobile as well

parent 425fd023
......@@ -67,6 +67,17 @@
</TCEforms>
</settings.disableLightbox>
<settings.disableLightboxMobile>
<TCEforms>
<exclude>0</exclude>
<label>LLL:EXT:sg_youtube/Resources/Private/Language/locallang.xlf:flexform.disableLightboxMobile</label>
<config>
<type>check</type>
<default>0</default>
</config>
</TCEforms>
</settings.disableLightboxMobile>
<settings.aspectRatio>
<TCEforms>
<label>LLL:EXT:sg_youtube/Resources/Private/Language/locallang.xlf:flexform.aspectRatio</label>
......
......@@ -26,8 +26,12 @@
<target><![CDATA[Aspect Ratio (nur genutzt, wenn der Thumbnail-Typ dies prüfen soll)]]></target>
</trans-unit>
<trans-unit id="flexform.disableLightbox" approved="yes">
<source><![CDATA[Replace the thumbnail with the video and disable the lightbox]]></source>
<target><![CDATA[Das Thumbnail durch das Video ersetzen und die Lightbox deaktivieren]]></target>
<source><![CDATA[Replace the thumbnail with the video and disable the lightbox (Desktop)]]></source>
<target><![CDATA[Das Thumbnail durch das Video ersetzen und die Lightbox deaktivieren (Desktop)]]></target>
</trans-unit>
<trans-unit id="flexform.disableLightboxMobile" approved="yes">
<source><![CDATA[Replace the thumbnail with the video and disable the lightbox (Mobile)]]></source>
<target><![CDATA[Das Thumbnail durch das Video ersetzen und die Lightbox deaktivieren (Mobile)]]></target>
</trans-unit>
<trans-unit id="flexform.id" approved="yes">
<source><![CDATA[ID of Channel (UC), Playlist (PL) or Single Video (youtube.com/watch?v=%ID%)]]></source>
......
......@@ -21,7 +21,10 @@
<source><![CDATA[Aspect Ratio (only used if thumbnail type is set to check that)]]></source>
</trans-unit>
<trans-unit id="flexform.disableLightbox">
<source><![CDATA[Replace the thumbnail with the video and disable the lightbox]]></source>
<source><![CDATA[Replace the thumbnail with the video and disable the lightbox (Desktop)]]></source>
</trans-unit>
<trans-unit id="flexform.disableLightboxMobile">
<source><![CDATA[Replace the thumbnail with the video and disable the lightbox (Mobile)]]></source>
</trans-unit>
<trans-unit id="flexform.id">
<source><![CDATA[ID of Channel (UC), Playlist (PL) or Single Video (youtube.com/watch?v=%ID%)]]></source>
......
......@@ -12,7 +12,7 @@
<f:if condition="{feedIterator.isFirst} && {feedIterator.total} > 1">
<div class="sg-youtube">
<div class="sg-youtube-item-container">
<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}">
<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<f:if condition="{feedItem.thumbnail}">
<div class="sg-youtube-image">
<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
......@@ -33,7 +33,7 @@
<ul class="sg-youtube">
<f:for each="{feed}" as="feedItem" iteration="feedIterator">
<li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single', else: ' sg-youtube-item-list')}">
<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}">
<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<f:if condition="{feedItem.thumbnail}">
<div class="sg-youtube-image">
<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
......@@ -56,7 +56,7 @@
<ul class="sg-youtube sg-youtube-default">
<f:for each="{feed}" as="feedItem" iteration="feedIterator">
<li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single')}">
<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}">
<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<f:if condition="{feedItem.thumbnail}">
<div class="sg-youtube-image">
<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
......
......@@ -15,7 +15,9 @@ module.exports = function() {
$('.sg-youtube-item').each(function (index, item) {
let $youtubeItem = $(item),
viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
if ($youtubeItem.data('disable-lightbox') && viewportWidth >= 680) {
if (($youtubeItem.data('disable-lightbox') && viewportWidth >= 680)
|| ($youtubeItem.data('disable-lightbox-mobile') && viewportWidth < 680)
) {
$youtubeItem.on('click', replaceThumbnailWithVideo);
} else {
$youtubeItem.magnificPopup({
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment