@internetstiftelsen/styleguide 2.24.4 → 2.24.6

package/dist/assets/js/youtube.js

@@ -5,9 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setupPlayers = setupPlayers;
 function loadYoutubeAPI() {
+	var id = 'iisYoutubeAPI';
+
+	if (document.getElementById(id)) {
+		return;
+	}
+
 	var tag = document.createElement('script');
 	var firstScript = document.getElementsByTagName('script')[0];
 
+	tag.id = id;
 	tag.src = 'https://www.youtube.com/iframe_api';
 
 	firstScript.parentNode.insertBefore(tag, firstScript);
@@ -27,12 +34,18 @@ function onPlayerStateChange(el, e) {
 	}
 }
 
-function createCover(el, id) {
+function createCover(el) {
+	if (el.getElementsByTagName('img').length) {
+		return;
+	}
+
+	var id = el.getAttribute('data-youtube');
 	var url = 'https://i3.ytimg.com/vi/' + id + '/maxresdefault.jpg';
 	var img = document.createElement('img');
 
 	el.appendChild(img);
 
+	img.loading = 'lazy';
 	img.src = url;
 }
 
@@ -53,10 +66,6 @@ function setupYoutubePlayer(el) {
 
 	playerEl = document.createElement('div');
 
-	if (!el.getElementsByTagName('img').length) {
-		createCover(el, id);
-	}
-
 	playerEl.setAttribute('data-youtube-container', true);
 	el.appendChild(playerEl);
 
@@ -67,6 +76,7 @@ function setupYoutubePlayer(el) {
 		playerVars: {
 			// https://developers.google.com/youtube/player_parameters#Parameters
 			playsinline: 1,
+			autoplay: true,
 			rel: 0
 		},
 		events: {
@@ -78,12 +88,21 @@ function setupYoutubePlayer(el) {
 			}
 		}
 	});
+
+	el.getElementsByTagName('img')[0].style.zIndex = '-1';
+	el.getElementsByTagName('button')[0].style.display = 'none';
 }
 
 function delegateClick(e) {
 	var el = e.target.closest('[data-youtube]');
 
-	if (!el || !el.youtube) {
+	if (!el) {
+		return;
+	}
+
+	if (!el.youtube) {
+		setupYoutubePlayer(el);
+
 		return;
 	}
 
@@ -98,12 +117,11 @@ function setupPlayers(container) {
 		return;
 	}
 
-	[].forEach.call(players, setupYoutubePlayer);
+	[].forEach.call(players, createCover);
 }
 
 window.onYouTubeIframeAPIReady = function () {
 	setupPlayers(document);
-
 	document.body.addEventListener('click', delegateClick);
 };
 

package/package.json

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

package/src/assets/js/youtube.js

@@ -1,7 +1,14 @@
 function loadYoutubeAPI() {
+	const id = 'iisYoutubeAPI';
+
+	if (document.getElementById(id)) {
+		return;
+	}
+
 	const tag = document.createElement('script');
 	const firstScript = document.getElementsByTagName('script')[0];
 
+	tag.id = id;
 	tag.src = 'https://www.youtube.com/iframe_api';
 
 	firstScript.parentNode.insertBefore(tag, firstScript);
@@ -21,12 +28,18 @@ function onPlayerStateChange(el, e) {
 	}
 }
 
-function createCover(el, id) {
+function createCover(el) {
+	if (el.getElementsByTagName('img').length) {
+		return;
+	}
+
+	const id = el.getAttribute('data-youtube');
 	const url = `https://i3.ytimg.com/vi/${id}/maxresdefault.jpg`;
 	const img = document.createElement('img');
 
 	el.appendChild(img);
 
+	img.loading = 'lazy';
 	img.src = url;
 }
 
@@ -47,10 +60,6 @@ function setupYoutubePlayer(el) {
 
 	playerEl = document.createElement('div');
 
-	if (!el.getElementsByTagName('img').length) {
-		createCover(el, id);
-	}
-
 	playerEl.setAttribute('data-youtube-container', true);
 	el.appendChild(playerEl);
 
@@ -61,6 +70,7 @@ function setupYoutubePlayer(el) {
 		playerVars: {
 			// https://developers.google.com/youtube/player_parameters#Parameters
 			playsinline: 1,
+			autoplay: true,
 			rel: 0,
 		},
 		events: {
@@ -68,12 +78,21 @@ function setupYoutubePlayer(el) {
 			onStateChange: (e) => onPlayerStateChange(el, e),
 		},
 	});
+
+	el.getElementsByTagName('img')[0].style.zIndex = '-1';
+	el.getElementsByTagName('button')[0].style.display = 'none';
 }
 
 function delegateClick(e) {
 	const el = e.target.closest('[data-youtube]');
 
-	if (!el || !el.youtube) {
+	if (!el) {
+		return;
+	}
+
+	if (!el.youtube) {
+		setupYoutubePlayer(el);
+
 		return;
 	}
 
@@ -88,12 +107,11 @@ export function setupPlayers(container) {
 		return;
 	}
 
-	[].forEach.call(players, setupYoutubePlayer);
+	[].forEach.call(players, createCover);
 }
 
 window.onYouTubeIframeAPIReady = () => {
 	setupPlayers(document);
-
 	document.body.addEventListener('click', delegateClick);
 };
 

package/src/organisms/timeline/_timeline.scss

@@ -190,32 +190,55 @@ html {
 				padding-bottom: rhythm(8);
 			}
 
-			> h1,
-			> h2,
-			> h3,
-			> h4,
-			> p,
-			> a,
-			> ul li,
-			> ol li,
-			> ul li a,
-			> ol li a {
+			h1,
+			h2,
+			h3,
+			h4,
+			p,
+			a,
+			ul li,
+			ol li,
+			ul li a,
+			ol li a {
 				color: $color-snow;
 			}
 
-			> p a,
-			> h1 a,
-			> h2 a,
-			> h3 a,
-			> h4 a,
-			> ul li a,
-			> ol li a {
+			p a,
+			h1 a,
+			h2 a,
+			h3 a,
+			h4 a,
+			ul li a,
+			ol li a {
 				&:hover,
 				&:focus {
 					color: $color-cyberspace;
 				}
 			}
 
+			[class*=info-box] {
+				h1,
+				h2,
+				h3,
+				h4,
+				p,
+				a,
+				ul li,
+				ol li,
+				ul li a,
+				ol li a {
+					color: $color-cyberspace;
+				}
+
+				ul li a,
+				ol li a {
+					&:hover,
+					&:focus {
+						color: $color-cyberspace;
+					}
+				}
+			}
+
 			a[data-scroll-ignore] {
 				pointer-events: none;