@internetstiftelsen/styleguide 4.0.10-beta.0.1 → 4.0.10

package/package.json

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

package/src/assets/js/charCounter.js

@@ -0,0 +1,111 @@
+import className from './className';
+import htmlTextLength from './htmlTextLength';
+
+class CharCounter {
+	constructor(el) {
+		this.el = el;
+		this.counterEl = null;
+		this.isRichText = this.el.dataset.richText !== undefined;
+		this.min = parseInt(this.el.getAttribute('data-min') || 0, 10);
+		this.max = parseInt(this.el.getAttribute('data-max') || 0, 10);
+
+		if (!this.min && !this.max) {
+			console.warn('Either min or max must be set and greater than 0.');
+			return;
+		}
+
+		if (this.isRichText) {
+			this.waitForEditor();
+
+			return;
+		}
+
+		this.build();
+		this.attach();
+	}
+
+	waitForEditor() {
+		if (this.el.editor) {
+			this.build();
+			this.attach();
+		} else {
+			this.el.addEventListener('editor-ready', () => {
+				this.build();
+				this.attach();
+			});
+		}
+	}
+
+	count() {
+		if (this.isRichText) {
+			return htmlTextLength(this.el.editor.getHTML());
+		}
+
+		return this.el.value.length;
+	}
+
+	setCountText() {
+		const count = this.count();
+
+		if (this.min && count < this.min) {
+			this.counterEl.textContent = `${count}/${this.min}`;
+			this.counterEl.className = `color-ruby ${className('a-meta')}`;
+
+			return;
+		}
+
+		if (this.max && count > this.max) {
+			this.counterEl.textContent = `${count}/${this.max}`;
+			this.counterEl.classList.remove('color-granit');
+			this.counterEl.className = `color-ruby ${className('a-meta')}`;
+
+			return;
+		}
+
+		this.counterEl.textContent = `${count}/${this.max || this.min}`;
+		this.counterEl.className = `color-jade ${className('a-meta')}`;
+	}
+
+	build() {
+		const counter = document.createElement('small');
+		let wrapper;
+
+		if (this.isRichText) {
+			wrapper = this.el.editor.options.element;
+			wrapper.style.paddingRight = '3.8333333333rem';
+		} else {
+			wrapper = document.createElement('div');
+
+			wrapper.className = 'u-position-relative';
+			this.el.parentNode.insertBefore(wrapper, this.el);
+			wrapper.appendChild(this.el);
+
+			this.el.style.paddingRight = '3.8333333333rem';
+		}
+
+		counter.className = `color-granit ${className('a-meta')}`;
+		counter.style.cssText = 'position: absolute; top: 5px; right: 10px; z-index: 501;';
+
+		wrapper.appendChild(counter);
+
+		this.counterEl = counter;
+		this.setCountText();
+	}
+
+	attach() {
+		if (this.isRichText) {
+			this.el.editor.on('update', () => {
+				this.setCountText();
+			});
+		} else {
+			this.el.addEventListener('input', () => {
+				this.setCountText();
+			});
+		}
+	}
+}
+
+const elements = document.querySelectorAll('[data-min], [data-max]');
+elements.forEach((el) => {
+	el.charCounter = new CharCounter(el);
+});

package/src/assets/js/htmlTextLength.js

@@ -0,0 +1,7 @@
+export default function htmlTextLength(html) {
+	const div = document.createElement('div');
+
+	div.innerHTML = html;
+
+	return div.textContent.length;
+}

package/src/atoms/textarea/rich-text.js

@@ -186,6 +186,14 @@ export function setupTextArea(el, onChange = () => {}) {
 	el.parentNode.insertBefore(editorEl, el);
 
 	createToolbar(editorEl, editor);
+
+	const event = new CustomEvent('editor-ready', {
+		detail: {
+			editor,
+		},
+	});
+
+	el.dispatchEvent(event);
 }
 
 export function init() {

package/src/atoms/textarea/textarea.config.js

@@ -51,6 +51,44 @@ module.exports = {
 				is_richtext: true,
 				has_help: false
 			}
+		},
+		{
+			name: 'Counter (max)',
+			status: 'wip',
+			context: {
+				is_richtext: false,
+				has_help: false,
+				max: 300,
+			},
+		},
+		{
+			name: 'Counter (min)',
+			status: 'wip',
+			context: {
+				is_richtext: false,
+				has_help: false,
+				min: 30,
+			},
+		},
+		{
+			name: 'Counter (min and max)',
+			status: 'wip',
+			context: {
+				is_richtext: false,
+				has_help: false,
+				min: 30,
+				max: 300,
+			},
+		},
+		{
+			name: 'Rich text with counter',
+			status: 'wip',
+			context: {
+				is_richtext: true,
+				has_help: true,
+				min: 30,
+				max: 300,
+			},
 		}
 	]
 }

package/src/components.js

@@ -30,4 +30,5 @@ import './organisms/timeline/timeline';
 import './molecules/overview-navigation/overview-navigation';
 import './organisms/schedule/schedule-filter';
 import './assets/js/ot';
+import './assets/js/charCounter';
 import './atoms/range/range';