MediaWiki:Bracket.js: Difference between revisions

MediaWiki interface page
mNo edit summary
mNo edit summary
 
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');

Latest revision as of 21:45, 8 October 2023

$(document).ready(function(){
const matchElements = document.querySelectorAll('.match');
if (matchElements.length > 0) {
  // Add event listeners to each match element
  matchElements.forEach(matchElement => {
    matchElement.addEventListener('mouseover', () => {
      // Get the position of the .match element
      var matchRect
      if ( matchElement.querySelector(':scope > .reverse') ) {
          matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect();
      } else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}

      // Position the .match-details element to the right of the .match element
      const matchDetails = matchElement.querySelector('.match-details');
      if (matchDetails) {
        matchDetails.style.position = 'fixed';
        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.transform = 'translateY(-25%)';
        matchDetails.style.width = '360px';
      }
    });
  });
}
});