@internetstiftelsen/styleguide 2.23.0 → 2.23.1

package/dist/assets/js/youtube.js

@@ -1,5 +1,9 @@
 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.setupPlayers = setupPlayers;
 function loadYoutubeAPI() {
 	var tag = document.createElement('script');
 	var firstScript = document.getElementsByTagName('script')[0];
@@ -9,10 +13,8 @@ function loadYoutubeAPI() {
 	firstScript.parentNode.insertBefore(tag, firstScript);
 }
 
-function onPlayerReady(el, e) {
-	el.addEventListener('click', function () {
-		e.target.playVideo();
-	});
+function onPlayerReady(el) {
+	el.setAttribute('data-youtube-ready', 'true');
 }
 
 function onPlayerStateChange(el, e) {
@@ -32,16 +34,28 @@ function createCover(el, id) {
 }
 
 function setupYoutubePlayer(el) {
-	var playerEl = document.createElement('div');
+	var playerEl = void 0;
 	var id = el.getAttribute('data-youtube');
 
+	if (el.youtube) {
+		playerEl = el.querySelector('[data-youtube-container]');
+
+		playerEl.parentNode.removeChild(playerEl);
+		el.youtube.destroy();
+		el.youtube = null;
+		el.removeAttribute('data-youtube-ready');
+	}
+
+	playerEl = document.createElement('div');
+
 	if (!el.getElementsByTagName('img').length) {
 		createCover(el, id);
 	}
 
+	playerEl.setAttribute('data-youtube-container', true);
 	el.appendChild(playerEl);
 
-	var player = new YT.Player(playerEl, {
+	el.youtube = new YT.Player(playerEl, {
 		height: '100%',
 		width: '100%',
 		videoId: id,
@@ -59,18 +73,33 @@ function setupYoutubePlayer(el) {
 			}
 		}
 	});
+}
 
-	el.youtube = player;
+function delegateClick(e) {
+	var el = e.target.closest('[data-youtube]');
+
+	if (!el || !el.youtube) {
+		return;
+	}
+
+	el.youtube.playVideo();
 }
 
-window.onYouTubeIframeAPIReady = function () {
-	var players = document.querySelectorAll('[data-youtube]');
+// eslint-disable-next-line import/prefer-default-export
+function setupPlayers(container) {
+	var players = container.querySelectorAll('[data-youtube]');
 
 	if (!players.length) {
 		return;
 	}
 
 	[].forEach.call(players, setupYoutubePlayer);
+}
+
+window.onYouTubeIframeAPIReady = function () {
+	setupPlayers(document);
+
+	document.body.addEventListener('click', delegateClick);
 };
 
 loadYoutubeAPI();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.23.0",
+	"version": "2.23.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/assets/js/youtube.js

@@ -7,10 +7,8 @@ function loadYoutubeAPI() {
 	firstScript.parentNode.insertBefore(tag, firstScript);
 }
 
-function onPlayerReady(el, e) {
-	el.addEventListener('click', () => {
-		e.target.playVideo();
-	});
+function onPlayerReady(el) {
+	el.setAttribute('data-youtube-ready', 'true');
 }
 
 function onPlayerStateChange(el, e) {
@@ -30,16 +28,28 @@ function createCover(el, id) {
 }
 
 function setupYoutubePlayer(el) {
-	const playerEl = document.createElement('div');
+	let playerEl;
 	const id = el.getAttribute('data-youtube');
 
+	if (el.youtube) {
+		playerEl = el.querySelector('[data-youtube-container]');
+
+		playerEl.parentNode.removeChild(playerEl);
+		el.youtube.destroy();
+		el.youtube = null;
+		el.removeAttribute('data-youtube-ready');
+	}
+
+	playerEl = document.createElement('div');
+
 	if (!el.getElementsByTagName('img').length) {
 		createCover(el, id);
 	}
 
+	playerEl.setAttribute('data-youtube-container', true);
 	el.appendChild(playerEl);
 
-	const player = new YT.Player(playerEl, {
+	el.youtube = new YT.Player(playerEl, {
 		height: '100%',
 		width: '100%',
 		videoId: id,
@@ -53,18 +63,33 @@ function setupYoutubePlayer(el) {
 			onStateChange: (e) => onPlayerStateChange(el, e),
 		},
 	});
+}
 
-	el.youtube = player;
+function delegateClick(e) {
+	const el = e.target.closest('[data-youtube]');
+
+	if (!el || !el.youtube) {
+		return;
+	}
+
+	el.youtube.playVideo();
 }
 
-window.onYouTubeIframeAPIReady = () => {
-	const players = document.querySelectorAll('[data-youtube]');
+// eslint-disable-next-line import/prefer-default-export
+export function setupPlayers(container) {
+	const players = container.querySelectorAll('[data-youtube]');
 
 	if (!players.length) {
 		return;
 	}
 
 	[].forEach.call(players, setupYoutubePlayer);
+}
+
+window.onYouTubeIframeAPIReady = () => {
+	setupPlayers(document);
+
+	document.body.addEventListener('click', delegateClick);
 };
 
 loadYoutubeAPI();