Commit e9c3618a authored by Michael Kessler's avatar Michael Kessler
Browse files

Merge branch 'feature_modernizeJavascript' into 'master'

Feature modernize javascript

See merge request !4
parents 1fad7690 e5a942df
......@@ -28,6 +28,15 @@ plugin.tx_sgyoutube {
}
```
### JavaScript integration
```javascript
import LightboxManager from 'lightboxManager';
// You can change the lightboxSettings however you like but .sg-youtube-item was the old selctor
LightboxManager.init({props: {type: 'video'}, lightboxSettings: {selector: '.sg-youtube-item'}});
```
### Registration for more than the free 10.000 quotas per day
It's not 1 quota per 1 API call. Each API has its own costs, which can be seen in the link below.
......
/**
* JavaScript module for the sg-youtube plugin
*
*/
module.exports = function() {
'use strict';
const $ = require('jquery');
require('magnific-popup');
/**
* Initialize the whole Popup setup
*/
function init(section) {
$(`${section || ''} .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) ||
($youtubeItem.data('disable-lightbox-mobile') && viewportWidth < 680)
) {
$youtubeItem.on('click', replaceThumbnailWithVideo);
} else {
$youtubeItem.magnificPopup({
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com/',
id: function(url) {
return prepareVideoUrl(url);
},
src: '//www.youtube-nocookie.com/embed/%id%'
}
}
}
});
}
});
}
/**
* Replaces the given element behind the event with a youtube video.
*
* @param {Event} event
*/
function replaceThumbnailWithVideo(event) {
event.preventDefault();
let $youtubeItem = $(event.currentTarget);
// This needs to be done, because the height of inline elements is always 0, if on auto...
$youtubeItem.css('display', 'block');
let queryString = prepareVideoUrl($youtubeItem.attr('href')),
$thumbnailElement = $youtubeItem.find('.sg-youtube-image'),
width = $thumbnailElement.outerWidth() + 'px',
height = $thumbnailElement.outerHeight() + 'px';
$thumbnailElement.replaceWith('<div class="sg-youtube-item sg-card-shadow" ' +
'style="height: ' + height + '; width: ' + width + ';"><iframe ' +
'width="' + width + '" height="' + height + '" ' +
'src="https://www.youtube-nocookie.com/embed/' + queryString + '" frameborder="0" ' +
'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
'allowfullscreen></iframe></div>');
}
/**
* Prepares the given url, or returns null.
*
* @param {string} url
* @return {string|null}
*/
function prepareVideoUrl(url) {
let matches = url.match(/watch\?v=(.*)&list=(.*)/);
if (!matches) {
// check if the list parameter is missing
matches = url.match(/watch\?v=([^?&]*)/);
if (!matches) {
return null;
}
}
let [, videoString] = matches,
queryParameterSeparator = '?';
if (matches[2]) {
videoString += '?list=' + matches[2];
queryParameterSeparator = '&';
}
return videoString + queryParameterSeparator + 'autoplay=1&rel=0';
}
init();
};
{
"name": "sgalinski/sg-youtube",
"type": "typo3-cms-extension",
"description": "Embed YouTube Videos of a Playlist or Channel",
"homepage": "https://www.sgalinski.de",
"license": "GPL-2.0-or-later",
"version": "4.3.1",
"require": {
"typo3/cms-core": "^9.5.4 || ^10.4.0"
},
"require-dev": {
"roave/security-advisories": "dev-master"
},
"replace": {
"sgalinski/sg_youtube": "self.version"
},
"extra": {
"typo3/cms": {
"extension-key": "sg_youtube"
"name": "sgalinski/sg-youtube",
"type": "typo3-cms-extension",
"description": "Embed YouTube Videos of a Playlist or Channel",
"homepage": "https://www.sgalinski.de",
"license": "GPL-2.0-or-later",
"version": "4.3.1",
"require": {
"typo3/cms-core": "^9.5.4 || ^10.4.0",
"sgalinski/project-theme-lightbox": "^1.0.0"
},
"require-dev": {
"roave/security-advisories": "dev-master"
},
"replace": {
"sgalinski/sg_youtube": "self.version"
},
"extra": {
"typo3/cms": {
"extension-key": "sg_youtube"
}
},
"autoload": {
"psr-4": {
"SGalinski\\SgYoutube\\": "Classes/"
}
}
},
"autoload": {
"psr-4": {
"SGalinski\\SgYoutube\\": "Classes/"
}
}
}
......@@ -40,6 +40,7 @@ $EM_CONF['sg_youtube'] = [
'constraints' => [
'depends' => [
'typo3' => '9.5.0-10.4.99',
'project_theme_lightbox' => '^1.0.0',
],
'conflicts' => [],
'suggests' => [],
......
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