@internetstiftelsen/styleguide 2.22.3-beta.0.5 → 2.22.3-beta.0.52

package/dist/assets/js/youtube.js

@@ -1,5 +1,9 @@
 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.setupPlayers = setupPlayers;
 function loadYoutubeAPI() {
 	var tag = document.createElement('script');
 	var firstScript = document.getElementsByTagName('script')[0];
@@ -9,16 +13,17 @@ function loadYoutubeAPI() {
 	firstScript.parentNode.insertBefore(tag, firstScript);
 }
 
-function onPlayerReady(el, e) {
-	el.addEventListener('click', function () {
-		e.target.playVideo();
-	});
+function onPlayerReady(el) {
+	el.setAttribute('data-youtube-ready', 'true');
 }
 
 function onPlayerStateChange(el, e) {
 	if (e.data === YT.PlayerState.PLAYING) {
 		el.getElementsByTagName('img')[0].style.zIndex = '-1';
 		el.getElementsByTagName('button')[0].style.display = 'none';
+	} else if (e.data === YT.PlayerState.UNSTARTED) {
+		el.getElementsByTagName('img')[0].style.zIndex = null;
+		el.getElementsByTagName('button')[0].style.display = null;
 	}
 }
 
@@ -32,16 +37,30 @@ function createCover(el, id) {
 }
 
 function setupYoutubePlayer(el) {
-	var playerEl = document.createElement('div');
+	var playerEl = void 0;
 	var id = el.getAttribute('data-youtube');
 
+	if (el.youtube) {
+		playerEl = el.querySelector('[data-youtube-container]');
+
+		playerEl.parentNode.removeChild(playerEl);
+		el.youtube.destroy();
+		el.youtube = null;
+		el.removeAttribute('data-youtube-ready');
+		el.getElementsByTagName('img')[0].style.zIndex = null;
+		el.getElementsByTagName('button')[0].style.display = null;
+	}
+
+	playerEl = document.createElement('div');
+
 	if (!el.getElementsByTagName('img').length) {
 		createCover(el, id);
 	}
 
+	playerEl.setAttribute('data-youtube-container', true);
 	el.appendChild(playerEl);
 
-	var player = new YT.Player(playerEl, {
+	el.youtube = new YT.Player(playerEl, {
 		height: '100%',
 		width: '100%',
 		videoId: id,
@@ -59,18 +78,33 @@ function setupYoutubePlayer(el) {
 			}
 		}
 	});
+}
 
-	el.youtube = player;
+function delegateClick(e) {
+	var el = e.target.closest('[data-youtube]');
+
+	if (!el || !el.youtube) {
+		return;
+	}
+
+	el.youtube.playVideo();
 }
 
-window.onYouTubeIframeAPIReady = function () {
-	var players = document.querySelectorAll('[data-youtube]');
+// eslint-disable-next-line import/prefer-default-export
+function setupPlayers(container) {
+	var players = container.querySelectorAll('[data-youtube]');
 
 	if (!players.length) {
 		return;
 	}
 
 	[].forEach.call(players, setupYoutubePlayer);
+}
+
+window.onYouTubeIframeAPIReady = function () {
+	setupPlayers(document);
+
+	document.body.addEventListener('click', delegateClick);
 };
 
 loadYoutubeAPI();

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

@@ -7,17 +7,80 @@ var _gliderJs2 = _interopRequireDefault(_gliderJs);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var gliderElementHero = document.querySelector('.js-glider-hero');
+var dataLayer = window.dataLayer || [];
+var gliderLinks = document.querySelectorAll('.glider-slide a');
 
 if (gliderElementHero) {
 	var GliderHero = new _gliderJs2.default(gliderElementHero, {
 		scrollLock: true,
 		slidesToShow: 1,
 		slidesToScroll: 1,
+		rewind: true,
 		arrows: {
 			prev: '.js-glider-prev',
 			next: '.js-glider-next'
 		}
 	});
 
+	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);
+	} else {
+		document.querySelector('.js-glider-prev').addEventListener('click', function () {
+			dataLayer.push({
+				event: 'carousel',
+				eventInfo: {
+					category: 'carousel',
+					action: 'click',
+					label: 'arrow_left'
+				}
+			});
+		});
+
+		document.querySelector('.js-glider-next').addEventListener('click', function () {
+			dataLayer.push({
+				event: 'carousel',
+				eventInfo: {
+					category: 'carousel',
+					action: 'click',
+					label: 'arrow_right'
+				}
+			});
+		});
+
+		[].forEach.call(gliderLinks, function (gliderLink) {
+			gliderLink.addEventListener('click', function () {
+				var linkTarget = gliderLink.href;
+				console.log(linkTarget);
+				dataLayer.push({
+					event: 'carousel',
+					eventInfo: {
+						category: 'carousel',
+						action: 'click',
+						label: linkTarget
+					}
+				});
+			});
+		});
+	}
+
 	module.exports = GliderHero;
 }

package/dist/organisms/timeline/timeline.js

@@ -2,13 +2,12 @@
 
 require('../../assets/js/parallax');
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 var _require = require('../../assets/js/offset'),
     offsetTop = _require.offsetTop,
     offsetBottom = _require.offsetBottom,
     offsetLeft = _require.offsetLeft;
 
+var dataLayer = window.dataLayer || [];
 var progressBar = document.querySelector('.js-progress-bar');
 var decadeContainer = document.querySelector('.js-decade-container');
 var decadeSections = document.querySelectorAll('.js-timeline-decade');
@@ -86,6 +85,39 @@ function animateProgressBar() {
 	progressBar.style.width = progressBarWidth + 'px';
 }
 
+function isInViewport(element) {
+	var top = element.offsetTop;
+	var height = element.offsetHeight;
+
+	while (element.offsetParent) {
+		element = element.offsetParent; // eslint-disable-line
+		top += element.offsetTop;
+	}
+
+	return top < window.pageYOffset + window.innerHeight && top + height > window.pageYOffset;
+}
+
+function decadeIsVisible() {
+	[].forEach.call(decadeSections, function (decadeSection) {
+		if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
+			decadeSection.classList.add('is-in-view');
+
+			var decade = decadeSection.id;
+
+			dataLayer.push({
+				event: 'timeline',
+				eventInfo: {
+					category: 'timeline',
+					action: 'active_year',
+					label: decade
+				}
+			});
+		} else if (!isInViewport(decadeSection)) {
+			decadeSection.classList.remove('is-in-view');
+		}
+	});
+}
+
 // Run functions on page load
 if (progressBar) {
 	buildTimelineNavigation();
@@ -99,56 +131,58 @@ if (progressBar) {
 	});
 	window.addEventListener('scroll', function () {
 		animateProgressBar();
+		decadeIsVisible();
 	});
 }
 
 // DUMMY TIMELINE ITEM OPEN/CLOSE
-function wrap(el, wrapper) {
-	el.parentNode.insertBefore(wrapper, el);
-	wrapper.classList.add('wrapper');
-	wrapper.appendChild(el);
-}
-
-var timeLineItems = document.querySelectorAll('.js-timeline-item');
-var timeLineItemScrollPosition = 0;
-
-[].forEach.call(timeLineItems, function (timeLineItem) {
-	var timeLineItemLink = timeLineItem.querySelector('a');
-	var timeLineItemClose = timeLineItem.querySelector('.js-timeline-item-close');
-	var timeLineItemBottomClose = timeLineItem.querySelector('.js-timeline-item-bottom-close');
-
-	timeLineItemLink.addEventListener('click', function () {
-		timeLineItemScrollPosition = window.pageYOffset;
-		sessionStorage.setItem('scroll-position', timeLineItemScrollPosition);
-
-		if (!timeLineItem.classList.contains('is-open')) {
-			timeLineItem.classList.add('is-open');
-			timeLineItem.closest('.row').classList.add('row-has-open-child');
-
-			// Wrap open timeline item
-			wrap(timeLineItem.querySelector('.wp-block-iis-card'), document.createElement('div'));
-		}
-	});
-
-	timeLineItemClose.addEventListener('click', function () {
-		timeLineItem.classList.remove('is-open');
-		timeLineItem.closest('.row').classList.remove('row-has-open-child');
-
-		// Destroy generated wrapper
-		var wrapper = timeLineItemClose.nextElementSibling;
-		wrapper.replaceWith.apply(wrapper, _toConsumableArray(wrapper.childNodes));
-
-		var top = sessionStorage.getItem('scroll-position');
-		if (top !== null) {
-			window.scrollTo(0, parseInt(top, 10));
-		}
-		sessionStorage.removeItem('scroll-position');
-
-		// Trigger scroll event to reveal timeline items not yet parallaxed into view
-		window.dispatchEvent(new CustomEvent('scroll'));
-	});
-
-	timeLineItemBottomClose.addEventListener('click', function () {
-		timeLineItemClose.click();
-	});
-});
+// function wrap(el, wrapper) {
+// 	el.parentNode.insertBefore(wrapper, el);
+// 	wrapper.classList.add('wrapper');
+// 	wrapper.appendChild(el);
+// }
+//
+// const timeLineItems = document.querySelectorAll('.js-timeline-item');
+// let timeLineItemScrollPosition = 0;
+//
+// [].forEach.call(timeLineItems, (timeLineItem) => {
+// 	const timeLineItemLink = timeLineItem.querySelector('a');
+// 	const timeLineItemClose = timeLineItem.querySelector('.js-timeline-item-close');
+// 	const timeLineItemBottomClose = timeLineItem.querySelector('.js-timeline-item-bottom-close');
+//
+// 	timeLineItemLink.addEventListener('click', () => {
+// 		timeLineItemScrollPosition = window.pageYOffset;
+// 		sessionStorage.setItem('scroll-position', timeLineItemScrollPosition);
+//
+// 		if (!timeLineItem.classList.contains('is-open')) {
+// 			timeLineItem.classList.add('is-open');
+// 			timeLineItem.closest('.row').classList.add('row-has-open-child');
+//
+// 			// Wrap open timeline item
+// 			wrap(timeLineItem.querySelector('.wp-block-iis-timeline-post'),
+//			document.createElement('div'));
+// 		}
+// 	});
+//
+// 	timeLineItemClose.addEventListener('click', () => {
+// 		timeLineItem.classList.remove('is-open');
+// 		timeLineItem.closest('.row').classList.remove('row-has-open-child');
+//
+// 		// Destroy generated wrapper
+// 		const wrapper = timeLineItemClose.nextElementSibling;
+// 		wrapper.replaceWith(...wrapper.childNodes);
+//
+// 		const top = sessionStorage.getItem('scroll-position');
+// 		if (top !== null) {
+// 			window.scrollTo(0, parseInt(top, 10));
+// 		}
+// 		sessionStorage.removeItem('scroll-position');
+//
+// 		// Trigger scroll event to reveal timeline items not yet parallaxed into view
+// 		window.dispatchEvent(new CustomEvent('scroll'));
+// 	});
+//
+// 	timeLineItemBottomClose.addEventListener('click', () => {
+// 		timeLineItemClose.click();
+// 	});
+// });

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

@@ -17,6 +17,8 @@ var metadataTrack = trackMetadataElement === null ? '' : trackMetadataElement.tr
 var forwardsButton = document.querySelector('.js-next-chapter');
 var backwardsButton = document.querySelector('.js-previous-chapter');
 var timelinePosts = document.querySelectorAll('.js-timeline-post');
+var navigationButton = document.querySelector('.js-show-timelineposts');
+var timeLinePosts = document.querySelector('.js-timeline-posts');
 var currentChapter = 1;
 var manualStep = false;
 var sourceElement = null;
@@ -35,20 +37,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 +95,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,13 +111,20 @@ 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;
 		});
 	}
+
+	if (navigationButton) {
+		navigationButton.addEventListener('click', function () {
+			navigationButton.classList.toggle('is-toggeled');
+			timeLinePosts.classList.toggle('is-visible');
+		});
+	}
 }
 
 function displayChapters() {
@@ -153,7 +162,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);
@@ -253,7 +262,12 @@ function displayChapters() {
 						timelinePost.classList.remove('is-current');
 					});
 
-					document.querySelector('[data-id="' + metadataCueMatch + '"]').classList.add('is-current');
+					var idSelectors = document.querySelectorAll('[data-id="' + metadataCueMatch + '"]');
+
+					[].forEach.call(idSelectors, function (idSelector) {
+						idSelector.classList.add('is-current');
+						idSelector.focus();
+					});
 
 					if (chapterCues) {
 						var chapterStartTime = chapterCues.startTime;

package/package.json

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

package/src/assets/js/youtube.js

@@ -7,16 +7,17 @@ function loadYoutubeAPI() {
 	firstScript.parentNode.insertBefore(tag, firstScript);
 }
 
-function onPlayerReady(el, e) {
-	el.addEventListener('click', () => {
-		e.target.playVideo();
-	});
+function onPlayerReady(el) {
+	el.setAttribute('data-youtube-ready', 'true');
 }
 
 function onPlayerStateChange(el, e) {
 	if (e.data === YT.PlayerState.PLAYING) {
 		el.getElementsByTagName('img')[0].style.zIndex = '-1';
 		el.getElementsByTagName('button')[0].style.display = 'none';
+	} else if (e.data === YT.PlayerState.UNSTARTED) {
+		el.getElementsByTagName('img')[0].style.zIndex = null;
+		el.getElementsByTagName('button')[0].style.display = null;
 	}
 }
 
@@ -30,16 +31,30 @@ function createCover(el, id) {
 }
 
 function setupYoutubePlayer(el) {
-	const playerEl = document.createElement('div');
+	let playerEl;
 	const id = el.getAttribute('data-youtube');
 
+	if (el.youtube) {
+		playerEl = el.querySelector('[data-youtube-container]');
+
+		playerEl.parentNode.removeChild(playerEl);
+		el.youtube.destroy();
+		el.youtube = null;
+		el.removeAttribute('data-youtube-ready');
+		el.getElementsByTagName('img')[0].style.zIndex = null;
+		el.getElementsByTagName('button')[0].style.display = null;
+	}
+
+	playerEl = document.createElement('div');
+
 	if (!el.getElementsByTagName('img').length) {
 		createCover(el, id);
 	}
 
+	playerEl.setAttribute('data-youtube-container', true);
 	el.appendChild(playerEl);
 
-	const player = new YT.Player(playerEl, {
+	el.youtube = new YT.Player(playerEl, {
 		height: '100%',
 		width: '100%',
 		videoId: id,
@@ -53,18 +68,33 @@ function setupYoutubePlayer(el) {
 			onStateChange: (e) => onPlayerStateChange(el, e),
 		},
 	});
+}
 
-	el.youtube = player;
+function delegateClick(e) {
+	const el = e.target.closest('[data-youtube]');
+
+	if (!el || !el.youtube) {
+		return;
+	}
+
+	el.youtube.playVideo();
 }
 
-window.onYouTubeIframeAPIReady = () => {
-	const players = document.querySelectorAll('[data-youtube]');
+// eslint-disable-next-line import/prefer-default-export
+export function setupPlayers(container) {
+	const players = container.querySelectorAll('[data-youtube]');
 
 	if (!players.length) {
 		return;
 	}
 
 	[].forEach.call(players, setupYoutubePlayer);
+}
+
+window.onYouTubeIframeAPIReady = () => {
+	setupPlayers(document);
+
+	document.body.addEventListener('click', delegateClick);
 };
 
 loadYoutubeAPI();

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/assets/video/metadata.vtt

@@ -1,25 +1,28 @@
 WEBVTT
 
-00:00:00.000 --> 00:00:39.000
-6513
+00:00:00.000 --> 00:00:25.000
+91058
+
+00:00:25.000 --> 00:00:39.000
+91027
 
 00:00:39.000 --> 00:01:51.500
-1376
+81345
 
 00:01:51.500 --> 00:02:23.000
-666
+76810
 
 00:02:23.000 --> 00:03:27.000
-777
+86454
 
 00:03:27.000 --> 00:03:56.500
-888
+80127
 
 00:03:56.500 --> 00:04:34.000
-242
+76325
 
 00:04:34.000 --> 00:05:17.000
-1337
+76280
 
 00:05:17.000 --> 00:06:28.000
-1177
+80725

package/src/atoms/tag/tag.config.js

@@ -31,6 +31,16 @@ module.exports = {
 				is_light: true,
 				background_color: 'ruby'
 			}
+		},
+		{
+			name: 'Border variation',
+			context: {
+				text: 'border',
+				href: '#',
+				is_light: false,
+				border: true,
+				background_color: false
+			}
 		}
 	]
 }