User:Ruslik0/HideImages.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/* 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];          
       }
    }
 }) 
})