MediaWiki:Bracket.js - Revision history

Couchor at 21:45, 8 October 2023

2023-10-08T21:45:29Z

← Older revision		Revision as of 21:45, 8 October 2023
Line 10:		Line 10:
	matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect();		matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect();
	} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}		} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}
	~~console.log(matchElement.querySelector('.reverse'))~~
	~~console.log(matchRect)~~
	// Position the .match-details element to the right of the .match element		// Position the .match-details element to the right of the .match element
	const matchDetails = matchElement.querySelector('.match-details');		const matchDetails = matchElement.querySelector('.match-details');

Couchor at 21:44, 8 October 2023

2023-10-08T21:44:01Z

← Older revision		Revision as of 21:44, 8 October 2023
Line 7:		Line 7:
	// Get the position of the .match element		// Get the position of the .match element
	var matchRect		var matchRect
	if ( matchElement.querySelector('.reverse') ) {		if ( matchElement.querySelector(':scope > .reverse') ) {
	matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect();		matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect();
	} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}		} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}

Couchor at 21:41, 8 October 2023

2023-10-08T21:41:50Z

← Older revision		Revision as of 21:41, 8 October 2023
Line 8:		Line 8:
	var matchRect		var matchRect
	if ( matchElement.querySelector('.reverse') ) {		if ( matchElement.querySelector('.reverse') ) {
	matchRect = matchElement.querySelector('> .team.reverse').getBoundingClientRect();		matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect();
	} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}		} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}
	console.log(matchElement.querySelector('.reverse'))		console.log(matchElement.querySelector('.reverse'))

Couchor at 21:39, 8 October 2023

2023-10-08T21:39:00Z

← Older revision		Revision as of 21:39, 8 October 2023
Line 8:		Line 8:
	var matchRect		var matchRect
	if ( matchElement.querySelector('.reverse') ) {		if ( matchElement.querySelector('.reverse') ) {
	matchRect = matchElement.querySelector('.team.reverse').getBoundingClientRect();		matchRect = matchElement.querySelector('> .team.reverse').getBoundingClientRect();
	} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}		} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}
	console.log(matchElement.querySelector('.reverse'))		console.log(matchElement.querySelector('.reverse'))

Couchor at 21:35, 8 October 2023

2023-10-08T21:35:32Z

← Older revision		Revision as of 21:35, 8 October 2023
Line 10:		Line 10:
	matchRect = matchElement.querySelector('.team.reverse').getBoundingClientRect();		matchRect = matchElement.querySelector('.team.reverse').getBoundingClientRect();
	} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}		} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}
			console.log(matchElement.querySelector('.reverse'))
			console.log(matchRect)
	// Position the .match-details element to the right of the .match element		// Position the .match-details element to the right of the .match element
	const matchDetails = matchElement.querySelector('.match-details');		const matchDetails = matchElement.querySelector('.match-details');

Couchor at 21:34, 8 October 2023

2023-10-08T21:34:15Z

← Older revision		Revision as of 21:34, 8 October 2023
Line 6:		Line 6:
	matchElement.addEventListener('mouseover', () => {		matchElement.addEventListener('mouseover', () => {
	// Get the position of the .match element		// Get the position of the .match element
	~~const~~ matchRect = matchElement.querySelector('.team').getBoundingClientRect();		var matchRect
			if ( matchElement.querySelector('.reverse') ) {
			matchRect = matchElement.querySelector('.team.reverse').getBoundingClientRect();
			} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}

	// Position the .match-details element to the right of the .match element		// Position the .match-details element to the right of the .match element

Couchor at 21:31, 8 October 2023

2023-10-08T21:31:26Z

← Older revision		Revision as of 21:31, 8 October 2023
Line 6:		Line 6:
	matchElement.addEventListener('mouseover', () => {		matchElement.addEventListener('mouseover', () => {
	// Get the position of the .match element		// Get the position of the .match element
	const matchRect = matchElement.getBoundingClientRect();		const matchRect = matchElement.querySelector('.team').getBoundingClientRect();

	// Position the .match-details element to the right of the .match element		// Position the .match-details element to the right of the .match element
Line 12:		Line 12:
	if (matchDetails) {		if (matchDetails) {
	matchDetails.style.position = 'fixed';		matchDetails.style.position = 'fixed';
	matchDetails.style.top = `${matchRect.top}px`; // Keep the ~~top~~ position the same as .match		matchDetails.style.top = `${matchRect.top}px`; // Keep the bottom position the same as .match
	matchDetails.style.left = `${matchRect.right}px`; // Position to the right of .match		matchDetails.style.left = `${matchRect.right}px`; // Position to the right of .match
	matchDetails.style.transform = 'translateY(-25%)';		matchDetails.style.transform = 'translateY(-25%)';

Couchor at 21:16, 8 October 2023

2023-10-08T21:16:53Z

← Older revision		Revision as of 21:16, 8 October 2023
Line 15:		Line 15:
	matchDetails.style.left = `${matchRect.right}px`; // Position to the right of .match		matchDetails.style.left = `${matchRect.right}px`; // Position to the right of .match
	matchDetails.style.transform = 'translateY(-25%)';		matchDetails.style.transform = 'translateY(-25%)';
			matchDetails.style.width = '360px';
	}		}
	});		});

Couchor at 21:13, 8 October 2023

2023-10-08T21:13:17Z

← Older revision		Revision as of 21:13, 8 October 2023
Line 1:		Line 1:
	$(document).ready(function(){		$(document).ready(function(){
	const matchElements = document.querySelectorAll('.match');		const matchElements = document.querySelectorAll('.match');
	~~console.log('HALLOOO')~~
	if (matchElements.length > 0) {		if (matchElements.length > 0) {
	~~console.log('Olen sees')~~
	// Add event listeners to each match element		// Add event listeners to each match element
	matchElements.forEach(matchElement => {		matchElements.forEach(matchElement => {
Line 9:		Line 7:
	// Get the position of the .match element		// Get the position of the .match element
	const matchRect = matchElement.getBoundingClientRect();		const matchRect = matchElement.getBoundingClientRect();
	~~console.log('Huuuuver')~~
	// Position the .match-details element to the right of the .match element		// Position the .match-details element to the right of the .match element
	const matchDetails = matchElement.querySelector('.match-details');		const matchDetails = matchElement.querySelector('.match-details');
Line 18:		Line 16:
	matchDetails.style.transform = 'translateY(-25%)';		matchDetails.style.transform = 'translateY(-25%)';
	}		}
	~~});~~
	});		});
	});		});
	}		}
	});		});

Couchor at 21:12, 8 October 2023

2023-10-08T21:12:44Z

← Older revision		Revision as of 21:12, 8 October 2023
Line 1:		Line 1:
	$(document).ready(function(){		$(document).ready(function(){
	const matchElements = document.querySelectorAll('.match');		const matchElements = document.querySelectorAll('.match');
			console.log('HALLOOO')
	if (matchElements.length > 0) {		if (matchElements.length > 0) {
			console.log('Olen sees')
	// Add event listeners to each match element		// Add event listeners to each match element
	matchElements.forEach(matchElement => {		matchElements.forEach(matchElement => {
Line 7:		Line 9:
	// Get the position of the .match element		// Get the position of the .match element
	const matchRect = matchElement.getBoundingClientRect();		const matchRect = matchElement.getBoundingClientRect();
			console.log('Huuuuver')
	// Position the .match-details element to the right of the .match element		// Position the .match-details element to the right of the .match element
	const matchDetails = matchElement.querySelector('.match-details');		const matchDetails = matchElement.querySelector('.match-details');