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 www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL
 * @rev 6
 */
mw.loader.using( ['mediawiki.util', 'mediawiki.notify', 'mediawiki.legacy.wikibits' ], function () {
	var extraCSS = mw.util.getParamValue( 'withCSS' ),
		extraJS = mw.util.getParamValue( 'withJS' );
 
	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' } );
		}
	}
} );

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
 *
 * @source www.mediawiki.org/wiki/Snippets/Load_JS_and_CSS_by_URL#Load_multiple_files
 * @rev 6
 */

mw.loader.using( ['mediawiki.util','mediawiki.legacy.wikibits'], function () {
        var files = mw.util.getParamValue( 'use' ), user, FileRE;

        if ( !files ) {
                return;
        }

        user = $.escapeRE( mw.config.get( 'wgUserName', '' ) );
        FileRE = new RegExp( '^(?=MediaWiki:' + ( user ? '|User:' + user + '/' : '' ) + ').*\\.(js|css)$' );

        $.each( files.split( '|' ), function(k, v) {
                var f = $.trim( v ), what = FileRE.exec( f ) || ['', ''];
                switch ( what[1] ) {
                        case  'js': importScript(f); break;
                        case 'css': importStylesheet(f); break;
                }
        });
});