2015-01-23 13:09:30 +00:00
|
|
|
|
|
|
|
Htk.FullImage = new Class
|
|
|
|
({
|
|
|
|
Extends: Vn.Object
|
2016-05-02 13:05:49 +00:00
|
|
|
,Properties:
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-05-02 13:05:49 +00:00
|
|
|
/**
|
|
|
|
* Subdirectory where full images are allocated.
|
|
|
|
**/
|
|
|
|
fullDir:
|
2015-09-22 07:20:47 +00:00
|
|
|
{
|
2016-05-02 13:05:49 +00:00
|
|
|
type: String
|
|
|
|
,set: function (x)
|
|
|
|
{
|
|
|
|
this._fullDir = x;
|
|
|
|
}
|
|
|
|
,get: function ()
|
|
|
|
{
|
|
|
|
return this._fullDir;
|
|
|
|
}
|
2015-09-22 07:20:47 +00:00
|
|
|
}
|
2016-05-02 13:05:49 +00:00
|
|
|
}
|
2015-02-08 15:38:38 +00:00
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
,show: function (src)
|
|
|
|
{
|
|
|
|
var popup = new Htk.Popup ({class: 'htk-full-image', modal: true});
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
var img = document.createElement ('img');
|
|
|
|
img.className = 'htk-full-image';
|
|
|
|
img.addEventListener ('click', this._onImageClick.bind (this, popup));
|
|
|
|
//img.addEventListener ('error', this._onImageError.bind (this, popup));
|
|
|
|
img.src = src;
|
|
|
|
|
|
|
|
if (!img.complete)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-05-02 13:05:49 +00:00
|
|
|
img.addEventListener ('load', this._onImageLoad.bind (this, popup, img));
|
|
|
|
|
|
|
|
var spinner = new Htk.Spinner ();
|
|
|
|
spinner.start ();
|
|
|
|
popup.child = spinner;
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2016-05-02 13:05:49 +00:00
|
|
|
else
|
|
|
|
this._onImageLoad (popup, img);
|
|
|
|
|
|
|
|
popup.open ();
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
,_onImageLoad: function (popup, img)
|
|
|
|
{
|
|
|
|
var scale = null;
|
2015-01-23 13:09:30 +00:00
|
|
|
var width = img.width;
|
|
|
|
var height = img.height;
|
2015-08-26 22:18:53 +00:00
|
|
|
var innerWidth = Vn.Browser.getInnerWidth () - 50;
|
|
|
|
var innerHeight = Vn.Browser.getInnerHeight () - 50;
|
2015-01-23 13:09:30 +00:00
|
|
|
|
|
|
|
if (width > innerWidth)
|
|
|
|
{
|
|
|
|
scale = width / innerWidth;
|
|
|
|
height = parseInt (height / scale);
|
|
|
|
width = innerWidth;
|
|
|
|
}
|
|
|
|
if (height > innerHeight)
|
|
|
|
{
|
|
|
|
scale = height / innerHeight;
|
|
|
|
width = parseInt (width / scale);
|
|
|
|
height = innerHeight;
|
|
|
|
}
|
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
if (scale !== null)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
|
|
|
img.style.width = width +'px';
|
|
|
|
img.style.height = height +'px';
|
|
|
|
}
|
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
popup.childNode = img;
|
|
|
|
popup.reset ();
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
,_onImageClick: function (popup)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-05-02 13:05:49 +00:00
|
|
|
popup.hide ();
|
2015-02-01 03:21:54 +00:00
|
|
|
}
|
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
,_onImageError: function (popup) {}
|
2015-01-23 13:09:30 +00:00
|
|
|
});
|
|
|
|
|