@internetstiftelsen/styleguide 5.0.18 → 5.1.0

package/dist/organisms/podcast/podcast.js

@@ -1,245 +1,222 @@
-'use strict';
-
-var namespace = void 0;
-var namespaceElement = document.querySelector('#site');
-var podCast = document.querySelector('.js-podcast');
-var audio = document.getElementById('podcastPlayer');
-var jsTrackList = document.querySelector('.js-track-list');
-var title = document.querySelector('.js-title');
-var description = document.querySelector('.js-description');
-var image = document.querySelector('.js-image');
-var progress = document.querySelector('.js-progress');
-var durationElement = document.querySelector('.js-duration');
-var timeleftElement = document.querySelector('.js-timeleft');
-var stepForward = document.querySelector('.js-step-forward');
-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 = '';
-
+"use strict";
+let namespace;
+const namespaceElement = document.querySelector('#site');
+const podCast = document.querySelector('.js-podcast');
+const audio = document.getElementById('podcastPlayer');
+const jsTrackList = document.querySelector('.js-track-list');
+const title = document.querySelector('.js-title');
+const description = document.querySelector('.js-description');
+const image = document.querySelector('.js-image');
+const progress = document.querySelector('.js-progress');
+const durationElement = document.querySelector('.js-duration');
+const timeleftElement = document.querySelector('.js-timeleft');
+const stepForward = document.querySelector('.js-step-forward');
+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) {
-	rssURL = podCast.dataset.rss;
+    rssURL = podCast.dataset.rss;
 }
-
 if (!namespaceElement) {
-	namespace = '';
+    namespace = '';
 } else {
-	namespace = namespaceElement.dataset.namespace;
+    namespace = namespaceElement.dataset.namespace;
 }
-
 function timeupdate() {
-	audio.addEventListener('timeupdate', function () {
-		var duration = parseInt(audio.duration, 10);
-		var currentTime = parseInt(audio.currentTime, 10);
-		var timeLeft = duration - currentTime;
-		var s = void 0;var m = void 0;
-
-		s = timeLeft % 60;
-		m = Math.floor(timeLeft / 60) % 60;
-
-		s = s < 10 ? '0' + s : s;
-		m = m < 10 ? '0' + m : m;
-
-		if (timeLeft > 0) {
-			timeleftElement.classList.remove('u-visibility-hidden');
-			timeleftElement.innerHTML = m + ':' + s;
-		}
-	}, false);
+    audio.addEventListener('timeupdate', ()=>{
+        const duration = parseInt(audio.duration, 10);
+        const currentTime = parseInt(audio.currentTime, 10);
+        const timeLeft = duration - currentTime;
+        let s;
+        let m;
+        s = timeLeft % 60;
+        m = Math.floor(timeLeft / 60) % 60;
+        s = s < 10 ? `0${s}` : s;
+        m = m < 10 ? `0${m}` : m;
+        if (timeLeft > 0) {
+            timeleftElement.classList.remove('u-visibility-hidden');
+            timeleftElement.innerHTML = `${m}:${s}`;
+        }
+    }, false);
 }
-
-var html = '';
-
+let 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 js-description">' + el.querySelector('description').innerHTML + '</div>\n\t\t</div>\n\t</li>\n';
-
-	if (jsTrackList) {
-		jsTrackList.innerHTML = html;
-	}
+    html += `
+	<li>
+		<button
+			class="${namespace}o-podcast-player__button display-flex js-play-episode"
+			data-src="${el.querySelector('enclosure').getAttribute('url')}"
+			data-title="${el.querySelector('title').innerHTML}"
+			data-description="${el.querySelector('description').innerHTML.replace(/(<([^>]+)>)/gi, '').replace('<![CDATA[', '').replace(']]>', '')}"
+			data-image="${el.querySelector('image').getAttribute('href')}"
+			data-duration="${el.querySelector('duration').innerHTML}"
+			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 js-description">${el.querySelector('description').innerHTML}</div>
+		</div>
+	</li>
+`;
+    if (jsTrackList) {
+        jsTrackList.innerHTML = html;
+    }
 }
-
 if (rssURL) {
-	fetch(rssURL).then(function (response) {
-		return response.text();
-	}).then(function (str) {
-		return new window.DOMParser().parseFromString(str, 'text/xml');
-	}).then(function (data) {
-		var items = data.querySelectorAll('item');
-
-		items.forEach(getItems);
-	});
+    fetch(rssURL).then((response)=>response.text()).then((str)=>new window.DOMParser().parseFromString(str, 'text/xml')).then((data)=>{
+        const items = data.querySelectorAll('item');
+        items.forEach(getItems);
+    });
 }
-
 function playEpisode(playBtn) {
-	audio.src = playBtn.dataset.src;
-	durationElement.innerHTML = playBtn.dataset.duration;
-	title.innerHTML = playBtn.dataset.title;
-	description.innerHTML = playBtn.dataset.description;
-	image.src = playBtn.dataset.image;
-	podCast.classList.remove(namespace + 'o-podcast-player--hidden');
-	timeleftElement.classList.add('u-visibility-hidden');
-
-	if (audio.play) {
-		audio.pause();
-		pauseIcon.classList.remove('is-hidden');
-		playIcon.classList.add('is-hidden');
-
-		audio.currentTime = 0;
-	}
-
-	audio.play();
-	timeupdate();
-
-	setTimeout(function () {
-		timeleftElement.classList.remove('u-visibility-hidden');
-	}, 1000);
+    audio.src = playBtn.dataset.src;
+    durationElement.innerHTML = playBtn.dataset.duration;
+    title.innerHTML = playBtn.dataset.title;
+    description.innerHTML = playBtn.dataset.description;
+    image.src = playBtn.dataset.image;
+    podCast.classList.remove(`${namespace}o-podcast-player--hidden`);
+    timeleftElement.classList.add('u-visibility-hidden');
+    if (audio.play) {
+        audio.pause();
+        pauseIcon.classList.remove('is-hidden');
+        playIcon.classList.add('is-hidden');
+        audio.currentTime = 0;
+    }
+    audio.play();
+    timeupdate();
+    setTimeout(()=>{
+        timeleftElement.classList.remove('u-visibility-hidden');
+    }, 1000);
 }
-
-document.body.addEventListener('click', function (e) {
-	var playBtn = e.target.closest('.js-play-episode');
-	if (playBtn) {
-		e.preventDefault();
-
-		// Clear old episodedata
-		audio.currentTime = 0;
-		timeupdate();
-		audio.pause();
-		sessionStorage.removeItem('episodeData');
-
-		// Play new episode
-		playEpisode(playBtn);
-	}
+document.body.addEventListener('click', (e)=>{
+    const playBtn = e.target.closest('.js-play-episode');
+    if (playBtn) {
+        e.preventDefault();
+        // Clear old episodedata
+        audio.currentTime = 0;
+        timeupdate();
+        audio.pause();
+        sessionStorage.removeItem('episodeData');
+        // Play new episode
+        playEpisode(playBtn);
+    }
 });
-
 if (playButton) {
-	playButton.addEventListener('click', function () {
-		if (audio.paused) {
-			audio.muted = false;
-			audio.play();
-			pauseIcon.classList.remove('is-hidden');
-			playIcon.classList.add('is-hidden');
-			timeleftElement.classList.add('u-visibility-hidden');
-			timeupdate();
-			timeleftElement.classList.remove('u-visibility-hidden');
-		} else {
-			audio.pause();
-			pauseIcon.classList.add('is-hidden');
-			playIcon.classList.remove('is-hidden');
-		}
-	});
+    playButton.addEventListener('click', ()=>{
+        if (audio.paused) {
+            audio.muted = false;
+            audio.play();
+            pauseIcon.classList.remove('is-hidden');
+            playIcon.classList.add('is-hidden');
+            timeleftElement.classList.add('u-visibility-hidden');
+            timeupdate();
+            timeleftElement.classList.remove('u-visibility-hidden');
+        } else {
+            audio.pause();
+            pauseIcon.classList.add('is-hidden');
+            playIcon.classList.remove('is-hidden');
+        }
+    });
 }
-
 if (audio) {
-	audio.onended = function () {
-		pauseIcon.classList.add('is-hidden');
-		playIcon.classList.remove('is-hidden');
-		timeleftElement.classList.add('u-visibility-hidden');
-	};
-
-	audio.ontimeupdate = function () {
-		var timer = audio.currentTime / audio.duration * 100 + '%';
-		progress.style.width = timer;
-	};
+    audio.onended = ()=>{
+        pauseIcon.classList.add('is-hidden');
+        playIcon.classList.remove('is-hidden');
+        timeleftElement.classList.add('u-visibility-hidden');
+    };
+    audio.ontimeupdate = ()=>{
+        const timer = `${audio.currentTime / audio.duration * 100}%`;
+        progress.style.width = timer;
+    };
 }
-
 if (stepForward) {
-	stepForward.addEventListener('click', function () {
-		audio.currentTime += 60;
-		timeupdate();
-	});
+    stepForward.addEventListener('click', ()=>{
+        audio.currentTime += 60;
+        timeupdate();
+    });
 }
-
 if (stepBackward) {
-	stepBackward.addEventListener('click', function () {
-		audio.currentTime -= 15;
-		timeupdate();
-	});
+    stepBackward.addEventListener('click', ()=>{
+        audio.currentTime -= 15;
+        timeupdate();
+    });
 }
-
 function saveState() {
-	var podcastData = {
-		podCastTitle: title.innerHTML,
-		episodeDescription: description.innerHTML,
-		episodeSrc: audio.src,
-		episodeCurrentTime: audio.currentTime,
-		episodeDuration: durationElement.innerHTML,
-		episodeImage: image.src
-	};
-
-	sessionStorage.setItem('episodeData', JSON.stringify(podcastData));
-
-	if (!audio.paused) {
-		var existing = sessionStorage.getItem('episodeData');
-		existing = existing ? JSON.parse(existing) : {};
-		existing.podcastWasPlaying = true;
-		sessionStorage.setItem('episodeData', JSON.stringify(existing));
-	} else {
-		var _existing = sessionStorage.getItem('episodeData');
-		_existing = _existing ? JSON.parse(_existing) : {};
-		_existing.podcastWasPlaying = false;
-		sessionStorage.setItem('episodeData', JSON.stringify(_existing));
-	}
+    const podcastData = {
+        podCastTitle: title.innerHTML,
+        episodeDescription: description.innerHTML,
+        episodeSrc: audio.src,
+        episodeCurrentTime: audio.currentTime,
+        episodeDuration: durationElement.innerHTML,
+        episodeImage: image.src
+    };
+    sessionStorage.setItem('episodeData', JSON.stringify(podcastData));
+    if (!audio.paused) {
+        let existing = sessionStorage.getItem('episodeData');
+        existing = existing ? JSON.parse(existing) : {};
+        existing.podcastWasPlaying = true;
+        sessionStorage.setItem('episodeData', JSON.stringify(existing));
+    } else {
+        let existing = sessionStorage.getItem('episodeData');
+        existing = existing ? JSON.parse(existing) : {};
+        existing.podcastWasPlaying = false;
+        sessionStorage.setItem('episodeData', JSON.stringify(existing));
+    }
 }
-
 // Handle continous play when user leaves the page
 if (podCast) {
-	window.addEventListener('visibilitychange', saveState);
-	window.addEventListener('beforeunload', saveState);
+    window.addEventListener('visibilitychange', saveState);
+    window.addEventListener('beforeunload', saveState);
 }
-
 if (sessionStorage.getItem('episodeData') && podCast) {
-	var arr = JSON.parse(sessionStorage.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();
-		}
-	}
+    const arr = JSON.parse(sessionStorage.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', function () {
-		audio.currentTime = 0;
-		timeupdate();
-		audio.pause();
-		sessionStorage.removeItem('episodeData');
-		podCast.classList.add(namespace + 'o-podcast-player--hidden');
-	});
-}
+    closeButton.addEventListener('click', ()=>{
+        audio.currentTime = 0;
+        timeupdate();
+        audio.pause();
+        sessionStorage.removeItem('episodeData');
+        podCast.classList.add(`${namespace}o-podcast-player--hidden`);
+    });
+}

package/dist/organisms/schedule/schedule-filter.js

@@ -1,16 +1,10 @@
-'use strict';
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-var el = document.querySelector('.js-filter');
-
+"use strict";
+const el = document.querySelector('.js-filter');
 if (el) {
-	var observer = new IntersectionObserver(function (_ref) {
-		var _ref2 = _slicedToArray(_ref, 1),
-		    e = _ref2[0];
-
-		return el.classList.toggle('is-sticky', e.intersectionRatio < 1);
-	}, { threshold: [1] });
-
-	observer.observe(el);
-}
+    const observer = new IntersectionObserver(([e])=>el.classList.toggle('is-sticky', e.intersectionRatio < 1), {
+        threshold: [
+            1
+        ]
+    });
+    observer.observe(el);
+}