@internetstiftelsen/styleguide 2.24.10 → 2.24.12-beta.0.1

package/dist/assets/js/youtube.js

@@ -28,14 +28,6 @@ function onPlayerStateChange(el, e) {
 	} else if (e.data === YT.PlayerState.UNSTARTED) {
 		el.getElementsByTagName('img')[0].style.zIndex = null;
 		el.getElementsByTagName('button')[0].style.display = null;
-
-		if (el.youtube) {
-			var playerEl = el.querySelector('[data-youtube-container]');
-
-			playerEl.parentNode.removeChild(playerEl);
-			el.youtube.destroy();
-			el.youtube = null;
-		}
 	}
 }
 

package/dist/organisms/podcast/podcast.js

@@ -16,6 +16,7 @@ var stepBackward = document.querySelector('.js-step-backward');
 var playButton = document.querySelector('.js-play-button');
 var playIcon = document.querySelector('.js-play-icon');
 var pauseIcon = document.querySelector('.js-pause-icon');
+var closeButton = document.querySelector('.js-close-player');
 var rssURL = '';
 
 if (podCast) {
@@ -30,7 +31,6 @@ if (!namespaceElement) {
 
 function timeupdate() {
 	audio.addEventListener('timeupdate', function () {
-		var timeleft = timeleftElement;
 		var duration = parseInt(audio.duration, 10);
 		var currentTime = parseInt(audio.currentTime, 10);
 		var timeLeft = duration - currentTime;
@@ -44,7 +44,7 @@ function timeupdate() {
 
 		if (timeLeft > 0) {
 			timeleftElement.classList.remove('u-visibility-hidden');
-			timeleft.innerHTML = m + ':' + s;
+			timeleftElement.innerHTML = m + ':' + s;
 		}
 	}, false);
 }
@@ -52,7 +52,7 @@ function timeupdate() {
 var html = '';
 
 function getItems(el) {
-	html += '\n\t<li>\n\t\t<button\n\t\t\tclass="' + namespace + 'o-podcast-player__button display-flex js-play-episode"\n\t\t\tdata-src="' + el.querySelector('enclosure').getAttribute('url') + '"\n\t\t\tdata-title="' + el.querySelector('title').innerHTML + '"\n\t\t\tdata-description="' + el.querySelector('description').innerHTML.replace(/(<([^>]+)>)/gi, '').replace('<![CDATA[', '').replace(']]>', '') + '"\n\t\t\tdata-image="' + el.querySelector('image').getAttribute('href') + '"\n\t\t\tdata-duration="' + el.querySelector('duration').innerHTML + '"\n\t\t\ttype="button"><svg class="icon ' + namespace + 'o-podcast-player__play-icon u-m-r-2"><use xlink:href="#icon-play"></use></svg></div><div class="u-visuallyhidden">Spela avsnittet ' + el.querySelector('title').innerHTML + '</div></button>\n\t\t<div class="' + namespace + 'o-podcast-player__show-info">\n\t\t\t<div class="' + namespace + 'o-podcast-player__title">' + el.querySelector('title').innerHTML + '</div>\n\t\t\t<div class="' + namespace + 'o-podcast-player__description">' + el.querySelector('description').innerHTML + '</div>\n\t\t</div>\n\t</li>\n';
+	html += '\n\t<li>\n\t\t<button\n\t\t\tclass="' + namespace + 'o-podcast-player__button display-flex js-play-episode"\n\t\t\tdata-src="' + el.querySelector('enclosure').getAttribute('url') + '"\n\t\t\tdata-title="' + el.querySelector('title').innerHTML + '"\n\t\t\tdata-description="' + el.querySelector('description').innerHTML.replace(/(<([^>]+)>)/gi, '').replace('<![CDATA[', '').replace(']]>', '') + '"\n\t\t\tdata-image="' + el.querySelector('image').getAttribute('href') + '"\n\t\t\tdata-duration="' + el.querySelector('duration').innerHTML + '"\n\t\t\ttype="button"><svg class="icon ' + namespace + 'o-podcast-player__play-icon u-m-r-2"><use xlink:href="#icon-play"></use></svg></div><div class="u-visuallyhidden">Spela avsnittet ' + el.querySelector('title').innerHTML + '</div></button>\n\t\t<div class="' + namespace + 'o-podcast-player__show-info">\n\t\t\t<div class="' + namespace + 'o-podcast-player__title">' + el.querySelector('title').innerHTML + '</div>\n\t\t\t<div class="' + namespace + 'o-podcast-player__description js-description">' + el.querySelector('description').innerHTML + '</div>\n\t\t</div>\n\t</li>\n';
 
 	if (jsTrackList) {
 		jsTrackList.innerHTML = html;
@@ -107,6 +107,7 @@ document.body.addEventListener('click', function (e) {
 if (playButton) {
 	playButton.addEventListener('click', function () {
 		if (audio.paused) {
+			audio.muted = false;
 			audio.play();
 			pauseIcon.classList.remove('is-hidden');
 			playIcon.classList.add('is-hidden');
@@ -146,4 +147,85 @@ if (stepBackward) {
 		audio.currentTime -= 15;
 		timeupdate();
 	});
+}
+
+// Handle continous play when user leaves the page
+window.addEventListener('unload', function () {
+	var podcastData = {
+		podCastTitle: title.innerHTML,
+		episodeDescription: description.innerHTML,
+		episodeSrc: audio.src,
+		episodeCurrentTime: audio.currentTime,
+		episodeDuration: durationElement.innerHTML,
+		episodeImage: image.src
+	};
+	localStorage.setItem('episodeData', JSON.stringify(podcastData));
+
+	if (!audio.paused) {
+		var existing = localStorage.getItem('episodeData');
+		existing = existing ? JSON.parse(existing) : {};
+		existing.podcastWasPlaying = true;
+		localStorage.setItem('episodeData', JSON.stringify(existing));
+	} else {
+		var _existing = localStorage.getItem('episodeData');
+		_existing = _existing ? JSON.parse(_existing) : {};
+		_existing.podcastWasPlaying = false;
+		localStorage.setItem('episodeData', JSON.stringify(_existing));
+	}
+});
+
+if (localStorage.getItem('episodeData') && podCast) {
+	var arr = JSON.parse(localStorage.getItem('episodeData'));
+
+	if (arr.episodeCurrentTime) {
+		podCast.classList.remove(namespace + 'o-podcast-player--hidden');
+		audio.src = arr.episodeSrc;
+		image.src = arr.episodeImage;
+		title.innerHTML = arr.podCastTitle;
+		description.innerHTML = arr.episodeDescription;
+		durationElement.innerHTML = arr.episodeDuration;
+
+		if (arr.podcastWasPlaying === true) {
+			var playPromise = audio.play();
+
+			if (playPromise !== undefined) {
+				playPromise.then(function () {
+					// Continue playing audio on reload
+					audio.currentTime = arr.episodeCurrentTime;
+					timeupdate();
+					audio.play();
+					pauseIcon.classList.remove('is-hidden');
+					playIcon.classList.add('is-hidden');
+				}).catch(function () {
+					// User reloaded page manually. Cannot play audio
+					audio.addEventListener('loadedmetadata', function () {
+						audio.currentTime = arr.episodeCurrentTime;
+						timeupdate();
+					});
+
+					pauseIcon.classList.add('is-hidden');
+					playIcon.classList.remove('is-hidden');
+					audio.pause();
+				});
+			}
+		} else {
+			audio.addEventListener('loadedmetadata', function () {
+				audio.currentTime = arr.episodeCurrentTime;
+				timeupdate();
+			});
+			pauseIcon.classList.add('is-hidden');
+			playIcon.classList.remove('is-hidden');
+			audio.pause();
+		}
+	}
+}
+
+if (closeButton) {
+	closeButton.addEventListener('click', function () {
+		audio.currentTime = 0;
+		timeupdate();
+		audio.pause();
+		localStorage.removeItem('episodeData');
+		podCast.classList.add(namespace + 'o-podcast-player--hidden');
+	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.24.10",
+	"version": "2.24.12-beta.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -59,7 +59,7 @@
 		"css-loader": "^5.2.6",
 		"cssnano": "^5.0.6",
 		"eslint": "^7.28.0",
-		"imagemin-cli": "^6.0.0",
+		"imagemin-cli": "^7.0.0",
 		"onchange": "^6.1.0",
 		"postcss-class-prefix": "^0.3.0",
 		"postcss-cli": "^8.3.1",

package/src/atoms/checkbox/_checkbox.scss

@@ -17,7 +17,7 @@
 				flex-shrink: 0;
 				width: $icon-size-small;
 				height: $icon-size-small;
-				margin-top: rem(5px);
+				margin-top: rem(3px);
 				margin-right: rhythm(1);
 				border: 1px solid $color-cyberspace;
 				border-radius: $border-radius;
@@ -42,7 +42,7 @@
 					content: '';
 					display: block;
 					position: absolute;
-					top: rem(12.5px);
+					top: rem(10.5px);
 					left: rem(6px);
 					width: rem(5px);
 					height: rem(9px);

package/src/atoms/radiobutton/_radiobutton.scss

@@ -17,7 +17,7 @@
 				flex-shrink: 0;
 				width: rem(15px);
 				height: rem(15px);
-				margin-top: rem(5px);
+				margin-top: rem(3px);
 				margin-right: rhythm(1);
 				transform: translateX(rem(1px));
 				border: 2px solid transparent;

package/src/organisms/podcast/_podcast-player.scss

@@ -60,6 +60,18 @@
 		margin-bottom: 0;
 		color: $color-ruby;
 		font-family: $font-family-headings;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: rem(200px);
+
+		@include bp-up(sm) {
+			max-width: rem(250px);
+		}
+
+		@include bp-up(lg) {
+			max-width: rem(500px);
+		}
 	}
 
 	@include e(description) {
@@ -74,7 +86,7 @@
 		}
 
 		@include bp-up(sm) {
-			max-width: rem(280px);
+			max-width: rem(250px);
 		}
 
 		@include bp-up(lg) {
@@ -82,16 +94,23 @@
 		}
 	}
 
+	@include e(playtime) {
+		@include bp-between(sm, md) {
+			display: none;
+		}
+	}
+
+	@include e(spacer) {
+		@include bp-between(sm, md) {
+			display: none;
+		}
+	}
+
 	@include e(controls) {
 		display: flex;
 		flex-grow: 1;
 		align-items: center;
 		justify-content: center;
-		transform: translateX(math.div($time-left-width, 2));
-
-		@include bp-up(sm) {
-			transform: translateX(0);
-		}
 	}
 
 	@include e(spacer) {
@@ -146,4 +165,15 @@
 			height: rhythm(1);
 		}
 	}
+
+	@include e(close) {
+		position: absolute;
+		right: rhythm(0.5);
+		top: 50%;
+		transform: translateY(-50%);
+
+		@include bp-up(xxl) {
+			right: rhythm(2);
+		}
+	}
 }

package/src/organisms/podcast/podcast.js

@@ -14,6 +14,7 @@ const stepBackward = document.querySelector('.js-step-backward');
 const playButton = document.querySelector('.js-play-button');
 const playIcon = document.querySelector('.js-play-icon');
 const pauseIcon = document.querySelector('.js-pause-icon');
+const closeButton = document.querySelector('.js-close-player');
 let rssURL = '';
 
 if (podCast) {
@@ -28,7 +29,6 @@ if (!namespaceElement) {
 
 function timeupdate() {
 	audio.addEventListener('timeupdate', () => {
-		const timeleft = timeleftElement;
 		const duration = parseInt(audio.duration, 10);
 		const currentTime = parseInt(audio.currentTime, 10);
 		const timeLeft = duration - currentTime;
@@ -43,7 +43,7 @@ function timeupdate() {
 
 		if (timeLeft > 0) {
 			timeleftElement.classList.remove('u-visibility-hidden');
-			timeleft.innerHTML = `${m}:${s}`;
+			timeleftElement.innerHTML = `${m}:${s}`;
 		}
 	}, false);
 }
@@ -63,7 +63,7 @@ function getItems(el) {
 			type="button"><svg class="icon ${namespace}o-podcast-player__play-icon u-m-r-2"><use xlink:href="#icon-play"></use></svg></div><div class="u-visuallyhidden">Spela avsnittet ${el.querySelector('title').innerHTML}</div></button>
 		<div class="${namespace}o-podcast-player__show-info">
 			<div class="${namespace}o-podcast-player__title">${el.querySelector('title').innerHTML}</div>
-			<div class="${namespace}o-podcast-player__description">${el.querySelector('description').innerHTML}</div>
+			<div class="${namespace}o-podcast-player__description js-description">${el.querySelector('description').innerHTML}</div>
 		</div>
 	</li>
 `;
@@ -120,6 +120,7 @@ document.body.addEventListener('click', (e) => {
 if (playButton) {
 	playButton.addEventListener('click', () => {
 		if (audio.paused) {
+			audio.muted = false;
 			audio.play();
 			pauseIcon.classList.remove('is-hidden');
 			playIcon.classList.add('is-hidden');
@@ -160,3 +161,84 @@ if (stepBackward) {
 		timeupdate();
 	});
 }
+
+// Handle continous play when user leaves the page
+window.addEventListener('unload', () => {
+	const podcastData = {
+		podCastTitle: title.innerHTML,
+		episodeDescription: description.innerHTML,
+		episodeSrc: audio.src,
+		episodeCurrentTime: audio.currentTime,
+		episodeDuration: durationElement.innerHTML,
+		episodeImage: image.src,
+	};
+	localStorage.setItem('episodeData', JSON.stringify(podcastData));
+
+	if (!audio.paused) {
+		let existing = localStorage.getItem('episodeData');
+		existing = existing ? JSON.parse(existing) : {};
+		existing.podcastWasPlaying = true;
+		localStorage.setItem('episodeData', JSON.stringify(existing));
+	} else {
+		let existing = localStorage.getItem('episodeData');
+		existing = existing ? JSON.parse(existing) : {};
+		existing.podcastWasPlaying = false;
+		localStorage.setItem('episodeData', JSON.stringify(existing));
+	}
+});
+
+if (localStorage.getItem('episodeData') && podCast) {
+	const arr = JSON.parse(localStorage.getItem('episodeData'));
+
+	if (arr.episodeCurrentTime) {
+		podCast.classList.remove(`${namespace}o-podcast-player--hidden`);
+		audio.src = arr.episodeSrc;
+		image.src = arr.episodeImage;
+		title.innerHTML = arr.podCastTitle;
+		description.innerHTML = arr.episodeDescription;
+		durationElement.innerHTML = arr.episodeDuration;
+
+		if (arr.podcastWasPlaying === true) {
+			const playPromise = audio.play();
+
+			if (playPromise !== undefined) {
+				playPromise.then(() => {
+					// Continue playing audio on reload
+					audio.currentTime = arr.episodeCurrentTime;
+					timeupdate();
+					audio.play();
+					pauseIcon.classList.remove('is-hidden');
+					playIcon.classList.add('is-hidden');
+				}).catch(() => {
+					// User reloaded page manually. Cannot play audio
+					audio.addEventListener('loadedmetadata', () => {
+						audio.currentTime = arr.episodeCurrentTime;
+						timeupdate();
+					});
+
+					pauseIcon.classList.add('is-hidden');
+					playIcon.classList.remove('is-hidden');
+					audio.pause();
+				});
+			}
+		} else {
+			audio.addEventListener('loadedmetadata', () => {
+				audio.currentTime = arr.episodeCurrentTime;
+				timeupdate();
+			});
+			pauseIcon.classList.add('is-hidden');
+			playIcon.classList.remove('is-hidden');
+			audio.pause();
+		}
+	}
+}
+
+if (closeButton) {
+	closeButton.addEventListener('click', () => {
+		audio.currentTime = 0;
+		timeupdate();
+		audio.pause();
+		localStorage.removeItem('episodeData');
+		podCast.classList.add(`${namespace}o-podcast-player--hidden`);
+	});
+}

package/src/pages/magazine/magazine.config.js

@@ -5,7 +5,7 @@ module.exports = {
 		alt: 'Hands typing on laptop',
 		img_url: '/assets/images/ALX_0876.jpg',
 		title: 'Gymnasieskolor med hög bandbredd har bättre skolresultat',
-		url: 'http://www.google.se',
+		url: '/components/preview/magazine',
 		exerpt: 'Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.',
 		is_padded: true,
 		is_wide: false,