MediaWiki:Common.js - Revision history

Pinfold at 21:25, November 4, 2025

2025-11-04T21:25:04Z

← Older revision		Revision as of 14:25, November 4, 2025
Line 1:		Line 1:
	/* Any JavaScript here will be loaded for all users on every page load. */		/* Any JavaScript here will be loaded for all users on every page load. */
	~~mw.loader.using('oojs-ui').then(function () {~~
	~~mw.util.addCSS(`~~
	~~form .mw-widget-dateInputWidget,~~
	~~form .mw-widget-dateInputWidget > .oo-ui-textInputWidget,~~
	~~form .mw-widget-dateInputWidget > .oo-ui-textInputWidget > .oo-ui-inputWidget-input,~~
	~~form .mw-widget-dateInputWidget-handle {~~
	~~display:inline-block !important;~~
	~~width:auto !important;~~
	~~vertical-align:middle !important;~~
	~~margin:0 0.25em 0 0 !important;~~
	~~padding:0 !important;~~
	}
	~~`);~~
	~~});~~

Pinfold at 20:45, November 4, 2025

2025-11-04T20:45:03Z

← Older revision		Revision as of 13:45, November 4, 2025
Line 1:		Line 1:
	/* Any JavaScript here will be loaded for all users on every page load. */		/* Any JavaScript here will be loaded for all users on every page load. */
	~~// Example of a DateTimeInputWidget~~		mw.loader.using('oojs-ui').then(function () {
	~~// Convert Page Forms text fields with class 'datetime-local' into HTML5 datetime-local pickers~~		mw.util.addCSS(`
	mw.~~hook~~('~~pf.formReady~~').~~add~~(function () {		form .mw-widget-dateInputWidget,
	~~document~~.~~querySelectorAll~~(~~'input~~.~~datetime~~-~~local')~~.~~forEach(el =~~> {		form .mw-widget-dateInputWidget > .oo-ui-textInputWidget,
	el.~~setAttribute('type'~~, ~~'datetime~~-~~local')~~;		form .mw-widget-dateInputWidget > .oo-ui-textInputWidget > .oo-ui-inputWidget-input,
	});		form .mw-widget-dateInputWidget-handle {
			display:inline-block !important;
			width:auto !important;
			vertical-align:middle !important;
			margin:0 0.25em 0 0 !important;
			padding:0 !important;
			}
			`);
	});		});

Pinfold at 16:57, November 4, 2025

2025-11-04T16:57:50Z

← Older revision		Revision as of 09:57, November 4, 2025
Line 1:		Line 1:
	/* Any JavaScript here will be loaded for all users on every page load. */		/* Any JavaScript here will be loaded for all users on every page load. */
	// Example of a DateTimeInputWidget		// Example of a DateTimeInputWidget
	~~var dateTimeInput = new mw.widgets.datetime.DateTimeInputWidget({~~		// Convert Page Forms text fields with class 'datetime-local' into HTML5 datetime-local pickers
	// ~~Configuration options can go here~~		mw.hook('pf.formReady').add(function () {
	~~type:~~ 'datetime'~~, // Can be 'date', 'time', or '~~datetime'		document.querySelectorAll('input.datetime-local').forEach(el => {
	~~// Other options like~~ '~~utc~~' (~~boolean) or 'timezone'~~ (~~string~~)		el.setAttribute('type', 'datetime-local');
	~~});~~		});

	~~// Append the widget to an element in your HTML form~~
	$( '~~body~~' ).~~append~~( ~~dateTimeInput.$element );~~

	~~// Accessing the value~~
	~~dateTimeInput~~.on( '~~change~~', ~~function () {~~
	~~var dateValue = dateTimeInput.getValue(~~);
	~~console.log( 'Selected date and time: ' + dateValue~~ );
	});		});

Pinfold at 16:36, November 4, 2025

2025-11-04T16:36:56Z

← Older revision		Revision as of 09:36, November 4, 2025
Line 1:		Line 1:
	/* Any JavaScript here will be loaded for all users on every page load. */		/* Any JavaScript here will be loaded for all users on every page load. */
			// Example of a DateTimeInputWidget
			var dateTimeInput = new mw.widgets.datetime.DateTimeInputWidget({
			// Configuration options can go here
			type: 'datetime', // Can be 'date', 'time', or 'datetime'
			// Other options like 'utc' (boolean) or 'timezone' (string)
			});

			// Append the widget to an element in your HTML form
			$( 'body' ).append( dateTimeInput.$element );

			// Accessing the value
			dateTimeInput.on( 'change', function () {
			var dateValue = dateTimeInput.getValue();
			console.log( 'Selected date and time: ' + dateValue );
			});

Pinfold at 00:28, September 6, 2025

2025-09-06T00:28:20Z

← Older revision		Revision as of 17:28, September 5, 2025
Line 1:		Line 1:
	/* Any JavaScript here will be loaded for all users on every page load. */		/* Any JavaScript here will be loaded for all users on every page load. */
	~~mw.loader.using('ext.maps.leaflet').done(function() {~~
	~~L.MakiMarkers = require('leaflet-maki-markers');~~
	~~window.mw.maps.icons = window.mw.maps.icons \|\| {};~~

	~~// Example: register a few Maki markers~~
	~~window.mw.maps.icons['Animal'] = L.MakiMarkers.icon({icon: "dog-park", color: "#e74c3c", size: "m"});~~
	~~window.mw.maps.icons['Shelter'] = L.MakiMarkers.icon({icon: "shelter", color: "#2ecc71", size: "m"});~~
	~~});~~

Pinfold: Created page with "/* Any JavaScript here will be loaded for all users on every page load. */ mw.loader.using('ext.maps.leaflet').done(function() { L.MakiMarkers = require('leaflet-maki-markers'); window.mw.maps.icons = window.mw.maps.icons || {}; // Example: register a few Maki markers window.mw.maps.icons['Animal'] = L.MakiMarkers.icon({icon: "dog-park", color: "#e74c3c", size: "m"}); window.mw.maps.icons['Shelter'] = L.MakiMarkers.icon({icon: "shelter", color: "#2ecc71", size..."

2025-09-05T20:28:51Z

Created page with "Any JavaScript here will be loaded for all users on every page load.: mw.loader.using('ext.maps.leaflet').done(function() { L.MakiMarkers = require('leaflet-maki-markers'); window.mw.maps.icons = window.mw.maps.icons || {}; // Example: register a few Maki markers window.mw.maps.icons['Animal'] = L.MakiMarkers.icon({icon: "dog-park", color: "#e74c3c", size: "m"}); window.mw.maps.icons['Shelter'] = L.MakiMarkers.icon({icon: "shelter", color: "#2ecc71", size..."

New page

/* Any JavaScript here will be loaded for all users on every page load. */
mw.loader.using('ext.maps.leaflet').done(function() {
L.MakiMarkers = require('leaflet-maki-markers');
window.mw.maps.icons = window.mw.maps.icons || {};

// Example: register a few Maki markers
window.mw.maps.icons['Animal'] = L.MakiMarkers.icon({icon: "dog-park", color: "#e74c3c", size: "m"});
window.mw.maps.icons['Shelter'] = L.MakiMarkers.icon({icon: "shelter", color: "#2ecc71", size: "m"});
});