171 lines
3.5 KiB
JavaScript
Executable File
171 lines
3.5 KiB
JavaScript
Executable File
|
|
Htk.FullImage = new Class
|
|
({
|
|
Extends: Vn.Object
|
|
|
|
,img: null
|
|
,timeout: 0
|
|
,loading: false
|
|
,visible: false
|
|
,hideCalled: false
|
|
,closed: false
|
|
|
|
,initialize: function (props)
|
|
{
|
|
var div = document.createElement ('div');
|
|
div.className = 'htk-full-image';
|
|
div.addEventListener ('mouseover', this.cancelHide.bind (this));
|
|
div.addEventListener ('mouseout', this.hideNow.bind (this));
|
|
|
|
var loadingBox = document.createElement ('div');
|
|
loadingBox.className = 'htk-full-image-loader';
|
|
|
|
var spinner = new Htk.Spinner ();
|
|
loadingBox.appendChild (spinner.getNode ());
|
|
|
|
this.div = div;
|
|
this.loadingBox = loadingBox;
|
|
this.spinner = spinner;
|
|
this.parent (props);
|
|
}
|
|
|
|
,getLeft: function (width)
|
|
{
|
|
return parseInt (Vn.Browser.getPageXOffset () + (Vn.Browser.getInnerWidth () - width) / 2) +'px';
|
|
}
|
|
|
|
,getTop: function (height)
|
|
{
|
|
return parseInt (Vn.Browser.getPageYOffset () + (Vn.Browser.getInnerHeight () - height) / 2) +'px';
|
|
}
|
|
|
|
,show: function (src)
|
|
{
|
|
if (this.closed && this.src == src)
|
|
{
|
|
this.closed = false;
|
|
return;
|
|
}
|
|
|
|
this.cancelHide ();
|
|
|
|
this.closed = false;
|
|
this.src = src
|
|
|
|
this.img = document.createElement ('img');
|
|
this.img.src = src;
|
|
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.spinner.start ();
|
|
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 = Vn.Browser.getInnerWidth () - 50;
|
|
var innerHeight = Vn.Browser.getInnerHeight () - 50;
|
|
|
|
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);
|
|
|
|
img.addEventListener ('click', this.onImageClick.bind (this));
|
|
|
|
if (!this.visible)
|
|
{
|
|
document.body.appendChild (this.div);
|
|
this.visible = true;
|
|
|
|
this.onDocumentClickCallback = this.hideNow.bind (this);
|
|
document.addEventListener ('click', this.onDocumentClickCallback);
|
|
}
|
|
}
|
|
|
|
,onImageClick: function ()
|
|
{
|
|
this.closed = true;
|
|
}
|
|
|
|
,hide: function ()
|
|
{
|
|
this.hideCalled = true;
|
|
this.hideLoading ();
|
|
|
|
if (this.visible)
|
|
this.timeout = setTimeout (this.hideNow.bind (this), 450);
|
|
}
|
|
|
|
,hideNow: function ()
|
|
{
|
|
if (this.visible)
|
|
{
|
|
document.body.removeChild (this.div);
|
|
this.hideCalled = true;
|
|
this.visible = false;
|
|
this.timeout = 0;
|
|
}
|
|
|
|
document.removeEventListener ('click', this.onDocumentClickCallback);
|
|
this.onDocumentClickCallback = null;
|
|
}
|
|
|
|
,cancelHide: function ()
|
|
{
|
|
if (this.timeout)
|
|
{
|
|
clearTimeout (this.timeout);
|
|
this.timeout = 0;
|
|
}
|
|
|
|
this.hideCalled = false;
|
|
}
|
|
|
|
,hideLoading: function ()
|
|
{
|
|
if (this.loading)
|
|
{
|
|
document.body.removeChild (this.loadingBox);
|
|
this.spinner.stop ();
|
|
this.loading = false;
|
|
}
|
|
}
|
|
});
|
|
|