@internetstiftelsen/styleguide 2.24.43 → 2.25.0

package/dist/assets/js/Events.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+	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 Events = function () {
+	function Events() {
+		var listeners = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+		_classCallCheck(this, Events);
+
+		this.listeners = listeners;
+	}
+
+	_createClass(Events, [{
+		key: "hasListeners",
+		value: function hasListeners(event) {
+			return event in this.listeners;
+		}
+	}, {
+		key: "on",
+		value: function on(event, cb) {
+			var _this = this;
+
+			if (!(event in this.listeners)) {
+				this.listeners[event] = [];
+			}
+
+			if (!this.listeners[event].includes(cb)) {
+				this.listeners[event].push(cb);
+			}
+
+			return {
+				unsubscribe: function unsubscribe() {
+					return _this.off(event, cb);
+				}
+			};
+		}
+	}, {
+		key: "off",
+		value: function off(event, cb) {
+			if (!this.hasListeners(event)) {
+				return;
+			}
+
+			this.listeners[event] = this.listeners[event].filter(function (subCb) {
+				return subCb !== cb;
+			});
+		}
+	}, {
+		key: "removeAll",
+		value: function removeAll(event) {
+			this.listeners[event] = [];
+		}
+	}, {
+		key: "emit",
+		value: function emit(event) {
+			for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+				args[_key - 1] = arguments[_key];
+			}
+
+			if (!this.hasListeners(event)) {
+				return;
+			}
+
+			this.listeners[event].forEach(function (cb) {
+				cb.call.apply(cb, [null].concat(args));
+			});
+		}
+	}]);
+
+	return Events;
+}();
+
+exports.default = Events;

package/dist/molecules/form/Form.js

@@ -14,6 +14,10 @@ var _lodash = require('lodash.template');
 
 var _lodash2 = _interopRequireDefault(_lodash);
 
+var _Events = require('../../assets/js/Events');
+
+var _Events2 = _interopRequireDefault(_Events);
+
 var _Button = require('../../atoms/button/Button');
 
 var _Button2 = _interopRequireDefault(_Button);
@@ -60,6 +64,7 @@ var Form = function () {
 		};
 
 		this.displayError = function (error) {
+			_this.events.emit('error', error);
 			_this.setLoading(false);
 
 			if ('response' in error) {
@@ -131,6 +136,8 @@ var Form = function () {
 
 			_this.success.classList.remove('is-hidden');
 			_this.success.innerHTML = tmpl(json);
+
+			_this.events.emit('success', json);
 		};
 
 		this.captchaCallback = function () {
@@ -154,6 +161,7 @@ var Form = function () {
 		this.submit = new _Button2.default(this.element.querySelector('button[type="submit"]'));
 		this.error = this.element.querySelector('[data-form-error]');
 		this.success = this.element.querySelector('[data-form-success]');
+		this.events = new _Events2.default();
 
 		if (this.success) {
 			var tpl = document.getElementById(this.success.getAttribute('data-form-success'));

package/dist/molecules/form/index.js

@@ -10,6 +10,6 @@ var elements = document.querySelectorAll('[data-form]');
 
 if (elements.length) {
 	elements.forEach(function (element) {
-		return new _Form2.default(element);
+		element.form = new _Form2.default(element);
 	});
 }

package/package.json

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

package/src/app.js

@@ -73,3 +73,13 @@ const unsubscribeOpen = onOpen((el, id) => {
 });
 
 // Call unsubscribe to remove callback
+
+const demoForms = document.querySelectorAll('[data-form]');
+
+[].forEach.call(demoForms, (el) => {
+	if ('form' in el) {
+		el.form.events.on('success', (data) => {
+			console.log('Form success', data);
+		});
+	}
+});

package/src/assets/js/Events.js

@@ -0,0 +1,47 @@
+export default class Events {
+	constructor(listeners = {}) {
+		this.listeners = listeners;
+	}
+
+	hasListeners(event) {
+		return event in this.listeners;
+	}
+
+	on(event, cb) {
+		if (!(event in this.listeners)) {
+			this.listeners[event] = [];
+		}
+
+		if (!this.listeners[event].includes(cb)) {
+			this.listeners[event].push(cb);
+		}
+
+		return {
+			unsubscribe: () => this.off(event, cb),
+		};
+	}
+
+	off(event, cb) {
+		if (!this.hasListeners(event)) {
+			return;
+		}
+
+		this.listeners[event] = this.listeners[event].filter(
+			(subCb) => subCb !== cb,
+		);
+	}
+
+	removeAll(event) {
+		this.listeners[event] = [];
+	}
+
+	emit(event, ...args) {
+		if (!this.hasListeners(event)) {
+			return;
+		}
+
+		this.listeners[event].forEach((cb) => {
+			cb.call(null, ...args);
+		});
+	}
+}

package/src/molecules/form/Form.js

@@ -1,4 +1,5 @@
 import template from 'lodash.template';
+import Events from '../../assets/js/Events';
 import Button from '../../atoms/button/Button';
 import className from '../../assets/js/className';
 import validationMessage from '../../assets/js/validationMessage';
@@ -10,6 +11,7 @@ export default class Form {
 		this.submit = new Button(this.element.querySelector('button[type="submit"]'));
 		this.error = this.element.querySelector('[data-form-error]');
 		this.success = this.element.querySelector('[data-form-success]');
+		this.events = new Events();
 
 		if (this.success) {
 			const tpl = document.getElementById(this.success.getAttribute('data-form-success'));
@@ -163,6 +165,7 @@ export default class Form {
 	}
 
 	displayError = (error) => {
+		this.events.emit('error', error);
 		this.setLoading(false);
 
 		if ('response' in error) {
@@ -274,6 +277,8 @@ export default class Form {
 
 		this.success.classList.remove('is-hidden');
 		this.success.innerHTML = tmpl(json);
+
+		this.events.emit('success', json);
 	};
 
 	captchaCallback = () => {

package/src/molecules/form/index.js

@@ -3,5 +3,7 @@ import Form from './Form';
 const elements = document.querySelectorAll('[data-form]');
 
 if (elements.length) {
-	elements.forEach((element) => new Form(element));
+	elements.forEach((element) => {
+		element.form = new Form(element);
+	});
 }

package/src/organisms/hero/_hero.scss

@@ -3,6 +3,7 @@
 @include organism(hero) {
 	position: relative;
 	z-index: z_index(background);
+	margin-bottom: rhythm(4);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;