/* Configuration variables */
var PortletLinkNameShown='Hide images'; //Portlet text
var PortletLinkTipShown ='Hide all images on this page and enable buttons'; //Portlet popup comment
var PortletLinkNameHidden='Show images'; //Portlet text
var PortletLinkTipHidden ='Show all images on this page and disable buttons'; //Portlet popup comment
var buttonText=['Show image', 'Hide image'];
var minSize=50;
var cookiedays=30;
var DoNotChangeDisplay=true;
/* End of configuration variables */
/* We will need these modules */
mw.loader.using (['mediawiki.util', 'jquery.ui', 'mediawiki.cookie'], function () {
/* Adding a portlet link after the page is ready */
$(document).ready(function() {
if($.inArray(mw.config.get( 'wgCanonicalNamespace' ), ['','Portal']) != -1) { /* Enabled only in some name spaces */
var HIlink=mw.util.addPortletLink('p-cactions','#',PortletLinkNameShown,'ca-himg',PortletLinkTipShown );
$(HIlink).click(Hideimages);
$('#content img').each(function () { /* Images must be larger than the minimum size */
if ($(this).attr('height') > minSize && $(this).attr('width') > minSize ) {
$(this).addClass('hideabale'); /* Class for hideable images */
}
})
var images=$('#content img.hideabale');
var cookiename='isImageHidingEnabled'+mw.config.get('wgPageName'); /* Reading the cookie */
var isImageHidingEnabled=false;
if (mw.cookie.get(cookiename) != 'true'?false:true) $(HIlink).click(); /* Has hiding been enabled before? Then enable */
} else {
return;
}
function Hideimages () {
var portlet=$(this).find('a');
if ( !isImageHidingEnabled ) {
if (DoNotChangeDisplay) {
images.fadeTo('slow', 0); /* Hiding all images */
} else {
images.hide('slow');
}
/* 'Div' containers for toggle buttons */
var containers=$('<div class="hidebuttoncontainer"></div>').insertAfter(images.parent());
portlet.attr( 'title', PortletLinkTipHidden )
.text( PortletLinkNameHidden );
$('<span class="hidebutton"></span>') /* Creating toggle buttons for hideable images */
.appendTo(containers)
.button( {disabled: false, label: buttonText[0] } )
.click( ToggleImage );
var hideimagesarray=new Array (images.length); /* An array to store status of images */
for (i=0; i<images.length; i++) {
hideimagesarray[i]=true;
}
isImageHidingEnabled=true;
mw.cookie.set(cookiename, 'true', {expires:cookiedays} ); /* Saving a cookie for 'cookiedays' days */
} else {
if (DoNotChangeDisplay) {
images.fadeTo('slow', 1); /* Unhiding all images */
} else {
images.show('slow');
}
images.parent()
.parent()
.children('div.hidebuttoncontainer')
.remove(); /* Removing all containers with buttions */
portlet.attr( 'title', PortletLinkTipShown )
.text( PortletLinkNameShown );
delete hideimagesarray;
isImageHidingEnabled =false;
mw.cookie.set(cookiename, null); /* Deleting cookie */
}
/* Function to toggle images and buttons */
function ToggleImage () {
var image= $(this).parent()
.parent()
.find('img.hideabale');
var index=$.inArray(image[0], images);
if (DoNotChangeDisplay) {
image.fadeTo('slow', +hideimagesarray[index]);
} else {
image.toggle('slow');
}
$(this).button('option', 'label', buttonText[+hideimagesarray[index]]);
hideimagesarray[index]=!hideimagesarray[index];
}
}
})
})