@internetstiftelsen/styleguide 5.0.19 → 5.1.1

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

@@ -1,288 +1,212 @@
-'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; }; }();
-
-var _getCurrentCueIndex = require('./getCurrentCueIndex');
-
-var _getCurrentCueIndex2 = _interopRequireDefault(_getCurrentCueIndex);
-
-var _track = require('../../assets/js/track');
-
-var _track2 = _interopRequireDefault(_track);
-
-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 VideoGuidePlayback = function () {
-	function VideoGuidePlayback(element, video) {
-		var _this = this;
-
-		_classCallCheck(this, VideoGuidePlayback);
-
-		this.saveState = function () {
-			if (_this.video.currentTime > 0) {
-				var _sessionKeys = _this.sessionKeys,
-				    currentTime = _sessionKeys.currentTime,
-				    duration = _sessionKeys.duration,
-				    currentGuideURL = _sessionKeys.currentGuideURL,
-				    currentGuideImage = _sessionKeys.currentGuideImage;
-
-				var guideURL = window.location.href;
-				var guideImage = _this.video.dataset.featuredImage;
-
-				sessionStorage.setItem(currentTime, _this.video.currentTime);
-				sessionStorage.setItem(duration, _this.video.duration);
-				sessionStorage.setItem(currentGuideURL, guideURL);
-				sessionStorage.setItem(currentGuideImage, guideImage);
-			}
-		};
-
-		this.clearState = function () {
-			Object.values(_this.sessionKeys).forEach(function (key) {
-				sessionStorage.removeItem(key);
-			});
-		};
-
-		this.onPlay = function () {
-			_this.setPlayActive();
-		};
-
-		this.onPause = function () {
-			_this.setPauseActive();
-		};
-
-		this.resetState = function () {
-			_this.setPauseActive();
-			_this.clearState();
-			_this.setBackwardState(false);
-			_this.setForwardState(false);
-
-			_this.video.currentTime = 0;
-		};
-
-		this.onEnded = function () {
-			_this.resetState();
-
-			(0, _track2.default)({
-				event: 'guided_tour',
-				eventInfo: {
-					category: 'guided_tour',
-					action: 'guide_completed',
-					label: window.location.href
-				}
-			});
-		};
-
-		this.onAbort = function () {
-			_this.video.pause();
-			_this.resetState();
-		};
-
-		this.onTimeUpdate = function () {
-			var timeLeft = Math.floor(_this.duration - _this.video.currentTime);
-
-			// Time update fires every 250ms, so we only want to update the DOM when the time left changes
-			if (timeLeft === _this.timeLeft) {
-				return;
-			}
-
-			_this.timeLeft = timeLeft;
-
-			var minutes = Math.floor(timeLeft / 60);
-			var seconds = Math.floor(timeLeft % 60);
-
-			_this.countDownElement.innerText = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
-		};
-
-		this.onCueChange = function () {
-			_this.updateChapterState();
-		};
-
-		this.togglePlay = function () {
-			var label = void 0;
-
-			if (_this.video.paused) {
-				label = 'Play';
-				_this.video.play();
-			} else {
-				label = 'Pause';
-				_this.video.pause();
-			}
-
-			(0, _track2.default)({
-				event: 'guided_tour',
-				eventInfo: {
-					category: 'guided_tour',
-					action: 'player_click',
-					label: label
-				}
-			});
-		};
-
-		this.nextChapter = function () {
-			var cues = _this.chapters.cues;
-
-			var activeCueIndex = (0, _getCurrentCueIndex2.default)(_this.chapters);
-
-			if (activeCueIndex < cues.length - 1) {
-				_this.video.currentTime = cues[activeCueIndex + 1].startTime + 0.01;
-				_this.updateChapterState();
-
-				(0, _track2.default)({
-					event: 'guided_tour',
-					eventInfo: {
-						category: 'guided_tour',
-						action: 'player_click',
-						label: 'Forward'
-					}
-				});
-			}
-		};
-
-		this.previousChapter = function () {
-			var cues = _this.chapters.cues;
-
-			var activeCueIndex = (0, _getCurrentCueIndex2.default)(_this.chapters);
-
-			if (activeCueIndex > 0) {
-				_this.video.currentTime = Math.max(0, cues[activeCueIndex - 1].startTime + 0.01);
-				_this.updateChapterState();
-
-				(0, _track2.default)({
-					event: 'guided_tour',
-					eventInfo: {
-						category: 'guided_tour',
-						action: 'player_click',
-						label: 'Backward'
-					}
-				});
-			}
-		};
-
-		this.video = video;
-		this.playBtn = element.querySelector('.js-play-btn');
-		this.playIcon = element.querySelector('.js-play-icon');
-		this.pauseIcon = element.querySelector('.js-pause-icon');
-		this.forwardsButton = element.querySelector('.js-next-chapter');
-		this.backwardsButton = element.querySelector('.js-previous-chapter');
-		this.totaltimeElement = element.querySelector('.js-totaltime');
-		this.countDownElement = element.querySelector('.js-countdown');
-		this.chapterElements = Array.from(element.querySelectorAll('.js-chapters li'));
-		this.sessionKeys = {
-			currentTime: 'InmsCurrentTime',
-			duration: 'InmsDuration',
-			currentGuideURL: 'InmsCurrentGuideURL',
-			currentGuideImage: 'InmsCurrentGuideImage'
-		};
-
-		this.duration = null;
-		this.timeLeft = null;
-
-		this.init();
-		this.attach();
-	}
-
-	_createClass(VideoGuidePlayback, [{
-		key: 'init',
-		value: function init() {
-			var _this2 = this;
-
-			this.duration = this.video.duration;
-			this.chapters = this.video.textTracks.getTrackById('video-chapters');
-
-			if (this.chapters) {
-				this.chapters.addEventListener('cuechange', this.onCueChange);
-				this.setForwardState(true);
-			}
-
-			// Run on next tick to ensure that the video has loaded and event listeners are attached
-			setTimeout(function () {
-				_this2.sync();
-			}, 0);
-
-			// Format duration to minutes and seconds
-			var minutes = Math.floor(this.duration / 60);
-			var seconds = Math.floor(this.duration % 60);
-
-			this.totaltimeElement.innerText = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
-		}
-	}, {
-		key: 'sync',
-		value: function sync() {
-			var key = this.sessionKeys.currentTime;
-			var guideURL = window.location.href;
-
-			// If the current guide URL is not the same as the one in session storage, do not sync
-			if (sessionStorage.getItem(this.sessionKeys.currentGuideURL) !== guideURL) {
-				return;
-			}
-
-			if (sessionStorage.getItem(key)) {
-				var videoCurrentTime = sessionStorage.getItem(key);
-
-				if (videoCurrentTime > 0) {
-					this.video.currentTime = videoCurrentTime;
-				}
-			}
-		}
-	}, {
-		key: 'attach',
-		value: function attach() {
-			this.playBtn.addEventListener('click', this.togglePlay);
-			this.forwardsButton.addEventListener('click', this.nextChapter);
-			this.backwardsButton.addEventListener('click', this.previousChapter);
-
-			window.addEventListener('visibilitychange', this.saveState);
-			window.addEventListener('beforeunload', this.saveState);
-		}
-	}, {
-		key: 'setPlayActive',
-		value: function setPlayActive() {
-			this.pauseIcon.classList.remove('is-hidden');
-			this.playIcon.classList.add('is-hidden');
-		}
-	}, {
-		key: 'setPauseActive',
-		value: function setPauseActive() {
-			this.pauseIcon.classList.add('is-hidden');
-			this.playIcon.classList.remove('is-hidden');
-		}
-	}, {
-		key: 'setForwardState',
-		value: function setForwardState(active) {
-			this.forwardsButton.disabled = !active;
-		}
-	}, {
-		key: 'setBackwardState',
-		value: function setBackwardState(active) {
-			this.backwardsButton.disabled = !active;
-		}
-	}, {
-		key: 'updateChapterState',
-		value: function updateChapterState() {
-			var cues = this.chapters.cues;
-
-			var activeCueIndex = (0, _getCurrentCueIndex2.default)(this.chapters);
-
-			this.setBackwardState(activeCueIndex > 0);
-			this.setForwardState(activeCueIndex < cues.length - 1);
-
-			this.chapterElements.forEach(function (chapter, i) {
-				if (i === activeCueIndex) {
-					chapter.classList.add('is-current-item');
-				} else {
-					chapter.classList.remove('is-current-item');
-				}
-			});
-		}
-	}]);
-
-	return VideoGuidePlayback;
-}();
-
-exports.default = VideoGuidePlayback;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return VideoGuidePlayback;
+    }
+});
+const _getCurrentCueIndex = /*#__PURE__*/ _interop_require_default(require("./getCurrentCueIndex"));
+const _track = /*#__PURE__*/ _interop_require_default(require("../../assets/js/track"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+class VideoGuidePlayback {
+    init() {
+        this.duration = this.video.duration;
+        this.chapters = this.video.textTracks.getTrackById('video-chapters');
+        if (this.chapters) {
+            this.chapters.addEventListener('cuechange', this.onCueChange);
+            this.setForwardState(true);
+        }
+        // Run on next tick to ensure that the video has loaded and event listeners are attached
+        setTimeout(()=>{
+            this.sync();
+        }, 0);
+        // Format duration to minutes and seconds
+        const minutes = Math.floor(this.duration / 60);
+        const seconds = Math.floor(this.duration % 60);
+        this.totaltimeElement.innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+    }
+    sync() {
+        const key = this.sessionKeys.currentTime;
+        const guideURL = window.location.href;
+        // If the current guide URL is not the same as the one in session storage, do not sync
+        if (sessionStorage.getItem(this.sessionKeys.currentGuideURL) !== guideURL) {
+            return;
+        }
+        if (sessionStorage.getItem(key)) {
+            const videoCurrentTime = sessionStorage.getItem(key);
+            if (videoCurrentTime > 0) {
+                this.video.currentTime = videoCurrentTime;
+            }
+        }
+    }
+    attach() {
+        this.playBtn.addEventListener('click', this.togglePlay);
+        this.forwardsButton.addEventListener('click', this.nextChapter);
+        this.backwardsButton.addEventListener('click', this.previousChapter);
+        window.addEventListener('visibilitychange', this.saveState);
+        window.addEventListener('beforeunload', this.saveState);
+    }
+    setPlayActive() {
+        this.pauseIcon.classList.remove('is-hidden');
+        this.playIcon.classList.add('is-hidden');
+    }
+    setPauseActive() {
+        this.pauseIcon.classList.add('is-hidden');
+        this.playIcon.classList.remove('is-hidden');
+    }
+    setForwardState(active) {
+        this.forwardsButton.disabled = !active;
+    }
+    setBackwardState(active) {
+        this.backwardsButton.disabled = !active;
+    }
+    updateChapterState() {
+        const { cues } = this.chapters;
+        const activeCueIndex = (0, _getCurrentCueIndex.default)(this.chapters);
+        this.setBackwardState(activeCueIndex > 0);
+        this.setForwardState(activeCueIndex < cues.length - 1);
+        this.chapterElements.forEach((chapter, i)=>{
+            if (i === activeCueIndex) {
+                chapter.classList.add('is-current-item');
+            } else {
+                chapter.classList.remove('is-current-item');
+            }
+        });
+    }
+    constructor(element, video){
+        this.saveState = ()=>{
+            if (this.video.currentTime > 0) {
+                const { currentTime, duration, currentGuideURL, currentGuideImage } = this.sessionKeys;
+                const guideURL = window.location.href;
+                const guideImage = this.video.dataset.featuredImage;
+                sessionStorage.setItem(currentTime, this.video.currentTime);
+                sessionStorage.setItem(duration, this.video.duration);
+                sessionStorage.setItem(currentGuideURL, guideURL);
+                sessionStorage.setItem(currentGuideImage, guideImage);
+            }
+        };
+        this.clearState = ()=>{
+            Object.values(this.sessionKeys).forEach((key)=>{
+                sessionStorage.removeItem(key);
+            });
+        };
+        this.onPlay = ()=>{
+            this.setPlayActive();
+        };
+        this.onPause = ()=>{
+            this.setPauseActive();
+        };
+        this.resetState = ()=>{
+            this.setPauseActive();
+            this.clearState();
+            this.setBackwardState(false);
+            this.setForwardState(false);
+            this.video.currentTime = 0;
+        };
+        this.onEnded = ()=>{
+            this.resetState();
+            (0, _track.default)({
+                event: 'guided_tour',
+                eventInfo: {
+                    category: 'guided_tour',
+                    action: 'guide_completed',
+                    label: window.location.href
+                }
+            });
+        };
+        this.onAbort = ()=>{
+            this.video.pause();
+            this.resetState();
+        };
+        this.onTimeUpdate = ()=>{
+            const timeLeft = Math.floor(this.duration - this.video.currentTime);
+            // Time update fires every 250ms, so we only want to update the DOM when the time left changes
+            if (timeLeft === this.timeLeft) {
+                return;
+            }
+            this.timeLeft = timeLeft;
+            const minutes = Math.floor(timeLeft / 60);
+            const seconds = Math.floor(timeLeft % 60);
+            this.countDownElement.innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+        };
+        this.onCueChange = ()=>{
+            this.updateChapterState();
+        };
+        this.togglePlay = ()=>{
+            let label;
+            if (this.video.paused) {
+                label = 'Play';
+                this.video.play();
+            } else {
+                label = 'Pause';
+                this.video.pause();
+            }
+            (0, _track.default)({
+                event: 'guided_tour',
+                eventInfo: {
+                    category: 'guided_tour',
+                    action: 'player_click',
+                    label
+                }
+            });
+        };
+        this.nextChapter = ()=>{
+            const { cues } = this.chapters;
+            const activeCueIndex = (0, _getCurrentCueIndex.default)(this.chapters);
+            if (activeCueIndex < cues.length - 1) {
+                this.video.currentTime = cues[activeCueIndex + 1].startTime + 0.01;
+                this.updateChapterState();
+                (0, _track.default)({
+                    event: 'guided_tour',
+                    eventInfo: {
+                        category: 'guided_tour',
+                        action: 'player_click',
+                        label: 'Forward'
+                    }
+                });
+            }
+        };
+        this.previousChapter = ()=>{
+            const { cues } = this.chapters;
+            const activeCueIndex = (0, _getCurrentCueIndex.default)(this.chapters);
+            if (activeCueIndex > 0) {
+                this.video.currentTime = Math.max(0, cues[activeCueIndex - 1].startTime + 0.01);
+                this.updateChapterState();
+                (0, _track.default)({
+                    event: 'guided_tour',
+                    eventInfo: {
+                        category: 'guided_tour',
+                        action: 'player_click',
+                        label: 'Backward'
+                    }
+                });
+            }
+        };
+        this.video = video;
+        this.playBtn = element.querySelector('.js-play-btn');
+        this.playIcon = element.querySelector('.js-play-icon');
+        this.pauseIcon = element.querySelector('.js-pause-icon');
+        this.forwardsButton = element.querySelector('.js-next-chapter');
+        this.backwardsButton = element.querySelector('.js-previous-chapter');
+        this.totaltimeElement = element.querySelector('.js-totaltime');
+        this.countDownElement = element.querySelector('.js-countdown');
+        this.chapterElements = Array.from(element.querySelectorAll('.js-chapters li'));
+        this.sessionKeys = {
+            currentTime: 'InmsCurrentTime',
+            duration: 'InmsDuration',
+            currentGuideURL: 'InmsCurrentGuideURL',
+            currentGuideImage: 'InmsCurrentGuideImage'
+        };
+        this.duration = null;
+        this.timeLeft = null;
+        this.init();
+        this.attach();
+    }
+}

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

@@ -1,82 +1,59 @@
-'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; }; }();
-
-var _track = require('../../assets/js/track');
-
-var _track2 = _interopRequireDefault(_track);
-
-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 VideoGuideSubtitles = function () {
-	function VideoGuideSubtitles(element, video) {
-		var _this = this;
-
-		_classCallCheck(this, VideoGuideSubtitles);
-
-		this.onEnded = function () {
-			_this.clearSubtitles();
-		};
-
-		this.onCueChange = function () {
-			var activeCues = _this.subtitles.activeCues;
-
-
-			if (activeCues.length > 0) {
-				_this.subtitlesContainer.innerHTML = '<span>' + activeCues[0].text + '</span>';
-			} else {
-				_this.clearSubtitles();
-			}
-		};
-
-		this.toggleSubtitles = function () {
-			_this.subtitlesBtn.classList.toggle('is-active');
-			_this.subtitlesContainer.classList.toggle('is-visible');
-
-			(0, _track2.default)({
-				event: 'guided_tour',
-				eventInfo: {
-					category: 'guided_tour',
-					action: 'player_click',
-					label: 'Subtitles'
-				}
-			});
-		};
-
-		this.element = element;
-		this.video = video;
-		this.subtitlesBtn = element.querySelector('.js-subtitles-btn');
-		this.subtitlesContainer = element.querySelector('.js-subtitles-container');
-
-		this.init();
-		this.attach();
-	}
-
-	_createClass(VideoGuideSubtitles, [{
-		key: 'init',
-		value: function init() {
-			this.subtitles = this.video.textTracks.getTrackById('video-subtitles');
-		}
-	}, {
-		key: 'attach',
-		value: function attach() {
-			this.subtitlesBtn.addEventListener('click', this.toggleSubtitles);
-			this.subtitles.addEventListener('cuechange', this.onCueChange);
-		}
-	}, {
-		key: 'clearSubtitles',
-		value: function clearSubtitles() {
-			this.subtitlesContainer.innerHTML = '';
-		}
-	}]);
-
-	return VideoGuideSubtitles;
-}();
-
-exports.default = VideoGuideSubtitles;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return VideoGuideSubtitles;
+    }
+});
+const _track = /*#__PURE__*/ _interop_require_default(require("../../assets/js/track"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+class VideoGuideSubtitles {
+    init() {
+        this.subtitles = this.video.textTracks.getTrackById('video-subtitles');
+    }
+    attach() {
+        this.subtitlesBtn.addEventListener('click', this.toggleSubtitles);
+        this.subtitles.addEventListener('cuechange', this.onCueChange);
+    }
+    clearSubtitles() {
+        this.subtitlesContainer.innerHTML = '';
+    }
+    constructor(element, video){
+        this.onEnded = ()=>{
+            this.clearSubtitles();
+        };
+        this.onCueChange = ()=>{
+            const { activeCues } = this.subtitles;
+            if (activeCues.length > 0) {
+                this.subtitlesContainer.innerHTML = `<span>${activeCues[0].text}</span>`;
+            } else {
+                this.clearSubtitles();
+            }
+        };
+        this.toggleSubtitles = ()=>{
+            this.subtitlesBtn.classList.toggle('is-active');
+            this.subtitlesContainer.classList.toggle('is-visible');
+            (0, _track.default)({
+                event: 'guided_tour',
+                eventInfo: {
+                    category: 'guided_tour',
+                    action: 'player_click',
+                    label: 'Subtitles'
+                }
+            });
+        };
+        this.element = element;
+        this.video = video;
+        this.subtitlesBtn = element.querySelector('.js-subtitles-btn');
+        this.subtitlesContainer = element.querySelector('.js-subtitles-container');
+        this.init();
+        this.attach();
+    }
+}