@internetstiftelsen/styleguide 3.0.6 → 3.0.8

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

@@ -19,6 +19,7 @@ if (gliderElementCourse) {
 	var prevBtns = document.querySelectorAll('.js-glider-prev');
 	var siteMain = document.querySelector('#siteMain');
 	var zoomImages = document.querySelectorAll('.js-zoom.zoom');
+	var youtubeVideos = document.querySelectorAll('[data-youtube]');
 	var slideIndex = GliderCourse.getCurrentSlide();
 	var bounding = 0;
 
@@ -31,6 +32,10 @@ if (gliderElementCourse) {
 			nextBtn.addEventListener('click', function () {
 				GliderCourse.scrollItem(slideIndex += 1, true);
 
+				[].forEach.call(youtubeVideos, function (el) {
+					return el.youtube && el.youtube.pauseVideo();
+				});
+
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();
 					if (bounding.top < 0) {
@@ -45,6 +50,9 @@ if (gliderElementCourse) {
 		[].forEach.call(prevBtns, function (prevBtn) {
 			prevBtn.addEventListener('click', function () {
 				GliderCourse.scrollItem(slideIndex -= 1, true);
+				[].forEach.call(youtubeVideos, function (el) {
+					return el.youtube && el.youtube.pauseVideo();
+				});
 
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "3.0.6",
+	"version": "3.0.8",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -42,7 +42,7 @@
 	},
 	"devDependencies": {
 		"@frctl/fractal": "^1.5.14",
-		"@frctl/mandelbrot": "^1.10.2",
+		"@frctl/mandelbrot": "^1.10.3",
 		"@internetstiftelsen/eslint-config": "^0.0.5",
 		"@internetstiftelsen/stylelint-config": "^1.0.0",
 		"babel-cli": "^6.26.0",

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

@@ -13,6 +13,7 @@ if (gliderElementCourse) {
 	const prevBtns = document.querySelectorAll('.js-glider-prev');
 	const siteMain = document.querySelector('#siteMain');
 	const zoomImages = document.querySelectorAll('.js-zoom.zoom');
+	const youtubeVideos = document.querySelectorAll('[data-youtube]');
 	let slideIndex = GliderCourse.getCurrentSlide();
 	let bounding = 0;
 
@@ -25,6 +26,8 @@ if (gliderElementCourse) {
 			nextBtn.addEventListener('click', () => {
 				GliderCourse.scrollItem(slideIndex += 1, true);
 
+				[].forEach.call(youtubeVideos, (el) => el.youtube && el.youtube.pauseVideo());
+
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();
 					if (bounding.top < 0) {
@@ -39,6 +42,7 @@ if (gliderElementCourse) {
 		[].forEach.call(prevBtns, (prevBtn) => {
 			prevBtn.addEventListener('click', () => {
 				GliderCourse.scrollItem(slideIndex -= 1, true);
+				[].forEach.call(youtubeVideos, (el) => el.youtube && el.youtube.pauseVideo());
 
 				if (siteMain) {
 					bounding = siteMain.getBoundingClientRect();

package/src/organisms/timeline/openTimelineItem.js

@@ -0,0 +1,55 @@
+// 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();
+	});
+});

package/src/organisms/timeline/timeline.js

@@ -137,55 +137,3 @@ if (progressBar) {
 		decadeIsVisible();
 	});
 }
-
-// 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();
-// 	});
-// });