User:Pgehres (WMF)/centralnotice.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* 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> </td>";
}
}
html += "</tr>";
}
html += "</table>";
return html;
}