@internetstiftelsen/styleguide 3.0.12 → 3.0.13

package/dist/atoms/range/range.js

@@ -1,13 +1,17 @@
 'use strict';
 
 var ranges = document.querySelectorAll('.js-range-wrapper');
-function setValue(range, rangeValue) {
+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))';
 }
@@ -15,11 +19,23 @@ function setValue(range, rangeValue) {
 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);
+		setValue(range, rangeValue, rangeInput);
 		range.focus();
 	});
 
-	setValue(range, rangeValue);
+	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);
 });

package/dist/organisms/tabs/tabs.js

@@ -2,6 +2,13 @@
 
 window.a11yTabs = function tabsComponentIIFE(global, document) {
 	var tabInstances = new WeakMap();
+	var className = 'o-tab-list';
+	var tablistElement = document.querySelector('.js-' + className);
+	var updateURLFromHash = void 0;
+
+	if (tablistElement) {
+		updateURLFromHash = tablistElement.getAttribute('data-update-url');
+	}
 
 	/**
  * Instantiates the component
@@ -13,8 +20,6 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 			return;
 		}
 
-		var className = 'o-tab-list';
-		var tablistElement = document.querySelector('.js-' + className);
 		var namespace = getComputedStyle(tablistElement, ':before').content.replace(/["']/g, '');
 
 		var defaults = {
@@ -46,7 +51,6 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 
 		this.tabLinks.forEach(function (item, index) {
 			item.setAttribute('role', 'tab');
-			// item.setAttribute('id', `tab${index}`);
 
 			if (index > 0) {
 				item.setAttribute('tabindex', '-1');
@@ -71,14 +75,10 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 
 		tabInstances.set(this.element, this);
 
-		this.eventCallback = handleEvents.bind(this); // eslint-disable-line
-		this.tabList.addEventListener('click', this.eventCallback, false);
-		this.tabList.addEventListener('keydown', this.eventCallback, false);
-
-		tabInstances.set(this.element, this);
-
-		// New line to select the correct tab based on URL hash
-		this.selectTabFromHash(); // Call the new method after setup
+		// Select the correct tab based on URL hash
+		if (updateURLFromHash) {
+			this.selectTabFromHash();
+		}
 	};
 
 	TabComponent.prototype = {
@@ -116,16 +116,18 @@ window.a11yTabs = function tabsComponentIIFE(global, document) {
 			this.tabLinks[newIndex].setAttribute('aria-selected', 'true');
 			this.tabItems[newIndex].setAttribute('data-tab-active', '');
 			this.tabLinks[newIndex].removeAttribute('tabindex');
-			this.tabLinks[newIndex].focus();
+			this.tabLinks[newIndex].focus(); // Focus the newly selected tab
 
 			// update tab panels
 			this.tabPanels[currentIndex].setAttribute('hidden', '');
 			this.tabPanels[newIndex].removeAttribute('hidden');
 
-			// After updating tabs and tab panels, add the URL update feature
 			// Update the browser's URL hash to reflect the current tab's ID
 			var selectedTabId = this.tabLinks[newIndex].id;
-			global.history.pushState(null, '', '#' + selectedTabId);
+
+			if (updateURLFromHash) {
+				window.history.pushState(null, '', '#' + selectedTabId);
+			}
 
 			this.currentIndex = newIndex;
 

package/package.json

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