Difference between revisions of "Widget:ImageLoader"

From Hackerspace ACKspace
Jump to: navigation, search
m (oops, wring variable: fixed)
(updated image loader)
Line 5: Line 5:
  
 
== Using this widget ==
 
== Using this widget ==
For information on how to use this widget, see '''TBD'''.
+
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:
 +
{{#widget:{{PAGENAME}}
 +
|url=https://upload.wikimedia.org/wikipedia/commons/b/b8/Trojan_Room_coffee_pot_xcoffee.png
 +
|width=300
 +
|height=250
 +
}}
 +
Note that '''url''' is mandatory, the test is optional (leave out interval to make the image static)
 +
 
  
 
== Copy to your site ==
 
== 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.
 
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">
 
</noinclude><includeonly><script type="text/javascript">
console.log( "imageloader test" );
+
<!--{$url|validate:url}-->", "id" : null, "imgBuf" : null, "loading" : false };
console.log( "<!--{$url|validate:url}-->" );
+
 
console.log( "<!--{$width|escape:html|default:400}-->" );
+
    function setFilter( _img, _filter )
console.log( "<!--{$height|escape:html|default:300}-->" );
+
    {
 +
        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;
 +
    }
 +
 
 +
    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 );
 +
        }
 +
 
 +
        // 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 + '"/>' );
 +
}( ));
 
</script>
 
</script>
<img src="<!--{$url|validate:url}-->" style="width:{$width|escape:html|default:400}-->;height:<!--{$height|escape:html|default:300}-->"/>
 
 
</includeonly>
 
</includeonly>

Revision as of 11:29, 9 December 2014

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

Created by Xopr

Using this widget

To insert this widget, use the following code:

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

This will give the following result: Note that url is mandatory, the test is optional (leave out interval to make the image static)


Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:ImageLoader article.