@internetstiftelsen/styleguide 2.22.3-beta.0.12 → 2.22.3-beta.0.15

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

@@ -66,15 +66,15 @@ var ProgressRing = function (_CustomElement2) {
 
 window.customElements.define('progress-ring', ProgressRing);
 
-// Get value from sessionStorage if present
-if (sessionStorage.getItem('InmsCurrentTime')) {
-	var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
-	var videoDuration = sessionStorage.getItem('InmsDuration');
+// Get value from localStorage if present
+if (localStorage.getItem('InmsCurrentTime')) {
+	var videoCurrentTime = localStorage.getItem('InmsCurrentTime');
+	var videoDuration = localStorage.getItem('InmsDuration');
 	var continueElement = document.querySelector('.js-guide-continue');
 	var progressRing = document.querySelector('progress-ring');
 	var continueLink = document.querySelector('.js-guide-continue-link');
-	var guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
-	var guideImage = sessionStorage.getItem('InmsCurrentGuideImage');
+	var guideURL = localStorage.getItem('InmsCurrentGuideURL');
+	var guideImage = localStorage.getItem('InmsCurrentGuideImage');
 
 	if (videoCurrentTime > 0 && progressRing && continueElement && guideImage && continueLink) {
 		var alternativeText = continueLink.dataset.altText;

package/dist/molecules/glider/glider-hero.js

@@ -19,5 +19,28 @@ if (gliderElementHero) {
 		}
 	});
 
+	var autoplayDelay = gliderElementHero.dataset.timeout;
+
+	if (autoplayDelay) {
+		var autoplay = setInterval(function () {
+			GliderHero.scrollItem('next');
+		}, autoplayDelay);
+
+		gliderElementHero.addEventListener('mouseover', function () {
+			if (autoplay !== null) {
+				clearInterval(autoplay);
+				autoplay = null;
+			}
+		}, 0);
+
+		gliderElementHero.addEventListener('mouseout', function () {
+			if (autoplay === null) {
+				autoplay = setInterval(function () {
+					GliderHero.scrollItem('next');
+				}, autoplayDelay);
+			}
+		}, 0);
+	}
+
 	module.exports = GliderHero;
 }

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

@@ -35,20 +35,20 @@ if (sourceElement) {
 
 	// Store current time in on page reload
 	window.addEventListener('unload', function () {
-		// Set sessionStorage if video has started playing
+		// Set localStorage 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);
+			localStorage.setItem('InmsCurrentTime', video.currentTime);
+			localStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
+			localStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
+			localStorage.setItem('InmsCurrentGuideImage', currentGuideImage);
 		}
 	});
 
-	// Get value from sessionStorage in present
-	if (sessionStorage.getItem('InmsCurrentTime')) {
-		var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
+	// Get value from localStorage in present
+	if (localStorage.getItem('InmsCurrentTime')) {
+		var videoCurrentTime = localStorage.getItem('InmsCurrentTime');
 
 		if (videoCurrentTime > 0) {
 			video.currentTime = videoCurrentTime;
@@ -93,10 +93,10 @@ if (sourceElement) {
 			manualStep = false;
 			forwardsButton.removeAttribute('disabled');
 			subtitlesContainer.innerHTML = '';
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
 		});
 	}
 
@@ -109,10 +109,10 @@ if (sourceElement) {
 			forwardsButton.removeAttribute('disabled');
 			currentChapter = 1;
 			manualStep = false;
-			sessionStorage.removeItem('InmsCurrentTime');
-			sessionStorage.removeItem('InmsDuration');
-			sessionStorage.removeItem('InmsCurrentGuideURL');
-			sessionStorage.removeItem('InmsCurrentGuideImage');
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
 			window.location.href = urlTarget;
 		});
 	}
@@ -153,7 +153,7 @@ function displayChapters() {
 					});
 
 					// If not set in sessionStorgare, set first cue on forward button on page load
-					if (!sessionStorage.getItem('InmsCurrentTime')) {
+					if (!localStorage.getItem('InmsCurrentTime')) {
 						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
 					}
 				}, 100);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.3-beta.0.12",
+	"version": "2.22.3-beta.0.15",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/assets/video/chapters.vtt

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

package/src/molecules/glider/glider-hero.js

@@ -13,5 +13,28 @@ if (gliderElementHero) {
 		},
 	});
 
+	const autoplayDelay = gliderElementHero.dataset.timeout;
+
+	if (autoplayDelay) {
+		let autoplay = setInterval(() => {
+			GliderHero.scrollItem('next');
+		}, autoplayDelay);
+
+		gliderElementHero.addEventListener('mouseover', () => {
+			if (autoplay !== null) {
+				clearInterval(autoplay);
+				autoplay = null;
+			}
+		}, 0);
+
+		gliderElementHero.addEventListener('mouseout', () => {
+			if (autoplay === null) {
+				autoplay = setInterval(() => {
+					GliderHero.scrollItem('next');
+				}, autoplayDelay);
+			}
+		}, 0);
+	}
+
 	module.exports = GliderHero;
 }

package/src/organisms/hero/_hero--dynamic-headline.scss

@@ -100,7 +100,6 @@
 
 				@include bp-up(xxl) {
 					font-size: 24px !important;
-					margin-left: rhythm(2);
 				}
 			}
 		}

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

@@ -4,11 +4,16 @@
 	flex-direction: column;
 	background-color: $color-snow;
 
+	> figure {
+		display: flex;
+	}
+
 	@include e(video-container) {
 		position: relative;
 		padding-top: 70vh;
 		width: 100%;
 		display: flex;
+		flex-direction: column;
 		justify-content: center;
 
 		@include bp-up(sm) {
@@ -219,6 +224,13 @@
 		}
 	}
 
+	@include e(timelineposts) {
+		z-index: 2;
+		width: 100%;
+		max-width: 200px;
+		background-color: $color-cyberspace;
+	}
+
 	@include e(buttons) {
 		display: flex;
 		width: 100%;