@internetstiftelsen/styleguide 2.24.0-beta.0.1 → 2.24.0

package/dist/assets/js/youtube.js

@@ -21,6 +21,9 @@ 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;
 	}
 }
 
@@ -44,6 +47,11 @@ function setupYoutubePlayer(el) {
 		el.youtube.destroy();
 		el.youtube = null;
 		el.removeAttribute('data-youtube-ready');
+<<<<<<< HEAD
+=======
+		el.getElementsByTagName('img')[0].style.zIndex = null;
+		el.getElementsByTagName('button')[0].style.display = null;
+>>>>>>> feature/open-timelineitem
 	}
 
 	playerEl = document.createElement('div');

package/dist/molecules/form/Form.js

@@ -338,7 +338,7 @@ var Form = function () {
 					help.innerHTML = '';
 				}
 
-				var fieldGroup = input.closest('.field-group');
+				var fieldGroup = input.closest('[class*="field-group"]');
 
 				if (fieldGroup) {
 					fieldGroup.classList.remove('is-invalid');

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

@@ -7,6 +7,8 @@ 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, {
@@ -41,6 +43,43 @@ if (gliderElementHero) {
 				}, 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

@@ -7,6 +7,7 @@ var _require = require('../../assets/js/offset'),
     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');
@@ -84,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();
@@ -97,10 +131,12 @@ if (progressBar) {
 	});
 	window.addEventListener('scroll', function () {
 		animateProgressBar();
+		decadeIsVisible();
 	});
 }
 
 // DUMMY TIMELINE ITEM OPEN/CLOSE
+<<<<<<< HEAD
 /*
 function wrap(el, wrapper) {
 	el.parentNode.insertBefore(wrapper, el);
@@ -152,4 +188,56 @@ let timeLineItemScrollPosition = 0;
 		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();
+// 	});
+// });
+>>>>>>> feature/open-timelineitem

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

@@ -8,7 +8,6 @@ var subtitlesBtn = document.querySelector('.js-subtitles-btn');
 var abortButton = document.querySelector('.js-abort-guide');
 var subtitlesElement = document.getElementById('video-subtitles');
 var subtitlesContainer = document.querySelector('.js-subtitles-container');
-var locationList = document.querySelector('.js-chapters');
 var chapterTrackElement = document.getElementById('video-chapters');
 var trackMetadataElement = document.getElementById('video-metadata');
 var subtitlesTrack = subtitlesElement === null ? '' : subtitlesElement.track;
@@ -19,28 +18,17 @@ 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 currentChapter = 0;
 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 localStorage if video has started playing
 		if (video.currentTime > 0) {
 			var currentGuideURL = window.location.href;
-			var currentGuideImage = document.querySelector('.js-guide-continue-image').src;
+			var currentGuideImage = video.dataset.featuredImage;
 			localStorage.setItem('InmsCurrentTime', video.currentTime);
 			localStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
 			localStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
@@ -140,26 +128,6 @@ function displayChapters() {
 				// 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')) {
@@ -224,23 +192,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');
@@ -266,7 +221,6 @@ function displayChapters() {
 
 					[].forEach.call(idSelectors, function (idSelector) {
 						idSelector.classList.add('is-current');
-						idSelector.focus();
 					});
 
 					if (chapterCues) {

package/package.json

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

package/src/app.js

@@ -2,7 +2,7 @@ import './molecules/form';
 import './atoms/textarea/rich-text';
 
 require('./atoms/grid-toggle/grid-toggle');
-// require('./components');
+require('./components');
 
 const Button = require('./atoms/button/Button');
 const { open, onClose, onOpen } = require('./molecules/modal/modal');

package/src/app.scss

@@ -66,6 +66,7 @@ $namespace: '';
 @import 'molecules/glider/glider';
 @import 'molecules/glider/glider-course';
 @import 'molecules/glider/glider-hero';
+@import 'molecules/continue-video-guide/continue-video-guide';
 
 // Organisms
 @import 'organisms/header/header';
@@ -85,6 +86,8 @@ $namespace: '';
 @import 'organisms/event-listing-item/event-listing-item';
 @import 'organisms/podcast/podcast-episodes';
 @import 'organisms/podcast/podcast-player';
+@import 'organisms/video-guide/video-guide';
+@import 'organisms/timeline/timeline';
 
 // Structures
 @import 'structures/manifest';

package/src/assets/js/youtube.js

@@ -15,6 +15,9 @@ 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;
 	}
 }
 
@@ -38,6 +41,8 @@ function setupYoutubePlayer(el) {
 		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');

package/src/assets/video/metadata.vtt

@@ -1,28 +1,28 @@
 WEBVTT
 
 00:00:00.000 --> 00:00:25.000
-6513
+89108
 
 00:00:25.000 --> 00:00:39.000
-5555
+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.scss

@@ -25,6 +25,7 @@
 
 	@include e(text) {
 		color: $color-cyberspace;
+		letter-spacing: 0.025rem;
 	}
 
 	@include m(light) {

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

@@ -69,6 +69,16 @@ module.exports = {
 				hover_color: 'dark',
 				color: 'jade'
 			}
+		},
+		{
+			name: 'Border variation',
+			context: {
+				text: 'border',
+				href: '#',
+				is_light: false,
+				border: true,
+				background_color: false
+			}
 		}
 	]
 }

package/src/components.js

@@ -1,9 +1,7 @@
-import 'a11y-toggle';
-import './focusTrap';
-import './assets/js/conditional';
 import './atoms/password-toggle/password-toggle';
 import './utilities/tab-highlighting/tab-highlighting';
 import './molecules/system-error/system-error';
+import 'a11y-toggle';
 import './molecules/cookie-disclaimer/cookie-disclaimer';
 import './organisms/accordion/accordion';
 import './organisms/tabs/tabs';
@@ -13,7 +11,9 @@ import './molecules/share/share';
 import './molecules/natural-language-form/natural-language-form';
 import './atoms/tooltip/tooltip';
 import './atoms/toggle-high-contrast/toggle-high-contrast';
+import './focusTrap';
 import './atoms/height-limiter/height-limiter';
+import './assets/js/conditional';
 import './atoms/file/file';
 import './atoms/file/filePreview';
 import './organisms/podcast/podcast';
@@ -24,3 +24,6 @@ import './molecules/glider/glider-course';
 import './molecules/glider/glider-hero';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';
+import './molecules/continue-video-guide/continue-video-guide';
+import './organisms/video-guide/video-guide';
+import './organisms/timeline/timeline';

package/src/configurations/forms/_fields.scss

@@ -25,6 +25,14 @@
 
 		@include b(input-help) {
 			background-color: $color-ruby-light;
+
+			&::selection {
+				background-color: $color-ruby;
+			}
+	
+			&::-moz-selection {
+				background-color: $color-ruby;
+			}
 		}
 	}
 }

package/src/globals.scss

@@ -25,30 +25,4 @@
 @import 'base/fonts/fonts';
 
 // Utilities
-@import 'utilities/margin';
-@import 'utilities/padding';
-@import 'utilities/hide';
-@import 'utilities/show';
-@import 'utilities/lists';
-@import 'utilities/position';
-@import 'utilities/fonts';
-@import 'utilities/tab-highlighting/tab-highlighting';
-@import 'utilities/border';
-@import 'utilities/align';
-@import 'utilities/vertical-align';
-@import 'utilities/icons';
-@import 'utilities/wrap';
-@import 'utilities/accessibility-helpers';
-@import 'utilities/links';
-@import 'utilities/z-index';
-@import 'utilities/box-shadow';
-@import 'utilities/flex';
-@import 'utilities/display';
-@import 'utilities/misc';
-@import 'utilities/gutter';
-@import 'utilities/text';
-@import 'utilities/pointer-events';
-@import 'utilities/clear';
-@import 'utilities/fill';
-@import 'utilities/indent';
-@import 'utilities/font-size';
+@import 'utilities/manifest';

package/src/molecules/continue-video-guide/continue-video-guide.config.js

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

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

@@ -0,0 +1,84 @@
+import className from '../../assets/js/className';
+
+class ProgressRing extends HTMLElement {
+	constructor() {
+		super();
+		const stroke = this.getAttribute('stroke');
+		const radius = this.getAttribute('radius');
+		const normalizedRadius = radius - stroke * 2;
+		this.circumference = normalizedRadius * 2 * Math.PI;
+
+		this.root = this.attachShadow({ mode: 'open' });
+		this.root.innerHTML = `
+		<svg
+		height="${radius * 2}"
+		width="${radius * 2}"
+		>
+		<circle
+		stroke="white"
+		stroke-dasharray="${this.circumference} ${this.circumference}"
+		style="stroke-dashoffset:${this.circumference}"
+		stroke-width="${stroke}"
+		fill="transparent"
+		r="${normalizedRadius}"
+		cx="${radius}"
+		cy="${radius}"
+		/>
+		</svg>
+
+		<style>
+		circle {
+			transition: stroke-dashoffset 0.35s;
+			transform: rotate(-90deg);
+			transform-origin: 50% 50%;
+		}
+		</style>
+		`;
+	}
+
+	setProgress(percent) {
+		const offset = this.circumference - ((percent / 100) * this.circumference);
+		const circle = this.root.querySelector('circle');
+		circle.style.strokeDashoffset = offset;
+	}
+
+	static get observedAttributes() {
+		return ['progress'];
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (name === 'progress') {
+			this.setProgress(newValue);
+		}
+	}
+}
+
+window.customElements.define('progress-ring', ProgressRing);
+
+// Get value from localStorage if present
+if (localStorage.getItem('InmsCurrentTime')) {
+	const videoCurrentTime = localStorage.getItem('InmsCurrentTime');
+	const videoDuration = localStorage.getItem('InmsDuration');
+	const continueElement = document.querySelector('.js-guide-continue');
+	const progressRing = document.querySelector('progress-ring');
+	const continueLink = document.querySelector('.js-guide-continue-link');
+	const guideURL = localStorage.getItem('InmsCurrentGuideURL');
+	const guideImage = localStorage.getItem('InmsCurrentGuideImage');
+
+	if ((videoCurrentTime > 0)
+		&& progressRing
+		&& continueElement
+		&& guideImage
+		&& continueLink) {
+		const alternativeText = continueLink.dataset.altText;
+		const currentProgress = videoCurrentTime / videoDuration;
+		const currentGuideImage = document.querySelector('.js-guide-continue-image');
+
+		continueElement.classList.add(className('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));
+	}
+}