@internetstiftelsen/styleguide 2.26.19 → 2.26.20

package/dist/assets/js/track.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.default = track;
+function track(data) {
+	// eslint-disable-next-line no-underscore-dangle
+	if (window._mtm) {
+		// eslint-disable-next-line no-underscore-dangle
+		window._mtm.push(data);
+	} else {
+		console.log('GTM not loaded', data);
+	}
+}

package/dist/molecules/form/Form.js

@@ -53,10 +53,6 @@ var Form = function () {
 			_this.clearFieldErrors();
 
 			if (_this.validate()) {
-				if (_this.recaptcha) {
-					_this.captchaCallback();
-				}
-
 				_this.send();
 			} else {
 				_this.displayError({ message: _this.i18n('Alla fält måste vara ifyllda') });
@@ -140,15 +136,6 @@ var Form = function () {
 			_this.events.emit('success', json);
 		};
 
-		this.captchaCallback = function () {
-			if (typeof window.grecaptcha !== 'undefined' && process.env.RECAPTCHA_KEY !== undefined) {
-				/* global grecaptcha */
-				grecaptcha.execute(process.env.RECAPTCHA_KEY, { action: _this.recaptcha }).then(function (token) {
-					_this.token = token;
-				});
-			}
-		};
-
 		this.reset = function () {
 			_this.element.reset();
 			_this.hideMessages();
@@ -181,13 +168,6 @@ var Form = function () {
 		this.errors = {};
 		this.validationRules = null;
 
-		this.recaptcha = this.element.getAttribute('data-recaptcha');
-
-		if (this.recaptcha) {
-			window.captchaCallback = this.captchaCallback;
-			this.renderCaptchaForm();
-		}
-
 		if (this.validation) {
 			this.parseValidationRules();
 		}
@@ -201,15 +181,6 @@ var Form = function () {
 		value: function collectInputs() {
 			this.inputs = this.element.querySelectorAll('input');
 		}
-	}, {
-		key: 'renderCaptchaForm',
-		value: function renderCaptchaForm() {
-			var s = document.createElement('script');
-			s.defer = true;
-			s.setAttribute('data-origin', this.recaptcha);
-			s.setAttribute('src', 'https://www.google.com/recaptcha/api.js?onload=captchaCallback&render=6LdtNnkUAAAAACYo0vISI-z9tOyr3djjZore-6wY&hl=sv');
-			document.body.appendChild(s);
-		}
 	}, {
 		key: 'parseValidationRules',
 		value: function parseValidationRules() {

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

@@ -10,6 +10,10 @@ 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"); } }
@@ -52,15 +56,19 @@ var VideoGuidePlayback = function () {
 			_this.setPauseActive();
 		};
 
-		this.onEnded = function () {
+		this.resetState = function () {
 			_this.setPlayActive();
 			_this.clearState();
 			_this.setBackwardState(false);
 			_this.setForwardState(false);
 
 			_this.video.currentTime = 0;
+		};
 
-			_this.dataLayer.push({
+		this.onEnded = function () {
+			_this.resetState();
+
+			(0, _track2.default)({
 				event: 'guided_tour',
 				eventInfo: {
 					category: 'guided_tour',
@@ -72,7 +80,7 @@ var VideoGuidePlayback = function () {
 
 		this.onAbort = function () {
 			_this.video.pause();
-			_this.onEnded();
+			_this.resetState();
 		};
 
 		this.onTimeUpdate = function () {
@@ -87,9 +95,8 @@ var VideoGuidePlayback = function () {
 
 			var minutes = Math.floor(timeLeft / 60);
 			var seconds = Math.floor(timeLeft % 60);
-			var formattedTimeLeft = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
 
-			_this.countDownElement.innerText = formattedTimeLeft;
+			_this.countDownElement.innerText = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
 		};
 
 		this.onCueChange = function () {
@@ -97,11 +104,24 @@ var VideoGuidePlayback = function () {
 		};
 
 		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 () {
@@ -113,7 +133,7 @@ var VideoGuidePlayback = function () {
 				_this.video.currentTime = cues[activeCueIndex + 1].startTime + 0.01;
 				_this.updateChapterState();
 
-				_this.dataLayer.push({
+				(0, _track2.default)({
 					event: 'guided_tour',
 					eventInfo: {
 						category: 'guided_tour',
@@ -133,7 +153,7 @@ var VideoGuidePlayback = function () {
 				_this.video.currentTime = Math.max(0, cues[activeCueIndex - 1].startTime + 0.01);
 				_this.updateChapterState();
 
-				_this.dataLayer.push({
+				(0, _track2.default)({
 					event: 'guided_tour',
 					eventInfo: {
 						category: 'guided_tour',
@@ -144,8 +164,6 @@ var VideoGuidePlayback = function () {
 			}
 		};
 
-		// eslint-disable-next-line no-underscore-dangle
-		this.dataLayer = window._mtm || [];
 		this.video = video;
 		this.playBtn = element.querySelector('.js-play-btn');
 		this.playIcon = element.querySelector('.js-play-icon');
@@ -190,9 +208,8 @@ var VideoGuidePlayback = function () {
 			// Format duration to minutes and seconds
 			var minutes = Math.floor(this.duration / 60);
 			var seconds = Math.floor(this.duration % 60);
-			var formattedDuration = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
 
-			this.totaltimeElement.innerText = formattedDuration;
+			this.totaltimeElement.innerText = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
 		}
 	}, {
 		key: 'sync',
@@ -228,48 +245,22 @@ var VideoGuidePlayback = function () {
 		value: function setPlayActive() {
 			this.pauseIcon.classList.remove('is-hidden');
 			this.playIcon.classList.add('is-hidden');
-
-			this.dataLayer.push({
-				event: 'guided_tour',
-				eventInfo: {
-					category: 'guided_tour',
-					action: 'player_click',
-					label: 'Play'
-				}
-			});
 		}
 	}, {
 		key: 'setPauseActive',
 		value: function setPauseActive() {
 			this.pauseIcon.classList.add('is-hidden');
 			this.playIcon.classList.remove('is-hidden');
-
-			this.dataLayer.push({
-				event: 'guided_tour',
-				eventInfo: {
-					category: 'guided_tour',
-					action: 'player_click',
-					label: 'Pause'
-				}
-			});
 		}
 	}, {
 		key: 'setForwardState',
 		value: function setForwardState(active) {
-			if (active) {
-				this.forwardsButton.disabled = false;
-			} else {
-				this.forwardsButton.disabled = true;
-			}
+			this.forwardsButton.disabled = !active;
 		}
 	}, {
 		key: 'setBackwardState',
 		value: function setBackwardState(active) {
-			if (active) {
-				this.backwardsButton.disabled = false;
-			} else {
-				this.backwardsButton.disabled = true;
-			}
+			this.backwardsButton.disabled = !active;
 		}
 	}, {
 		key: 'updateChapterState',

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

@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 
 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 () {
@@ -33,7 +39,7 @@ var VideoGuideSubtitles = function () {
 			_this.subtitlesBtn.classList.toggle('is-active');
 			_this.subtitlesContainer.classList.toggle('is-visible');
 
-			_this.dataLayer.push({
+			(0, _track2.default)({
 				event: 'guided_tour',
 				eventInfo: {
 					category: 'guided_tour',
@@ -41,12 +47,8 @@ var VideoGuideSubtitles = function () {
 					label: 'Subtitles'
 				}
 			});
-
-			console.log(_this.dataLayer);
 		};
 
-		// eslint-disable-next-line no-underscore-dangle
-		this.dataLayer = window._mtm || [];
 		this.element = element;
 		this.video = video;
 		this.subtitlesBtn = element.querySelector('.js-subtitles-btn');

package/package.json

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

package/src/assets/js/track.js

@@ -0,0 +1,9 @@
+export default function track(data) {
+	// eslint-disable-next-line no-underscore-dangle
+	if (window._mtm) {
+		// eslint-disable-next-line no-underscore-dangle
+		window._mtm.push(data);
+	} else {
+		console.log('GTM not loaded', data);
+	}
+}

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

@@ -1,9 +1,8 @@
 import getCurrentCueIndex from './getCurrentCueIndex';
+import track from '../../assets/js/track';
 
 export default class VideoGuidePlayback {
 	constructor(element, video) {
-		// eslint-disable-next-line no-underscore-dangle
-		this.dataLayer = window._mtm || [];
 		this.video = video;
 		this.playBtn = element.querySelector('.js-play-btn');
 		this.playIcon = element.querySelector('.js-play-icon');
@@ -44,9 +43,8 @@ export default class VideoGuidePlayback {
 		// Format duration to minutes and seconds
 		const minutes = Math.floor(this.duration / 60);
 		const seconds = Math.floor(this.duration % 60);
-		const formattedDuration = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 
-		this.totaltimeElement.innerText = formattedDuration;
+		this.totaltimeElement.innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 	}
 
 	sync() {
@@ -79,45 +77,19 @@ export default class VideoGuidePlayback {
 	setPlayActive() {
 		this.pauseIcon.classList.remove('is-hidden');
 		this.playIcon.classList.add('is-hidden');
-
-		this.dataLayer.push({
-			event: 'guided_tour',
-			eventInfo: {
-				category: 'guided_tour',
-				action: 'player_click',
-				label: 'Play',
-			},
-		});
 	}
 
 	setPauseActive() {
 		this.pauseIcon.classList.add('is-hidden');
 		this.playIcon.classList.remove('is-hidden');
-
-		this.dataLayer.push({
-			event: 'guided_tour',
-			eventInfo: {
-				category: 'guided_tour',
-				action: 'player_click',
-				label: 'Pause',
-			},
-		});
 	}
 
 	setForwardState(active) {
-		if (active) {
-			this.forwardsButton.disabled = false;
-		} else {
-			this.forwardsButton.disabled = true;
-		}
+		this.forwardsButton.disabled = !active;
 	}
 
 	setBackwardState(active) {
-		if (active) {
-			this.backwardsButton.disabled = false;
-		} else {
-			this.backwardsButton.disabled = true;
-		}
+		this.backwardsButton.disabled = !active;
 	}
 
 	updateChapterState() {
@@ -168,15 +140,19 @@ export default class VideoGuidePlayback {
 		this.setPauseActive();
 	};
 
-	onEnded = () => {
+	resetState = () => {
 		this.setPlayActive();
 		this.clearState();
 		this.setBackwardState(false);
 		this.setForwardState(false);
 
 		this.video.currentTime = 0;
+	};
+
+	onEnded = () => {
+		this.resetState();
 
-		this.dataLayer.push({
+		track({
 			event: 'guided_tour',
 			eventInfo: {
 				category: 'guided_tour',
@@ -188,7 +164,7 @@ export default class VideoGuidePlayback {
 
 	onAbort = () => {
 		this.video.pause();
-		this.onEnded();
+		this.resetState();
 	};
 
 	onTimeUpdate = () => {
@@ -203,9 +179,8 @@ export default class VideoGuidePlayback {
 
 		const minutes = Math.floor(timeLeft / 60);
 		const seconds = Math.floor(timeLeft % 60);
-		const formattedTimeLeft = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 
-		this.countDownElement.innerText = formattedTimeLeft;
+		this.countDownElement.innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 	};
 
 	onCueChange = () => {
@@ -213,11 +188,24 @@ export default class VideoGuidePlayback {
 	};
 
 	togglePlay = () => {
+		let label;
+
 		if (this.video.paused) {
+			label = 'Play';
 			this.video.play();
 		} else {
+			label = 'Pause';
 			this.video.pause();
 		}
+
+		track({
+			event: 'guided_tour',
+			eventInfo: {
+				category: 'guided_tour',
+				action: 'player_click',
+				label,
+			},
+		});
 	};
 
 	nextChapter = () => {
@@ -228,7 +216,7 @@ export default class VideoGuidePlayback {
 			this.video.currentTime = cues[activeCueIndex + 1].startTime + 0.01;
 			this.updateChapterState();
 
-			this.dataLayer.push({
+			track({
 				event: 'guided_tour',
 				eventInfo: {
 					category: 'guided_tour',
@@ -247,7 +235,7 @@ export default class VideoGuidePlayback {
 			this.video.currentTime = Math.max(0, cues[activeCueIndex - 1].startTime + 0.01);
 			this.updateChapterState();
 
-			this.dataLayer.push({
+			track({
 				event: 'guided_tour',
 				eventInfo: {
 					category: 'guided_tour',

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

@@ -1,7 +1,7 @@
+import track from '../../assets/js/track';
+
 export default class VideoGuideSubtitles {
 	constructor(element, video) {
-		// eslint-disable-next-line no-underscore-dangle
-		this.dataLayer = window._mtm || [];
 		this.element = element;
 		this.video = video;
 		this.subtitlesBtn = element.querySelector('.js-subtitles-btn');
@@ -42,7 +42,7 @@ export default class VideoGuideSubtitles {
 		this.subtitlesBtn.classList.toggle('is-active');
 		this.subtitlesContainer.classList.toggle('is-visible');
 
-		this.dataLayer.push({
+		track({
 			event: 'guided_tour',
 			eventInfo: {
 				category: 'guided_tour',
@@ -50,7 +50,5 @@ export default class VideoGuideSubtitles {
 				label: 'Subtitles',
 			},
 		});
-
-		console.log(this.dataLayer);
 	};
 }