@internetstiftelsen/styleguide 2.22.4 → 2.22.5

package/dist/assets/js/anchorScroll.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var _smoothScroll = require('smooth-scroll');
+
+var _smoothScroll2 = _interopRequireDefault(_smoothScroll);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var anchorScroll = new _smoothScroll2.default('a[href*="#"]', {
+	speed: 1500,
+	speedAsDuration: true,
+	easing: 'easeOutCubic',
+	ignore: '[data-scroll-ignore]'
+});
+
+module.exports = anchorScroll;

package/dist/assets/js/offset.js

@@ -0,0 +1,26 @@
+"use strict";
+
+module.exports = {
+	// Get top of element relative to window
+	offsetTop: function offsetTop(el) {
+		var rect = el.getBoundingClientRect();
+		var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+		return rect.top + scrollTop;
+	},
+
+
+	// Get bottom of element relative to window
+	offsetBottom: function offsetBottom(el) {
+		var rect = el.getBoundingClientRect();
+		var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+		return rect.bottom + scrollTop;
+	},
+
+
+	// Get left of element relative to window
+	offsetLeft: function offsetLeft(el) {
+		var rect = el.getBoundingClientRect();
+		var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+		return rect.left + scrollLeft;
+	}
+};

package/dist/assets/js/parallax.js

@@ -0,0 +1,17 @@
+'use strict';
+
+function isInView(el) {
+	var box = el.getBoundingClientRect();
+	return box.top < window.innerHeight && box.bottom >= 0;
+}
+
+var parallaxes = document.querySelectorAll('.js-parallax');
+
+window.addEventListener('scroll', function () {
+	[].forEach.call(parallaxes, function (parallax) {
+		var visible = isInView(parallax);
+		if (visible) {
+			parallax.classList.add('animate');
+		}
+	});
+});

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,10 +13,8 @@ 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) {
@@ -32,16 +34,28 @@ 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');
+	}
+
+	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 +73,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/components.js

@@ -46,6 +46,8 @@ require('./molecules/glider/glider');
 
 require('./molecules/glider/glider-course');
 
+require('./molecules/glider/glider-hero');
+
 require('./molecules/context-menu/context-menu');
 
 require('./molecules/alert/alert');

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

@@ -0,0 +1,91 @@
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _className = require('../../assets/js/className');
+
+var _className2 = _interopRequireDefault(_className);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function _CustomElement() {
+	return Reflect.construct(HTMLElement, [], this.__proto__.constructor);
+}
+
+;
+Object.setPrototypeOf(_CustomElement.prototype, HTMLElement.prototype);
+Object.setPrototypeOf(_CustomElement, HTMLElement);
+
+var ProgressRing = function (_CustomElement2) {
+	_inherits(ProgressRing, _CustomElement2);
+
+	function ProgressRing() {
+		_classCallCheck(this, ProgressRing);
+
+		var _this = _possibleConstructorReturn(this, (ProgressRing.__proto__ || Object.getPrototypeOf(ProgressRing)).call(this));
+
+		var stroke = _this.getAttribute('stroke');
+		var radius = _this.getAttribute('radius');
+		var normalizedRadius = radius - stroke * 2;
+		_this.circumference = normalizedRadius * 2 * Math.PI;
+
+		_this.root = _this.attachShadow({ mode: 'open' });
+		_this.root.innerHTML = '\n\t\t<svg\n\t\theight="' + radius * 2 + '"\n\t\twidth="' + radius * 2 + '"\n\t\t>\n\t\t<circle\n\t\tstroke="white"\n\t\tstroke-dasharray="' + _this.circumference + ' ' + _this.circumference + '"\n\t\tstyle="stroke-dashoffset:' + _this.circumference + '"\n\t\tstroke-width="' + stroke + '"\n\t\tfill="transparent"\n\t\tr="' + normalizedRadius + '"\n\t\tcx="' + radius + '"\n\t\tcy="' + radius + '"\n\t\t/>\n\t\t</svg>\n\n\t\t<style>\n\t\tcircle {\n\t\t\ttransition: stroke-dashoffset 0.35s;\n\t\t\ttransform: rotate(-90deg);\n\t\t\ttransform-origin: 50% 50%;\n\t\t}\n\t\t</style>\n\t\t';
+		return _this;
+	}
+
+	_createClass(ProgressRing, [{
+		key: 'setProgress',
+		value: function setProgress(percent) {
+			var offset = this.circumference - percent / 100 * this.circumference;
+			var circle = this.root.querySelector('circle');
+			circle.style.strokeDashoffset = offset;
+		}
+	}, {
+		key: 'attributeChangedCallback',
+		value: function attributeChangedCallback(name, oldValue, newValue) {
+			if (name === 'progress') {
+				this.setProgress(newValue);
+			}
+		}
+	}], [{
+		key: 'observedAttributes',
+		get: function get() {
+			return ['progress'];
+		}
+	}]);
+
+	return ProgressRing;
+}(_CustomElement);
+
+window.customElements.define('progress-ring', ProgressRing);
+
+// 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 = localStorage.getItem('InmsCurrentGuideURL');
+	var guideImage = localStorage.getItem('InmsCurrentGuideImage');
+
+	if (videoCurrentTime > 0 && progressRing && continueElement && guideImage && continueLink) {
+		var alternativeText = continueLink.dataset.altText;
+		var currentProgress = videoCurrentTime / videoDuration;
+		var currentGuideImage = document.querySelector('.js-guide-continue-image');
+
+		continueElement.classList.add((0, _className2.default)('m-continue-video-guide--has-progress'));
+		continueLink.setAttribute('href', guideURL);
+		currentGuideImage.src = guideImage;
+		continueLink.querySelector('span').innerText = alternativeText;
+		// Calculate percentage played
+		progressRing.setAttribute('progress', Math.floor(currentProgress * 100));
+	}
+}

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

@@ -6,10 +6,10 @@ var _gliderJs2 = _interopRequireDefault(_gliderJs);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var gliderElementSingle = document.querySelector('.js-glider-course');
+var gliderElementCourse = document.querySelector('.js-glider-course');
 
-if (gliderElementSingle) {
-	var GliderSingle = new _gliderJs2.default(gliderElementSingle, {
+if (gliderElementCourse) {
+	var GliderCourse = new _gliderJs2.default(gliderElementCourse, {
 		scrollLock: true,
 		slidesToShow: 1,
 		slidesToScroll: 1
@@ -19,7 +19,7 @@ if (gliderElementSingle) {
 	var prevBtns = document.querySelectorAll('.js-glider-prev');
 	var siteMain = document.querySelector('#siteMain');
 	var zoomImages = document.querySelectorAll('.js-zoom.zoom');
-	var slideIndex = GliderSingle.getCurrentSlide();
+	var slideIndex = GliderCourse.getCurrentSlide();
 	var bounding = 0;
 
 	var scrollTop = function scrollTop() {
@@ -29,7 +29,7 @@ if (gliderElementSingle) {
 	if (nextBtns) {
 		[].forEach.call(nextBtns, function (nextBtn) {
 			nextBtn.addEventListener('click', function () {
-				GliderSingle.scrollItem(slideIndex += 1, true);
+				GliderCourse.scrollItem(slideIndex += 1, true);
 
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();
@@ -44,7 +44,7 @@ if (gliderElementSingle) {
 	if (prevBtns) {
 		[].forEach.call(prevBtns, function (prevBtn) {
 			prevBtn.addEventListener('click', function () {
-				GliderSingle.scrollItem(slideIndex -= 1, true);
+				GliderCourse.scrollItem(slideIndex -= 1, true);
 
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();
@@ -64,5 +64,5 @@ if (gliderElementSingle) {
 		});
 	}
 
-	module.exports = GliderSingle;
+	module.exports = GliderCourse;
 }

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var _gliderJs = require('glider-js');
+
+var _gliderJs2 = _interopRequireDefault(_gliderJs);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var gliderElementHero = document.querySelector('.js-glider-hero');
+
+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);
+	}
+
+	module.exports = GliderHero;
+}

package/dist/organisms/timeline/timeline.js

@@ -0,0 +1,155 @@
+'use strict';
+
+require('../../assets/js/parallax');
+
+var _require = require('../../assets/js/offset'),
+    offsetTop = _require.offsetTop,
+    offsetBottom = _require.offsetBottom,
+    offsetLeft = _require.offsetLeft;
+
+var progressBar = document.querySelector('.js-progress-bar');
+var decadeContainer = document.querySelector('.js-decade-container');
+var decadeSections = document.querySelectorAll('.js-timeline-decade');
+var firstDecade = document.querySelector('h2.godzilla');
+var decades = document.querySelectorAll('h2.godzilla');
+var triggerPoint = 0;
+
+// Create decade links in timeline
+function buildTimelineNavigation() {
+	[].forEach.call(decades, function (decade) {
+		var decadeLink = document.createElement('a');
+		var textContent = decade.textContent;
+
+		decadeLink.setAttribute('href', '#' + textContent);
+		decadeLink.innerText = textContent;
+		decadeContainer.appendChild(decadeLink);
+	});
+}
+
+/* Set trigger point (vertical position in viewport)
+for when a new decade should start being "active" */
+function setTriggerPoint() {
+	triggerPoint = window.innerHeight * 0.5;
+}
+
+// Animate progress bar when user is scolling within the timeline
+function animateProgressBar() {
+	var currentSection = 0;
+	var sectionIndex = 0;
+	var currentPosition = document.documentElement.scrollTop + triggerPoint;
+	var decadeLinks = document.querySelectorAll('.js-decade-container a');
+	var progressBarWidth = 0;
+
+	// Check if we are above the first section
+	if (currentPosition < offsetTop(firstDecade)) {
+		currentSection = 0;
+		progressBarWidth = 0;
+		progressBar.style.width = '0';
+
+		[].forEach.call(decadeLinks, function (decadeLink) {
+			decadeLink.classList.remove('is-reading');
+		});
+	} else {
+		// Otherwise add 1 to sectionIndex while scrolling;
+		[].forEach.call(decades, function (decade) {
+			var sectionTop = offsetTop(decade);
+
+			if (currentPosition >= sectionTop) {
+				currentSection = sectionIndex;
+
+				[].forEach.call(decadeLinks, function (decadeLink) {
+					decadeLink.classList.remove('is-reading');
+				});
+
+				decadeLinks[sectionIndex].classList.add('is-reading');
+			}
+
+			sectionIndex += 1;
+		});
+	}
+
+	// Calculate speed of the progressBar width while scrolling based on section height
+	var startPoint = decadeLinks[currentSection];
+	var startPointX = offsetLeft(startPoint);
+	var startPointWidth = startPoint.offsetWidth;
+	var startSection = decadeSections[currentSection];
+	var startSectionY = offsetTop(startSection);
+	var endSectionY = offsetBottom(startSection);
+	var sectionLength = endSectionY - startSectionY;
+	var scrollY = currentPosition - startSectionY;
+	var sectionProgress = scrollY / sectionLength;
+	progressBarWidth = startPointX + startPointWidth * sectionProgress;
+
+	// Use result to animate progressbar
+	progressBar.style.width = progressBarWidth + 'px';
+}
+
+// Run functions on page load
+if (progressBar) {
+	buildTimelineNavigation();
+	setTriggerPoint();
+	animateProgressBar();
+
+	// Re-run functions on window events
+	window.addEventListener('resize', function () {
+		setTriggerPoint();
+		animateProgressBar();
+	});
+	window.addEventListener('scroll', function () {
+		animateProgressBar();
+	});
+}
+
+// DUMMY TIMELINE ITEM OPEN/CLOSE
+/*
+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();
+	});
+});
+*/