MediaWiki:InfinityBar.js - Versionsgeschichte

Murmelgrumpf am 11. Mai 2020 um 23:18 Uhr

2020-05-11T23:18:43Z

← Nächstältere Version	Version vom 12. Mai 2020, 01:18 Uhr
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");
		})();

Murmelgrumpf: Die Seite wurde geleert.

2020-05-11T23:14:49Z

Die Seite wurde geleert.

← Nächstältere Version		Version vom 12. Mai 2020, 01:14 Uhr
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");~~
	~~})();~~

Murmelgrumpf am 24. April 2020 um 13:54 Uhr

2020-04-24T13:54:45Z

← Nächstältere Version	Version vom 24. April 2020, 15:54 Uhr
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");
		})();

Murmelgrumpf: Die Seite wurde geleert.

2020-04-24T13:54:25Z

Die Seite wurde geleert.

← Nächstältere Version		Version vom 24. April 2020, 15:54 Uhr
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");~~
	~~})();~~

ViMaSter am 2. Dezember 2018 um 22:39 Uhr

2018-12-02T22:39:39Z

← Nächstältere Version		Version vom 3. Dezember 2018, 00:39 Uhr
Zeile 36:		Zeile 36:
	barElement.style.minWidth = barElement.clientWidth + "px";		barElement.style.minWidth = barElement.clientWidth + "px";
	warpper.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";		barElement.style.minHeight = barElement.clientHeight + "px";
	warpper.style.top = this.calculateBarHeight(barElement) + "px";		warpper.style.top = this.calculateBarHeight(barElement) + "px";

ViMaSter: Änderung 9384 von ViMaSter (Diskussion) rückgängig gemacht.

2018-12-02T22:38:01Z

Änderung 9384 von ViMaSter (Diskussion) rückgängig gemacht.

← Nächstältere Version		Version vom 3. Dezember 2018, 00:38 Uhr
Zeile 48:		Zeile 48:
	{		{
	bar.querySelectorAll(".categoryListTitle").forEach((title) => {		bar.querySelectorAll(".categoryListTitle").forEach((title) => {
	title~~.parentNode~~.addEventListener("click", function(mouseEvent) {		title.addEventListener("click", function(mouseEvent) {
	const wrapper = mouseEvent.target.parentNode.parentNode;		const wrapper = mouseEvent.target.parentNode.parentNode.parentNode;
	wrapper.parentNode.style.minHeight = wrapper.clientHeight + "px";		wrapper.parentNode.style.minHeight = wrapper.clientHeight + "px";
	this.elements.forEach((bar)=>{bar.querySelector(".wrapper").style.top = this.calculateBarHeight(bar) + "px";});		this.elements.forEach((bar)=>{bar.querySelector(".wrapper").style.top = this.calculateBarHeight(bar) + "px";});

ViMaSter am 2. Dezember 2018 um 22:35 Uhr

2018-12-02T22:35:50Z

← Nächstältere Version		Version vom 3. Dezember 2018, 00:35 Uhr
Zeile 48:		Zeile 48:
	{		{
	bar.querySelectorAll(".categoryListTitle").forEach((title) => {		bar.querySelectorAll(".categoryListTitle").forEach((title) => {
	title.addEventListener("click", function(mouseEvent) {		title.parentNode.addEventListener("click", function(mouseEvent) {
	const wrapper = mouseEvent.target~~.parentNode~~.parentNode.parentNode;		const wrapper = mouseEvent.target.parentNode.parentNode;
	wrapper.parentNode.style.minHeight = wrapper.clientHeight + "px";		wrapper.parentNode.style.minHeight = wrapper.clientHeight + "px";
	this.elements.forEach((bar)=>{bar.querySelector(".wrapper").style.top = this.calculateBarHeight(bar) + "px";});		this.elements.forEach((bar)=>{bar.querySelector(".wrapper").style.top = this.calculateBarHeight(bar) + "px";});

ViMaSter am 9. November 2018 um 15:26 Uhr

2018-11-09T15:26:33Z

← Nächstältere Version		Version vom 9. November 2018, 17:26 Uhr
Zeile 22:		Zeile 22:
	this.elements.forEach((barElement) => {		this.elements.forEach((barElement) => {
	const warpper = barElement.querySelector(".wrapper");		const warpper = barElement.querySelector(".wrapper");
	if ((window.pageYOffset + this.calculateBarHeight(barElement) ~~- barElement.getBoundingClientRect().height~~) <= (barElement.getBoundingClientRect().top - document.body.getBoundingClientRect().top)) {		if ((window.pageYOffset + this.calculateBarHeight(barElement)) <= (barElement.getBoundingClientRect().top - document.body.getBoundingClientRect().top)) {
	if (warpper.classList.contains("sticky")) {		if (warpper.classList.contains("sticky")) {
	this.activeElements.splice(this.activeElements.indexOf(barElement), 1);		this.activeElements.splice(this.activeElements.indexOf(barElement), 1);

ViMaSter am 9. November 2018 um 15:20 Uhr

2018-11-09T15:20:13Z

← Nächstältere Version		Version vom 9. November 2018, 17:20 Uhr
Zeile 65:		Zeile 65:
	return currentHeight;		return currentHeight;
	}		}
	currentHeight = this.activeElements[i].clientHeight - 1;		currentHeight += this.activeElements[i].clientHeight - 1;
	}		}
	return currentHeight;		return currentHeight;

ViMaSter: Ausloeserklasse geaendert

2018-11-09T13:46:06Z

Ausloeserklasse geaendert

← Nächstältere Version		Version vom 9. November 2018, 15:46 Uhr
Zeile 71:		Zeile 71:
	}		}

	const infinityBar = new InfinityBar(".~~inhalt~~");		const infinityBar = new InfinityBar(".fixed-header");
	})();		})();