User:Inductiveload/show markup.js

From Wikisource
Jump to navigation Jump to search
Note: After saving, changes may not occur immediately. Click here to learn how to bypass your browser's cache.
  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Cmd-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (Cmd-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Clear the cache in Tools → Preferences

For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/*
 * Simple hacks to reveal some interesting markup
 */

( function ( $, mw ) {
	/* Show certain things with widths in px */
	function revealPxWidth() {
		// eslint-disable-next-line no-jquery/no-global-selector
		$(
			'.wst-auxtoc, .wst-block-center, table, .wst-border, .wst-block-right, .wst-block-left'
		).each( function ( idx, val ) {
			var $elem = $( val );
			var csses = [ 'width', 'max-width', 'min-width' ];

			for ( var i = 0; i < csses.length; ++i ) {
				var cssVal = val.style[ csses[ i ] ]; // non-computed
				if ( cssVal.endsWith( 'px' ) && cssVal !== '0px' ) {
					$elem.prepend(
						$( '<span>' )
							.addClass( 'px-warning' )
							.css( 'color', 'red' )
							.css( 'font-size', '60%' )
							.append( csses[ i ] + ': ' + cssVal + '; ' )
					);
				}
			}
		} );
	}

	$( function () {
		// console.log( 'Show markup loaded' );
		revealPxWidth();
	} );
// eslint-disable-next-line no-undef
}( jQuery, mediaWiki ) );