140 lines
2.8 KiB
JavaScript
140 lines
2.8 KiB
JavaScript
|
|
||
|
|
Htk.FullImage = new Class
|
||
|
|
({
|
||
|
|
Extends: Vn.Object
|
||
|
|
|
||
|
|
,img: null
|
||
|
|
,timeout: 0
|
||
|
|
,loading: false
|
||
|
|
,visible: false
|
||
|
|
,hideCalled: false
|
||
|
|
|
||
|
|
,initialize: function (props)
|
||
|
|
{
|
||
|
|
this.parent (props);
|
||
|
|
|
||
|
|
var div = document.createElement ('div');
|
||
|
|
div.className = 'full-image';
|
||
|
|
|
||
|
|
var loadingBox = document.createElement ('div');
|
||
|
|
loadingBox.className = 'image-loader';
|
||
|
|
|
||
|
|
var loadingImg = document.createElement ('img');
|
||
|
|
loadingImg.src = 'image/loader-black.gif';
|
||
|
|
loadingImg.alt = _('Loading');
|
||
|
|
loadingBox.appendChild (loadingImg);
|
||
|
|
|
||
|
|
this.div = div;
|
||
|
|
this.loadingBox = loadingBox;
|
||
|
|
this.loadingImg = loadingImg;
|
||
|
|
}
|
||
|
|
|
||
|
|
,getLeft: function (width)
|
||
|
|
{
|
||
|
|
return parseInt (getPageXOffset () + (getInnerWidth () - width) / 2) +'px';
|
||
|
|
}
|
||
|
|
|
||
|
|
,getTop: function (height)
|
||
|
|
{
|
||
|
|
return parseInt (getPageYOffset () + (getInnerHeight () - height) / 2) +'px';
|
||
|
|
}
|
||
|
|
|
||
|
|
,show: function (basedir, file)
|
||
|
|
{
|
||
|
|
if (this.timeout)
|
||
|
|
{
|
||
|
|
clearTimeout (this.timeout);
|
||
|
|
this.timeout = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.hideCalled = false;
|
||
|
|
this.loadingBox.style.left = this.getLeft (40);
|
||
|
|
this.loadingBox.style.top = this.getTop (40);
|
||
|
|
|
||
|
|
this.img = document.createElement ('img');
|
||
|
|
this.img.src = basedir +'/full/'+ file;
|
||
|
|
this.img.addEventListener ('load', this.imageLoaded.bind (this, this.img));
|
||
|
|
this.img.addEventListener ('error', this.hideLoading.bind (this));
|
||
|
|
|
||
|
|
if (!this.img.complete && !this.loading)
|
||
|
|
{
|
||
|
|
document.body.appendChild (this.loadingBox);
|
||
|
|
this.loading = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
,imageLoaded: function (img)
|
||
|
|
{
|
||
|
|
if (img != this.img || this.hideCalled)
|
||
|
|
return;
|
||
|
|
|
||
|
|
var scale = 1.0;
|
||
|
|
var width = img.width;
|
||
|
|
var height = img.height;
|
||
|
|
var innerWidth = getInnerWidth () - 350;
|
||
|
|
var innerHeight = getInnerHeight () - 120;
|
||
|
|
|
||
|
|
if (width > innerWidth)
|
||
|
|
{
|
||
|
|
scale = width / innerWidth;
|
||
|
|
height = parseInt (height / scale);
|
||
|
|
width = innerWidth;
|
||
|
|
}
|
||
|
|
if (height > innerHeight)
|
||
|
|
{
|
||
|
|
scale = height / innerHeight;
|
||
|
|
width = parseInt (width / scale);
|
||
|
|
height = innerHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.hideLoading ();
|
||
|
|
this.div.style.left = this.getLeft (width + 2);
|
||
|
|
this.div.style.top = this.getTop (height + 2);
|
||
|
|
this.div.style.width = width +'px';
|
||
|
|
this.div.style.height = height +'px';
|
||
|
|
|
||
|
|
if (scale !== 1.0)
|
||
|
|
{
|
||
|
|
img.style.width = width +'px';
|
||
|
|
img.style.height = height +'px';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.div.firstChild != null)
|
||
|
|
this.div.replaceChild (img, this.div.firstChild);
|
||
|
|
else
|
||
|
|
this.div.appendChild (img);
|
||
|
|
|
||
|
|
if (!this.visible)
|
||
|
|
{
|
||
|
|
document.body.appendChild (this.div);
|
||
|
|
this.visible = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
,hide: function ()
|
||
|
|
{
|
||
|
|
this.hideCalled = true;
|
||
|
|
this.hideLoading ();
|
||
|
|
|
||
|
|
if (this.visible)
|
||
|
|
this.timeout = setTimeout (this.hideTimeout.bind (this), 450);
|
||
|
|
}
|
||
|
|
|
||
|
|
,hideTimeout: function ()
|
||
|
|
{
|
||
|
|
document.body.removeChild (this.div);
|
||
|
|
this.visible = false;
|
||
|
|
this.timeout = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
,hideLoading: function ()
|
||
|
|
{
|
||
|
|
if (this.loading)
|
||
|
|
{
|
||
|
|
document.body.removeChild (this.loadingBox);
|
||
|
|
this.loading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|