MediaViki:Gadget-imgToggle.js

/**
* based on [[fr:MediaWiki:Common.js]]
* expanded by [[he:user:Mikimik]]
*/
(function () {

var ImgToggleResizeSmallScreensFlag = true;
mw.hook( 'wikipage.content' ).add( function ( $content ) {
    function toggleTitles(div, title1, title2) {
    	var tmp = $(div).find('.toggleOpen');
    	$(div).find('.toggleClose').removeClass('toggleClose').addClass('toggleOpen');
    	tmp.removeClass('toggleOpen').addClass('toggleClose');
        div = div.firstChild;
        title1 = title1.find('.imgtoggleboxTitle').text();
        title2 = title2.find('.imgtoggleboxTitle').text();
        div.innerHTML = title1;
        div.nextSibling.innerHTML = title2;
        if ( title1 && title2 ) div.appendChild( document.createElement("br") );
    }
    
    try {
        var divWrapper = $content.find('div.img_toggle');
        if ( !divWrapper.length ) return;
        if (ImgToggleResizeSmallScreensFlag)
	        mw.loader.using( 'mediawiki.util' ).done( function() {
		        mw.util.addCSS('div.img_toggle{overflow:auto; overflow-y:hidden; max-width:'
		        	+ ($('#bodyContent').width() - 38) +'px;}');
	        }); // an ability to scroll horisontally in mobile for infoboxes
	        ImgToggleResizeSmallScreensFlag = false;

        var n;
        
        var toggleRightOnClick = function() {
	        try {
	            if ( this.parentNode.status === 0 ) {
	            	return false;
	            }
	            var boxes = $ ( this.parentNode.parentNode).find("div.imgtogglebox" );
	            
	            boxes[this.parentNode.status].style.display = "none";
	            this.parentNode.status--;
	            boxes[this.parentNode.status].style.display = "";
	            
	            toggleTitles(this.parentNode, this.parentNode.status === 0 ? $() : $(boxes[this.parentNode.status-1]), $(boxes[this.parentNode.status+1]));
	            
	            return false;
	        }
	        catch (e) {
	        	return;
	    	}
	    };
	    
	    var toggleLeftOnClick = function() {
            try {
                if ( this.parentNode.status == this.parentNode.maxtoggle ) {
                	return false;
                }
                var boxes = $ ( this.parentNode.parentNode).find("div.imgtogglebox" );
                
                boxes[this.parentNode.status].style.display = "none";
                this.parentNode.status++;
                boxes[this.parentNode.status].style.display = "";
                
                toggleTitles(this.parentNode, $(boxes[this.parentNode.status-1]), this.parentNode.status == this.parentNode.maxtoggle ? $() : $(boxes[this.parentNode.status+1]));
                
                return false;
            }
            catch (e) {
            	return;
        	}
        };
        
        for ( var i = 0 ; i < divWrapper.length ; i++ )
        {
            var boxes = $(divWrapper[i]).find('div.imgtogglebox');
            if ( boxes.length < 2 ) continue;                    // there must be at least 2 toggle boxes in the wrapper
            var startToggle=0;
            for ( n = 0 ; n < boxes.length ; n++ )
            if ( /\btogglestart\b/.test(boxes[n].className) )
            {
                startToggle = n;
                break;
            }
            
            for ( n = 0 ; n < boxes.length ; n++ ) if ( n != startToggle ) boxes[n].style.display = "none";
            
            var toggleRight = document.createElement("a");
            toggleRight.href = "#";
            toggleRight.className = "a_toggle toggleClose toggleB";
            toggleRight.onclick = toggleRightOnClick;
            
            var toggleLeft = document.createElement("a");
            toggleLeft.href = "#";
            toggleLeft.className = "a_toggle toggleOpen toggleA";
            toggleLeft.onclick = toggleLeftOnClick;
            var div = document.createElement("div");
            div.maxtoggle = boxes.length - 1;
            div.status = startToggle;
            div.className="aTogglesContainer";
            div.appendChild ( toggleRight );
            div.appendChild ( toggleLeft );
            toggleTitles ( div, div.status === 0 ? $() : $(boxes[div.status-1]), div.status == div.maxtoggle ? $() : $(boxes[div.status+1]) );
            
            divWrapper[i].insertBefore ( div, boxes[boxes.length-1].nextSibling );
        }
    }
    catch (e)
    {
        return;        // lets just ignore what's happened
    }
});

}());