54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
|
|
import { Webcomponent } from "./webcomponent.js";
|
|
|
|
const config = {
|
|
item: ".tab-item",
|
|
content: ".tab-content",
|
|
activeClass: "ui-tab-active",
|
|
template: {
|
|
fetch : false
|
|
}
|
|
};
|
|
|
|
class UiTabs extends Webcomponent {
|
|
constructor() {
|
|
super(config);
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
window.addEventListener("hashchange", this.hashChange.bind(this), false);
|
|
|
|
//this.querySelectorAll(this.config.item).forEach(ele => ele.addEventListener("click", this.clickTab.bind(this)));
|
|
|
|
if (window.location.hash) {
|
|
let eve = new Event("click");
|
|
eve.newURL = window.location.hash;
|
|
this.hashChange(eve);
|
|
}
|
|
}
|
|
|
|
hashChange(e) {
|
|
let anchor = e.newURL.split('#')[1];
|
|
|
|
document.querySelectorAll("#" + anchor + this.config.content).forEach(function(content) {
|
|
content.parentNode.querySelectorAll(this.config.content + "." + this.config.activeClass).forEach(ele => ele.classList.remove(this.config.activeClass));
|
|
content.classList.add(this.config.activeClass);
|
|
}.bind(this));
|
|
|
|
let element = this.querySelector("." + this.config.activeClass);
|
|
element ? element.classList.remove(this.config.activeClass) : null;
|
|
|
|
element = this.querySelector(this.config.item + `[href="#${anchor}"]`);
|
|
element ? element.closest('div').classList.add(this.config.activeClass) : null;
|
|
}
|
|
|
|
clickTab(e) {
|
|
e.preventDefault();
|
|
history.pushState(null, null, this.getAttribute('href'));
|
|
}
|
|
}
|
|
|
|
export { UiTabs };
|