@internetstiftelsen/styleguide 2.22.1 → 2.22.3-beta.0.2

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

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

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

@@ -0,0 +1,293 @@
+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);

package/src/pages/animate-footer/animate-footer.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		hidden: 'true',
+		id: true,
+		addidional_classes: false,
+		label: 'sök en .se- eller .nu-domän'
+	}
+}

package/src/pages/conditional/conditional.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	status: 'ready',
+	context: {}
+}

package/src/pages/internetguider/internetguider.config.js

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

package/src/pages/magazine/magazine.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		alt: 'Hands typing on laptop',
+		img_url: '/assets/images/ALX_0876.jpg',
+		title: 'Gymnasieskolor med hög bandbredd har bättre skolresultat',
+		url: 'http://www.google.se',
+		exerpt: 'Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.',
+		is_padded: true,
+		is_wide: false,
+		has_shadow: false,
+		has_button: false,
+		read_time: true,
+		has_border: false,
+		has_image: true,
+		has_radius: true
+	}
+}

package/src/pages/mailchimp-newsletter/mailchimp-newsletter.config.js

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

package/src/pages/responsive-position/responsive-position.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	status: 'ready',
+	context: {}
+}