diff --git a/CHANGELOG.md b/CHANGELOG.md index 3060691..aa0b943 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,12 +1,15 @@ # 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 diff --git a/demo/script.js b/demo/script.js index ed95393..25af072 100644 --- a/demo/script.js +++ b/demo/script.js @@ -1,3 +1,4 @@ import Tab from "../src/tab.js"; +Tab.changeHistory = false; customElements.define("oom-tab", Tab); diff --git a/package.json b/package.json index b4ab09a..4743832 100644 --- a/package.json +++ b/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", diff --git a/src/tab.js b/src/tab.js index 76e4a6d..8dc8279 100644 --- a/src/tab.js +++ b/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); } }