mirror of
https://github.com/Alfresco/alfresco-community-repo.git
synced 2025-08-14 17:58:59 +00:00
838e7d5381
git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5282 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
99 lines
2.7 KiB
JavaScript
99 lines
2.7 KiB
JavaScript
/*
|
|
Copyright (c) 2004-2006, The Dojo Foundation
|
|
All Rights Reserved.
|
|
|
|
Licensed under the Academic Free License version 2.1 or above OR the
|
|
modified BSD license. For more information on Dojo licensing, see:
|
|
|
|
http://dojotoolkit.org/community/licensing.shtml
|
|
*/
|
|
|
|
dojo.provide("dojo.widget.AnimatedPng");
|
|
|
|
dojo.require("dojo.widget.*");
|
|
dojo.require("dojo.widget.HtmlWidget");
|
|
|
|
// usage
|
|
// <img dojoType="AnimatedPng"
|
|
// src="images/animatedpng_static.gif" (for degradation; in case javascript is disabled)
|
|
// aniSrc="images/animatedpng_frames.gif"
|
|
// width="20"
|
|
// height="20"
|
|
// interval="50"
|
|
// />
|
|
//
|
|
// var params = {src: "images/animatedpng_static.gif", aniSrc: "images/animatedpng_frames.gif", width: 20, height: 20, interval: 50};
|
|
// var widget = dojo.widget.createWidget("AnimatedPng", params, document.getElementById("pngContainer"));
|
|
//
|
|
dojo.widget.defineWidget(
|
|
"dojo.widget.AnimatedPng",
|
|
dojo.widget.HtmlWidget,
|
|
{
|
|
// summary
|
|
// PNGs have great tranparency, but lack animation.
|
|
// This widget lets you point an img tag at an animated gif for graceful degrading,
|
|
// while letting you specify a png containing a grid of cells to animate between.
|
|
|
|
isContainer: false,
|
|
|
|
// width: Integer
|
|
// width (of each frame) in pixels
|
|
width: 0,
|
|
|
|
// height: Integer
|
|
// height (of each frame) in pixels
|
|
height: 0,
|
|
|
|
// aniSrc: String
|
|
// pathname to png file containing frames to be animated (ie, displayed sequentially)
|
|
aniSrc: '',
|
|
|
|
// interval: Integer
|
|
// time to display each frame
|
|
interval: 100,
|
|
|
|
_blankSrc: dojo.uri.dojoUri("src/widget/templates/images/blank.gif"),
|
|
|
|
templateString: '<img class="dojoAnimatedPng" />',
|
|
|
|
postCreate: function(){
|
|
this.cellWidth = this.width;
|
|
this.cellHeight = this.height;
|
|
|
|
var img = new Image();
|
|
var self = this;
|
|
|
|
img.onload = function(){ self._initAni(img.width, img.height); };
|
|
img.src = this.aniSrc;
|
|
},
|
|
|
|
_initAni: function(w, h){
|
|
this.domNode.src = this._blankSrc;
|
|
this.domNode.width = this.cellWidth;
|
|
this.domNode.height = this.cellHeight;
|
|
this.domNode.style.backgroundImage = 'url('+this.aniSrc+')';
|
|
this.domNode.style.backgroundRepeat = 'no-repeat';
|
|
|
|
this.aniCols = Math.floor(w/this.cellWidth);
|
|
this.aniRows = Math.floor(h/this.cellHeight);
|
|
this.aniCells = this.aniCols * this.aniRows;
|
|
this.aniFrame = 0;
|
|
|
|
window.setInterval(dojo.lang.hitch(this, '_tick'), this.interval);
|
|
},
|
|
|
|
_tick: function(){
|
|
this.aniFrame++;
|
|
if (this.aniFrame == this.aniCells) this.aniFrame = 0;
|
|
|
|
var col = this.aniFrame % this.aniCols;
|
|
var row = Math.floor(this.aniFrame / this.aniCols);
|
|
|
|
var bx = -1 * col * this.cellWidth;
|
|
var by = -1 * row * this.cellHeight;
|
|
|
|
this.domNode.style.backgroundPosition = bx+'px '+by+'px';
|
|
}
|
|
}
|
|
);
|