@internetstiftelsen/styleguide 2.22.3-beta.0.7 → 2.22.4

package/src/organisms/video-guide/_video-guide.scss

@@ -1,337 +0,0 @@
-@charset "UTF-8";
-
-@include molecule(video-guide) {
-	flex-direction: column;
-	background-color: $color-snow;
-
-	@include e(video-container) {
-		position: relative;
-		padding-top: 70vh;
-		width: 100%;
-		display: flex;
-		justify-content: center;
-
-		@include bp-up(sm) {
-			padding-top: 76.25%;
-		}
-
-		@include bp-up(md) {
-			padding-top: 56.25%;
-		}
-	}
-
-	@include e(timeline-item) {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		z-index: 1;
-		justify-content: center;
-		display: none;
-		margin: 0;
-		padding: 0;
-
-		&:first-child,
-		&.is-current {
-			display: flex;
-		}
-
-		img {
-			border-radius: 0;
-			object-fit: cover;
-			object-position: 50% 25%;
-			height: 100%;
-			width: 100%;
-		}
-
-		@include e(text) {
-			position: absolute;
-			top: 50%;
-			left: auto;
-			right: auto;
-			text-align: center;
-			padding-left: rhythm(2);
-			padding-right: rhythm(2);
-
-			transform: translateY(-75%);
-
-			@include bp-up(md) {
-				transform: translateY(-50%);
-				padding-left: rhythm(4);
-				padding-right: rhythm(4);
-			}
-
-			@include bp-up(lg) {
-				transform: translateY(-50%);
-			}
-
-			@include bp-up(xl) {
-				left: rhythm(8);
-				width: calc(100% - rhythm(16));
-				max-width: 70%;
-				text-align: left;
-			}
-
-			> h2 {
-				font-family: $font-family-bold;
-				color: $color-snow;
-				text-shadow: 0 0 rem(50px) rgba($color-black, 1),
-					0 0 rem(10px) rgba($color-black, 1),
-					rem(1px) rem(1px) rem(2px) rgba($color-black, 0.6);
-			}
-
-			> a {
-				font-size: $size-base * 1.3;
-				font-family: $font-family-headings;
-				padding: rhythm(0.5) rhythm(2);
-				color: $color-peacock;
-				text-decoration: none;
-				line-height: 1;
-				position: relative;
-
-				&::after {
-					content: '';
-					position: absolute;
-					z-index: -2;
-					width: 100%;
-					height: 100%;
-					background-color: rgba($color-black, 0.7);
-					bottom: 0;
-					left: 0;
-				}
-
-				&::before {
-					content: '';
-					position: absolute;
-					z-index: -1;
-					width: 100%;
-					height: 100%;
-					background-color: $color-snow;
-					bottom: 0;
-					left: 0;
-					transform-origin: right;
-					transform: scaleX(0);
-					transition: transform .3s ease-in-out;
-				}
-
-				&:hover::before {
-					transform-origin: left;
-					transform: scaleX(1);
-				}
-			}
-		}
-	}
-
-	@include e(video) {
-		display: block;
-		position: absolute;
-		left: auto;
-		right: auto;
-		bottom: 0;
-		z-index: 2;
-		width: 150px;
-		height: 150px;
-
-		&.is-loading {
-			background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ring' style='background: none;'%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.base%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.width%7D%7D' fill='none' r='43' stroke='%23a7d8fd' stroke-width='7'%3E%3C/circle%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.stroke%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.innerWidth%7D%7D' ng-attr-stroke-linecap='%7B%7Bconfig.linecap%7D%7D' fill='none' r='43' stroke='%2350b2fc' stroke-width='7' stroke-linecap='square' transform='rotate(27.6965 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' calcMode='linear' values='0 50 50;180 50 50;720 50 50' keyTimes='0;0.5;1' dur='2.5s' begin='0s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='stroke-dasharray' calcMode='linear' values='9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182' keyTimes='0;0.5;1' dur='2.5' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E%0A");
-			background-repeat: no-repeat;
-			background-position: center center;
-			background-size: 30% 30%;
-		}
-
-		@include bp-up(sm) {
-			left: 0;
-		}
-
-		@include bp-up(lg) {
-			width: 200px;
-			height: 200px;
-		}
-
-		@include bp-up(xxl) {
-			width: 250px;
-			height: 250px;
-		}
-	}
-
-	@include e(controls) {
-		background-color: $color-snow;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding-top: rhythm(2);
-		padding-bottom: rhythm(2);
-		padding-left: rhythm(1);
-		padding-right: rhythm(1);
-		flex-direction: column-reverse;
-		overflow: hidden;
-
-		@include bp-up(sm) {
-			transform: translateX(0);
-		}
-
-		@include bp-up(md) {
-			align-items: stretch;
-			flex-direction: row;
-			padding-left: rhythm(2);
-			padding-right: rhythm(2);
-		}
-	}
-
-	@include e(title) {
-		line-height: 1;
-		margin-top: rhythm(1);
-	}
-
-	@include e(chapters) {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-
-		@include e(list) {
-			width: 100%;
-			height: 100%;
-			list-style-type: none;
-			margin: 0;
-			padding: 0;
-
-			> li {
-				display: flex;
-				align-items: center;
-				background-color: $color-snow;
-				font-size: $size-medium;
-				display: none;
-				line-height: 1;
-
-				@include bp-up(md) {
-					font-size: $size-medium-plus;
-				}
-
-				&.is-current-item {
-					display: block;
-				}
-			}
-		}
-
-		@include bp-up(md) {
-			align-items: stretch;
-		}
-	}
-
-	@include e(buttons) {
-		display: flex;
-		width: 100%;
-	}
-
-	@include e(button) {
-		display: flex;
-		align-items: center;
-		margin: 0 rhythm(1);
-		padding: 0;
-		border: 0;
-		background-color: transparent;
-
-		&:disabled,
-		&:disabled:focus,
-		&:not([class*="play"]):not([class*="subtitles"]):not([data-id]),
-		&:disabled:focus-visible {
-			pointer-events: none;
-			cursor: not-allowed;
-
-			> svg {
-				fill: $color-concrete;
-			}
-		}
-
-		&:hover {
-			> svg {
-				fill: $color-peacock;
-			}
-		}
-
-		@include m(subtitles) {
-			&.is-active {
-				svg {
-					fill: $color-peacock;
-				}
-			}
-		}
-	}
-
-	@include e(play-icon) {
-		width: $icon-size-large * 1.5;
-		height: $icon-size-large * 1.5;
-	}
-
-	@include e(rewind-icon) {
-		width: $icon-size-large;
-		height: $icon-size-large;
-	}
-
-	@include e(forward-icon) {
-		width: $icon-size-large;
-		height: $icon-size-large;
-	}
-
-	@include e(subtitles-icon) {
-		width: $icon-size-large * 1.2;
-		height: $icon-size-large * 1.2;
-	}
-
-	@include e(subtitles) {
-		text-align: center;
-		width: auto;
-		position: absolute;
-		bottom: rhythm(1);
-		z-index: 3;
-		font-family: $font-family-headings;
-		min-width: 200px;
-		max-width: 300px;
-		display: none;
-		padding: rhythm(0.5) rhythm(1);
-		line-height: 1.7;
-
-		@include bp-up(sm) {
-			font-size: $size-base;
-			padding: rhythm(1) rhythm(2);
-			min-width: 300px;
-			max-width: 400px;
-		}
-
-		@include bp-up(md) {
-			font-size: $size-base * 1.5;
-			padding: rhythm(2) rhythm(4);
-			min-width: 400px;
-			max-width: 600px;
-		}
-
-		@include bp-up(lg) {
-			font-size: $size-base * 1.7;
-			min-width: 500px;
-			max-width: 800px;
-			bottom: rhythm(2);
-			align-self: flex-end;
-			right: rhythm(2);
-		}
-
-		&.is-visible {
-			display: inline-block;
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> span {
-			background-color: rgba($color-black, 0.8);
-			color: $color-snow;
-		}
-	}
-
-	@include e(button-abort) {
-		align-self: center;
-		margin-left: auto;
-		flex-grow: 0;
-	}
-}

package/src/organisms/video-guide/video-guide.config.js

@@ -1,17 +0,0 @@
-module.exports = {
-	status: 'prototype',
-
-	context: {
-		videoSrc: '/assets/video/Internets-Historia-HEVC-h265-vp9-chrome.webm',
-		videoSrc2: '/assets/video/Internets-Historia-HEVC-h265-HEVC-h265.mov',
-
-		variants: [
-			{
-				name: 'List',
-				context: {
-
-				}
-			}
-		]
-	}
-}

package/src/organisms/video-guide/video-guide.js

@@ -1,293 +0,0 @@
-const video = document.querySelector('.js-video-guide');
-const playBtn = document.querySelector('.js-play-btn');
-const playIcon = document.querySelector('.js-play-icon');
-const pauseIcon = document.querySelector('.js-pause-icon');
-const subtitlesBtn = document.querySelector('.js-subtitles-btn');
-const abortButton = document.querySelector('.js-abort-guide');
-const subtitlesElement = document.getElementById('video-subtitles');
-const subtitlesContainer = document.querySelector('.js-subtitles-container');
-const locationList = document.querySelector('.js-chapters');
-const chapterTrackElement = document.getElementById('video-chapters');
-const trackMetadataElement = document.getElementById('video-metadata');
-const subtitlesTrack = (subtitlesElement === null) ? '' : subtitlesElement.track;
-const chapterTrack = (chapterTrackElement === null) ? '' : chapterTrackElement.track;
-const metadataTrack = (trackMetadataElement === null) ? '' : trackMetadataElement.track;
-const forwardsButton = document.querySelector('.js-next-chapter');
-const backwardsButton = document.querySelector('.js-previous-chapter');
-const timelinePosts = document.querySelectorAll('.js-timeline-post');
-let currentChapter = 1;
-let manualStep = false;
-let sourceElement = null;
-
-// Has src attributes been set already?
-if (sourceElement) {
-	document.location.reload();
-} else if (video) {
-	const dataSrc = video.dataset.src;
-
-	sourceElement = document.createElement('source');
-	sourceElement.setAttribute('src', dataSrc);
-	sourceElement.setAttribute('type', 'video/mp4');
-
-	video.appendChild(sourceElement);
-
-	// Store current time in on page reload
-	window.addEventListener('unload', () => {
-		// Set sessionStorage if video has started playing
-		if (video.currentTime > 0) {
-			const currentGuideURL = window.location.href;
-			const currentGuideImage = document.querySelector('.js-guide-continue-image').src;
-			sessionStorage.setItem('InmsCurrentTime', video.currentTime);
-			sessionStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
-			sessionStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
-			sessionStorage.setItem('InmsCurrentGuideImage', currentGuideImage);
-		}
-	});
-
-	// Get value from sessionStorage in present
-	if (sessionStorage.getItem('InmsCurrentTime')) {
-		const videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
-
-		if (videoCurrentTime > 0) {
-			video.currentTime = videoCurrentTime;
-		}
-	}
-
-	// Toggle subtitles
-	if (subtitlesBtn) {
-		subtitlesBtn.addEventListener('click', () => {
-			subtitlesBtn.classList.toggle('is-active');
-			subtitlesContainer.classList.toggle('is-visible');
-		});
-	}
-
-	// Play / pause
-	if (playBtn) {
-		playBtn.addEventListener('click', () => {
-			if (video.paused) {
-				video.play();
-				pauseIcon.classList.remove('is-hidden');
-				playIcon.classList.add('is-hidden');
-				manualStep = false;
-			} else {
-				video.pause();
-				pauseIcon.classList.add('is-hidden');
-				playIcon.classList.remove('is-hidden');
-				manualStep = true;
-			}
-		});
-
-		video.addEventListener('playing', () => {
-			pauseIcon.classList.remove('is-hidden');
-			playIcon.classList.add('is-hidden');
-			manualStep = false;
-		});
-
-		video.addEventListener('ended', () => {
-			pauseIcon.classList.add('is-hidden');
-			playIcon.classList.remove('is-hidden');
-			video.currentTime = 0;
-			currentChapter = 1;
-			manualStep = false;
-			forwardsButton.removeAttribute('disabled');
-			subtitlesContainer.innerHTML = '';
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
-		});
-	}
-
-	if (abortButton) {
-		abortButton.addEventListener('click', (e) => {
-			e.preventDefault();
-			const urlTarget = abortButton.getAttribute('href');
-			video.pause();
-			video.currentTime = 0;
-			forwardsButton.removeAttribute('disabled');
-			currentChapter = 1;
-			manualStep = false;
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
-			window.location.href = urlTarget;
-		});
-	}
-}
-
-function displayChapters() {
-	if (chapterTrackElement && trackMetadataElement) {
-		// Set all track elements to hidden mode to allow scripting
-		[].forEach.call(video.textTracks, (txtTrack) => {
-			txtTrack.mode = 'hidden';
-		});
-
-		if (chapterTrack.kind === 'chapters') {
-			video.addEventListener('loadedmetadata', () => {
-				// Loop through chapters and create chapter list
-				// Let data load
-				setTimeout(() => {
-					video.classList.remove('is-loading');
-					[].forEach.call(chapterTrack.cues, (cues) => {
-						const chapterName = cues.text;
-						const start = cues.startTime;
-						const newLocale = document.createElement('li');
-						const location = document.createElement('a');
-
-						location.setAttribute('rel', start);
-						newLocale.setAttribute('id', start);
-						location.setAttribute('tabindex', '0');
-
-						// Plain text from the chapter file into HTML text
-						const localeDescription = chapterName;
-						location.innerHTML = localeDescription;
-						newLocale.appendChild(location);
-						locationList.appendChild(newLocale);
-
-						location.addEventListener('click', () => {
-							video.currentTime = location.id;
-						}, false);
-					});
-
-					// If not set in sessionStorgare, set first cue on forward button on page load
-					if (!sessionStorage.getItem('InmsCurrentTime')) {
-						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
-					}
-				}, 100);
-			});
-
-			forwardsButton.addEventListener('click', () => {
-				const dataId = forwardsButton.dataset.id;
-				let currentTime = parseInt(dataId, 10);
-				manualStep = true;
-				currentTime += 1;
-				video.currentTime = currentTime;
-				currentChapter += 1;
-			});
-
-			backwardsButton.addEventListener('click', () => {
-				const dataId = backwardsButton.dataset.id;
-				let lastTime = parseInt(dataId, 10);
-				lastTime -= 1;
-				video.currentTime = lastTime;
-				forwardsButton.removeAttribute('disabled');
-				manualStep = true;
-				currentChapter -= 1;
-
-				if (video.currentTime <= 0) {
-					backwardsButton.removeAttribute('data-id');
-				}
-			});
-
-			chapterTrack.addEventListener('cuechange', () => {
-				// Fire this whenever the chapters changes
-				const myCues = chapterTrack.activeCues;
-				if (myCues.length > 0) {
-					const currentLocation = chapterTrack.activeCues[0].startTime;
-					const nextLocation = chapterTrack.activeCues[0].endTime;
-					const cueMatch = chapterTrack.activeCues[0].text;
-					const matchingCueArray = document.querySelectorAll(`[rel="${currentLocation}"]`);
-
-					// Set Forward and backwards buttons timestamps
-					forwardsButton.setAttribute('data-id', nextLocation);
-					backwardsButton.setAttribute('data-id', currentLocation);
-
-					// Add chapter stepping even when video is played
-					if (manualStep === false) {
-						currentChapter += 1;
-					}
-
-					// Disable forwardsbutton when on last chapter
-					if (currentChapter >= chapterTrack.cues.length) {
-						forwardsButton.setAttribute('disabled', 'disabled');
-					}
-
-					// Handle current and watched items
-					[].forEach.call(matchingCueArray, (matchingCue) => {
-						const thisChapter = matchingCue;
-						if (thisChapter.innerHTML === cueMatch) {
-							const chapter = thisChapter;
-
-							if (chapter === thisChapter) {
-								// get the chapter <li> elements based on the currentLocation
-								const locations = [].slice.call(chapter.closest('figure')
-									.querySelectorAll('.js-chapters li'));
-
-								let counter = 0;
-
-								[].forEach.call(locations, (location) => {
-									// remove current classes from all items on page refresh
-									location.classList.remove('is-current-item');
-									location.querySelector('a').classList.remove('is-current');
-
-									if (location.classList.contains('is-current-item')) {
-										counter += 1; // iterate counter when active chapter is reached
-									}
-									if (counter < 1) {
-										// add watched class to everything before the current chapter to show progress
-										location.classList.add('is-watched');
-									} else {
-										// remove watched on all other items
-										location.classList.remove('is-watched');
-									}
-								});
-								chapter.parentNode.classList.add('is-current-item');
-								chapter.classList.add('is-current');
-							}
-						}
-					});
-				}
-			}, false);
-
-			// Get timeline post IDs from metadata.vtt
-			metadataTrack.addEventListener('cuechange', () => {
-				const metadataCues = metadataTrack.activeCues;
-				const chapterCues = chapterTrack.activeCues[0];
-
-				if (metadataCues.length > 0) {
-					const metadataCueMatch = metadataTrack.activeCues[0].text;
-
-					[].forEach.call(timelinePosts, (timelinePost) => {
-						timelinePost.classList.remove('is-current');
-					});
-
-					document.querySelector(`[data-id="${metadataCueMatch}"]`).classList.add('is-current');
-
-					if (chapterCues) {
-						const chapterStartTime = chapterCues.startTime;
-
-						// Let stuff load
-						let listElement;
-						let timeOut = null;
-
-						setTimeout(() => { listElement = document.getElementById(chapterStartTime); }, 100);
-
-						timeOut = function wait(condition, callback) {
-							if (typeof condition() !== 'undefined' && listElement) {
-								listElement.classList.add('is-current-item');
-							} else {
-								setTimeout(() => {
-									wait(condition, callback);
-								}, 0);
-							}
-						};
-						timeOut(() => listElement, () => { });
-					}
-				}
-			}, false);
-
-			// Get subtitles cues from subtitles.vtt
-			subtitlesTrack.addEventListener('cuechange', () => {
-				const subtitlesCues = subtitlesTrack.activeCues;
-
-				if (subtitlesCues.length > 0) {
-					const subtitlesCuesMatch = subtitlesTrack.activeCues[0].text;
-					subtitlesContainer.innerHTML = `<span>${subtitlesCuesMatch}</span>`;
-				}
-			}, false);
-		}
-	}
-}
-
-displayChapters(chapterTrackElement);