MediaWiki:Vector.js - Revision history

Karl: Replaced content with "/* All JavaScript here will be loaded for users of the Vector skin */"

2024-09-30T10:32:12Z

Replaced content with "All JavaScript here will be loaded for users of the Vector skin: "

← Older revision		Revision as of 10:32, 30 September 2024
Line 1:		Line 1:
	/* All JavaScript here will be loaded for users of the Vector skin */		/* All JavaScript here will be loaded for users of the Vector skin */

	~~//make destination of the logo hyperlink random~~
	~~let logos = document.querySelectorAll('.mw-logo');~~
	~~logos.forEach(function(logo) {~~
	~~logo.href = 'https://ooqa.karls.computer/Special:Random';~~
	~~});~~


	~~// add a little disorder~~
	~~function rand(min = -1, max = 1) {~~
	~~return Math.random() * (max - min) + min~~
	}
	~~document.querySelectorAll('ul li, .mw-logo > *').forEach( e => {~~
	~~e.style.rotate = `${ rand(-3, 3) }deg`~~
	})

	~~// Function to generate a random bright color~~
	~~function getRandomBrightColor() {~~
	~~const min = 200; // Minimum value for bright colors~~
	~~const r = Math.floor(Math.random() * (255 - min) + min);~~
	~~const g = Math.floor(Math.random() * (255 - min) + min);~~
	~~const b = Math.floor(Math.random() * (255 - min) + min);~~
	~~return `rgb(${r},${g},${b})`;~~
	}

	~~// Set the initial random background color for all elements~~
	~~function setBackgroundColors() {~~
	~~// Set for root variable --background-color-base (so also body)~~
	~~document.documentElement.style.setProperty('--background-color-base', getRandomBrightColor());~~
	~~// Set for .vector-pinned-container~~
	~~const pinnedContainers = document.querySelectorAll('.vector-pinned-container');~~
	~~pinnedContainers.forEach(element => {~~
	~~element.style.backgroundColor = getRandomBrightColor();~~
	~~});~~
	~~// Set for .vector-dropdown-content~~
	~~const dropdownContent = document.querySelectorAll('.vector-dropdown-content');~~
	~~dropdownContent.forEach(element => {~~
	~~element.style.backgroundColor = getRandomBrightColor();~~
	~~});~~
	}

	~~// Gradually change the background color for all elements~~
	~~function changeBackgroundGradually() {~~
	~~setInterval(() => {~~
	~~setBackgroundColors();~~
	~~}, 5000); // Change every 5 seconds~~
	}

	~~// Initialize the process~~
	~~setBackgroundColors();~~
	~~changeBackgroundGradually();~~

Karl at 10:17, 30 September 2024

2024-09-30T10:17:01Z

← Older revision		Revision as of 10:17, 30 September 2024
Line 30:		Line 30:
	document.documentElement.style.setProperty('--background-color-base', getRandomBrightColor());		document.documentElement.style.setProperty('--background-color-base', getRandomBrightColor());
	// Set for .vector-pinned-container		// Set for .vector-pinned-container
	const ~~pinnedContainer~~ = document.~~querySelector~~('.vector-pinned-container');		const pinnedContainers = document.querySelectorAll('.vector-pinned-container');
	if (~~pinnedContainer) pinnedContainer~~.style.backgroundColor = getRandomBrightColor();		pinnedContainers.forEach(element => {
			element.style.backgroundColor = getRandomBrightColor();
			});
	// Set for .vector-dropdown-content		// Set for .vector-dropdown-content
	const dropdownContent = document.querySelectorAll('.vector-dropdown-content');		const dropdownContent = document.querySelectorAll('.vector-dropdown-content');

Karl at 10:15, 30 September 2024

2024-09-30T10:15:16Z

← Older revision		Revision as of 10:15, 30 September 2024
Line 27:		Line 27:
	// Set the initial random background color for all elements		// Set the initial random background color for all elements
	function setBackgroundColors() {		function setBackgroundColors() {
	// Set for body		// Set for root variable --background-color-base (so also body)
	document.~~body~~.style.~~backgroundColor =~~ getRandomBrightColor();		document.documentElement.style.setProperty('--background-color-base', getRandomBrightColor());
	// Set for .vector-pinned-container		// Set for .vector-pinned-container
	const pinnedContainer = document.querySelector('.vector-pinned-container');		const pinnedContainer = document.querySelector('.vector-pinned-container');

Karl at 10:12, 30 September 2024

2024-09-30T10:12:17Z

← Older revision		Revision as of 10:12, 30 September 2024
Line 26:		Line 26:

	// Set the initial random background color for all elements		// Set the initial random background color for all elements
	function ~~setInitialBackgroundColor~~() {		function setBackgroundColors() {
	~~const randomColor = getRandomBrightColor();~~
	// Set for body		// Set for body
	document.body.style.backgroundColor = ~~randomColor~~;		document.body.style.backgroundColor = getRandomBrightColor();
	// Set for .vector-pinned-container		// Set for .vector-pinned-container
	const pinnedContainer = document.querySelector('.vector-pinned-container');		const pinnedContainer = document.querySelector('.vector-pinned-container');
	if (pinnedContainer) pinnedContainer.style.backgroundColor = ~~randomColor~~;		if (pinnedContainer) pinnedContainer.style.backgroundColor = getRandomBrightColor();
	// Set for .vector-dropdown-content		// Set for .vector-dropdown-content
	const dropdownContent = document.querySelectorAll('.vector-dropdown-content');		const dropdownContent = document.querySelectorAll('.vector-dropdown-content');
	dropdownContent.forEach(element => {		dropdownContent.forEach(element => {
	element.style.backgroundColor = ~~randomColor~~;		element.style.backgroundColor = getRandomBrightColor();
	});		});
	}		}
Line 43:		Line 42:
	function changeBackgroundGradually() {		function changeBackgroundGradually() {
	setInterval(() => {		setInterval(() => {
	~~const randomColor = getRandomBrightColor~~();		setBackgroundColors();

	~~// Change for body~~
	~~document.body.style.backgroundColor = randomColor;~~

	~~// Change for .vector-pinned-container~~
	~~const pinnedContainer = document.querySelector('.vector-pinned-container');~~
	~~if (pinnedContainer) pinnedContainer.style.backgroundColor = randomColor;~~

	~~// Change for .vector-dropdown-content~~
	~~const dropdownContent = document.querySelectorAll('.vector-dropdown-content');~~
	~~dropdownContent.forEach(element => {~~
	~~element.style.backgroundColor = randomColor;~~
	});
	}, 5000); // Change every 5 seconds		}, 5000); // Change every 5 seconds
	}		}

	// Initialize the process		// Initialize the process
	~~setInitialBackgroundColor~~();		setBackgroundColors();
	changeBackgroundGradually();		changeBackgroundGradually();

Noam at 10:05, 30 September 2024

2024-09-30T10:05:57Z

← Older revision		Revision as of 10:05, 30 September 2024
Line 24:		Line 24:
	return `rgb(${r},${g},${b})`;		return `rgb(${r},${g},${b})`;
	}		}
	// Set the initial random background color
			// Set the initial random background color for all elements
	function setInitialBackgroundColor() {		function setInitialBackgroundColor() {
	const randomColor = getRandomBrightColor();		const randomColor = getRandomBrightColor();
	document.~~documentElement~~.style.~~setProperty~~('--~~background~~-~~color~~-~~base~~', randomColor);		// Set for body
			document.body.style.backgroundColor = randomColor;
			// Set for .vector-pinned-container
			const pinnedContainer = document.querySelector('.vector-pinned-container');
			if (pinnedContainer) pinnedContainer.style.backgroundColor = randomColor;
			// Set for .vector-dropdown-content
			const dropdownContent = document.querySelectorAll('.vector-dropdown-content');
			dropdownContent.forEach(element => {
			element.style.backgroundColor = randomColor;
			});
	}		}
	// Gradually change the background color
			// Gradually change the background color for all elements
	function changeBackgroundGradually() {		function changeBackgroundGradually() {
	setInterval(() => {		setInterval(() => {
	const randomColor = getRandomBrightColor();		const randomColor = getRandomBrightColor();
	document.~~documentElement~~.style.~~setProperty~~('--~~background~~-~~color~~-~~base~~', randomColor);
			// Change for body
			document.body.style.backgroundColor = randomColor;

			// Change for .vector-pinned-container
			const pinnedContainer = document.querySelector('.vector-pinned-container');
			if (pinnedContainer) pinnedContainer.style.backgroundColor = randomColor;

			// Change for .vector-dropdown-content
			const dropdownContent = document.querySelectorAll('.vector-dropdown-content');
			dropdownContent.forEach(element => {
			element.style.backgroundColor = randomColor;
			});
	}, 5000); // Change every 5 seconds		}, 5000); // Change every 5 seconds
	}		}

	// Initialize the process		// Initialize the process
	setInitialBackgroundColor();		setInitialBackgroundColor();
	changeBackgroundGradually();		changeBackgroundGradually();

Noam at 10:00, 30 September 2024

2024-09-30T10:00:36Z

← Older revision		Revision as of 10:00, 30 September 2024
Line 16:		Line 16:
	})		})

	// ~~Background~~ color ~~randomizer~~		// Function to generate a random bright color
	function getRandomBrightColor() {		function getRandomBrightColor() {
	const min = 200; // Minimum value for bright colors		const min = 200; // Minimum value for bright colors
Line 33:		Line 33:
	setInterval(() => {		setInterval(() => {
	const randomColor = getRandomBrightColor();		const randomColor = getRandomBrightColor();
	~~document.documentElement.style.transition = "background-color 2s linear"; // Smooth transition~~
	document.documentElement.style.setProperty('--background-color-base', randomColor);		document.documentElement.style.setProperty('--background-color-base', randomColor);
	}, 5000); // Change every 5 seconds		}, 5000); // Change every 5 seconds

Noam at 09:55, 30 September 2024

2024-09-30T09:55:10Z

← Older revision		Revision as of 09:55, 30 September 2024
Line 16:		Line 16:
	})		})

	// ~~Function to generate a random bright~~ color		// Background color randomizer
	function getRandomBrightColor() {		function getRandomBrightColor() {
	const min = 200; // Minimum value for bright colors		const min = 200; // Minimum value for bright colors
Line 24:		Line 24:
	return `rgb(${r},${g},${b})`;		return `rgb(${r},${g},${b})`;
	}		}

	// Set the initial random background color		// Set the initial random background color
	function setInitialBackgroundColor() {		function setInitialBackgroundColor() {
	const randomColor = getRandomBrightColor();		const randomColor = getRandomBrightColor();
	document.~~body~~.style.~~backgroundColor =~~ randomColor;		document.documentElement.style.setProperty('--background-color-base', randomColor);
	}		}

	// Gradually change the background color		// Gradually change the background color
	function changeBackgroundGradually() {		function changeBackgroundGradually() {
	setInterval(() => {		setInterval(() => {
	const randomColor = getRandomBrightColor();		const randomColor = getRandomBrightColor();
	document.~~body~~.style.transition = "background-color 2s linear"; // Smooth transition ~~over 2 seconds~~		document.documentElement.style.transition = "background-color 2s linear"; // Smooth transition
	document.~~body~~.style.~~backgroundColor =~~ randomColor;		document.documentElement.style.setProperty('--background-color-base', randomColor);
	}, 5000); // Change every 5 seconds		}, 5000); // Change every 5 seconds
	}		}

	// Initialize the process		// Initialize the process
	setInitialBackgroundColor();		setInitialBackgroundColor();
	changeBackgroundGradually();		changeBackgroundGradually();

Noam at 09:52, 30 September 2024

2024-09-30T09:52:50Z

← Older revision		Revision as of 09:52, 30 September 2024
Line 15:		Line 15:
	e.style.rotate = `${ rand(-3, 3) }deg`		e.style.rotate = `${ rand(-3, 3) }deg`
	})		})

			// Function to generate a random bright color
			function getRandomBrightColor() {
			const min = 200; // Minimum value for bright colors
			const r = Math.floor(Math.random() * (255 - min) + min);
			const g = Math.floor(Math.random() * (255 - min) + min);
			const b = Math.floor(Math.random() * (255 - min) + min);
			return `rgb(${r},${g},${b})`;
			}

			// Set the initial random background color
			function setInitialBackgroundColor() {
			const randomColor = getRandomBrightColor();
			document.body.style.backgroundColor = randomColor;
			}

			// Gradually change the background color
			function changeBackgroundGradually() {
			setInterval(() => {
			const randomColor = getRandomBrightColor();
			document.body.style.transition = "background-color 2s linear"; // Smooth transition over 2 seconds
			document.body.style.backgroundColor = randomColor;
			}, 5000); // Change every 5 seconds
			}

			// Initialize the process
			setInitialBackgroundColor();
			changeBackgroundGradually();

Noam: Ramdomizing the link destination of logo

2024-09-30T09:46:58Z

Ramdomizing the link destination of logo

← Older revision		Revision as of 09:46, 30 September 2024
Line 1:		Line 1:
	/* All JavaScript here will be loaded for users of the Vector skin */		/* All JavaScript here will be loaded for users of the Vector skin */

			//make destination of the logo hyperlink random
			let logos = document.querySelectorAll('.mw-logo');
			logos.forEach(function(logo) {
			logo.href = 'https://ooqa.karls.computer/Special:Random';
			});


	// add a little disorder		// add a little disorder

Karl at 09:28, 30 September 2024

2024-09-30T09:28:54Z

← Older revision		Revision as of 09:28, 30 September 2024
Line 6:		Line 6:
	}		}
	document.querySelectorAll('ul li, .mw-logo > *').forEach( e => {		document.querySelectorAll('ul li, .mw-logo > *').forEach( e => {
	e.style.rotate = `${ rand(-2, 2) }deg`		e.style.rotate = `${ rand(-3, 3) }deg`
	})		})