@internetstiftelsen/styleguide 2.22.1 → 2.22.3-beta.0.2

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

@@ -0,0 +1,298 @@
+'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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.1",
+	"version": "2.22.3-beta.0.2",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -26,13 +26,15 @@
 		"watch:icons": "onchange 'src/atoms/icon/*.svg' -- npm run create-icons-config",
 		"watch": "concurrently \"npm:watch:css\" \"npm:watch:js\" \"npm:watch:icons\"",
 		"copy:images": "copyfiles -f src/assets/images/* public/assets/images",
+		"copy:videos": "copyfiles -f src/assets/video/* public/assets/video",
 		"copy:fonts": "copyfiles -f src/base/fonts/* public/assets/fonts",
 		"copy:zip": "copyfiles -f src/assets/zip/* public/assets/zip",
-		"copy:local-assets": "npm run copy:images && npm run copy:fonts && npm run copy:zip",
+		"copy:local-assets": "npm run copy:images && npm run copy:fonts && npm run copy:videos && npm run copy:zip",
 		"copy:images:build": "copyfiles -f src/assets/images/* build/assets/images",
+		"copy:videos:build": "copyfiles -f src/assets/video/* build/assets/video",
 		"copy:zip:build": "copyfiles -f src/assets/zip/* build/assets/zip",
 		"copy:fonts:build": "copyfiles -f src/base/fonts/* build/assets/fonts",
-		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build",
+		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build && npm run copy:videos:build",
 		"build": "npm run build:css && npm run build:js && npm run uglify && npm run build:fractal && npm run copy:build",
 		"dev": "concurrently \"npm:start:fractal\" \"npm:watch\" \"npm:copy:local-assets\"",
 		"package-js": "NODE_ENV=production babel src --out-dir dist --ignore src/**/*.config.js,src/app.js",
@@ -48,6 +50,8 @@
 		"babel-eslint": "^10.0.3",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",
 		"babel-plugin-transform-class-properties": "^6.24.1",
+		"babel-plugin-transform-custom-element-classes": "^0.1.0",
+		"babel-plugin-transform-es2015-classes": "^6.24.1",
 		"babel-plugin-transform-object-rest-spread": "^6.26.0",
 		"babel-preset-env": "^1.7.0",
 		"browserify": "^16.5.0",

package/src/app.scss

@@ -42,7 +42,6 @@ $namespace: '';
 @import 'atoms/ribbon/ribbon';
 @import 'atoms/quote/quote';
 @import 'atoms/rating/rating';
-@import 'atoms/timeline/timeline';
 
 // Molecules
 @import 'molecules/breadcrumb/breadcrumb';
@@ -65,13 +64,16 @@ $namespace: '';
 @import 'molecules/icon-overlay/icon-overlay';
 @import 'molecules/submenu/submenu';
 @import 'molecules/glider/glider';
-@import 'molecules/timeline-navigation/timeline-navigation';
+@import 'molecules/glider/glider-course';
+@import 'molecules/glider/glider-hero';
+@import 'molecules/continue-video-guide/continue-video-guide';
 
 // Organisms
 @import 'organisms/header/header';
 @import 'organisms/footer/footer';
 @import 'organisms/mega-menu/mega-menu';
 @import 'organisms/hero/hero';
+@import 'organisms/hero/hero--dynamic-headline';
 @import 'organisms/sections/sections';
 @import 'organisms/accordion/accordion';
 @import 'organisms/domain-search/domain-search';
@@ -84,6 +86,8 @@ $namespace: '';
 @import 'organisms/event-listing-item/event-listing-item';
 @import 'organisms/podcast/podcast-episodes';
 @import 'organisms/podcast/podcast-player';
+@import 'organisms/video-guide/video-guide';
+@import 'organisms/timeline/timeline';
 
 // Structures
 @import 'structures/manifest';

package/src/{atoms/timeline → assets/js}/anchorScroll.js

@@ -1,7 +1,10 @@
 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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,25 @@
+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/archive-link/archive-link.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		text: 'Fler nyheter',
+		url: '#',
+		icon: 'arrow-forwards'
+	}
+}

package/src/atoms/button/_button.scss

@@ -64,7 +64,6 @@
 
 	@include e(text) {
 		position: relative;
-		top: -#{rhythm(0.2)};
 		transform: translateY(0);
 		transition: 0.3s opacity, 0.3s transform;
 		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -172,8 +171,8 @@
 
 		@include e(icon) {
 			position: static;
-			width: $icon-size-medium;
-			height: $icon-size-medium;
+			width: $icon-size;
+			height: $icon-size;
 			transform: none;
 			fill: $color-cyberspace;
 		}
@@ -246,22 +245,20 @@
 		}
 	}
 
-	@include m(sandstone) {
-		color: $color-sandstone;
+	@include m(snow) {
+		color: transparent;
 
 		&:hover,
 		&:focus {
-			color: darken($color-sandstone, 12%);
-			text-shadow: none;
+			color: $color-snow;
 		}
 
 		@include e(text) {
 			color: $color-snow;
-			text-shadow: 0 0 rhythm(2) $color-sandstone-dark;
 		}
 
 		@include e(icon) {
-			fill: $color-cyberspace;
+			fill: $color-snow;
 		}
 	}