@internetstiftelsen/styleguide 2.24.28-beta.0.3 → 2.24.28

package/dist/assets/js/nodeAdded.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+exports.default = nodeAdded;
+var callbacks = {};
+
+function dispatch(node, cbs) {
+	cbs.forEach(function (cb) {
+		return cb(node);
+	});
+}
+
+var observer = new MutationObserver(function (mutations) {
+	mutations.forEach(function (mutation) {
+		mutation.addedNodes.forEach(function (node) {
+			if (node.nodeType === Node.ELEMENT_NODE) {
+				Object.entries(callbacks).forEach(function (_ref) {
+					var _ref2 = _slicedToArray(_ref, 2),
+					    selector = _ref2[0],
+					    selectorCallbacks = _ref2[1];
+
+					if (node.matches(selector)) {
+						dispatch(node, selectorCallbacks);
+					} else if (node.id === 'siteMain') {
+						var child = node.querySelector(selector);
+
+						if (child) {
+							dispatch(child, selectorCallbacks);
+						}
+					}
+				});
+			}
+		});
+	});
+});
+
+observer.observe(document.body, {
+	childList: true,
+	subtree: true
+});
+
+function nodeAdded(selector, callback) {
+	if (!(selector in callbacks)) {
+		callbacks[selector] = [];
+	}
+
+	callbacks[selector].push(callback);
+
+	return function unsubscribe() {
+		var index = callbacks[selector].indexOf(callback);
+
+		if (index > -1) {
+			callbacks[selector].splice(index, 1);
+		}
+	};
+}

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

@@ -1,17 +1,30 @@
 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.initHeroGlider = initHeroGlider;
+
 var _gliderJs = require('glider-js');
 
 var _gliderJs2 = _interopRequireDefault(_gliderJs);
 
+var _nodeAdded = require('../../assets/js/nodeAdded');
+
+var _nodeAdded2 = _interopRequireDefault(_nodeAdded);
+
 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');
+// eslint-disable-next-line import/prefer-default-export
+function initHeroGlider(node) {
+	if (node.hasAttribute('data-glider-initialized')) {
+		return;
+	}
 
-if (gliderElementHero) {
-	var GliderHero = new _gliderJs2.default(gliderElementHero, {
+	var dataLayer = window.dataLayer || [];
+	var gliderLinks = document.querySelectorAll('.glider-slide a');
+
+	var GliderHero = new _gliderJs2.default(node, {
 		scrollLock: true,
 		slidesToShow: 1,
 		slidesToScroll: 1,
@@ -22,25 +35,27 @@ if (gliderElementHero) {
 		}
 	});
 
-	var autoplayDelay = gliderElementHero.dataset.timeout;
+	node.setAttribute('data-glider-initialized', 'true');
+
+	var autoplayDelay = node.dataset.timeout;
 
 	if (autoplayDelay) {
 		var autoplay = setInterval(function () {
 			GliderHero.scrollItem('next');
-		}, autoplayDelay);
+		}, parseInt(autoplayDelay, 10));
 
-		gliderElementHero.addEventListener('mouseover', function () {
+		node.addEventListener('mouseover', function () {
 			if (autoplay !== null) {
 				clearInterval(autoplay);
 				autoplay = null;
 			}
 		}, 0);
 
-		gliderElementHero.addEventListener('mouseout', function () {
+		node.addEventListener('mouseout', function () {
 			if (autoplay === null) {
 				autoplay = setInterval(function () {
 					GliderHero.scrollItem('next');
-				}, autoplayDelay);
+				}, parseInt(autoplayDelay, 10));
 			}
 		}, 0);
 	} else {
@@ -81,6 +96,12 @@ if (gliderElementHero) {
 			});
 		});
 	}
+}
+
+(0, _nodeAdded2.default)('.js-glider-hero', initHeroGlider);
 
-	module.exports = GliderHero;
+var gliderElementHero = document.querySelector('.js-glider-hero');
+
+if (gliderElementHero) {
+	initHeroGlider(gliderElementHero);
 }

package/package.json

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

package/src/assets/js/nodeAdded.js

@@ -0,0 +1,46 @@
+const callbacks = {};
+
+function dispatch(node, cbs) {
+	cbs.forEach((cb) => cb(node));
+}
+
+const observer = new MutationObserver((mutations) => {
+	mutations.forEach((mutation) => {
+		mutation.addedNodes.forEach((node) => {
+			if (node.nodeType === Node.ELEMENT_NODE) {
+				Object.entries(callbacks).forEach(([selector, selectorCallbacks]) => {
+					if (node.matches(selector)) {
+						dispatch(node, selectorCallbacks);
+					} else if (node.id === 'siteMain') {
+						const child = node.querySelector(selector);
+
+						if (child) {
+							dispatch(child, selectorCallbacks);
+						}
+					}
+				});
+			}
+		});
+	});
+});
+
+observer.observe(document.body, {
+	childList: true,
+	subtree: true,
+});
+
+export default function nodeAdded(selector, callback) {
+	if (!(selector in callbacks)) {
+		callbacks[selector] = [];
+	}
+
+	callbacks[selector].push(callback);
+
+	return function unsubscribe() {
+		const index = callbacks[selector].indexOf(callback);
+
+		if (index > -1) {
+			callbacks[selector].splice(index, 1);
+		}
+	};
+}

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

@@ -1,11 +1,16 @@
 import Glider from 'glider-js';
+import nodeAdded from '../../assets/js/nodeAdded';
 
-const gliderElementHero = document.querySelector('.js-glider-hero');
-const dataLayer = window.dataLayer || [];
-const gliderLinks = document.querySelectorAll('.glider-slide a');
+// eslint-disable-next-line import/prefer-default-export
+export function initHeroGlider(node) {
+	if (node.hasAttribute('data-glider-initialized')) {
+		return;
+	}
 
-if (gliderElementHero) {
-	const GliderHero = new Glider(gliderElementHero, {
+	const dataLayer = window.dataLayer || [];
+	const gliderLinks = document.querySelectorAll('.glider-slide a');
+
+	const GliderHero = new Glider(node, {
 		scrollLock: true,
 		slidesToShow: 1,
 		slidesToScroll: 1,
@@ -16,25 +21,27 @@ if (gliderElementHero) {
 		},
 	});
 
-	const autoplayDelay = gliderElementHero.dataset.timeout;
+	node.setAttribute('data-glider-initialized', 'true');
+
+	const autoplayDelay = node.dataset.timeout;
 
 	if (autoplayDelay) {
 		let autoplay = setInterval(() => {
 			GliderHero.scrollItem('next');
-		}, autoplayDelay);
+		}, parseInt(autoplayDelay, 10));
 
-		gliderElementHero.addEventListener('mouseover', () => {
+		node.addEventListener('mouseover', () => {
 			if (autoplay !== null) {
 				clearInterval(autoplay);
 				autoplay = null;
 			}
 		}, 0);
 
-		gliderElementHero.addEventListener('mouseout', () => {
+		node.addEventListener('mouseout', () => {
 			if (autoplay === null) {
 				autoplay = setInterval(() => {
 					GliderHero.scrollItem('next');
-				}, autoplayDelay);
+				}, parseInt(autoplayDelay, 10));
 			}
 		}, 0);
 	} else {
@@ -75,6 +82,12 @@ if (gliderElementHero) {
 			});
 		});
 	}
+}
+
+nodeAdded('.js-glider-hero', initHeroGlider);
 
-	module.exports = GliderHero;
+const gliderElementHero = document.querySelector('.js-glider-hero');
+
+if (gliderElementHero) {
+	initHeroGlider(gliderElementHero);
 }