[TASK] Make the extension standalone

Classes/Backend/Ajax.php

+<?php
+
+namespace SGalinski\SgYoutube\Backend;
+
+/***************************************************************
+ *  Copyright notice
+ *
+ *  (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ *  All rights reserved
+ *
+ *  This script is part of the TYPO3 project. The TYPO3 project is
+ *  free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  The GNU General Public License can be found at
+ *  http://www.gnu.org/copyleft/gpl.html.
+ *
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  This copyright notice MUST APPEAR in all copies of the script!
+ ***************************************************************/
+
+use Exception;
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use SGalinski\SgCookieOptin\Exception\SearchOptinHistoryException;
+use SGalinski\SgCookieOptin\Service\LicenceCheckService;
+use SGalinski\SgCookieOptin\Service\OptinHistoryService;
+use TYPO3\CMS\Core\Http\Response;
+use TYPO3\CMS\Extbase\Utility\LocalizationUtility;
+
+/**
+ * Class Ajax
+ *
+ * @package SGalinski\SgYoutube\Backend
+ */
+class Ajax {
+	/**
+	 * Checks whether the license is valid
+	 *
+	 * @param ServerRequestInterface $request
+	 * @param ResponseInterface $response
+	 * @return ResponseInterface
+	 * @throws \InvalidArgumentException
+	 * @throws Exception
+	 */
+	public function checkLicense(
+		ServerRequestInterface $request,
+		ResponseInterface $response = NULL
+	) {
+		if ($response === NULL) {
+			$response = new Response();
+		}
+
+		LicenceCheckService::setLastAjaxNotificationCheckTimestamp();
+		$responseData = LicenceCheckService::getLicenseCheckResponseData(TRUE);
+		$response->getBody()->write(json_encode($responseData));
+		return $response;
+	}
+}

Classes/Form/Element/LicenceStatus.php

@@ -27,12 +27,12 @@ use TYPO3\CMS\Backend\Form\Element\AbstractFormElement;
  */
 class LicenceStatus extends AbstractFormElement
 {
-    public function render()
+    public function render(): array
     {
         $resultArray = [];
         $responseData = $this->checkLicenceKey();
         if (!$responseData) {
-            return;
+            return [];
         }
 
         $errorOrWarning = match ($responseData['error']) {
@@ -51,10 +51,10 @@ class LicenceStatus extends AbstractFormElement
     private function checkLicenceKey()
     {
         if (!LicenceCheckService::isTYPO3VersionSupported()
-            || !LicenceCheckService::isTimeForNextCheck()
-            || LicenceCheckService::isInDevelopmentContext()
+//            || !LicenceCheckService::isTimeForNextCheck()
+//            || LicenceCheckService::isInDevelopmentContext()
         ) {
-            return;
+            return [];
         }
 
         LicenceCheckService::setLastAjaxNotificationCheckTimestamp();

Classes/Hooks/LicenceCheckHook.php

+<?php
+/**
+ *
+ * Copyright notice
+ *
+ * (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ * All rights reserved
+ *
+ * This script is part of the TYPO3 project. The TYPO3 project is
+ * free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The GNU General Public License can be found at
+ * http://www.gnu.org/copyleft/gpl.html.
+ *
+ * This script is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * This copyright notice MUST APPEAR in all copies of the script!
+ */
+
+namespace SGalinski\SgYoutube\Hooks;
+
+use SGalinski\SgCookieOptin\Service\LicenceCheckService;
+use TYPO3\CMS\Backend\Controller\BackendController;
+use TYPO3\CMS\Core\Page\PageRenderer;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Extbase\Utility\LocalizationUtility;
+
+/**
+ * Class BackendControllerHook
+ *
+ * @package SGalinski\ProjectBase\Hook
+ * @author Georgi Mateev <georgi.mateev@sgalinski.de>
+ */
+class LicenceCheckHook {
+	/**
+	 * Add JavaScript to display the expiring license warning
+	 */
+	protected function addAjaxLicenseCheck() {
+		$pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
+		$pageRenderer->loadRequireJsModule('TYPO3/CMS/SgYoutube/Backend/LicenseNotification');
+	}
+
+	/**
+	 * Checks if the license key is OK
+	 *
+	 * @param array $configuration
+	 * @param BackendController $parentBackendController
+	 */
+	public function performLicenseCheck(array $configuration, BackendController $parentBackendController) {
+        if (!LicenceCheckService::isTYPO3VersionSupported()
+            || !LicenceCheckService::isTimeForNextCheck()
+            || LicenceCheckService::isInDevelopmentContext()
+        ) {
+            return;
+        }
+
+		$this->addAjaxLicenseCheck();
+	}
+}

Configuration/Backend/AjaxRoutes.php

+<?php
+
+return [
+	'sg_youtube::checkLicense' => [
+		'path' => '/sg_youtube/checkLicense',
+		'target' => SGalinski\SgYoutube\Backend\Ajax::class . '::checkLicense',
+	],
+];

Configuration/FlexForms/flexform_sgyoutube_youtube.xml

@@ -118,7 +118,7 @@
 							<label>LLL:EXT:sg_youtube/Resources/Private/Language/locallang.xlf:flexform.disableLightbox</label>
 							<config>
 								<type>check</type>
-								<default>0</default>
+								<default>1</default>
 							</config>
 						</TCEforms>
 					</settings.disableLightbox>
@@ -129,7 +129,7 @@
 							<label>LLL:EXT:sg_youtube/Resources/Private/Language/locallang.xlf:flexform.disableLightboxMobile</label>
 							<config>
 								<type>check</type>
-								<default>0</default>
+								<default>1</default>
 							</config>
 						</TCEforms>
 					</settings.disableLightboxMobile>

Configuration/Services.yaml

@@ -20,3 +20,7 @@ services:
     class: TYPO3\CMS\Core\Cache\Frontend\FrontendInterface
     factory: [ '@TYPO3\CMS\Core\Cache\CacheManager', 'getCache' ]
     arguments: [ 'sgyoutube_cache' ]
+    
+  SGalinski\SgYoutube\Form\Element\LicenceStatus:
+    autowire: false
+    autoconfigure: false

README.md

@@ -35,9 +35,9 @@ Install the **project_theme_lightbox** extension and integrate it to your main t
 file ```sgYoutubeLight.js``` to your JavaScript and initilize it.
 
 ```javascript
-import SgYoutubeLightbox from 'sgYoutubeLightbox';
+import SgVideoLightbox from 'sgYoutubeLightbox';
 
-new SgYoutubeLightbox();
+new SgVideoLightbox();
 ```
 
 ### Registration for more than the free 10.000 quotas per day

Resources/Private/Layouts/Default.html

 <div class="tx-sg-youtube">
 	<f:asset.css identifier="sgVideoCss" href="EXT:sg_youtube/Resources/Public/StyleSheets/main.min.css" />
-	<f:asset.css identifier="sgVideoIframeLightboxCss" href="EXT:sg_youtube/Resources/Public/Vendor/iframe-lightbox/css/iframe-lightbox.min.css" />
-	<f:asset.script identifier="sgVideoIframeLightboxJs" src="EXT:sg_youtube/Resources/Public/Vendor/iframe-lightbox/js/iframe-lightbox.min.js" />
-	<f:asset.script identifier="sgVideoReadMore" type="module" src="EXT:sg_youtube/Resources/Public/JavaScript/Modules/sgVideo.js" />
-	<f:asset.script identifier="sgVideoYoutube" type="module" src="EXT:sg_youtube/Resources/Public/JavaScript/sgYoutubeLightbox.js" />
+	<f:asset.script identifier="sgVideoJs" type="module" src="EXT:sg_youtube/Resources/Public/JavaScript/Dist/main.bundled.min.js" />
 	<f:render section="main"/>
 </div>

Resources/Private/Templates/Youtube/Index.html

@@ -37,7 +37,7 @@
 	<div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}">
 		<f:if condition="{feedCount} < 2">
 			<f:then>
-				<f:render section="youtubeItem" arguments="{
+				<f:render section="videoItem" arguments="{
 					feedItem: feed.0,
 					titleChars: 1000,
 					descChars: 1000
@@ -68,7 +68,7 @@
 	<ul class="sg-video__list sg-video__list--{f:if(condition: '{settings.layout} === \'rows\'', then: 'rows', else: 'default')}">
 		<f:for each="{feed}" as="feedItem" iteration="feedIterator">
 			<li class="sg-video__list-item">
-				<f:render section="youtubeItem" arguments="{
+				<f:render section="videoItem" arguments="{
 					feed: feed,
 					feedItem: feedItem,
 					titleChars: 500,
@@ -98,7 +98,7 @@
 	</f:variable>
 
 	<div class="sg-video__highlight {highlightClasses}">
-		<f:render section="youtubeItem" arguments="{
+		<f:render section="videoItem" arguments="{
 			feedItem: feed.0,
 			titleChars: 200,
 			descChars: 320
@@ -108,7 +108,7 @@
 		<f:for each="{feed}" as="feedItem" iteration="feedIterator">
 			<f:if condition="!{feedIterator.isFirst}">
 				<li class="sg-video__list-item {f:if(condition: '{feedCount} === 4', then: 'sg-video__list-item--alt')}">
-					<f:render section="youtubeItem" arguments="{
+					<f:render section="videoItem" arguments="{
 						feed: feed,
 						feedItem: feedItem,
 						titleChars: 100,
@@ -119,15 +119,16 @@
 	</ul>
 </f:section>
 
-<f:section name="youtubeItem">
+<f:section name="videoItem">
 	<f:variable name="urlParameters">{f:if(condition: '{settings.urlParameters}', then: '{settings.urlParameters}', else: '{settings.globalUrlParameters}')}</f:variable>
 	<f:variable name="feedItemUrl"><yt:urlWithQueryParameters url="{feedItem.url}" parameters="{urlParameters}" /></f:variable>
 	<div class="sg-video__item">
 		<f:if condition="{feedItem.thumbnail}">
-			<a class="sg-video__image-container sg-youtube-item" href="{feedItemUrl}"
+			<a class="sg-video__image-container sg-video-item" href="{feedItemUrl}"
 			   data-disable-lightbox="{settings.disableLightbox}" target="_blank"
 			   data-disable-lightbox-mobile="{settings.disableLightboxMobile}"
-			   data-additional-url-parameters="{urlParameters}">
+			   data-additional-url-parameters="{urlParameters}"
+			   data-video-type="youtube">
 				<yt:renderSvg color="currentColor" name="solid-play"></yt:renderSvg>
 				<img class="sg-video__image" src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
 			</a>

Resources/Public/JavaScript/Backend/LicenseNotification.js

+/*
+ *
+ * Copyright notice
+ *
+ * (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ * All rights reserved
+ *
+ * This script is part of the TYPO3 project. The TYPO3 project is
+ * free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The GNU General Public License can be found at
+ * http://www.gnu.org/copyleft/gpl.html.
+ *
+ * This script is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * This copyright notice MUST APPEAR in all copies of the script!
+ */
+
+define(['jquery', 'TYPO3/CMS/Backend/Notification'], ($, Notification) => {
+	
+	const LicenseCheck = {
+		init () {
+			$.ajax({
+				url: TYPO3.settings.ajaxUrls['sg_youtube::checkLicense'],
+				dataType: 'text',
+				success (result) {
+					const data = JSON.parse(result);
+					switch (data.error) {
+						case 1: {
+							Notification.error(data.title, data.message, 0);
+							break;
+						}
+						case 2: {
+							Notification.warning(data.title, data.message, 0);
+						}
+					}
+				},
+			});
+		},
+	};
+
+	return LicenseCheck.init();
+});

Resources/Public/JavaScript/Dist/main.bundled.min.js

+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined")
+      return require.apply(this, arguments);
+    throw new Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __commonJS = (cb, mod) => function __require2() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
+
+  // public/typo3conf/ext/sg_youtube/node_modules/basiclightbox/dist/basicLightbox.min.js
+  var require_basicLightbox_min = __commonJS({
+    "public/typo3conf/ext/sg_youtube/node_modules/basiclightbox/dist/basicLightbox.min.js"(exports, module) {
+      !function(e) {
+        if ("object" == typeof exports && "undefined" != typeof module)
+          module.exports = e();
+        else if ("function" == typeof define && define.amd)
+          define([], e);
+        else {
+          ("undefined" != typeof window ? window : "undefined" != typeof window ? window : "undefined" != typeof self ? self : this).basicLightbox = e();
+        }
+      }(function() {
+        return function e(n, t, o) {
+          function r(c2, u) {
+            if (!t[c2]) {
+              if (!n[c2]) {
+                var s = "function" == typeof __require && __require;
+                if (!u && s)
+                  return s(c2, true);
+                if (i)
+                  return i(c2, true);
+                var a = new Error("Cannot find module '" + c2 + "'");
+                throw a.code = "MODULE_NOT_FOUND", a;
+              }
+              var l = t[c2] = { exports: {} };
+              n[c2][0].call(l.exports, function(e2) {
+                return r(n[c2][1][e2] || e2);
+              }, l, l.exports, e, n, t, o);
+            }
+            return t[c2].exports;
+          }
+          for (var i = "function" == typeof __require && __require, c = 0; c < o.length; c++)
+            r(o[c]);
+          return r;
+        }({ 1: [function(e, n, t) {
+          "use strict";
+          Object.defineProperty(t, "__esModule", { value: true }), t.create = t.visible = void 0;
+          var o = function(e2) {
+            var n2 = arguments.length > 1 && void 0 !== arguments[1] && arguments[1], t2 = document.createElement("div");
+            return t2.innerHTML = e2.trim(), true === n2 ? t2.children : t2.firstChild;
+          }, r = function(e2, n2) {
+            var t2 = e2.children;
+            return 1 === t2.length && t2[0].tagName === n2;
+          }, i = function(e2) {
+            return null != (e2 = e2 || document.querySelector(".basicLightbox")) && true === e2.ownerDocument.body.contains(e2);
+          };
+          t.visible = i;
+          t.create = function(e2, n2) {
+            var t2 = function(e3, n3) {
+              var t3 = o('\n		<div class="basicLightbox '.concat(n3.className, '">\n			<div class="basicLightbox__placeholder" role="dialog"></div>\n		</div>\n	')), i2 = t3.querySelector(".basicLightbox__placeholder");
+              e3.forEach(function(e4) {
+                return i2.appendChild(e4);
+              });
+              var c2 = r(i2, "IMG"), u2 = r(i2, "VIDEO"), s = r(i2, "IFRAME");
+              return true === c2 && t3.classList.add("basicLightbox--img"), true === u2 && t3.classList.add("basicLightbox--video"), true === s && t3.classList.add("basicLightbox--iframe"), t3;
+            }(e2 = function(e3) {
+              var n3 = "string" == typeof e3, t3 = e3 instanceof HTMLElement == 1;
+              if (false === n3 && false === t3)
+                throw new Error("Content must be a DOM element/node or string");
+              return true === n3 ? Array.from(o(e3, true)) : "TEMPLATE" === e3.tagName ? [e3.content.cloneNode(true)] : Array.from(e3.children);
+            }(e2), n2 = function() {
+              var e3 = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+              if (null == (e3 = Object.assign({}, e3)).closable && (e3.closable = true), null == e3.className && (e3.className = ""), null == e3.onShow && (e3.onShow = function() {
+              }), null == e3.onClose && (e3.onClose = function() {
+              }), "boolean" != typeof e3.closable)
+                throw new Error("Property `closable` must be a boolean");
+              if ("string" != typeof e3.className)
+                throw new Error("Property `className` must be a string");
+              if ("function" != typeof e3.onShow)
+                throw new Error("Property `onShow` must be a function");
+              if ("function" != typeof e3.onClose)
+                throw new Error("Property `onClose` must be a function");
+              return e3;
+            }(n2)), c = function(e3) {
+              return false !== n2.onClose(u) && function(e4, n3) {
+                return e4.classList.remove("basicLightbox--visible"), setTimeout(function() {
+                  return false === i(e4) || e4.parentElement.removeChild(e4), n3();
+                }, 410), true;
+              }(t2, function() {
+                if ("function" == typeof e3)
+                  return e3(u);
+              });
+            };
+            true === n2.closable && t2.addEventListener("click", function(e3) {
+              e3.target === t2 && c();
+            });
+            var u = { element: function() {
+              return t2;
+            }, visible: function() {
+              return i(t2);
+            }, show: function(e3) {
+              return false !== n2.onShow(u) && function(e4, n3) {
+                return document.body.appendChild(e4), setTimeout(function() {
+                  requestAnimationFrame(function() {
+                    return e4.classList.add("basicLightbox--visible"), n3();
+                  });
+                }, 10), true;
+              }(t2, function() {
+                if ("function" == typeof e3)
+                  return e3(u);
+              });
+            }, close: c };
+            return u;
+          };
+        }, {}] }, {}, [1])(1);
+      });
+    }
+  });
+
+  // public/typo3conf/ext/sg_youtube/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
+  var BasicLightbox = __toESM(require_basicLightbox_min());
+  var SgVideoLightbox = class {
+    constructor() {
+      const videoItems = document.querySelectorAll(".sg-video-item");
+      const isMobile = window.matchMedia("(max-width: 679px)").matches;
+      videoItems.forEach((item) => {
+        if (item.dataset.disableLightboxMobile === "1" && isMobile || item.dataset.disableLightbox === "1" && !isMobile) {
+          item.classList.remove("sg-video-item");
+          item.addEventListener("click", SgVideoLightbox.disableLightbox.bind(this));
+        }
+      });
+      Array.prototype.forEach.call(document.querySelectorAll(".sg-video-item"), (element) => {
+        element.addEventListener("click", SgVideoLightbox.openLightbox);
+      });
+    }
+    static openLightbox(event) {
+      event.preventDefault();
+      switch (event.target.closest("a").dataset.videoType) {
+        case "youtube": {
+          SgVideoLightbox.openYouTubeLightBox(event);
+          break;
+        }
+        case "vimeo": {
+          SgVideoLightbox.openVimeoLightBox(event);
+          break;
+        }
+        default:
+      }
+    }
+    static openVimeoLightBox(event) {
+      event.doSomething();
+    }
+    static openYouTubeLightBox(event) {
+      let url = event.target.closest("a").href;
+      const videoId = SgVideoLightbox.getVideoIdFromUrl(url);
+      url = `https://www.youtube-nocookie.com/embed/${videoId}`;
+      const instance = BasicLightbox.create(`
+			<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+			class="sg-video-iframe sg-video-youtube-iframe" src="${url}"></iframe>
+		`);
+      SgVideoLightbox.resizeYoutubeIframe(instance.element().querySelector("iframe"));
+      instance.show();
+    }
+    static resizeYoutubeIframe(iframe) {
+      const width = window.innerWidth * 0.6;
+      const height = width * 0.5625;
+      iframe.width = Number.parseInt(width);
+      iframe.height = Number.parseInt(height);
+    }
+    static disableLightbox(event) {
+      event.preventDefault();
+      const item = event.currentTarget;
+      item.classList.add("no-lightbox");
+      const videoId = SgVideoLightbox.includeAdditionalUrlParameters(
+        SgVideoLightbox.getVideoIdFromUrl(item.href),
+        item.dataset.additionalUrlParameters
+      );
+      const videoImage = item.querySelector(".sg-video__image");
+      const height = videoImage.offsetHeight;
+      const width = videoImage.offsetWidth;
+      const iframe = document.createElement("iframe");
+      iframe.width = width;
+      iframe.height = height;
+      iframe.style.border = "none";
+      iframe.allowFullscreen = true;
+      iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+      iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}`;
+      if (videoImage.parentElement.nodeName.toLowerCase() === "picture") {
+        item.replaceChild(iframe, videoImage.parentElement);
+      } else {
+        videoImage.replaceWith(iframe);
+      }
+    }
+    static getVideoIdFromUrl(url) {
+      let matches = url.match(/watch\?v=(.*)&list=(.*)/);
+      if (!matches) {
+        matches = url.match(/watch\?v=([^&?]*)/);
+        if (!matches) {
+          return null;
+        }
+      }
+      let [, videoString] = matches;
+      let queryParameterSeparator = "?";
+      if (matches[2]) {
+        videoString += `?list=${matches[2]}`;
+        queryParameterSeparator = "&";
+      }
+      return `${videoString + queryParameterSeparator}autoplay=1&rel=0`;
+    }
+    static includeAdditionalUrlParameters(url, _additionalUrlParameters = "") {
+      if (!url) {
+        return "";
+      }
+      if (!_additionalUrlParameters) {
+        return url;
+      }
+      let additionalUrlParameters = _additionalUrlParameters;
+      const beginsWithQuestionMark = additionalUrlParameters.charAt(0) === "?";
+      const beginsWithAmpersand = additionalUrlParameters.charAt(0) === "&";
+      if (beginsWithQuestionMark || beginsWithAmpersand) {
+        additionalUrlParameters = additionalUrlParameters.slice(1);
+      }
+      return url.includes("?") ? `${url}&${additionalUrlParameters}` : `${url}?${additionalUrlParameters}`;
+    }
+  };
+
+  // public/typo3conf/ext/sg_youtube/Resources/Public/JavaScript/Modules/sgVideo.js
+  var SgVideo = class {
+    constructor(element, settings) {
+      this.settings = settings;
+      this.dom = {
+        list: element,
+        listItems: element.querySelectorAll(".sg-video__list-item")
+      };
+      this.active = 0;
+      this.dom.listItems.forEach((item, index) => {
+        this.setupReadMore(index);
+      });
+      if (!this.settings.disableMinHeight) {
+        this.checkImageSizes();
+      }
+    }
+    checkImageSizes() {
+      let highestValue = 0;
+      const images = [];
+      this.dom.listItems.forEach((item) => {
+        const image = item.querySelector("img");
+        if (image && image.height > highestValue) {
+          highestValue = image.height;
+        }
+        images.push(image);
+      });
+      images.forEach((image) => {
+        image.style.minHeight = `${highestValue}px`;
+      });
+    }
+    setupReadMore(index) {
+      const item = this.dom.listItems[index];
+      const button = item.querySelector(".sg-video__read-more");
+      const text = item.querySelector(this.settings.textSelector);
+      let visibleLines = 4;
+      if (this.settings.visibleLines) {
+        visibleLines = this.settings.visibleLines;
+      }
+      if (!text) {
+        if (button) {
+          button.classList.add("disabled");
+        }
+        return;
+      }
+      if (!Object.prototype.hasOwnProperty.call(this.settings, "itemHeight")) {
+        this.settings.itemHeight = Number.parseFloat(
+          window.getComputedStyle(text, null).getPropertyValue("line-height")
+        ) * visibleLines;
+      }
+      if (!button) {
+        return;
+      }
+      if (!text || !window.matchMedia("(min-width: 1225px)").matches) {
+        button.classList.add("disabled");
+        return;
+      }
+      const textHeight = text.offsetHeight;
+      text.dataset.height = textHeight;
+      text.style.maxHeight = `${this.settings.itemHeight}px`;
+      if (this.isTextShort(textHeight)) {
+        button.classList.add("disabled");
+        return;
+      }
+      button.addEventListener("click", () => this.showText(index));
+    }
+    showText(index) {
+      const item = this.dom.listItems[index];
+      if (item.classList.contains("expanded")) {
+        this.active -= 1;
+        this.hideText(index);
+        return;
+      }
+      this.active += 1;
+      const button = item.querySelector(".sg-video__read-more");
+      const text = item.querySelector(this.settings.textSelector);
+      if (this.settings.type === "default") {
+        this.dom.listItems.forEach((_item) => {
+          _item.style.height = `${_item.getBoundingClientRect().height}px`;
+        });
+      }
+      item.classList.add("expanded");
+      text.classList.add("expanded");
+      item.style.zIndex = 10 + (this.dom.listItems.length - index);
+      text.style.maxHeight = `${text.dataset.height}px`;
+      button.classList.add("expanded");
+      button.textContent = button.dataset.buttonCloseText;
+    }
+    hideText(index) {
+      const item = this.dom.listItems[index];
+      const button = item.querySelector(".sg-video__read-more");
+      const text = item.querySelector(this.settings.textSelector);
+      text.style.maxHeight = `${this.settings.itemHeight}px`;
+      text.classList.remove("expanded");
+      button.classList.remove("expanded");
+      button.textContent = button.dataset.buttonOpenText;
+      setTimeout(() => {
+        if (this.settings.type === "default" && this.active === 0) {
+          this.dom.listItems.forEach((_item) => {
+            _item.style.height = "";
+            _item.style.zIndex = "";
+          });
+        }
+        item.classList.remove("expanded");
+      }, 200);
+    }
+    isTextShort(height) {
+      return height <= this.settings.itemHeight + 20;
+    }
+  };
+
+  // public/typo3conf/ext/sg_youtube/Resources/Public/JavaScript/main.js
+  function main() {
+    new SgVideoLightbox();
+    document.querySelectorAll(".sg-video__list--default").forEach((item) => {
+      new SgVideo(item, {
+        visibleLines: 10,
+        textSelector: ".sg-video__bodytext",
+        type: "default"
+      });
+    });
+    document.querySelectorAll(".sg-video__list--rows").forEach((item) => {
+      new SgVideo(item, { textSelector: ".sg-video__description" });
+    });
+  }
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", main);
+  } else {
+    main();
+  }
+})();
+//# sourceMappingURL=main.bundled.min.js.map

Resources/Public/JavaScript/Dist/sgYoutubeLightbox.bundled.min.js

-"use strict";
-(() => {
-  // public/typo3conf/ext/sg_youtube/Resources/Public/JavaScript/sgYoutubeLightbox.js
-  var SgYoutubeLightbox = class {
-    constructor() {
-      const youtubeItems = document.querySelectorAll(".sg-youtube-item");
-      const isMobile = window.matchMedia("(max-width: 679px)").matches;
-      youtubeItems.forEach((item) => {
-        if (item.dataset.disableLightboxMobile === "1" && isMobile || item.dataset.disableLightbox === "1" && !isMobile) {
-          item.classList.remove("sg-youtube-item");
-          item.addEventListener("click", this.disableLightbox.bind(this));
-        }
-      });
-      [].forEach.call(document.getElementsByClassName("sg-youtube-item"), function(el) {
-        const videoId = this.getVideoIdFromUrl(el.href);
-        el.href = `https://www.youtube-nocookie.com/embed/${videoId}`;
-        el.lightbox = new IframeLightbox(el);
-      }.bind(this));
-    }
-    disableLightbox(event) {
-      event.preventDefault();
-      const item = event.currentTarget;
-      item.classList.add("no-lightbox");
-      const videoId = this.includeAdditionalUrlParameters(
-        this.getVideoIdFromUrl(item.href),
-        item.dataset.additionalUrlParameters
-      );
-      const videoImage = item.querySelector(".sg-video__image");
-      const height = videoImage.offsetHeight;
-      const width = videoImage.offsetWidth;
-      const iframe = document.createElement("iframe");
-      iframe.width = width;
-      iframe.height = height;
-      iframe.style.border = "none";
-      iframe.allowFullscreen = true;
-      iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
-      iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}`;
-      if (videoImage.parentElement.nodeName.toLowerCase() === "picture") {
-        item.replaceChild(iframe, videoImage.parentElement);
-      } else {
-        item.replaceChild(iframe, videoImage);
-      }
-    }
-    getVideoIdFromUrl(url) {
-      let matches = url.match(/watch\?v=(.*)&list=(.*)/);
-      if (!matches) {
-        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";
-    }
-    includeAdditionalUrlParameters(url, _additionalUrlParameters = "") {
-      if (!url) {
-        return "";
-      }
-      if (!_additionalUrlParameters) {
-        return url;
-      }
-      let additionalUrlParameters = _additionalUrlParameters;
-      let beginsWithQuestionMark = additionalUrlParameters.charAt(0) === "?";
-      let beginsWithAmpersand = additionalUrlParameters.charAt(0) === "&";
-      if (beginsWithQuestionMark || beginsWithAmpersand) {
-        additionalUrlParameters = additionalUrlParameters.slice(1);
-      }
-      return url.includes("?") ? url + "&" + additionalUrlParameters : url + "?" + additionalUrlParameters;
-    }
-  };
-})();
-//# sourceMappingURL=sgYoutubeLightbox.bundled.min.js.map

Resources/Public/JavaScript/Modules/sgVideo.js

@@ -43,7 +43,10 @@ export default class SgVideo {
 		const item = this.dom.listItems[index];
 		const button = item.querySelector('.sg-video__read-more');
 		const text = item.querySelector(this.settings.textSelector);
-		const visibleLines = this.settings.visibleLines ? this.settings.visibleLines : 4;
+		let visibleLines = 4;
+		if (this.settings.visibleLines) {
+			visibleLines = this.settings.visibleLines;
+		}
 
 		if (!text) {
 			if (button) {
@@ -54,8 +57,9 @@ export default class SgVideo {
 
 		if (!Object.prototype.hasOwnProperty.call(this.settings, 'itemHeight')) {
 			this.settings.itemHeight =
-				parseFloat(window.getComputedStyle(text, null).getPropertyValue('line-height')) *
-				visibleLines;
+				Number.parseFloat(
+					window.getComputedStyle(text, null).getPropertyValue('line-height'),
+				) * visibleLines;
 		}
 
 		if (!button) {
@@ -104,7 +108,7 @@ export default class SgVideo {
 		item.style.zIndex = 10 + (this.dom.listItems.length - index);
 		text.style.maxHeight = `${text.dataset.height}px`;
 		button.classList.add('expanded');
-		button.innerText = button.dataset.buttonCloseText;
+		button.textContent = button.dataset.buttonCloseText;
 	}
 
 	hideText(index) {
@@ -115,15 +119,13 @@ export default class SgVideo {
 		text.style.maxHeight = `${this.settings.itemHeight}px`;
 		text.classList.remove('expanded');
 		button.classList.remove('expanded');
-		button.innerText = button.dataset.buttonOpenText;
+		button.textContent = button.dataset.buttonOpenText;
 		setTimeout(() => {
-			if (this.settings.type === 'default') {
-				if (this.active === 0) {
-					this.dom.listItems.forEach((_item) => {
-						_item.style.height = '';
-						_item.style.zIndex = '';
-					});
-				}
+			if (this.settings.type === 'default' && this.active === 0) {
+				this.dom.listItems.forEach((_item) => {
+					_item.style.height = '';
+					_item.style.zIndex = '';
+				});
 			}
 			item.classList.remove('expanded');
 		}, 200);

Resources/Public/JavaScript/sgYoutubeLightbox.js → Resources/Public/JavaScript/Modules/sgVideoLightbox.js

-'use strict';
+import * as BasicLightbox from 'basiclightbox';
 
-export default class SgYoutubeLightbox {
+export default class SgVideoLightbox {
 	/**
 	 * Initializes the LightboxManager with the necessary parameters.
 	 */
 	constructor() {
-		const youtubeItems = document.querySelectorAll('.sg-youtube-item');
+		const videoItems = document.querySelectorAll('.sg-video-item');
 		const isMobile = window.matchMedia('(max-width: 679px)').matches;
 
-		youtubeItems.forEach((item) => {
+		videoItems.forEach((item) => {
 			if (
 				(item.dataset.disableLightboxMobile === '1' && isMobile) ||
 				(item.dataset.disableLightbox === '1' && !isMobile)
 			) {
-				item.classList.remove('sg-youtube-item');
-				item.addEventListener('click', this.disableLightbox.bind(this));
+				item.classList.remove('sg-video-item');
+				item.addEventListener('click', SgVideoLightbox.disableLightbox.bind(this));
 			}
 		});
 
-		[].forEach.call(
-			document.getElementsByClassName('sg-youtube-item'),
-			function (el) {
-				const videoId = this.getVideoIdFromUrl(el.href);
-				el.href = `https://www.youtube-nocookie.com/embed/${videoId}`;
+		Array.prototype.forEach.call(document.querySelectorAll('.sg-video-item'), (element) => {
+			element.addEventListener('click', SgVideoLightbox.openLightbox);
+		});
+	}
 
-				el.lightbox = new IframeLightbox(el);
-			}.bind(this),
-		);
+	static openLightbox(event) {
+		event.preventDefault();
+		switch (event.target.closest('a').dataset.videoType) {
+			case 'youtube': {
+				SgVideoLightbox.openYouTubeLightBox(event);
+				break;
+			}
+			case 'vimeo': {
+				SgVideoLightbox.openVimeoLightBox(event);
+				break;
+			}
+			default:
+			// do nothing
+		}
+	}
+
+	static openVimeoLightBox(event) {
+		event.doSomething();
+	}
+
+	static openYouTubeLightBox(event) {
+		let url = event.target.closest('a').href;
+		const videoId = SgVideoLightbox.getVideoIdFromUrl(url);
+		url = `https://www.youtube-nocookie.com/embed/${videoId}`;
+
+		const instance = BasicLightbox.create(`
+			<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+			class="sg-video-iframe sg-video-youtube-iframe" src="${url}"></iframe>
+		`);
+
+		SgVideoLightbox.resizeYoutubeIframe(instance.element().querySelector('iframe'));
+
+		instance.show();
+	}
+
+	static resizeYoutubeIframe(iframe) {
+		const width = window.innerWidth * 0.6; // set width to 75% of window width
+		const height = width * 0.5625; // set height to maintain 16:9 aspect ratio
+		iframe.width = Number.parseInt(width); // set the iframe width
+		iframe.height = Number.parseInt(height); // set the iframe height
 	}
 
 	/**
@@ -34,13 +70,13 @@ export default class SgYoutubeLightbox {
 	 *
 	 * @param event
 	 */
-	disableLightbox(event) {
+	static disableLightbox(event) {
 		event.preventDefault();
 		const item = event.currentTarget;
 		item.classList.add('no-lightbox');
 
-		const videoId = this.includeAdditionalUrlParameters(
-			this.getVideoIdFromUrl(item.href),
+		const videoId = SgVideoLightbox.includeAdditionalUrlParameters(
+			SgVideoLightbox.getVideoIdFromUrl(item.href),
 			item.dataset.additionalUrlParameters,
 		);
 		const videoImage = item.querySelector('.sg-video__image');
@@ -59,7 +95,7 @@ export default class SgYoutubeLightbox {
 		if (videoImage.parentElement.nodeName.toLowerCase() === 'picture') {
 			item.replaceChild(iframe, videoImage.parentElement);
 		} else {
-			item.replaceChild(iframe, videoImage);
+			videoImage.replaceWith(iframe);
 		}
 	}
 
@@ -69,23 +105,23 @@ export default class SgYoutubeLightbox {
 	 * @param {string} url
 	 * @return {string|null}
 	 */
-	getVideoIdFromUrl(url) {
+	static getVideoIdFromUrl(url) {
 		let matches = url.match(/watch\?v=(.*)&list=(.*)/);
 		if (!matches) {
 			// check if the list parameter is missing
-			matches = url.match(/watch\?v=([^?&]*)/);
+			matches = url.match(/watch\?v=([^&?]*)/);
 			if (!matches) {
 				return null;
 			}
 		}
-		let [, videoString] = matches,
-			queryParameterSeparator = '?';
+		let [, videoString] = matches;
+		let queryParameterSeparator = '?';
 		if (matches[2]) {
-			videoString += '?list=' + matches[2];
+			videoString += `?list=${matches[2]}`;
 			queryParameterSeparator = '&';
 		}
 
-		return videoString + queryParameterSeparator + 'autoplay=1&rel=0';
+		return `${videoString + queryParameterSeparator}autoplay=1&rel=0`;
 	}
 
 	/**
@@ -95,7 +131,7 @@ export default class SgYoutubeLightbox {
 	 * @param {string} _additionalUrlParameters
 	 * @returns
 	 */
-	includeAdditionalUrlParameters(url, _additionalUrlParameters = '') {
+	static includeAdditionalUrlParameters(url, _additionalUrlParameters = '') {
 		if (!url) {
 			return '';
 		}
@@ -105,15 +141,15 @@ export default class SgYoutubeLightbox {
 		}
 
 		let additionalUrlParameters = _additionalUrlParameters;
-		let beginsWithQuestionMark = additionalUrlParameters.charAt(0) === '?';
-		let beginsWithAmpersand = additionalUrlParameters.charAt(0) === '&';
+		const beginsWithQuestionMark = additionalUrlParameters.charAt(0) === '?';
+		const beginsWithAmpersand = additionalUrlParameters.charAt(0) === '&';
 
 		if (beginsWithQuestionMark || beginsWithAmpersand) {
 			additionalUrlParameters = additionalUrlParameters.slice(1);
 		}
 
 		return url.includes('?')
-			? url + '&' + additionalUrlParameters
-			: url + '?' + additionalUrlParameters;
+			? `${url}&${additionalUrlParameters}`
+			: `${url}?${additionalUrlParameters}`;
 	}
 }

Resources/Public/JavaScript/main.js

+import SgVideoLightbox from './Modules/sgVideoLightbox';
+import SgVideo from './Modules/sgVideo';
+
+/* eslint no-new: "off" */
+function main() {
+	new SgVideoLightbox();
+
+	document.querySelectorAll('.sg-video__list--default').forEach((item) => {
+		new SgVideo(item, {
+			visibleLines: 10,
+			textSelector: '.sg-video__bodytext',
+			type: 'default',
+		});
+	});
+
+	document.querySelectorAll('.sg-video__list--rows').forEach((item) => {
+		new SgVideo(item, { textSelector: '.sg-video__description' });
+	});
+}
+
+// Loading hasn't finished yet
+if (document.readyState === 'loading') {
+	document.addEventListener('DOMContentLoaded', main);
+} else {
+	// DOMContentLoaded has already fired
+	main();
+}

Resources/Public/Sass/Modules/_sg-video.scss

+// Vars ---------------------------------------------------------------- //
+$basicLightbox__background: rgba(0, 0, 0, 0.8) !default;
+$basicLightbox__zIndex: 1000 !default;
+$basicLightbox__duration: 0.4s !default;
+$basicLightbox__timing: ease !default;
+
 :root {
 	--sg-video-component-color-headline: #0a293b;
 	--sg-video-component-color-foreground: #174566;
@@ -51,9 +57,7 @@ $sg-video-screen-xs-min: var($sg-video-screen-xs);
 		width: 100%;
 		display: block;
 
-		svg {
-			//@include inline-svg($sg-video-icon-solid-play, currentColor);
-			//content: '';
+		&:not(.no-lightbox) svg {
 			position: absolute;
 			top: 50%;
 			left: 50%;
@@ -375,6 +379,76 @@ $sg-video-screen-xs-min: var($sg-video-screen-xs);
 	}
 }
 
+.no-lightbox > svg {
+	display: none;
+}
+
 .plyr .sg-cookie-optin-iframe-consent {
 	min-height: 410px;
 }
+
+// basicLightbox ------------------------------------------------------- //
+.basicLightbox {
+	position: fixed;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100vh;
+	background: $basicLightbox__background;
+	opacity: 0.01; // Start with .01 to avoid the repaint that happens from 0 to .01
+	transition: opacity $basicLightbox__duration $basicLightbox__timing;
+	z-index: $basicLightbox__zIndex;
+	will-change: opacity;
+
+	&--visible {
+		opacity: 1;
+	}
+
+	&__placeholder {
+		max-width: 100%;
+		transform: scale(0.9);
+		transition: transform $basicLightbox__duration $basicLightbox__timing;
+		z-index: 1;
+		will-change: transform;
+
+		> img:first-child:last-child,
+		> video:first-child:last-child,
+		> iframe:first-child:last-child {
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			margin: auto;
+			max-width: 95%;
+			max-height: 95%;
+		}
+
+		> video:first-child:last-child,
+		> iframe:first-child:last-child {
+			pointer-events: auto;
+		}
+
+		> img:first-child:last-child,
+		> video:first-child:last-child {
+			width: auto;
+			height: auto;
+		}
+	}
+
+	&--img &__placeholder,
+	&--video &__placeholder,
+	&--iframe &__placeholder {
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+
+	&--visible &__placeholder {
+		transform: scale(1);
+	}
+}

Resources/Public/StyleSheets/main.min.css

@@ -21,7 +21,7 @@
   width: 100%;
   display: block;
 }
-.sg-video__image-container svg {
+.sg-video__image-container:not(.no-lightbox) svg {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -293,7 +293,67 @@
   }
 }
 
+.no-lightbox > svg {
+  display: none;
+}
+
 .plyr .sg-cookie-optin-iframe-consent {
   min-height: 410px;
 }
+
+.basicLightbox {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  opacity: 0.01;
+  transition: opacity 0.4s ease;
+  z-index: 1000;
+  will-change: opacity;
+}
+.basicLightbox--visible {
+  opacity: 1;
+}
+.basicLightbox__placeholder {
+  max-width: 100%;
+  transform: scale(0.9);
+  transition: transform 0.4s ease;
+  z-index: 1;
+  will-change: transform;
+}
+.basicLightbox__placeholder > img:first-child:last-child,
+.basicLightbox__placeholder > video:first-child:last-child,
+.basicLightbox__placeholder > iframe:first-child:last-child {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  max-width: 95%;
+  max-height: 95%;
+}
+.basicLightbox__placeholder > video:first-child:last-child,
+.basicLightbox__placeholder > iframe:first-child:last-child {
+  pointer-events: auto;
+}
+.basicLightbox__placeholder > img:first-child:last-child,
+.basicLightbox__placeholder > video:first-child:last-child {
+  width: auto;
+  height: auto;
+}
+.basicLightbox--img .basicLightbox__placeholder, .basicLightbox--video .basicLightbox__placeholder, .basicLightbox--iframe .basicLightbox__placeholder {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.basicLightbox--visible .basicLightbox__placeholder {
+  transform: scale(1);
+}
 /*# sourceMappingURL=../SourceMaps/main.min.css.map */
\ No newline at end of file

Resources/Public/Vendor/iframe-lightbox/.browserslistrc

-defaults
-not IE 11
-maintained node versions

Resources/Public/Vendor/iframe-lightbox/.editorconfig

-# EditorConfig is awesome: http://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*.{html,shtml,php,inc,tpl,js,json,css,scss,xml,svg,txt,md}]
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-# Matches multiple files with brace expansion notation
-# Set default charset
-[*.{html,shtml,php,inc,json,tpl,txt,md}]
-charset = utf-8
-
-# 4 space indentation
-[*.{html,shtml,php,inc,tpl,js,json,css,scss,xml,svg,txt,md}]
-indent_style = tab
-indent_size = 4
-
-[*.md]
-insert_final_newline = true
-trim_trailing_whitespace = false

Resources/Public/Vendor/iframe-lightbox/.eslintrc

-{
-  // http://eslint.org/docs/rules/
-
-  "env": {
-    "browser": false,     // browser global variables.
-    "node": false,        // Node.js global variables and Node.js-specific rules.
-    "amd": false,         // defines require() and define() as global variables as per the amd spec.
-    "mocha": false,       // adds all of the Mocha testing global variables.
-    "jasmine": false,     // adds all of the Jasmine testing global variables for version 1.3 and 2.0.
-    "phantomjs": false,   // phantomjs global variables.
-    "jquery": false,      // jquery global variables.
-    "prototypejs": false, // prototypejs global variables.
-    "shelljs": false,     // shelljs global variables.
-  },
-
-  "globals": {
-    // e.g. "angular": true
-  },
-
-  "plugins": [
-    // e.g. "react" (must run `npm install eslint-plugin-react` first)
-  ],
-
-  "rules": {
-    ////////// Possible Errors //////////
-
-    "no-comma-dangle": 0,         // disallow trailing commas in object literals
-    "no-cond-assign": 0,          // disallow assignment in conditional expressions
-    "no-console": 0,              // disallow use of console (off by default in the node environment)
-    "no-constant-condition": 0,   // disallow use of constant expressions in conditions
-    "no-control-regex": 0,        // disallow control characters in regular expressions
-    "no-debugger": 0,             // disallow use of debugger
-    "no-dupe-keys": 0,            // disallow duplicate keys when creating object literals
-    "no-empty": 0,                // disallow empty statements
-    "no-empty-class": 0,          // disallow the use of empty character classes in regular expressions
-    "no-ex-assign": 0,            // disallow assigning to the exception in a catch block
-    "no-extra-boolean-cast": 0,   // disallow double-negation boolean casts in a boolean context
-    "no-extra-parens": 0,         // disallow unnecessary parentheses (off by default)
-    "no-extra-semi": 0,           // disallow unnecessary semicolons
-    "no-func-assign": 0,          // disallow overwriting functions written as function declarations
-    "no-inner-declarations": 0,   // disallow function or variable declarations in nested blocks
-    "no-invalid-regexp": 0,       // disallow invalid regular expression strings in the RegExp constructor
-    "no-irregular-whitespace": 0, // disallow irregular whitespace outside of strings and comments
-    "no-negated-in-lhs": 0,       // disallow negation of the left operand of an in expression
-    "no-obj-calls": 0,            // disallow the use of object properties of the global object (Math and JSON) as functions
-    "no-regex-spaces": 0,         // disallow multiple spaces in a regular expression literal
-    "no-reserved-keys": 0,        // disallow reserved words being used as object literal keys (off by default)
-    "no-sparse-arrays": 0,        // disallow sparse arrays
-    "no-unreachable": 0,          // disallow unreachable statements after a return, throw, continue, or break statement
-    "use-isnan": 0,               // disallow comparisons with the value NaN
-    "valid-jsdoc": 0,             // Ensure JSDoc comments are valid (off by default)
-    "valid-typeof": 0,            // Ensure that the results of typeof are compared against a valid string
-
-    ////////// Best Practices //////////
-
-    "block-scoped-var": 0,      // treat var statements as if they were block scoped (off by default)
-    "complexity": 0,            // specify the maximum cyclomatic complexity allowed in a program (off by default)
-    "consistent-return": 0,     // require return statements to either always or never specify values
-    "curly": 0,                 // specify curly brace conventions for all control statements
-    "default-case": 0,          // require default case in switch statements (off by default)
-    "dot-notation": 0,          // encourages use of dot notation whenever possible
-    "eqeqeq": 0,                // require the use of === and !==
-    "guard-for-in": 0,          // make sure for-in loops have an if statement (off by default)
-    "no-alert": 0,              // disallow the use of alert, confirm, and prompt
-    "no-caller": 0,             // disallow use of arguments.caller or arguments.callee
-    "no-div-regex": 0,          // disallow division operators explicitly at beginning of regular expression (off by default)
-    "no-else-return": 0,        // disallow else after a return in an if (off by default)
-    "no-empty-label": 0,        // disallow use of labels for anything other then loops and switches
-    "no-eq-null": 0,            // disallow comparisons to null without a type-checking operator (off by default)
-    "no-eval": 0,               // disallow use of eval()
-    "no-extend-native": 0,      // disallow adding to native types
-    "no-extra-bind": 0,         // disallow unnecessary function binding
-    "no-fallthrough": 0,        // disallow fallthrough of case statements
-    "no-floating-decimal": 0,   // disallow the use of leading or trailing decimal points in numeric literals (off by default)
-    "no-implied-eval": 0,       // disallow use of eval()-like methods
-    "no-iterator": 0,           // disallow usage of __iterator__ property
-    "no-labels": 0,             // disallow use of labeled statements
-    "no-lone-blocks": 0,        // disallow unnecessary nested blocks
-    "no-loop-func": 0,          // disallow creation of functions within loops
-    "no-multi-spaces": 0,       // disallow use of multiple spaces
-    "no-multi-str": 0,          // disallow use of multiline strings
-    "no-native-reassign": 0,    // disallow reassignments of native objects
-    "no-new": 0,                // disallow use of new operator when not part of the assignment or comparison
-    "no-new-func": 0,           // disallow use of new operator for Function object
-    "no-new-wrappers": 0,       // disallows creating new instances of String, Number, and Boolean
-    "no-octal": 0,              // disallow use of octal literals
-    "no-octal-escape": 0,       // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
-    "no-process-env": 0,        // disallow use of process.env (off by default)
-    "no-proto": 0,              // disallow usage of __proto__ property
-    "no-redeclare": 0,          // disallow declaring the same variable more then once
-    "no-return-assign": 0,      // disallow use of assignment in return statement
-    "no-script-url": 0,         // disallow use of javascript: urls.
-    "no-self-compare": 0,       // disallow comparisons where both sides are exactly the same (off by default)
-    "no-sequences": 0,          // disallow use of comma operator
-    "no-unused-expressions": 0, // disallow usage of expressions in statement position
-    "no-void": 0,               // disallow use of void operator (off by default)
-    "no-warning-comments": 0,   // disallow usage of configurable warning terms in comments, e.g. TODO or FIXME (off by default)
-    "no-with": 0,               // disallow use of the with statement
-    "radix": 0,                 // require use of the second argument for parseInt() (off by default)
-    "vars-on-top": 0,           // requires to declare all vars on top of their containing scope (off by default)
-    "wrap-iife": 0,             // require immediate function invocation to be wrapped in parentheses (off by default)
-    "yoda": 0,                  // require or disallow Yoda conditions
-
-    ////////// Strict Mode //////////
-
-    "global-strict": 0,   // (deprecated) require or disallow the "use strict" pragma in the global scope (off by default in the node environment)
-    "no-extra-strict": 0, // (deprecated) disallow unnecessary use of "use strict"; when already in strict mode
-    "strict": 0,          // controls location of Use Strict Directives
-
-    ////////// Variables //////////
-
-    "no-catch-shadow": 0,             // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
-    "no-delete-var": 0,               // disallow deletion of variables
-    "no-label-var": 0,                // disallow labels that share a name with a variable
-    "no-shadow": 0,                   // disallow declaration of variables already declared in the outer scope
-    "no-shadow-restricted-names": 0,  // disallow shadowing of names such as arguments
-    "no-undef": 0,                    // disallow use of undeclared variables unless mentioned in a /*global */ block
-    "no-undef-init": 0,               // disallow use of undefined when initializing variables
-    "no-undefined": 0,                // disallow use of undefined variable (off by default)
-    "no-unused-vars": 0,              // disallow declaration of variables that are not used in the code
-    "no-use-before-define": 0,        // disallow use of variables before they are defined
-
-    ////////// Node.js //////////
-
-    "handle-callback-err": 0,   // enforces error handling in callbacks (off by default) (on by default in the node environment)
-    "no-mixed-requires": 0,     // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment)
-    "no-new-require": 0,        // disallow use of new operator with the require function (off by default) (on by default in the node environment)
-    "no-path-concat": 0,        // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment)
-    "no-process-exit": 0,       // disallow process.exit() (on by default in the node environment)
-    "no-restricted-modules": 0, // restrict usage of specified node modules (off by default)
-    "no-sync": 0,               // disallow use of synchronous methods (off by default)
-
-    ////////// Stylistic Issues //////////
-
-    "brace-style": 0,               // enforce one true brace style (off by default)
-    "camelcase": 0,                 // require camel case names
-    "comma-spacing": 0,             // enforce spacing before and after comma
-    "comma-style": 0,               // enforce one true comma style (off by default)
-    "consistent-this": 0,           // enforces consistent naming when capturing the current execution context (off by default)
-    "eol-last": 0,                  // enforce newline at the end of file, with no multiple empty lines
-    "func-names": 0,                // require function expressions to have a name (off by default)
-    "func-style": 0,                // enforces use of function declarations or expressions (off by default)
-    "key-spacing": 0,               // enforces spacing between keys and values in object literal properties
-    "max-nested-callbacks": 0,      // specify the maximum depth callbacks can be nested (off by default)
-    "new-cap": 0,                   // require a capital letter for constructors
-    "new-parens": 0,                // disallow the omission of parentheses when invoking a constructor with no arguments
-    "no-array-constructor": 0,      // disallow use of the Array constructor
-    "no-inline-comments": 0,        // disallow comments inline after code (off by default)
-    "no-lonely-if": 0,              // disallow if as the only statement in an else block (off by default)
-    "no-mixed-spaces-and-tabs": 0,  // disallow mixed spaces and tabs for indentation
-    "no-multiple-empty-lines": 0,   // disallow multiple empty lines (off by default)
-    "no-nested-ternary": 0,         // disallow nested ternary expressions (off by default)
-    "no-new-object": 0,             // disallow use of the Object constructor
-    "no-space-before-semi": 0,      // disallow space before semicolon
-    "no-spaced-func": 0,            // disallow space between function identifier and application
-    "no-ternary": 0,                // disallow the use of ternary operators (off by default)
-    "no-trailing-spaces": 0,        // disallow trailing whitespace at the end of lines
-    "no-underscore-dangle": 0,      // disallow dangling underscores in identifiers
-    "no-wrap-func": 0,              // disallow wrapping of non-IIFE statements in parens
-    "one-var": 0,                   // allow just one var statement per function (off by default)
-    "operator-assignment": 0,       // require assignment operator shorthand where possible or prohibit it entirely (off by default)
-    "padded-blocks": 0,             // enforce padding within blocks (off by default)
-    "quote-props": 0,               // require quotes around object literal property names (off by default)
-    "quotes": 0,                    // specify whether double or single quotes should be used
-    "semi": 0,                      // require or disallow use of semicolons instead of ASI
-    "sort-vars": 0,                 // sort variables within the same declaration block (off by default)
-    "space-after-function-name": 0, // require a space after function names (off by default)
-    "space-after-keywords": 0,      // require a space after certain keywords (off by default)
-    "space-before-blocks": 0,       // require or disallow space before blocks (off by default)
-    "space-in-brackets": 0,         // require or disallow spaces inside brackets (off by default)
-    "space-in-parens": 0,           // require or disallow spaces inside parentheses (off by default)
-    "space-infix-ops": 0,           // require spaces around operators
-    "space-return-throw-case": 0,   // require a space after return, throw, and case
-    "space-unary-ops": 0,           // Require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
-    "spaced-line-comment": 0,       // require or disallow a space immediately following the // in a line comment (off by default)
-    "wrap-regex": 0,                // require regex literals to be wrapped in parentheses (off by default)
-
-    ////////// ECMAScript 6 //////////
-
-    "no-var": 0,          // require let or const instead of var (off by default)
-    "generator-star": 0,  // enforce the position of the * in generator functions (off by default)
-
-    ////////// Legacy //////////
-
-    "max-depth": 0,       // specify the maximum depth that blocks can be nested (off by default)
-    "max-len": 0,         // specify the maximum length of a line in your program (off by default)
-    "max-params": 0,      // limits the number of parameters that can be used in the function declaration. (off by default)
-    "max-statements": 0,  // specify the maximum number of statement allowed in a function (off by default)
-    "no-bitwise": 0,      // disallow use of bitwise operators (off by default)
-    "no-plusplus": 0      // disallow use of unary operators, ++ and -- (off by default)
-  }
-}