@internetstiftelsen/styleguide 5.0.19 → 5.1.1

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

@@ -1,110 +1,76 @@
-'use strict';
-
+"use strict";
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
-
-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; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var VideoGuideTimeline = function () {
-	function VideoGuideTimeline(element, video) {
-		var _this = this;
-
-		_classCallCheck(this, VideoGuideTimeline);
-
-		this.togglePosts = function () {
-			_this.toggleBtn.classList.toggle('is-toggeled');
-			_this.container.classList.toggle('is-visible');
-		};
-
-		this.onCueChange = function () {
-			var activeCues = _this.meta.activeCues;
-
-
-			if (activeCues.length > 0) {
-				var activeCue = activeCues[0];
-				var activePost = _this.posts.find(function (post) {
-					return post.dataset.id === activeCue.text;
-				});
-
-				if (activePost) {
-					_this.posts.forEach(function (post) {
-						post.classList.remove('is-current');
-					});
-
-					activePost.classList.add('is-current');
-				}
-
-				_this.images.forEach(function (post) {
-					if (post.dataset.id === activeCue.text) {
-						post.classList.add('is-current');
-
-						_this.createImageHeadline(activeCue, post);
-					} else {
-						post.classList.remove('is-current');
-					}
-				});
-			}
-		};
-
-		this.element = element;
-		this.video = video;
-		this.container = element.querySelector('.js-timeline-posts');
-		this.posts = Array.from(element.querySelectorAll('.js-timeline-post:not(.js-timeline-image)'));
-		this.images = Array.from(element.querySelectorAll('.js-timeline-image'));
-		this.toggleBtn = element.querySelector('.js-show-timelineposts');
-		this.headlineTpl = element.querySelector('[data-video-headline-tpl]');
-		this.headlineCache = {};
-
-		this.init();
-		this.attach();
-	}
-
-	_createClass(VideoGuideTimeline, [{
-		key: 'init',
-		value: function init() {
-			this.meta = this.video.textTracks.getTrackById('video-metadata');
-		}
-	}, {
-		key: 'attach',
-		value: function attach() {
-			this.meta.addEventListener('cuechange', this.onCueChange);
-
-			if (this.toggleBtn) {
-				this.toggleBtn.addEventListener('click', this.togglePosts);
-			}
-		}
-	}, {
-		key: 'createImageHeadline',
-		value: function createImageHeadline(activeCue, post) {
-			if (activeCue.text in this.headlineCache) {
-				return;
-			}
-
-			var element = post.querySelector('[data-video-headline-tpl]');
-
-			if (post.querySelector('[data-video-headline-tpl]')) {
-				this.headlineCache[activeCue.text] = element;
-				return;
-			}
-
-			element = this.headlineTpl.cloneNode(true);
-			var prevHeadline = element.querySelector('h1');
-			var headline = document.createElement('h2');
-
-			headline.className = prevHeadline.className;
-			headline.innerHTML = activeCue.id;
-
-			prevHeadline.parentNode.replaceChild(headline, prevHeadline);
-			post.appendChild(element);
-
-			this.headlineCache[activeCue.text] = element;
-		}
-	}]);
-
-	return VideoGuideTimeline;
-}();
-
-exports.default = VideoGuideTimeline;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return VideoGuideTimeline;
+    }
+});
+class VideoGuideTimeline {
+    init() {
+        this.meta = this.video.textTracks.getTrackById('video-metadata');
+    }
+    attach() {
+        this.meta.addEventListener('cuechange', this.onCueChange);
+        if (this.toggleBtn) {
+            this.toggleBtn.addEventListener('click', this.togglePosts);
+        }
+    }
+    createImageHeadline(activeCue, post) {
+        if (activeCue.text in this.headlineCache) {
+            return;
+        }
+        let element = post.querySelector('[data-video-headline-tpl]');
+        if (post.querySelector('[data-video-headline-tpl]')) {
+            this.headlineCache[activeCue.text] = element;
+            return;
+        }
+        element = this.headlineTpl.cloneNode(true);
+        const prevHeadline = element.querySelector('h1');
+        const headline = document.createElement('h2');
+        headline.className = prevHeadline.className;
+        headline.innerHTML = activeCue.id;
+        prevHeadline.parentNode.replaceChild(headline, prevHeadline);
+        post.appendChild(element);
+        this.headlineCache[activeCue.text] = element;
+    }
+    constructor(element, video){
+        this.togglePosts = ()=>{
+            this.toggleBtn.classList.toggle('is-toggeled');
+            this.container.classList.toggle('is-visible');
+        };
+        this.onCueChange = ()=>{
+            const { activeCues } = this.meta;
+            if (activeCues.length > 0) {
+                const activeCue = activeCues[0];
+                const activePost = this.posts.find((post)=>post.dataset.id === activeCue.text);
+                if (activePost) {
+                    this.posts.forEach((post)=>{
+                        post.classList.remove('is-current');
+                    });
+                    activePost.classList.add('is-current');
+                }
+                this.images.forEach((post)=>{
+                    if (post.dataset.id === activeCue.text) {
+                        post.classList.add('is-current');
+                        this.createImageHeadline(activeCue, post);
+                    } else {
+                        post.classList.remove('is-current');
+                    }
+                });
+            }
+        };
+        this.element = element;
+        this.video = video;
+        this.container = element.querySelector('.js-timeline-posts');
+        this.posts = Array.from(element.querySelectorAll('.js-timeline-post:not(.js-timeline-image)'));
+        this.images = Array.from(element.querySelectorAll('.js-timeline-image'));
+        this.toggleBtn = element.querySelector('.js-show-timelineposts');
+        this.headlineTpl = element.querySelector('[data-video-headline-tpl]');
+        this.headlineCache = {};
+        this.init();
+        this.attach();
+    }
+}

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

@@ -1,13 +1,15 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return getCurrentCueIndex;
+    }
 });
-exports.default = getCurrentCueIndex;
 function getCurrentCueIndex(target) {
-	var activeCue = target.activeCues[0];
-	var cues = target.cues;
-
-
-	return Math.max(Array.prototype.indexOf.call(cues, activeCue), 0);
-}
+    const activeCue = target.activeCues[0];
+    const { cues } = target;
+    return Math.max(Array.prototype.indexOf.call(cues, activeCue), 0);
+}

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

@@ -1,103 +1,66 @@
-'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 _VideoGuideSubtitles = require('./VideoGuideSubtitles');
-
-var _VideoGuideSubtitles2 = _interopRequireDefault(_VideoGuideSubtitles);
-
-var _VideoGuideTimeline = require('./VideoGuideTimeline');
-
-var _VideoGuideTimeline2 = _interopRequireDefault(_VideoGuideTimeline);
-
-var _VideoGuidePlayback = require('./VideoGuidePlayback');
-
-var _VideoGuidePlayback2 = _interopRequireDefault(_VideoGuidePlayback);
-
-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"); } }
-
-var VideoGuide = function () {
-	function VideoGuide(element) {
-		var _this = this;
-
-		_classCallCheck(this, VideoGuide);
-
-		this.onLoadedMetadata = function () {
-			_this.playback = new _VideoGuidePlayback2.default(_this.element, _this.video);
-			_this.subtitles = new _VideoGuideSubtitles2.default(_this.element, _this.video);
-			_this.timeline = new _VideoGuideTimeline2.default(_this.element, _this.video);
-
-			_this.video.classList.remove('is-loading');
-		};
-
-		this.dispatchEvent = function (eventName) {
-			[_this.playback, _this.subtitles, _this.timeline].forEach(function (instance) {
-				if (instance && eventName in instance) {
-					instance[eventName]();
-				}
-			});
-		};
-
-		this.onPlay = function () {
-			return _this.dispatchEvent('onPlay');
-		};
-
-		this.onPause = function () {
-			return _this.dispatchEvent('onPause');
-		};
-
-		this.onEnded = function () {
-			return _this.dispatchEvent('onEnded');
-		};
-
-		this.onTimeUpdate = function () {
-			return _this.dispatchEvent('onTimeUpdate');
-		};
-
-		this.onAbort = function () {
-			_this.dispatchEvent('onAbort');
-			window.location.href = _this.abortBtn.href;
-		};
-
-		this.element = element;
-		this.video = element.querySelector('.js-video-guide');
-		this.abortBtn = element.querySelector('.js-abort-guide');
-		this.playback = null;
-		this.subtitles = null;
-		this.timeline = null;
-
-		// Set all track elements to hidden mode to allow scripting
-		[].forEach.call(this.video.textTracks, function (txtTrack) {
-			txtTrack.mode = 'hidden';
-		});
-
-		this.attach();
-
-		// loadedmetadata might not be fired if the video is already loaded
-		if (this.video.readyState >= 1) {
-			this.onLoadedMetadata();
-		}
-	}
-
-	_createClass(VideoGuide, [{
-		key: 'attach',
-		value: function attach() {
-			this.video.addEventListener('loadedmetadata', this.onLoadedMetadata);
-			this.video.addEventListener('play', this.onPlay);
-			this.video.addEventListener('pause', this.onPause);
-			this.video.addEventListener('ended', this.onEnded);
-			this.video.addEventListener('timeupdate', this.onTimeUpdate);
-			this.abortBtn.addEventListener('click', this.onAbort);
-		}
-	}]);
-
-	return VideoGuide;
-}();
-
-var elements = document.querySelectorAll('[data-video-guide]');
-
-elements.forEach(function (element) {
-	return new VideoGuide(element);
-});
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _VideoGuideSubtitles = /*#__PURE__*/ _interop_require_default(require("./VideoGuideSubtitles"));
+const _VideoGuideTimeline = /*#__PURE__*/ _interop_require_default(require("./VideoGuideTimeline"));
+const _VideoGuidePlayback = /*#__PURE__*/ _interop_require_default(require("./VideoGuidePlayback"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+class VideoGuide {
+    attach() {
+        this.video.addEventListener('loadedmetadata', this.onLoadedMetadata);
+        this.video.addEventListener('play', this.onPlay);
+        this.video.addEventListener('pause', this.onPause);
+        this.video.addEventListener('ended', this.onEnded);
+        this.video.addEventListener('timeupdate', this.onTimeUpdate);
+        this.abortBtn.addEventListener('click', this.onAbort);
+    }
+    constructor(element){
+        this.onLoadedMetadata = ()=>{
+            this.playback = new _VideoGuidePlayback.default(this.element, this.video);
+            this.subtitles = new _VideoGuideSubtitles.default(this.element, this.video);
+            this.timeline = new _VideoGuideTimeline.default(this.element, this.video);
+            this.video.classList.remove('is-loading');
+        };
+        this.dispatchEvent = (eventName)=>{
+            [
+                this.playback,
+                this.subtitles,
+                this.timeline
+            ].forEach((instance)=>{
+                if (instance && eventName in instance) {
+                    instance[eventName]();
+                }
+            });
+        };
+        this.onPlay = ()=>this.dispatchEvent('onPlay');
+        this.onPause = ()=>this.dispatchEvent('onPause');
+        this.onEnded = ()=>this.dispatchEvent('onEnded');
+        this.onTimeUpdate = ()=>this.dispatchEvent('onTimeUpdate');
+        this.onAbort = ()=>{
+            this.dispatchEvent('onAbort');
+            window.location.href = this.abortBtn.href;
+        };
+        this.element = element;
+        this.video = element.querySelector('.js-video-guide');
+        this.abortBtn = element.querySelector('.js-abort-guide');
+        this.playback = null;
+        this.subtitles = null;
+        this.timeline = null;
+        // Set all track elements to hidden mode to allow scripting
+        [].forEach.call(this.video.textTracks, (txtTrack)=>{
+            txtTrack.mode = 'hidden';
+        });
+        this.attach();
+        // loadedmetadata might not be fired if the video is already loaded
+        if (this.video.readyState >= 1) {
+            this.onLoadedMetadata();
+        }
+    }
+}
+const elements = document.querySelectorAll('[data-video-guide]');
+elements.forEach((element)=>new VideoGuide(element));

package/dist/utilities/tab-highlighting/tab-highlighting.js

@@ -1,30 +1,22 @@
-'use strict';
-
 // Add class to html-element on tab click
-
-var element = document.getElementsByTagName('html')[0];
-var highLightClass = 'tab-highlight';
-
+"use strict";
+const element = document.getElementsByTagName('html')[0];
+const highLightClass = 'tab-highlight';
 function onKeyDown(e) {
-	var event = e;
-	if (!event) {
-		window.event = event;
-	}
-
-	var keyCode = event.keyCode || event.which;
-	var tabKey = 9;
-
-	if (keyCode === tabKey) {
-		this.classList.add(highLightClass);
-	}
+    const event = e;
+    if (!event) {
+        window.event = event;
+    }
+    const keyCode = event.keyCode || event.which;
+    const tabKey = 9;
+    if (keyCode === tabKey) {
+        this.classList.add(highLightClass);
+    }
 }
-
 // Remove class on mouse click
 function onMouseDown() {
-	this.classList.remove(highLightClass);
+    this.classList.remove(highLightClass);
 }
-
 // Run on events
-
 element.addEventListener('keydown', onKeyDown);
-element.addEventListener('mousedown', onMouseDown);
+element.addEventListener('mousedown', onMouseDown);

package/dist/vendor/toggle/a11y.toggle-switcher.js

@@ -1,21 +1,15 @@
-'use strict';
-
 // Only allow one panel to be opened at a time.
+"use strict";
 function collapse(toggle) {
-	var id = toggle.getAttribute('data-a11y-toggle');
-	var collapsibleBox = document.getElementById(id);
-	collapsibleBox.setAttribute('aria-hidden', true);
-	toggle.setAttribute('aria-expanded', false);
+    const id = toggle.getAttribute('data-a11y-toggle');
+    const collapsibleBox = document.getElementById(id);
+    collapsibleBox.setAttribute('aria-hidden', true);
+    toggle.setAttribute('aria-expanded', false);
 }
-
-var toggles = Array.prototype.slice.call(document.querySelectorAll('[data-a11y-toggle]'));
-
+const toggles = Array.prototype.slice.call(document.querySelectorAll('[data-a11y-toggle]'));
 function collapseAll(event) {
-	toggles.filter(function (toggle) {
-		return toggle !== event.target;
-	}).forEach(collapse);
+    toggles.filter((toggle)=>toggle !== event.target).forEach(collapse);
 }
-
-toggles.forEach(function (toggle) {
-	toggle.addEventListener('click', collapseAll);
-});
+toggles.forEach((toggle)=>{
+    toggle.addEventListener('click', collapseAll);
+});