User:Anomie/file-toggle-transparency.js

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.
if(typeof(window.FileToggleTransparencyBackgrounds)=='undefined') window.FileToggleTransparencyBackgrounds = [
    'white url("//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat',
    'white url("//upload.wikimedia.org/wikipedia/commons/6/60/Transparency-tile.png") repeat',
    'white',
    '#ccc',
    '#888',
    '#444',
    'black',
    '#00f',
    '#f0f'
];

var FileToggleTransparency = {
    rules:[],

    changeBG:function(){
        for(var i=0; i<FileToggleTransparency.rules.length; i++){
            FileToggleTransparency.rules[i].style.background=this.$background;
        }
    },

    onLoad:function(){
        var bg=FileToggleTransparencyBackgrounds[0];
        if(document.createStyleSheet){
            var s=document.createStyleSheet();
            s.addRule('.filehistory a img', 'background:'+bg);
            FileToggleTransparency.rules.push(s.rules[s.rules.length-1]);
            s.addRule('#file img', 'background:'+bg);
            FileToggleTransparency.rules.push(s.rules[s.rules.length-1]);
            s.addRule('#file img:hover', 'background:'+bg);
            FileToggleTransparency.rules.push(s.rules[s.rules.length-1]);
        } else {
            var s=document.createElement('STYLE');
            s.type='text/css';
            document.getElementsByTagName('HEAD')[0].appendChild(s);
            s=s.sheet;
            s.insertRule('.filehistory a img, #file img, #file img:hover {\nbackground:'+bg+'\n}', s.cssRules.length);
            FileToggleTransparency.rules.push(s.cssRules[s.cssRules.length-1]);
        }
        if(!FileToggleTransparency.rules) return;

        var fm=$('.fullMedia');
        if(fm && fm.length>0){
            var p = document.createElement('p');
            p.className='FileTransparencyToggle';
            p.appendChild(document.createTextNode('Transparency fill:'));
            for(var i=0; i<FileToggleTransparencyBackgrounds.length; i++){
                var s=document.createElement('span');
                s.style.background=FileToggleTransparencyBackgrounds[i];
                s.$background=FileToggleTransparencyBackgrounds[i];
                $(s).click(FileToggleTransparency.changeBG);
                p.appendChild(s);
            }
            fm[0].appendChild(p);
        }

        var hist=$('#mw-imagepage-section-filehistory');
        hist = (hist && hist.length) ? hist[0] : null;
        var b = hist ? hist.firstChild : null;
        while(b && b.nodeName!='TABLE') b=b.nextSibling;
        if(b){
            var p = document.createElement('p');
            p.className='FileTransparencyToggle';
            p.appendChild(document.createTextNode('Transparency fill:'));
            for(var i=0; i<FileToggleTransparencyBackgrounds.length; i++){
                var s=document.createElement('span');
                s.style.background=FileToggleTransparencyBackgrounds[i];
                s.$background=FileToggleTransparencyBackgrounds[i];
                $(s).click(FileToggleTransparency.changeBG);
                p.appendChild(s);
            }
            hist.insertBefore(p,b);
        }
    }
};

if(mw.config.get('wgNamespaceNumber')==6 && mw.config.get('wgTitle').match(/\.(svg|png|gif)$/i)){
    importStylesheet('User:Anomie/file-toggle-transparency.css');
    $(document).ready(FileToggleTransparency.onLoad);
}