@internetstiftelsen/styleguide 2.22.3-beta.0.7 → 2.22.4

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

@@ -1,298 +0,0 @@
-'use strict';
-
-var video = document.querySelector('.js-video-guide');
-var playBtn = document.querySelector('.js-play-btn');
-var playIcon = document.querySelector('.js-play-icon');
-var pauseIcon = document.querySelector('.js-pause-icon');
-var subtitlesBtn = document.querySelector('.js-subtitles-btn');
-var abortButton = document.querySelector('.js-abort-guide');
-var subtitlesElement = document.getElementById('video-subtitles');
-var subtitlesContainer = document.querySelector('.js-subtitles-container');
-var locationList = document.querySelector('.js-chapters');
-var chapterTrackElement = document.getElementById('video-chapters');
-var trackMetadataElement = document.getElementById('video-metadata');
-var subtitlesTrack = subtitlesElement === null ? '' : subtitlesElement.track;
-var chapterTrack = chapterTrackElement === null ? '' : chapterTrackElement.track;
-var metadataTrack = trackMetadataElement === null ? '' : trackMetadataElement.track;
-var forwardsButton = document.querySelector('.js-next-chapter');
-var backwardsButton = document.querySelector('.js-previous-chapter');
-var timelinePosts = document.querySelectorAll('.js-timeline-post');
-var currentChapter = 1;
-var manualStep = false;
-var sourceElement = null;
-
-// Has src attributes been set already?
-if (sourceElement) {
-	document.location.reload();
-} else if (video) {
-	var 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', function () {
-		// Set sessionStorage if video has started playing
-		if (video.currentTime > 0) {
-			var currentGuideURL = window.location.href;
-			var 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')) {
-		var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
-
-		if (videoCurrentTime > 0) {
-			video.currentTime = videoCurrentTime;
-		}
-	}
-
-	// Toggle subtitles
-	if (subtitlesBtn) {
-		subtitlesBtn.addEventListener('click', function () {
-			subtitlesBtn.classList.toggle('is-active');
-			subtitlesContainer.classList.toggle('is-visible');
-		});
-	}
-
-	// Play / pause
-	if (playBtn) {
-		playBtn.addEventListener('click', function () {
-			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', function () {
-			pauseIcon.classList.remove('is-hidden');
-			playIcon.classList.add('is-hidden');
-			manualStep = false;
-		});
-
-		video.addEventListener('ended', function () {
-			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', function (e) {
-			e.preventDefault();
-			var 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, function (txtTrack) {
-			txtTrack.mode = 'hidden';
-		});
-
-		if (chapterTrack.kind === 'chapters') {
-			video.addEventListener('loadedmetadata', function () {
-				// Loop through chapters and create chapter list
-				// Let data load
-				setTimeout(function () {
-					video.classList.remove('is-loading');
-					[].forEach.call(chapterTrack.cues, function (cues) {
-						var chapterName = cues.text;
-						var start = cues.startTime;
-						var newLocale = document.createElement('li');
-						var 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
-						var localeDescription = chapterName;
-						location.innerHTML = localeDescription;
-						newLocale.appendChild(location);
-						locationList.appendChild(newLocale);
-
-						location.addEventListener('click', function () {
-							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', function () {
-				var dataId = forwardsButton.dataset.id;
-				var currentTime = parseInt(dataId, 10);
-				manualStep = true;
-				currentTime += 1;
-				video.currentTime = currentTime;
-				currentChapter += 1;
-			});
-
-			backwardsButton.addEventListener('click', function () {
-				var dataId = backwardsButton.dataset.id;
-				var 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', function () {
-				// Fire this whenever the chapters changes
-				var myCues = chapterTrack.activeCues;
-				if (myCues.length > 0) {
-					var currentLocation = chapterTrack.activeCues[0].startTime;
-					var nextLocation = chapterTrack.activeCues[0].endTime;
-					var cueMatch = chapterTrack.activeCues[0].text;
-					var 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, function (matchingCue) {
-						var thisChapter = matchingCue;
-						if (thisChapter.innerHTML === cueMatch) {
-							var chapter = thisChapter;
-
-							if (chapter === thisChapter) {
-								// get the chapter <li> elements based on the currentLocation
-								var locations = [].slice.call(chapter.closest('figure').querySelectorAll('.js-chapters li'));
-
-								var counter = 0;
-
-								[].forEach.call(locations, function (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', function () {
-				var metadataCues = metadataTrack.activeCues;
-				var chapterCues = chapterTrack.activeCues[0];
-
-				if (metadataCues.length > 0) {
-					var metadataCueMatch = metadataTrack.activeCues[0].text;
-
-					[].forEach.call(timelinePosts, function (timelinePost) {
-						timelinePost.classList.remove('is-current');
-					});
-
-					document.querySelector('[data-id="' + metadataCueMatch + '"]').classList.add('is-current');
-
-					if (chapterCues) {
-						var chapterStartTime = chapterCues.startTime;
-
-						// Let stuff load
-						var listElement = void 0;
-						var timeOut = null;
-
-						setTimeout(function () {
-							listElement = document.getElementById(chapterStartTime);
-						}, 100);
-
-						timeOut = function wait(condition, callback) {
-							if (typeof condition() !== 'undefined' && listElement) {
-								listElement.classList.add('is-current-item');
-							} else {
-								setTimeout(function () {
-									wait(condition, callback);
-								}, 0);
-							}
-						};
-						timeOut(function () {
-							return listElement;
-						}, function () {});
-					}
-				}
-			}, false);
-
-			// Get subtitles cues from subtitles.vtt
-			subtitlesTrack.addEventListener('cuechange', function () {
-				var subtitlesCues = subtitlesTrack.activeCues;
-
-				if (subtitlesCues.length > 0) {
-					var subtitlesCuesMatch = subtitlesTrack.activeCues[0].text;
-					subtitlesContainer.innerHTML = '<span>' + subtitlesCuesMatch + '</span>';
-				}
-			}, false);
-		}
-	}
-}
-
-displayChapters(chapterTrackElement);

package/src/assets/js/anchorScroll.js

@@ -1,10 +0,0 @@
-import SmoothScroll from 'smooth-scroll';
-
-const anchorScroll = new SmoothScroll('a[href*="#"]', {
-	speed: 1500,
-	speedAsDuration: true,
-	easing: 'easeOutCubic',
-	ignore: '[data-scroll-ignore]',
-});
-
-module.exports = anchorScroll;

package/src/assets/js/offset.js

@@ -1,22 +0,0 @@
-module.exports = {
-	// Get top of element relative to window
-	offsetTop(el) {
-		const rect = el.getBoundingClientRect();
-		const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-		return rect.top + scrollTop;
-	},
-
-	// Get bottom of element relative to window
-	offsetBottom(el) {
-		const rect = el.getBoundingClientRect();
-		const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-		return rect.bottom + scrollTop;
-	},
-
-	// Get left of element relative to window
-	offsetLeft(el) {
-		const rect = el.getBoundingClientRect();
-		const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-		return rect.left + scrollLeft;
-	},
-};

package/src/assets/js/parallax.js

@@ -1,15 +0,0 @@
-function isInView(el) {
-	const box = el.getBoundingClientRect();
-	return box.top < window.innerHeight && box.bottom >= 0;
-}
-
-const parallaxes = document.querySelectorAll('.js-parallax');
-
-window.addEventListener('scroll', () => {
-	[].forEach.call(parallaxes, (parallax) => {
-		const visible = isInView(parallax);
-		if (visible) {
-			parallax.classList.add('animate');
-		}
-	});
-});

package/src/assets/video/chapters.vtt

@@ -1,25 +0,0 @@
-WEBVTT
-
-00:00:00.000 --> 00:00:39.000
-1 / 8: Introduktion
-
-00:00:39.000 --> 00:01:51.500
-2 / 8: Idén om internet
-
-00:01:51.500 --> 00:02:53.000
-3 / 8: Arpanet blir till
-
-00:02:53.000 --> 00:03:27.000
-4 / 8: TCP/IP uppfinns
-
-00:03:27.000 --> 00:03:56.500
-5 / 8: Sveriges första internetnod
-
-00:03:56.500 --> 00:04:34.000
-6 / 8: Toppdomänen .se registreras
-
-00:04:34.000 --> 00:05:17.000
-7 / 8: World Wide Web
-
-00:05:17.000 --> 00:06:28.000
-8 / 8: Mosaic - den grafiska webbläsaren

package/src/assets/video/metadata.vtt

@@ -1,25 +0,0 @@
-WEBVTT
-
-00:00:00.000 --> 00:00:39.000
-6513
-
-00:00:39.000 --> 00:01:51.500
-1376
-
-00:01:51.500 --> 00:02:23.000
-666
-
-00:02:23.000 --> 00:03:27.000
-777
-
-00:03:27.000 --> 00:03:56.500
-888
-
-00:03:56.500 --> 00:04:34.000
-242
-
-00:04:34.000 --> 00:05:17.000
-1337
-
-00:05:17.000 --> 00:06:28.000
-1177

package/src/assets/video/videoplayer.vtt

@@ -1,25 +0,0 @@
-WEBVTT
-
-1
-00:00:00.500 --> 00:00:02.000
-Lorem ipsum dolor sit amet, consectetur adipiscing elit
-
-2
-00:00:02.100 --> 00:00:03.000
-Phasellus eget lorem dui
-
-3
-00:00:03.100 --> 00:00:04.500
-Morbi ac nisi ac purus maximus semper a vitae diam fusce sit amet libero non tortor
-
-4
-00:00:04.600 --> 00:00:05.500
-Ut scelerisque sagittis justo vitae viverra
-
-5
-00:00:05.600 --> 00:00:06.500
-unc blandit justo sed odio tempus ultrices. Pellentesque sollicitudin justo.
-
-6
-00:00:06.100 --> 00:00:08.000
-Etiam ut volutpat tortor. Nunc iaculis luctus sapien.

package/src/atoms/icon/step-backwards.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32" xml:space="preserve"><path d="m25.7 28.9-14.2-13 14.2-13v26zM9.753 28h-5V3h5z"/></svg>

package/src/atoms/icon/step-forwards.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32" xml:space="preserve"><path d="m4.8 2.9 14.2 13-14.2 13v-26zM20.7 3.1h5v25h-5z"/></svg>

package/src/atoms/icon/subtitles.svg

@@ -1 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 32 32" width="32" height="32" xml:space="preserve"><path d="M27 10v12H5V10h22m3-3H2v18h28V7z"/><path class="st0" d="M25 19h-4"/><path d="M21 18h4v2h-4z"/><path class="st0" d="M19 19H7"/><path d="M7 18h12v2H7z"/><g><path class="st0" d="M7 15h4"/><path d="M7 14h4v2H7z"/></g><g><path class="st0" d="M13 15h12"/><path d="M13 14h12v2H13z"/></g></svg>

package/src/molecules/continue-video-guide/continue-video-guide.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-	status: 'wip',
-
-	context: {
-		additional_classes: false
-	}
-}

package/src/molecules/continue-video-guide/continue-video-guide.js

@@ -1,84 +0,0 @@
-import className from '../../assets/js/className';
-
-class ProgressRing extends HTMLElement {
-	constructor() {
-		super();
-		const stroke = this.getAttribute('stroke');
-		const radius = this.getAttribute('radius');
-		const normalizedRadius = radius - stroke * 2;
-		this.circumference = normalizedRadius * 2 * Math.PI;
-
-		this.root = this.attachShadow({ mode: 'open' });
-		this.root.innerHTML = `
-		<svg
-		height="${radius * 2}"
-		width="${radius * 2}"
-		>
-		<circle
-		stroke="white"
-		stroke-dasharray="${this.circumference} ${this.circumference}"
-		style="stroke-dashoffset:${this.circumference}"
-		stroke-width="${stroke}"
-		fill="transparent"
-		r="${normalizedRadius}"
-		cx="${radius}"
-		cy="${radius}"
-		/>
-		</svg>
-
-		<style>
-		circle {
-			transition: stroke-dashoffset 0.35s;
-			transform: rotate(-90deg);
-			transform-origin: 50% 50%;
-		}
-		</style>
-		`;
-	}
-
-	setProgress(percent) {
-		const offset = this.circumference - ((percent / 100) * this.circumference);
-		const circle = this.root.querySelector('circle');
-		circle.style.strokeDashoffset = offset;
-	}
-
-	static get observedAttributes() {
-		return ['progress'];
-	}
-
-	attributeChangedCallback(name, oldValue, newValue) {
-		if (name === 'progress') {
-			this.setProgress(newValue);
-		}
-	}
-}
-
-window.customElements.define('progress-ring', ProgressRing);
-
-// Get value from sessionStorage if present
-if (sessionStorage.getItem('InmsCurrentTime')) {
-	const videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
-	const videoDuration = sessionStorage.getItem('InmsDuration');
-	const continueElement = document.querySelector('.js-guide-continue');
-	const progressRing = document.querySelector('progress-ring');
-	const continueLink = document.querySelector('.js-guide-continue-link');
-	const guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
-	const guideImage = sessionStorage.getItem('InmsCurrentGuideImage');
-
-	if ((videoCurrentTime > 0)
-		&& progressRing
-		&& continueElement
-		&& guideImage
-		&& continueLink) {
-		const alternativeText = continueLink.dataset.altText;
-		const currentProgress = videoCurrentTime / videoDuration;
-		const currentGuideImage = document.querySelector('.js-guide-continue-image');
-
-		continueElement.classList.add(className('m-continue-video-guide--has-progress'));
-		continueLink.setAttribute('href', guideURL);
-		currentGuideImage.src = guideImage;
-		continueLink.querySelector('span').innerText = alternativeText;
-		// Calculate percentage played
-		progressRing.setAttribute('progress', Math.floor(currentProgress * 100));
-	}
-}

package/src/molecules/continue-video-guide/continue-video-guide.scss

@@ -1,104 +0,0 @@
-@charset "UTF-8";
-
-@include molecule(continue-video-guide) {
-	position: fixed;
-	bottom: 0;
-	right: 0;
-	z-index: z_index(middlegroundImportant);
-	width: 100px;
-	height: calc(100px + 23px + rhythm(1));
-	transform: scale(0.7);
-
-	@include bp-up(md) {
-		transform: scale(1);
-		bottom: rhythm(2);
-		right: rhythm(2);
-	}
-
-	@include e(inner) {
-		position: relative;
-	}
-
-	@include e(progressbar) {
-		display: none;
-	}
-
-	@include e(continue) {
-		position: absolute;
-		z-index: 3;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100px;
-		height: 100px;
-		border-color: $color-snow;
-
-		&::after {
-			content: 'Guidad tur';
-			display: block;
-			position: absolute;
-			left: auto;
-			right: auto;
-			bottom: 0;
-			transform: translateY(calc(100% + rhythm(1)));
-			text-align: center;
-			background-color: $color-peacock-light;
-			font-size: $size-medium;
-			font-family: $font-family-headings;
-			border-radius: $border-radius;
-			color: $color-cyberspace;
-			padding: rhythm(0.5) rhythm(1);
-			line-height: 1;
-		}
-	}
-
-	@include m(has-progress) {
-		@include e(continue) {
-			&::after {
-				content: 'Fortsätt';
-			}
-
-			@include e(arrow) {
-				width: 0;
-				height: 0;
-				border-style: solid;
-				border-width: 15px 0 15px 20px;
-				transition: border-width 0.25s ease-out;
-				border-color: transparent transparent transparent inherit;
-			}
-
-			&:hover,
-			&:focus {
-				> div {
-					border-width: 20px 0 20px 30px;
-				}
-			}
-		}
-
-		@include e(progressbar) {
-			display: block;
-			position: absolute;
-			z-index: 2;
-			border-radius: 50%;
-
-			&::after {
-				position: absolute;
-				top: 6px;
-				left: 6px;
-				width: 88px;
-				height: 88px;
-				border-radius: 50%;
-				content: '';
-				display: block;
-				border: 4px solid rgba($color-snow, 0.5);
-			}
-		}
-	}
-
-	@include e(image) {
-		position: absolute;
-		z-index: 1;
-		width: 100px;
-		height: 100px;
-	}
-}

package/src/molecules/continue-video-guide/readme.md

@@ -1,3 +0,0 @@
-# Continue Video Guide
-
-This component is dependent on the [Video Guide Component](/components/detail/video-guide). Continuing a guided tour is only possible if the video player has a saved timestamp in sessionStorage