new version

CHANGELOG.md

@@ -1,12 +1,15 @@
 <!-- deno-fmt-ignore-file -->
 
 # Change Log
-
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.1.0] - 2023-10-21
+### Added
+- New static option `Tab.changeHistory` to prevent changing the hash in the url.
+
 ## [1.0.2] - 2022-01-05
 ### Fixed
 - Prevent inital scroll in Chrome.
@@ -18,6 +21,7 @@ project adheres to [Semantic Versioning](http://semver.org/).
 ## [1.0.0] - 2021-11-20
 First version with basic features
 
+[1.1.0]: https://github.com/oom-components/tab/compare/v1.0.2...v1.1.0
 [1.0.2]: https://github.com/oom-components/tab/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/oom-components/tab/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/oom-components/tab/releases/tag/v1.0.0

demo/script.js

@@ -1,3 +1,4 @@
 import Tab from "../src/tab.js";
 
+Tab.changeHistory = false;
 customElements.define("oom-tab", Tab);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oom/tab",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Tab panel with progressive enhancement in mind",
   "browser": "src/tab.js",
   "modules.root": "src",

src/tab.js

@@ -1,4 +1,6 @@
 export default class Tab extends HTMLElement {
+  static changeHistory = true;
+
   connectedCallback() {
     checkA11y(this);
 
@@ -8,17 +10,17 @@ export default class Tab extends HTMLElement {
     this.tabs.forEach((tab) => {
       tab.addEventListener("click", (e) => {
         e.preventDefault();
-        setTab(this, tab);
+        setTab(this, tab, Tab.changeHistory);
       });
 
       tab.addEventListener("keydown", (e) => {
         switch (e.which) {
           case 37: //left
-            moveIndex(this, -1);
+            moveIndex(this, -1, Tab.changeHistory);
             break;
 
           case 39: //right
-            moveIndex(this, 1);
+            moveIndex(this, 1, Tab.changeHistory);
             break;
 
           case 40: //down
@@ -43,7 +45,7 @@ export default class Tab extends HTMLElement {
 
     addEventListener(
       "popstate",
-      () => setByHash(this, document.location.hash),
+      () => setByHash(this, document.location.hash, Tab.changeHistory),
     );
 
     if (!setByHash(this, document.location.hash)) {
@@ -73,11 +75,11 @@ export default class Tab extends HTMLElement {
   }
 }
 
-function moveIndex(el, increment) {
+function moveIndex(el, increment, changeHistory = true) {
   const index = el.tabs.indexOf(el.tab) + increment;
 
   if (el.tabs[index]) {
-    setTab(el, el.tabs[index]);
+    setTab(el, el.tabs[index], changeHistory);
   }
 }