|
|
| Zeile 1: |
Zeile 1: |
| (()=>{
| |
| class InfinityBar
| |
| {
| |
| constructor(selector)
| |
| {
| |
| this.selector = selector;
| |
| this.elements = [];
| |
| this.activeElements = [];
| |
|
| |
|
| mw.hook( 'wikipage.content' ).add( this.applyToDom.bind(this) );
| |
| }
| |
|
| |
| applyToDom()
| |
| {
| |
| this.elements = document.querySelectorAll(this.selector);
| |
| this.elements.forEach(this.onTitleClick.bind(this));
| |
| window.addEventListener("scroll", this.scrollHandler.bind(this));
| |
| }
| |
|
| |
| scrollHandler()
| |
| {
| |
| this.elements.forEach((barElement) => {
| |
| const warpper = barElement.querySelector(".wrapper");
| |
| if ((window.pageYOffset + this.calculateBarHeight(barElement)) <= (barElement.getBoundingClientRect().top - document.body.getBoundingClientRect().top)) {
| |
| if (warpper.classList.contains("sticky")) {
| |
| this.activeElements.splice(this.activeElements.indexOf(barElement), 1);
| |
| barElement.style.minWidth = "";
| |
| warpper.style.minWidth = "";
| |
| barElement.style.minHeight = barElement.clientHeight + "px";
| |
| warpper.style.top = "";
| |
| warpper.classList.remove("sticky");
| |
| }
| |
| }
| |
| if ((window.pageYOffset + this.calculateBarHeight(barElement)) > (barElement.getBoundingClientRect().top - document.body.getBoundingClientRect().top)) {
| |
| if (!warpper.classList.contains("sticky")) {
| |
| barElement.style.minWidth = barElement.clientWidth + "px";
| |
| warpper.style.minWidth = barElement.clientWidth + "px";
| |
| barElement.style.width = barElement.clientWidth + "px";
| |
| warpper.style.width = barElement.clientWidth + "px";
| |
| barElement.style.minHeight = barElement.clientHeight + "px";
| |
| warpper.style.top = this.calculateBarHeight(barElement) + "px";
| |
| this.activeElements.push(barElement);
| |
| warpper.classList.add("sticky");
| |
| }
| |
| }
| |
| });
| |
| }
| |
|
| |
| onTitleClick(bar)
| |
| {
| |
| bar.querySelectorAll(".categoryListTitle").forEach((title) => {
| |
| title.addEventListener("click", function(mouseEvent) {
| |
| const wrapper = mouseEvent.target.parentNode.parentNode.parentNode;
| |
| wrapper.parentNode.style.minHeight = wrapper.clientHeight + "px";
| |
| this.elements.forEach((bar)=>{bar.querySelector(".wrapper").style.top = this.calculateBarHeight(bar) + "px";});
| |
| }.bind(this));
| |
| });
| |
| }
| |
|
| |
| calculateBarHeight(elementToStop)
| |
| {
| |
| let currentHeight = 0;
| |
| for (let i = 0; i < this.activeElements.length; i++)
| |
| {
| |
| if (this.activeElements[i] == elementToStop)
| |
| {
| |
| return currentHeight;
| |
| }
| |
| currentHeight += this.activeElements[i].clientHeight - 1;
| |
| }
| |
| return currentHeight;
| |
| }
| |
| }
| |
|
| |
| const infinityBar = new InfinityBar(".fixed-header");
| |
| })();
| |