User:Pgehres (WMF)/centralnotice.js

/**
 *  This script is designed to make performing the task of quality assurance on Central Notice
 *  campaigns much simpler.  The function add a list of targeted languages and countries
 *  on the right-hand side of the page that updates as settings are changed in the campaign.
 *
 *  @author Peter Gehres <pgehres@wikimedia.org>
 *  @version 1.0
 *  @license CC-BY 3.0 <http://creativecommons.org/licenses/by/3.0>
 *  @license GPL2 <http://www.gnu.org/licenses/old-licenses/gpl-2.0.html>
 **/

$( function() {
	var url = $( location ).attr( 'href' );
	if ( url.indexOf( "title=Special:CentralNotice&method=listNoticeDetail" ) != -1 ) {
		initCampaignDetails();
		hideBannerList();
	}
} );

window.hiddenBanners = false;
function hideBannerList() {
	$( ".cn-pager" ).parent().children().each( function( index ) {
		// do not hide the first element, the legend, add toggle
		if ( index == 0 ){
			$( this ).after(
				"<span id=\"bannerToggle\"><u>Show Banners</u></span>"
			);
		} else {
			$( this ).css( 'display', 'none' );
		}
		window.hiddenBanners = true;
	});
	$( "#bannerToggle" ).click( function() {
		$( ".cn-pager" ).parent().children().each( function( index ) {
			if( window.hiddenBanners ){
				// change the text of the toggle link
				$( "#bannerToggle" ).html( "<u>Hide Banners</u>" );
				// show all of the banners
				$( ".cn-pager" ).parent().children().each( function( index ) {
					$( this ).css( 'display', 'block' );
				});
			} else {
				// change the text of the toggle link
				$( "#bannerToggle" ).html( "<u>Show Banners</u>" );
				// skip the first two elements
				if ( index > 1 ){
					$( this ).css( 'display', 'none' );
				}
			}
		});
		window.hiddenBanners = !window.hiddenBanners;
	});
}

function initCampaignDetails() {
	$( "#preferences" ).append(
		"<div id=\"campaignDetails\"></div>"
	).css( "position", "relative" );

	$( "#campaignDetails" ).append(
		"<h2>Languages Selected</h2>" +
		"<div id=\"languageList\"></div>" +
		"<h2>Countries Targeted</h2>" +
		"<div id=\"countryList\"></div>"
	).css( {
		"position" : "absolute",
		"top" : "20px",
		"right" : "20px",
		"width" : "250px",
		"font-size" : "12px",
		"line-height" : "14px"
	} );

	$( "select[name='project_languages[]'], input[name='geotargeted'], select[name='geo_countries[]']" ).change(
		function() {
			listCampaignDetails()
		}
	);
	listCampaignDetails();
}

function listCampaignDetails() {
	var maxColumns = 5;

	// clear the existing lists
	$( "#languageList" ).html( "" );
	$( "#countryList" ).html( "" );

	// get the selected options
	var languages = $( "select[name='project_languages[]']" ).val();
	var geotargeted = $( "input[name='geotargeted']" ).is( ":checked" );
	var countries = $( "select[name='geo_countries[]']" ).val();

	if ( languages == null ) {
		languages = [];
	}
	if ( countries == null ) {
		countries = [];
	}

	console.log("Languages: " + languages.length);
	console.log("Geotargeted: " + geotargeted);
	console.log("Countries: " + countries.length);

	// check the total number of lines to avoid overflow
	totalLines = geotargeted ? ( languages.length + countries.length ) : languages.length;
	if ( totalLines > 40 ){
		// this will overflow the standard layout
		var notLanguages = $( "select[name='project_languages[]']" ).children().not( $( "select[name='project_languages[]'] :selected" ) )
		if ( notLanguages.length <= 50 ){
			displayAsTable( notLanguages, 400, 5, 10, true )
		} else {
			$( "#languageList" ).append(
				displayAsTable( languages, 400, 6, 20, false )
			);
		}

		if ( geotargeted ) {
			for ( c in countries ) {
				$( "#countryList" ).append(
					countries[ c ] + " - " + $( "select[name='geo_countries[]'] option[value='" + countries[ c ] + "']" ).text() + "<br />"
				);
			}
		}


		var notCountries = $( "select[name='geo_countries[]']" ).children().not( $( "select[name='geo_countries[]'] :selected" ) )
	} else {
		// standard, verbose display
		for ( l in languages ) {
			$( "#languageList" ).append(
				$( "select[name='project_languages[]'] option[value='" + languages[ l ] + "']" ).text() + "<br />"
			);
		}
		if ( geotargeted ) {
			for ( c in countries ) {
				$( "#countryList" ).append(
					countries[ c ] + " - " + $( "select[name='geo_countries[]'] option[value='" + countries[ c ] + "']" ).text() + "<br />"
				);
			}
		}
	}
}

function displayAsTable( list, width, maxCols, targetLength, strike ){
	var cols = 1;
	while ( list.length / cols > targetLength ){
		if ( cols == maxCols ){
			break;
		}
		cols++;
	}
	var rows = Math.ceil( list.length / cols );

	// print the table
	var num = 0,
		colWidth = Math.floor( width / cols ),
		html = "";

	html += "<table width='" + width + "'";
	for ( var i = 0; i < cols; i++ ){
		html += "<col width='" + colWidth + "'>"
	}
	for ( var r = 0; r < rows; r++ ){
		html += "<tr>";
		for ( var c = 0; c < cols; c++ ){
			if ( r + ( r * c ) < list.length ){
				html += "<td>" + list[ r + ( r * c ) ] + "</td>";
			} else {
				html += "<td>&nbsp;</td>";
			}
		}
		html += "</tr>";
	}
	html += "</table>";
	return html;
}