@internetstiftelsen/styleguide 5.0.19 → 5.1.1

package/dist/atoms/height-limiter/height-limiter.js

@@ -1,55 +1,42 @@
-'use strict';
-
-var elements = document.querySelectorAll('.js-height-limit');
+"use strict";
+const elements = document.querySelectorAll('.js-height-limit');
 function update(innerContainer, button, height) {
-	if (button.classList.contains('is-clicked')) {
-		return;
-	}
-
-	if (innerContainer.offsetHeight >= height) {
-		innerContainer.setAttribute('style', 'max-height:' + height + 'px;');
-		innerContainer.classList.add('is-limited');
-		button.classList.remove('is-hidden');
-	} else {
-		innerContainer.removeAttribute('style');
-		innerContainer.classList.remove('is-limited');
-		button.classList.add('is-hidden');
-	}
+    if (button.classList.contains('is-clicked')) {
+        return;
+    }
+    if (innerContainer.offsetHeight >= height) {
+        innerContainer.setAttribute('style', `max-height:${height}px;`);
+        innerContainer.classList.add('is-limited');
+        button.classList.remove('is-hidden');
+    } else {
+        innerContainer.removeAttribute('style');
+        innerContainer.classList.remove('is-limited');
+        button.classList.add('is-hidden');
+    }
 }
-
 function setup(element) {
-	var height = element.getAttribute('data-height');
-	var innerContainer = element.querySelector('[class*="inner"]');
-	var button = element.querySelector('.js-toggle-height');
-	var buttonTextElement = button.querySelector('span');
-	var buttonText = buttonTextElement.innerText;
-	var toggleText = element.getAttribute('data-toggle-text');
-	var topPosition = void 0;
-
-	update(innerContainer, button, height);
-
-	button.addEventListener('click', function () {
-		innerContainer.classList.toggle('is-limited');
-		innerContainer.setAttribute('style', innerContainer.style.maxHeight === height + 'px' ? 'max-height:none' : 'max-height:' + height + 'px');
-		buttonTextElement.innerText = buttonTextElement.innerText === buttonText ? toggleText : buttonText;
-		button.classList.toggle('is-clicked');
-
-		if (!innerContainer.classList.contains('is-limited')) {
-			topPosition = document.documentElement.scrollTop;
-		} else {
-			window.scroll(0, topPosition);
-		}
-
-		setTimeout(function () {
-			return update(innerContainer, button, height);
-		}, 1);
-	});
-
-	window.addEventListener('resize', function () {
-		return update(innerContainer, button, height);
-	});
+    const height = element.getAttribute('data-height');
+    const innerContainer = element.querySelector('[class*="inner"]');
+    const button = element.querySelector('.js-toggle-height');
+    const buttonTextElement = button.querySelector('span');
+    const buttonText = buttonTextElement.innerText;
+    const toggleText = element.getAttribute('data-toggle-text');
+    let topPosition;
+    update(innerContainer, button, height);
+    button.addEventListener('click', ()=>{
+        innerContainer.classList.toggle('is-limited');
+        innerContainer.setAttribute('style', innerContainer.style.maxHeight === `${height}px` ? 'max-height:none' : `max-height:${height}px`);
+        buttonTextElement.innerText = buttonTextElement.innerText === buttonText ? toggleText : buttonText;
+        button.classList.toggle('is-clicked');
+        if (!innerContainer.classList.contains('is-limited')) {
+            topPosition = document.documentElement.scrollTop;
+        } else {
+            window.scroll(0, topPosition);
+        }
+        setTimeout(()=>update(innerContainer, button, height), 1);
+    });
+    window.addEventListener('resize', ()=>update(innerContainer, button, height));
 }
-
 if (elements) {
-	[].forEach.call(elements, setup);
-}
+    [].forEach.call(elements, setup);
+}

package/dist/atoms/password-toggle/password-toggle.js

@@ -1,12 +1,10 @@
-'use strict';
-
-var elements = document.querySelectorAll('.js-toggle-input-type');
-
+"use strict";
+const elements = document.querySelectorAll('.js-toggle-input-type');
 if (elements) {
-	[].forEach.call(elements, function (element) {
-		element.addEventListener('click', function () {
-			var input = element.previousElementSibling;
-			input.type = input.type === 'password' ? 'text' : 'password';
-		});
-	});
-}
+    [].forEach.call(elements, (element)=>{
+        element.addEventListener('click', ()=>{
+            const input = element.previousElementSibling;
+            input.type = input.type === 'password' ? 'text' : 'password';
+        });
+    });
+}

package/dist/atoms/range/range.js

@@ -1,41 +1,34 @@
-'use strict';
-
-var ranges = document.querySelectorAll('.js-range-wrapper');
+"use strict";
+const ranges = document.querySelectorAll('.js-range-wrapper');
 function setValue(range, rangeValue, rangeInput) {
-	var val = range.value;
-	var min = range.min ? range.min : 0;
-	var max = range.max ? range.max : 100;
-	var newVal = Number((val - min) * 100 / (max - min));
-	rangeValue.innerHTML = val;
-
-	if (rangeInput) {
-		rangeInput.value = val;
-	}
-
-	// Sorta magic numbers based on size of the native UI thumb
-	rangeValue.style.left = 'calc(' + newVal + '% + (' + (8 - newVal * 0.15) + 'px))';
+    const val = range.value;
+    const min = range.min ? range.min : 0;
+    const max = range.max ? range.max : 100;
+    const newVal = Number((val - min) * 100 / (max - min));
+    rangeValue.innerHTML = val;
+    if (rangeInput) {
+        rangeInput.value = val;
+    }
+    // Sorta magic numbers based on size of the native UI thumb
+    rangeValue.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
 }
-
-ranges.forEach(function (wrap) {
-	var range = wrap.querySelector('.js-range');
-	var rangeValue = wrap.querySelector('.js-range-value');
-	var rangeInput = wrap.querySelector('.js-range-input');
-
-	range.addEventListener('input', function () {
-		setValue(range, rangeValue, rangeInput);
-		range.focus();
-	});
-
-	if (rangeInput) {
-		rangeInput.addEventListener('input', function () {
-			if (rangeInput.value !== '') {
-				range.value = rangeInput.value;
-				rangeValue.innerHTML = rangeInput.value;
-				setValue(range, rangeValue, rangeInput);
-			}
-			rangeInput.focus();
-		});
-	}
-
-	setValue(range, rangeValue, rangeInput);
-});
+ranges.forEach((wrap)=>{
+    const range = wrap.querySelector('.js-range');
+    const rangeValue = wrap.querySelector('.js-range-value');
+    const rangeInput = wrap.querySelector('.js-range-input');
+    range.addEventListener('input', ()=>{
+        setValue(range, rangeValue, rangeInput);
+        range.focus();
+    });
+    if (rangeInput) {
+        rangeInput.addEventListener('input', ()=>{
+            if (rangeInput.value !== '') {
+                range.value = rangeInput.value;
+                rangeValue.innerHTML = rangeInput.value;
+                setValue(range, rangeValue, rangeInput);
+            }
+            rangeInput.focus();
+        });
+    }
+    setValue(range, rangeValue, rangeInput);
+});