View source for Widget:ImageLoader

<noinclude>__NOTOC__
This widget allows you to embed images from non-https sources on your wiki page.

Created by [[User:Xopr|Xopr]]

== Using this widget ==
To insert this widget, use the following code:

 <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
|url=https://upload.wikimedia.org/wikipedia/commons/b/b8/Trojan_Room_coffee_pot_xcoffee.png
|width=300
|height=250
|interval=60
}}</nowiki>

This will give the following result:<br/>
{{#widget:{{PAGENAME}}
|url=https://upload.wikimedia.org/wikipedia/commons/b/b8/Trojan_Room_coffee_pot_xcoffee.png
|width=156
|height=175
}}<br/>
Note that '''url''' is mandatory, the rest is optional (leave out interval to make the image static)


== Copy to your site ==
To use this widget on your site, just install [http://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article.
</noinclude><includeonly><script type="text/javascript">
(function( )
{
    "use strict";
    var imageObj = { "src" : "<!--{$url|validate:url}-->", "id" : null, "imgBuf" : null, "loading" : false };

    function setFilter( _img, _filter )
    {
        var s = _img.style;
        if ( "webkitFilter" in s ) s.webkitFilter = _filter;
        if ( "mozFilter" in s ) s.mozFilter = _filter;
        if ( "msFilter" in s ) s.msFilter = _filter;
        if ( "oFilter" in s ) s.oFilter = _filter;
        if ( "filter" in s ) s.filter = _filter;
    }
    
    function imgSuccess()
    {
        // Transfer image and clear filters
        this.img.src = this.imgBuf.src;
        setFilter( this.img, "" );
        this.loading = false;
    }

    function imgFail()
    {
        // Try and make 'old' image sepia on error
        setFilter( this.img, "grayscale(100%) sepia(100%)" );
        this.loading = false;
        if ( !this.link )
        {
            this.link = this.img.parentNode.insertBefore( document.createElement( "a" ), this.img );
            this.link.target = "_blank";
            this.link.href = this.src;
            this.link.textContent = "Open image";
        }
    }

    function updateImage( )
    {
        if ( !this.img )
            this.img = document.getElementById( "imgLoad" + this.id );

        if ( !this.img )
        {
            console.error( "can't find target image" );
            return;
        }

        if ( !this.imgBuf )
        {
            this.imgBuf = new Image();
            this.imgBuf.onerror = imgFail.bind( this );
            this.imgBuf.onload = imgSuccess.bind( this );
            this.img.onerror = null;
            this.img.onload = null;
        }

        // If the image is still loading, mark the current one 'old' and wait on the next interval
        if ( this.loading )
        {
            setFilter( this.img, "grayscale(100%) sepia(100%)" );
        } else {
            this.loading = true;
            this.imgBuf.src = this.src + "?" + ( Math.random() * 100000 | 0 );
        }
    }

    // Use interval timer id as image id
    var interval = 1000 * <!--{$interval|validate:int|default:0}-->;
    if ( interval > 0 )
        imageObj.id = setInterval( updateImage.bind( imageObj ), interval );
    document.write( '<img width="<!--{$width|escape:html|default:auto}-->" height="<!--{$height|escape:html|default:auto}-->" src="' + imageObj.src + "?" + ( Math.random() * 100000 | 0 ) + '" id="imgLoad' + imageObj.id + '"/>' );
        imageObj.img = document.getElementById( "imgLoad" + imageObj.id );
        imageObj.img.onerror = imgFail.bind( imageObj);
}( ));
</script>
</includeonly>