Snippets/Load JS and CSS by URL

From MediaWiki.org
Jump to: navigation, search
How to use Snippets
List of Snippets
Crystal Clear action run.png
Load JS and CSS by URL
Language(s): javascript
Compatible with:

MediaWiki 1.19+ 

Description[edit | edit source]

Adds support for loading a script or stylesheet from a wiki page in the MediaWiki namespace, based on a URL parameter. This makes showing demonstrations easier as users don't have to enable a gadget or put something in their user common.js.

Code[edit | edit source]

This version adds two new url parameters withJS and withCSS. You can append them on to the end of the url: ?withCSS=MediaWiki:Foo.css&withJS=MediaWiki:Foo.js

/**
 * @source https://www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL
 * @revision 2014-05-02
 */
mw.loader.using( ['mediawiki.util', 'mediawiki.notify', 'mediawiki.legacy.wikibits' ], function () {
	var extraCSS = mw.util.getParamValue( 'withCSS' ),
		extraJS = mw.util.getParamValue( 'withJS' ),
		extraModule = mw.util.getParamValue( 'withModule' );

	if ( extraCSS ) {
		if ( extraCSS.match( /^MediaWiki:[^&<>=%#]*\.css$/ ) ) {
			importStylesheet( extraCSS );
		} else {
			mw.notify( 'Only pages from the MediaWiki namespace are allowed.', { title: 'Invalid withCSS value' } );
		}
	}

	if ( extraJS ) {
		if ( extraJS.match( /^MediaWiki:[^&<>=%#]*\.js$/ ) ) {
			importScript( extraJS );
		} else {
			mw.notify( 'Only pages from the MediaWiki namespace are allowed.', { title: 'Invalid withJS value' } );
		}
	}

	if ( extraModule ) {
		if ( /^ext\.gadget\.[^,\|]+$/.test( extraModule ) ) {
			mw.loader.load( extraModule );
		} else {
			mw.notify( 'Only gadget modules are allowed.', { title: 'Invalid withModule value' } );
		}
	}
} );

Load multiple files[edit | edit source]

This version adds a single url parameter, use but allows multiple files to be separated by a pipe (|). You can then append on to the end of a url: ?use=MediaWiki:Foo.js|MediaWiki:Foo.css|MediaWiki:Bar.js

/*
 * Load CSS and JS files temporarily through URL.
 * &use=File1.css|File2.css|File3.js
 *
 * Required modules: mediawiki.RegExp, mediawiki.util
 * @source https://www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL#Load_multiple_files
 * @revision 2014-05-31
 */
mw.loader.using( ['mediawiki.util', 'mediawiki.RegExp', 'mediawiki.legacy.wikibits'], function () {
	var files = mw.util.getParamValue( 'use' ), user, FileRE, ExtRE, path;

	if ( !files ) {
		return;
	}

	user = mw.RegExp.escape( mw.config.get( 'wgUserName', '' ) );
	FileRE = new RegExp( '^(?:MediaWiki:' + ( user ? '|User:' + user + '/' : '' ) + ').*\\.(js|css)$' );
	ExtRE = new RegExp( '^ext\\.[^,]+$' );
	path = mw.config.get('wgServer')
		+ mw.config.get('wgScript')
		+ '?action=raw&ctype=text/';

	$.each( files.split( '|' ), function(k, v) {
		var f = $.trim( v ), what = FileRE.exec( f ) || ['', ''];
		switch ( what[1] ) {
			case  'js':
				mw.loader.load( path + 'javascript&title=' + f );
				break;
			case 'css':
				mw.loader.load( path + 'css&title=' + f );
				break;
			default:
				if ( ExtRE.exec( f ) ) {
					mw.loader.load(f);
				}
		}
	});
});