@internetstiftelsen/styleguide 2.22.3-beta.0.6 → 2.22.3-beta.0.60

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,38 +17,29 @@ 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;
 
 // 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);
-
+if (video) {
 	// 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);
+			var currentGuideImage = video.dataset.featuredImage;
+			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 +84,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 +100,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() {
@@ -126,38 +124,36 @@ function displayChapters() {
 		});
 
 		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);
-			});
+			// 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 (!localStorage.getItem('InmsCurrentTime')) {
+					forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
+				}
+			}, 100);
 
 			forwardsButton.addEventListener('click', function () {
 				var dataId = forwardsButton.dataset.id;
@@ -215,23 +211,10 @@ function displayChapters() {
 								// 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');
@@ -253,7 +236,11 @@ 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');
+					});
 
 					if (chapterCues) {
 						var chapterStartTime = chapterCues.startTime;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.3-beta.0.6",
+	"version": "2.22.3-beta.0.60",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -11,14 +11,13 @@
 		"build:fractal": "fractal build",
 		"scss": "sass src/app.scss public/assets/css/app.css",
 		"stylelint": "stylelint 'src/**/*.scss' '!**/vendor/**' '!**/colors/_colors-functions.scss' --fix --cache --cache-location '.stylelintcache'",
-		"autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' public/assets/css/app.css -d public/assets/css/",
 		"cssmin": "postcss --use cssnano -b '' public/assets/css/app.css > public/assets/css/app.min.css",
 		"browserify": "browserify public/assets/js/cjs/app.js -o public/assets/js/scripts.js",
 		"babel": "npx babel src --out-dir public/assets/js/cjs --ignore src/**/*.config.js",
 		"eslint": "eslint --fix src",
 		"uglify": "uglifyjs -o public/assets/js/scripts.js public/assets/js/scripts.js",
 		"imagemin": "imagemin --out-dir=public/assets/img src/**/*.{png,jpg,gif}",
-		"build:css": "npm run stylelint && npm run scss && npm run autoprefixer && npm run cssmin",
+		"build:css": "npm run stylelint && npm run scss && npm run cssmin",
 		"build:js": "npm run eslint && npm run babel && npm run browserify",
 		"build:img": "npm run imagemin",
 		"watch:css": "onchange 'src/**/*.scss' -- npm run build:css",
@@ -45,7 +44,6 @@
 		"@frctl/mandelbrot": "^1.9.2",
 		"@internetstiftelsen/eslint-config": "^0.0.5",
 		"@internetstiftelsen/stylelint-config": "^1.0.0",
-		"autoprefixer": "^10.2.6",
 		"babel-cli": "^6.26.0",
 		"babel-eslint": "^10.0.3",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",