MediaWiki:Common.js - Revision history

Keita at 16:13, 4 September 2025

2025-09-04T16:13:01Z

@@ Line 256: / Line 256: @@
          });
      });
 });

Keita at 15:23, 4 September 2025

2025-09-04T15:23:11Z

@@ Line 268: / Line 268: @@
      if (container) {
          const cards = container.querySelectorAll('.category-card');
          cards.forEach(card => {
@@ Line 275: / Line 282: @@
                          otherCard.style.setProperty('opacity', '0.5', 'important');
                      } else {
                          otherCard.style.setProperty('opacity', '1', 'important');
+                     }
@@ Line 282: / Line 288: @@
          });
          container.addEventListener('mouseleave', function() {
-             cards.forEach(card => {
+             resetAllCards();
          });
+     }
 });

Keita at 15:21, 4 September 2025

2025-09-04T15:21:04Z

← Older revision		Revision as of 15:21, 4 September 2025
Line 263:		Line 263:

	/* KEITA MENU CARD NEW VERSION */		/* KEITA MENU CARD NEW VERSION */

	$(document).ready(function() {		$(document).ready(function() {
	const container = document.querySelector('.popular-categories');		const container = document.querySelector('.popular-categories');
Line 273:		Line 274:
	if (otherCard !== this) {		if (otherCard !== this) {
	otherCard.style.setProperty('opacity', '0.5', 'important');		otherCard.style.setProperty('opacity', '0.5', 'important');
			} else {
			// Make sure the hovered card has full opacity
			otherCard.style.setProperty('opacity', '1', 'important');
	}		}
	});		});

Keita at 15:19, 4 September 2025

2025-09-04T15:19:03Z

← Older revision		Revision as of 15:19, 4 September 2025
Line 263:		Line 263:

	/* KEITA MENU CARD NEW VERSION */		/* KEITA MENU CARD NEW VERSION */
	~~<script>~~		$(document).ready(function() {

	document.~~addEventListener~~(~~'DOMContentLoaded',~~ function() {
	const container = document.querySelector('.popular-categories');		const container = document.querySelector('.popular-categories');
	const cards = container.querySelectorAll('.category-card');		if (container) {
			const cards = container.querySelectorAll('.category-card');
	~~container~~.addEventListener('mouseenter', function(e) {
	if (e.~~target~~.~~classList~~.~~contains~~('~~category-card~~')) {		cards.forEach(card => {
			card.addEventListener('mouseenter', function() {
			cards.forEach(otherCard => {
			if (otherCard !== this) {
			otherCard.style.setProperty('opacity', '0.5', 'important');
			}
			});
			});
			});

			container.addEventListener('mouseleave', function() {
	cards.forEach(card => {		cards.forEach(card => {
	~~if (card !== e.target) {~~		card.style.setProperty('opacity', '1', 'important');
	card.style.opacity = '~~0.5~~';
	}
	});		});
	}
	~~});~~

	~~container.addEventListener('mouseleave', function() {~~
	~~cards.forEach(card => {~~
	~~card.style.opacity = '1';~~
	});		});
	});		}
	});		});
	~~</script>~~

Keita at 15:18, 4 September 2025

2025-09-04T15:18:08Z

← Older revision		Revision as of 15:18, 4 September 2025
Line 263:		Line 263:

	/* KEITA MENU CARD NEW VERSION */		/* KEITA MENU CARD NEW VERSION */
			<script>

	mw.~~loader.using~~('~~jquery~~'~~).done(~~function() {		document.addEventListener('DOMContentLoaded', function() {
	~~$(function() {~~		const container = document.querySelector('.popular-categories');
	const container = document.querySelector('.popular-categories');		const cards = container.querySelectorAll('.category-card');
	~~if (container) {~~
	const cards = container.querySelectorAll('.category-card');		container.addEventListener('mouseenter', function(e) {
			if (e.target.classList.contains('category-card')) {
	cards.forEach(card => {		cards.forEach(card => {
	~~card.addEventListener('mouseenter', function() {~~		if (card !== e.target) {
	~~cards.forEach(otherCard => {~~		card.style.opacity = '0.5';
	if (~~otherCard~~ !== ~~this~~) {		}
	~~otherCard~~.style.opacity = '0.5';
	}
	~~});~~
	~~});~~
	~~});~~

	~~container.addEventListener('mouseleave', function() {~~
	~~cards.forEach(card => {~~
	~~card.style.opacity = '1~~';
	});
	});		});
	}		}
			});

			container.addEventListener('mouseleave', function() {
			cards.forEach(card => {
			card.style.opacity = '1';
			});
	});		});
	});		});
			</script>

Keita at 15:16, 4 September 2025

2025-09-04T15:16:30Z

← Older revision		Revision as of 15:16, 4 September 2025
Line 264:		Line 264:
	/* KEITA MENU CARD NEW VERSION */		/* KEITA MENU CARD NEW VERSION */

	$(~~document~~).~~ready~~(function() {		mw.loader.using('jquery').done(function() {
	const container = document.querySelector('.popular-categories');		$(function() {
	if (container) {		const container = document.querySelector('.popular-categories');
	const cards = container.querySelectorAll('.category-card');		if (container) {
			const cards = container.querySelectorAll('.category-card');
	~~// Add hover listeners to each individual card~~
	cards.forEach(card => {		cards.forEach(card => {
	card.addEventListener('mouseenter', function() {		card.addEventListener('mouseenter', function() {
	cards.forEach(otherCard => {		cards.forEach(otherCard => {
	if (otherCard !== this) {		if (otherCard !== this) {
	otherCard.style.opacity = '0.5';		otherCard.style.opacity = '0.5';
	}		}
			});
	});		});
	});		});
	~~});~~
			container.addEventListener('mouseleave', function() {
	~~// Reset opacity when leaving the container~~		cards.forEach(card => {
	container.addEventListener('mouseleave', function() {		card.style.opacity = '1';
	cards.forEach(card => {		});
	card.style.opacity = '1';
	});		});
	});		}
	}		});
	});		});

Keita at 15:15, 4 September 2025

2025-09-04T15:15:51Z

← Older revision		Revision as of 15:15, 4 September 2025
Line 269:		Line 269:
	const cards = container.querySelectorAll('.category-card');		const cards = container.querySelectorAll('.category-card');

	~~container~~.addEventListener('mouseenter', function(~~e) {~~		// Add hover listeners to each individual card
	~~if (e.target.classList.contains('category-card')~~) {		cards.forEach(card => {
	cards.forEach(~~card~~ => {		card.addEventListener('mouseenter', function() {
	if (~~card~~ !== ~~e.target~~) {		cards.forEach(otherCard => {
	~~card~~.style.opacity = '0.5';		if (otherCard !== this) {
			otherCard.style.opacity = '0.5';
	}		}
	});		});
	}		});
	});		});

			// Reset opacity when leaving the container
	container.addEventListener('mouseleave', function() {		container.addEventListener('mouseleave', function() {
	cards.forEach(card => {		cards.forEach(card => {

Keita at 15:13, 4 September 2025

2025-09-04T15:13:54Z

@@ Line 256: / Line 256: @@
          });
      });
 });

Keita at 21:16, 1 April 2025

2025-04-01T21:16:12Z

@@ Line 221: / Line 221: @@
 $(document).ready(function() {
-     const lineupRows = document.querySelectorAll('.keita-lineup-row');
+     var lineupRows = document.querySelectorAll('.keita-lineup-row');
-     const mediaQuery = window.matchMedia('(max-width: 768px)');
+     lineupRows.forEach(function(row) {
-     function applyFlexIfNeeded() {
+     // Initial check on load
          lineupRows.forEach(function(row) {
-             // Check if the element is currently hidden by an inline style
+             if (row.style.display !== 'none' && window.innerWidth <= 768) {
-            const isHidden = row.style.display === 'none';
+                 row.style.display = 'flex';
+             } else if (row.style.display !== 'none' && window.innerWidth > 768) {
-            if (mediaQuery.matches) {
+                row.style.display = 'table-row';
+             }
          });
      });
 });

Keita at 21:10, 1 April 2025

2025-04-01T21:10:08Z

← Older revision		Revision as of 21:10, 1 April 2025
Line 220:		Line 220:
	/* KEITA MOVE SHOW TOGGLE BUTTON */		/* KEITA MOVE SHOW TOGGLE BUTTON */

	~~Coding partner~~		$(document).ready(function() {
	~~Excellent! I~~'~~m glad to hear that the JavaScript in common~~.~~js is now working to maintain the display~~: ~~flex property.~~		const lineupRows = document.querySelectorAll('.keita-lineup-row');
			const mediaQuery = window.matchMedia('(max-width: 768px)');

	~~You're absolutely right to point out the need to apply this display: flex rule only within the specified media query~~ (~~@media~~ (~~max-width: 768px)~~). ~~This ensures that the layout behaves as intended on smaller screens while not interfering with the layout on larger screens~~.		function applyFlexIfNeeded() {
			lineupRows.forEach(function(row) {
			// Check if the element is currently hidden by an inline style
			const isHidden = row.style.display === 'none';

	~~Understanding~~ the ~~Refinement:~~		if (mediaQuery.matches) {
			// Screen is 768px or less
			if (!isHidden) {
			row.style.display = 'flex';
			}
			} else {
			// Screen is wider than 768px
			// Revert display: flex if we added it, ONLY IF it's not hidden
			// This assumes the default is not 'flex'. If it might be,
			// you'd need a more robust way to store/restore the original display value.
			if (row.style.display === 'flex') {
			// Setting to '' removes the inline style, reverting to CSS/default
			row.style.display = '';
			}
			}
			});
			}

	~~Media Query Logic: We need to incorporate the media query's condition into our JavaScript logic.~~		// Initial check on page load
	~~Checking Screen Width: We can use window.innerWidth to~~ check ~~the current screen width and apply the display: flex rule only if it's less than or equal to 768 pixels.~~		applyFlexIfNeeded();
	~~Modified JavaScript Code~~ (~~for common.js~~):

	~~JavaScript~~		// Check when the window is resized (or orientation changes)
			// Using mediaQuery.addEventListener is more efficient than window.resize
			mediaQuery.addEventListener('change', applyFlexIfNeeded);

	~~$(document).ready(function() {~~		// --- Why the original MutationObserver approach wasn't ideal ---
	~~var collapsibleCells = document.querySelectorAll(~~'~~.keita~~-~~pokemon~~-~~cell');~~		// The MutationObserver you had watches for any change to the 'style' attribute.
	~~collapsibleCells.forEach(function(cell) {~~		// It wasn't directly checking the screen width. It would force display:flex
	~~var observer = new~~ MutationObserver~~(function(mutations) {~~		// whenever the style attribute changed (and wasn't 'none'), regardless of
	~~mutations.forEach(function(mutation) {~~		// the viewport size, which doesn't match your requirement of applying it
	~~if (mutation.type ===~~ '~~attributes~~' ~~&& mutation~~.~~attributeName === 'style') {~~		// only below 768px.
	~~var lineupRow = cell.closest(~~'.~~keita-lineup-row');~~
	if (~~lineupRow && window.innerWidth <= 768 && cell.style.display !==~~ 'none') {
	~~lineupRow.style.display = 'flex';~~
	}
	}
	~~});~~
	~~});~~
	~~observer.observe(cell~~, ~~{ attributes: true, attributeFilter: ['style~~'~~] });~~
	~~});~~
	});		});