@internetstiftelsen/styleguide 2.24.0-beta.0.2 → 2.24.0

package/src/organisms/timeline/_timeline.scss

@@ -0,0 +1,328 @@
+@charset "UTF-8";
+
+html {
+	scroll-behavior: smooth;
+}
+
+@include organism(timeline) {
+	position: sticky;
+	top: -1px;
+	left: 0;
+	right: 0;
+	z-index: z_index(middlegroundImportant);
+	background: $color-ash;
+
+	@include card-shadow($color-cyberspace, 0.2);
+
+	&::after {
+		background-color: $color-concrete;
+		content: '';
+		display: block;
+		height: rhythm(1);
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: -1;
+	}
+
+
+	@include e(progress-bar) {
+		display:flex;
+		height: rhythm(1);
+		background-image: linear-gradient(90deg, #55c7b4 0vw, #55c7b4 14.285vw, #c27fec 14.285vw, #c27fec 28.57vw, #ffa94d 28.57vw, #ffa94d 42.855vw, #ffce2e 42.855vw, #ffce2e 57.14vw, #50b2fc 57.14vw, #50b2fc 71.425vw, #ff4069 71.425vw, #ff4069 85.71vw, #8E9297 85.71vw, #8E9297 100%);
+		width: 0;
+	}
+
+	@include e(decades-container) {
+		display: flex;
+		justify-content: space-around;
+		align-items: stretch;
+
+		> a {
+			display: block;
+			flex: 1;
+			text-decoration: none;
+			color: $color-cyberspace;
+			text-align: center;
+			padding-top: rhythm(1);
+			padding-bottom: rhythm(1);
+			font-family: $font-family-headings;
+			font-size: $size-medium;
+
+			&.is-reading {
+				&:nth-child(1) {
+					color: $color-jade;
+				}
+
+				&:nth-child(2) {
+					color: $color-peacock;
+				}
+
+				&:nth-child(3) {
+					color: $color-sandstone;
+				}
+
+				&:nth-child(4) {
+					color: $color-lemon;
+				}
+
+				&:nth-child(5) {
+					color: $color-ocean;
+				}
+
+				&:nth-child(6) {
+					color: $color-ruby;
+				}
+
+				&:nth-child(7) {
+					color: $color-granit;
+				}
+			}
+
+			@include bp-up(lg) {
+				font-size: $size-base;
+				padding-top: rhythm(2);
+				padding-bottom: rhythm(2);
+			}
+		}
+	}
+
+	@include e(decade) {
+		@include e(intro) {
+			padding-top: rhythm(4);
+			margin-bottom: rhythm(8);
+
+			@include bp-up(sm) {
+				margin-bottom: rhythm(10);
+			}
+
+			@include bp-up(md) {
+				margin-bottom: rhythm(12);
+			}
+
+			@include bp-up(lg) {
+				margin-bottom: rhythm(14);
+			}
+
+			@include bp-up(xl) {
+				margin-bottom: rhythm(18);
+			}
+		}
+	}
+
+
+	// "Parallax" scroll items
+	@include e(parallax) {
+		opacity: 0;
+		transition: opacity 1s ease-out, transform 5s cubic-bezier(0, 1, 0, 1);
+		transform: translateY(200px);
+		will-change: opacity, transform;
+		transition-delay: 0.5s;
+		flex: 100%;
+
+		&.animate {
+			transform: translateY(0);
+			opacity: 1;
+			z-index: z_index(middleGround);
+
+
+		}
+	}
+
+	@include e(item) {
+		@include e(content) {
+			display: none;
+			padding-bottom: 0;
+			margin-top: 0;
+			min-height: 45px;
+			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: 45px 45px;
+
+			@include bp-up(lg) {
+				min-height: 100px;
+				background-size: 100px 100px;
+			}
+
+			&[data-timeline-post-expanded-content="true"] {
+				background-image: none;
+			}
+
+			@include e(meta) {
+				@include e(related) {
+					margin-top: rhythm(4);
+					border-top: 1px solid $color-granit;
+					padding-top: rhythm(4);
+
+					img {
+						max-height: 100px;
+						width: 100%;
+						object-fit: cover;
+						object-position: 50% 25%;
+						border-radius: $border-radius;
+					}
+				}
+			}
+		}
+
+		[data-youtube],
+		[data-youtube] * {
+			pointer-events: none;
+		}
+
+		&.is-open {
+			flex: 0 0 100%;
+			background-color: $color-cyberspace;
+			width: 100vw;
+			max-width: 100vw;
+			min-width: 100vw;
+			margin-left: calc(50% - 50vw);
+			margin-right: calc(50% - 50vw);
+			transform: translateY(0) !important;
+			z-index: z_index(middlegroundImportant);
+			padding-top: rhythm(6);
+			padding-bottom: rhythm(4);
+
+			@include bp-up(md) {
+				padding-top: rhythm(8);
+				padding-bottom: rhythm(8);
+			}
+
+			h1,
+			h2,
+			h3,
+			h4,
+			p,
+			a,
+			li {
+				color: $color-snow;
+			}
+
+			p a,
+			li a,
+			h1 a,
+			h2 a,
+			h3 a,
+			h4 a {
+				&:hover,
+				&:focus {
+					color: $color-cyberspace;
+				}
+			}
+
+			a[data-scroll-ignore] {
+				pointer-events: none;
+
+				&:hover,
+				&:focus {
+					text-decoration: none;
+					cursor: default;
+				}
+
+				&::after {
+					display: none;
+				}
+
+				h1 {
+					@extend %alpha;
+				}
+			}
+
+			p[class*='card__text'] {
+				@extend %preamble;
+			}
+
+			.wp-block-iis-timeline-post {
+				margin-left: auto;
+				margin-right: auto;
+
+				@include bp-up(sm) {
+					width: make_col(16);
+				}
+
+				@include bp-up(md) {
+					width: make_col(12);
+				}
+
+				@include bp-up(lg) {
+					width: make_col(12);
+				}
+
+				@include bp-up(xl) {
+					width: make_col(9);
+				}
+			}
+
+			& + .grid-18 {
+				transform: translateY(0) !important;
+			}
+
+			[data-youtube],
+			[data-youtube] * {
+				pointer-events: initial;
+			}
+
+			button[class*="close"] {
+				display: inline-block;
+				position: absolute;
+				right: rhythm(1);
+				transform: translateY(-#{rhythm(1)});
+
+				&:first-child {
+					top: rhythm(1);
+					transform: none;
+				}
+
+				@include bp-up(md) {
+					right: rhythm(2);
+					transform: translateY(rhythm(2));
+
+					&:first-child {
+						top: rhythm(2);
+					}
+				}
+			}
+
+			[class*='content'] {
+				display: block;
+			}
+		}
+	}
+
+	@include e(item-close) {
+		display: none;
+	}
+
+	@include e(heading) {
+		@include plumber(
+			$font-size: 2,
+			$line-height: 3,
+			$leading-top: 0,
+			$leading-bottom: 0,
+			$baseline: $body-baseline
+		);
+
+		@include bp-up(sm) {
+			@include plumber(
+				$font-size: 2.2,
+				$line-height: 3,
+				$leading-top: 0,
+				$leading-bottom: 0,
+			);
+		}
+	}
+
+	@include e(card-text) {
+		display: none;
+
+		@include bp-up(lg) {
+			display: block;
+		}
+	}
+}
+
+.row-has-open-child {
+	margin-bottom: 0 !important;
+}

package/src/organisms/timeline/timeline.config.js

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

package/src/organisms/timeline/timeline.js

@@ -0,0 +1,185 @@
+import '../../assets/js/parallax';
+
+const { offsetTop, offsetBottom, offsetLeft } = require('../../assets/js/offset');
+
+const dataLayer = window.dataLayer || [];
+const progressBar = document.querySelector('.js-progress-bar');
+const decadeContainer = document.querySelector('.js-decade-container');
+const decadeSections = document.querySelectorAll('.js-timeline-decade');
+const firstDecade = document.querySelector('h2.godzilla');
+const decades = document.querySelectorAll('h2.godzilla');
+let triggerPoint = 0;
+
+// Create decade links in timeline
+function buildTimelineNavigation() {
+	[].forEach.call(decades, (decade) => {
+		const decadeLink = document.createElement('a');
+		const { textContent } = decade;
+		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() {
+	let currentSection = 0;
+	let sectionIndex = 0;
+	const currentPosition = document.documentElement.scrollTop + triggerPoint;
+	const decadeLinks = document.querySelectorAll('.js-decade-container a');
+	let 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, (decadeLink) => {
+			decadeLink.classList.remove('is-reading');
+		});
+	} else {
+		// Otherwise add 1 to sectionIndex while scrolling;
+		[].forEach.call(decades, (decade) => {
+			const sectionTop = offsetTop(decade);
+
+			if (currentPosition >= sectionTop) {
+				currentSection = sectionIndex;
+
+				[].forEach.call(decadeLinks, (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
+	const startPoint = decadeLinks[currentSection];
+	const startPointX = offsetLeft(startPoint);
+	const startPointWidth = startPoint.offsetWidth;
+	const startSection = decadeSections[currentSection];
+	const startSectionY = offsetTop(startSection);
+	const endSectionY = offsetBottom(startSection);
+	const sectionLength = endSectionY - startSectionY;
+	const scrollY = currentPosition - startSectionY;
+	const sectionProgress = scrollY / sectionLength;
+	progressBarWidth = startPointX + (startPointWidth * sectionProgress);
+
+	// Use result to animate progressbar
+	progressBar.style.width = `${progressBarWidth}px`;
+}
+
+function isInViewport(element) {
+	let top = element.offsetTop;
+	const 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, (decadeSection) => {
+		if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
+			decadeSection.classList.add('is-in-view');
+
+			const 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();
+	setTriggerPoint();
+	animateProgressBar();
+
+	// Re-run functions on window events
+	window.addEventListener('resize', () => {
+		setTriggerPoint();
+		animateProgressBar();
+	});
+	window.addEventListener('scroll', () => {
+		animateProgressBar();
+		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();
+// 	});
+// });