MediaWiki:Common.js - Revision history

Frkl at 22:44, 25 June 2024

2024-06-25T22:44:08Z

← Older revision		Revision as of 18:44, 25 June 2024
Line 18:		Line 18:
	$('#mw-panel .portal > h3').addClass('collapsed');		$('#mw-panel .portal > h3').addClass('collapsed');
	});		});

	~~console.log("Custom script loaded");~~

	document.addEventListener('DOMContentLoaded', function() {		document.addEventListener('DOMContentLoaded', function() {
	const icons = document.querySelectorAll('.masterlist-icon');		const icons = document.querySelectorAll('.masterlist-icon');

			console.log('Custom script loaded');
	console.log('Icons found:', icons);		console.log('Icons found:', icons);
	icons.forEach(icon => console.log('Icon:', icon));
			icons.forEach(function(icon) {
			console.log('Icon:', icon);
			});

	icons.forEach(function(icon) {		icons.forEach(function(icon) {

Frkl at 22:41, 25 June 2024

2024-06-25T22:41:01Z

← Older revision		Revision as of 18:41, 25 June 2024
Line 18:		Line 18:
	$('#mw-panel .portal > h3').addClass('collapsed');		$('#mw-panel .portal > h3').addClass('collapsed');
	});		});

			console.log("Custom script loaded");

	document.addEventListener('DOMContentLoaded', function() {		document.addEventListener('DOMContentLoaded', function() {
Line 23:		Line 25:

	console.log('Icons found:', icons);		console.log('Icons found:', icons);
			icons.forEach(icon => console.log('Icon:', icon));

	icons.forEach(function(icon) {		icons.forEach(function(icon) {
	const itemId = icon.closest('.masterlist-item').dataset.id;		const itemId = icon.closest('.masterlist-item').dataset.id;
			console.log('Item ID:', itemId);
	const isClicked = localStorage.getItem('icon-' + itemId) === 'true';		const isClicked = localStorage.getItem('icon-' + itemId) === 'true';
	if (isClicked) {		if (isClicked) {
Line 34:		Line 38:
	icons.forEach(function(icon) {		icons.forEach(function(icon) {
	icon.addEventListener('click', function(event) {		icon.addEventListener('click', function(event) {
	event.preventDefault(); ~~// Prevent the default action~~		event.preventDefault();
	const itemId = icon.closest('.masterlist-item').dataset.id;		const itemId = icon.closest('.masterlist-item').dataset.id;
			console.log('Clicked Item ID:', itemId);
	icon.classList.toggle('clicked');		icon.classList.toggle('clicked');
	localStorage.setItem('icon-' + itemId, icon.classList.contains('clicked'));		localStorage.setItem('icon-' + itemId, icon.classList.contains('clicked'));

Frkl at 22:26, 25 June 2024

2024-06-25T22:26:36Z

← Older revision		Revision as of 18:26, 25 June 2024
Line 24:		Line 24:
	console.log('Icons found:', icons);		console.log('Icons found:', icons);

	~~// Load saved state from localStorage~~
	icons.forEach(function(icon) {		icons.forEach(function(icon) {
	const itemId = icon.closest('.masterlist-item').dataset.id;		const itemId = icon.closest('.masterlist-item').dataset.id;
Line 33:		Line 32:
	});		});

	~~// Add click event listeners to toggle clicked state and save to localStorage~~
	icons.forEach(function(icon) {		icons.forEach(function(icon) {
	icon.addEventListener('click', function() {		icon.addEventListener('click', function(event) {
			event.preventDefault(); // Prevent the default action
	const itemId = icon.closest('.masterlist-item').dataset.id;		const itemId = icon.closest('.masterlist-item').dataset.id;
	icon.classList.toggle('clicked');		icon.classList.toggle('clicked');

Frkl at 21:26, 25 June 2024

2024-06-25T21:26:03Z

← Older revision		Revision as of 17:26, 25 June 2024
Line 9:		Line 9:
	$('#mw-panel .portal > h3').each(function() {		$('#mw-panel .portal > h3').each(function() {
	var category = $(this).parent().attr('id');		var category = $(this).parent().attr('id');
	$(this).addClass('head').click(function() { toggleSidebarCategory(category); });		$(this).addClass('head').click(function() {
			toggleSidebarCategory(category);
			});
	});		});

Line 18:		Line 20:

	document.addEventListener('DOMContentLoaded', function() {		document.addEventListener('DOMContentLoaded', function() {
	const icons = document.querySelectorAll('.masterlist-icon');		const icons = document.querySelectorAll('.masterlist-icon');

	~~console.log('Icons found:', icons~~);

	~~icons.forEach(function(icon) {~~		console.log('Icons found:', icons);
	~~const itemId = icon~~.~~closest~~('~~.masterlist-item~~'~~).dataset.id;~~
	~~const isClicked = localStorage.getItem('icon-' + itemId) === 'true';~~
	~~if (isClicked) {~~
	~~icon.classList.add('clicked');~~
	}
	});

	icons.forEach(function(icon) {		// Load saved state from localStorage
	icon.addEventListener('click', function() {		icons.forEach(function(icon) {
	const itemId = icon.closest('.masterlist-item').dataset.id;		const itemId = icon.closest('.masterlist-item').dataset.id;
	icon.classList.toggle('clicked');		const isClicked = localStorage.getItem('icon-' + itemId) === 'true';
	localStorage.setItem('icon-' + itemId, icon.classList.contains('clicked'));		if (isClicked) {
			icon.classList.add('clicked');
			}
			});

			// Add click event listeners to toggle clicked state and save to localStorage
			icons.forEach(function(icon) {
			icon.addEventListener('click', function() {
			const itemId = icon.closest('.masterlist-item').dataset.id;
			icon.classList.toggle('clicked');
			localStorage.setItem('icon-' + itemId, icon.classList.contains('clicked'));
			});
	});		});
	~~});~~
	});		});

Frkl at 21:23, 25 June 2024

2024-06-25T21:23:35Z

← Older revision		Revision as of 17:23, 25 June 2024
Line 17:		Line 17:
	});		});

	document.addEventListener('DOMContentLoaded', () => {		document.addEventListener('DOMContentLoaded', function() {
	const icons = document.querySelectorAll('.masterlist-icon');		const icons = document.querySelectorAll('.masterlist-icon');

			console.log('Icons found:', icons);

	~~// Load saved state from localStorage~~		icons.forEach(function(icon) {
	icons.forEach(icon => {
	const itemId = icon.closest('.masterlist-item').dataset.id;		const itemId = icon.closest('.masterlist-item').dataset.id;
	const isClicked = localStorage.getItem(`icon-${itemId}`) === 'true';		const isClicked = localStorage.getItem('icon-' + itemId) === 'true';
	if (isClicked) {		if (isClicked) {
	icon.classList.add('clicked');		icon.classList.add('clicked');
Line 29:		Line 30:
	});		});

	~~// Add click event listeners to toggle clicked state and save to localStorage~~		icons.forEach(function(icon) {
	icons.forEach(icon => {		icon.addEventListener('click', function() {
	icon.addEventListener('click', () => {
	const itemId = icon.closest('.masterlist-item').dataset.id;		const itemId = icon.closest('.masterlist-item').dataset.id;
	icon.classList.toggle('clicked');		icon.classList.toggle('clicked');
	localStorage.setItem(`icon-${itemId}`, icon.classList.contains('clicked'));		localStorage.setItem('icon-' + itemId, icon.classList.contains('clicked'));
	});		});
	});		});
	});		});

Frkl at 21:19, 25 June 2024

2024-06-25T21:19:11Z

← Older revision		Revision as of 17:19, 25 June 2024
Line 17:		Line 17:
	});		});

	~~importScript~~('~~MediaWiki:Masterlist~~.js');		document.addEventListener('DOMContentLoaded', () => {
			const icons = document.querySelectorAll('.masterlist-icon');

			// Load saved state from localStorage
			icons.forEach(icon => {
			const itemId = icon.closest('.masterlist-item').dataset.id;
			const isClicked = localStorage.getItem(`icon-${itemId}`) === 'true';
			if (isClicked) {
			icon.classList.add('clicked');
			}
			});

			// Add click event listeners to toggle clicked state and save to localStorage
			icons.forEach(icon => {
			icon.addEventListener('click', () => {
			const itemId = icon.closest('.masterlist-item').dataset.id;
			icon.classList.toggle('clicked');
			localStorage.setItem(`icon-${itemId}`, icon.classList.contains('clicked'));
			});
			});
			});

Frkl: Importing javascript from a separate page

2024-06-25T20:57:06Z

Importing javascript from a separate page

← Older revision		Revision as of 16:57, 25 June 2024
Line 16:		Line 16:
	$('#mw-panel .portal > h3').addClass('collapsed');		$('#mw-panel .portal > h3').addClass('collapsed');
	});		});

			importScript('MediaWiki:Masterlist.js');

Lune at 22:36, 2 November 2023

2023-11-02T22:36:06Z

Show changes

Lune at 22:34, 2 November 2023

2023-11-02T22:34:35Z

← Older revision		Revision as of 18:34, 2 November 2023
Line 124:		Line 124:
	$collapsible.data( 'made-collapsible', true );		$collapsible.data( 'made-collapsible', true );
	} );		} );
			}() );

			/* End DOM ready */


	}() );		}() );

Lune: Created page with "/** * Collapsible elements * * Add the "collapsible" class to an element and the child element with class "collapsible-content" * (or everything but the header row if a table) will be hidden when the element is collapsed. * * * Add the class "collapsed" to the element to make it start out collapsed. * * Add either "collapsetoggle-left" or "collapsetoggle-inline" to the element to choose the collapse * toggle alignment (defaults to right). * * Add an ID in the..."

2023-11-02T22:29:46Z

Created page with "/** * Collapsible elements * * Add the "collapsible" class to an element and the child element with class "collapsible-content" * (or everything but the header row if a table) will be hidden when the element is collapsed. * * * Add the class "collapsed" to the element to make it start out collapsed. * * Add either "collapsetoggle-left" or "collapsetoggle-inline" to the element to choose the collapse * toggle alignment (defaults to right). * * Add an ID in the..."

New page

/**
* Collapsible elements
*
* Add the "collapsible" class to an element and the child element with class "collapsible-content"
* (or everything but the header row if a table) will be hidden when the element is collapsed.
*
* * Add the class "collapsed" to the element to make it start out collapsed.
* * Add either "collapsetoggle-left" or "collapsetoggle-inline" to the element to choose the collapse
* toggle alignment (defaults to right).
* * Add an ID in the format of "collapsible-<x>" to the element to make any element with the class
* "collapsetoggle-custom" and a matching class in the format of "collapsible-<x>-toggle" control
* the collapsing instead of the standard button.
* If the custom toggle contains an element with the "jslink" class, only that will be clickable.
*/
( function() {
var $collapsibles = $wikipageContent.find( '.collapsible' );
if ( !$collapsibles.length ) {
return;
}

var $toggleTemplate = $( '<span>' ).addClass( 'collapsetoggle' ).append(
'[', $( '<span>' ).addClass( 'jslink' ), ']'
);
$collapsibles.each( function() {
var $collapsible = $( this );
if ( $collapsible.data( 'made-collapsible' ) ) {
return true;
}

var $children = $collapsible.children();
var showText = $collapsible.data( 'expandtext' ) || i18n.showText;
var hideText = $collapsible.data( 'collapsetext' ) || i18n.hideText;

// If there is no content area, add it
if ( !$collapsible.is( 'table' ) && !$children.filter( '.collapsible-content' ).length ) {
if ( $collapsible.is( 'tr' ) ) {
$children.addClass( 'collapsible-content' );
} else {
$collapsible.wrapInner( '<div class="collapsible-content">' );
$children = $collapsible.children();
}
}

var $toggle;
var id = $collapsible.attr( 'id' );
if ( id && id.match( /^collapsible-./ ) ) {
$toggle = $( $wikipageContent[0].getElementsByClassName( id + '-toggle' ) )
.filter( '.collapsetoggle-custom' ).css( 'visibility', 'visible' );
}

// Create and insert the toggle button if there is no custom one
if ( !$toggle || !$toggle.length ) {
var $toggleContainer;
if ( $collapsible.is( 'table' ) ) {
var $rows = $children.filter( 'thead' ).children();
if ( !$rows.length ) {
$rows = $children.filter( 'tbody' ).first().children();
if ( !$rows.length ) {
$rows = $children.filter( 'tr' );
}
}
$toggleContainer = $rows.first().children().last();
} else {
$toggleContainer = $children.first();
if ( $toggleContainer.hasClass( 'collapsible-content' ) ) {
$toggleContainer = $collapsible;
}
}

$toggle = $toggleTemplate.clone();
if (
$toggleContainer !== $collapsible && (
$collapsible.hasClass( 'collapsetoggle-inline' ) ||
$collapsible.hasClass( 'collapse-button-none' )
) ) {
$toggleContainer.append( $toggle );
} else {
$toggleContainer.prepend( $toggle );
}
}

var $toggleLink = $toggle.find( '.jslink' );
if ( !$toggleLink.length ) {
$toggleLink = $toggle;
}
$toggleLink.attr( 'tabindex', 0 ).text( hideText );

// Find max toggle size, and set its min-width to it
var hideWidth = $toggle.width();
$toggleLink.text( showText );
var showWidth = $toggle.width();
if ( hideWidth !== showWidth ) {
$toggle.css( 'min-width', hideWidth > showWidth ? hideWidth : showWidth );
}

// Set the text back to hide if it's not collapsed to begin with
if ( !$collapsible.hasClass( 'collapsed' ) ) {
$toggleLink.text( hideText );
}

$toggleLink.on( 'click keydown', function( e ) {
// Only trigger on enter press
if ( e.keyCode && e.keyCode !== 13 ) {
return;
}

// Don't toggle when clicking buttons or links inside the toggle
var $target = $( e.target );
if ( $target.is( 'button' ) || $target.is( 'a' ) ) {
return;
}

$collapsible.toggleClass( 'collapsed' );
if ( $collapsible.hasClass( 'collapsed' ) ) {
$toggleLink.text( showText );
} else {
$toggleLink.text( hideText );
}

// Stop table sorting activating when clicking the link
e.stopPropagation();
} );

$collapsible.data( 'made-collapsible', true );
} );
}() );