185 lines
3.0 KiB
JavaScript
Executable File
185 lines
3.0 KiB
JavaScript
Executable File
/**
|
|
* Class to display or edit an image. Also it allows to show it's full version.
|
|
**/
|
|
var fullImage = null;
|
|
|
|
Htk.Image = new Class
|
|
({
|
|
Extends: Htk.Entry
|
|
,Tag: 'htk-image'
|
|
,Properties:
|
|
{
|
|
/**
|
|
* The directory where the images are allocated.
|
|
**/
|
|
directory:
|
|
{
|
|
type: String
|
|
,set: function (x)
|
|
{
|
|
this._directory = x;
|
|
this._basedir = Vn.Config['image_dir'] +'/'+ x;
|
|
this.render (false);
|
|
}
|
|
,get: function ()
|
|
{
|
|
return this._directory;
|
|
}
|
|
},
|
|
/**
|
|
* The directory where the images are allocated.
|
|
**/
|
|
subdir:
|
|
{
|
|
type: String
|
|
,set: function (x)
|
|
{
|
|
this._subdir = x;
|
|
this.render (false);
|
|
}
|
|
,get: function ()
|
|
{
|
|
return this._subdir;
|
|
}
|
|
},
|
|
/**
|
|
* Whether to show the full image when mouse hover.
|
|
**/
|
|
showFull:
|
|
{
|
|
type: Boolean
|
|
,set: function (x)
|
|
{
|
|
if (x && !this._fullImage)
|
|
{
|
|
if (!fullImage)
|
|
fullImage = new Htk.FullImage ();
|
|
|
|
this._fullImage = fullImage;
|
|
this.node.addEventListener ('mouseover', this.onMouseOver.bind (this));
|
|
this.node.addEventListener ('mouseout', this.onMouseOut.bind (this));
|
|
}
|
|
|
|
this._showFull = x;
|
|
}
|
|
,get: function ()
|
|
{
|
|
return this._showFull;
|
|
}
|
|
},
|
|
/**
|
|
* Subdirectory where full images are allocated.
|
|
**/
|
|
fullDir:
|
|
{
|
|
type: String
|
|
,set: function (x)
|
|
{
|
|
this._fullDir = x;
|
|
}
|
|
,get: function ()
|
|
{
|
|
return this._fullDir;
|
|
}
|
|
}
|
|
}
|
|
|
|
,_directory: null
|
|
,_subdir: null
|
|
,_basedir: null
|
|
,_empty: false
|
|
,_showFull: false
|
|
,_fullDir: null
|
|
|
|
,initialize: function (props)
|
|
{
|
|
this.parent (props);
|
|
this.createElement ('img');
|
|
// this.node.addEventListener ('error', this.onImageError.bind (this));
|
|
}
|
|
|
|
,onImageError: function ()
|
|
{
|
|
if (!this._empty)
|
|
{
|
|
this._empty = true;
|
|
this.node.src = 'image/empty.png';
|
|
}
|
|
}
|
|
|
|
,render: function (force)
|
|
{
|
|
if (this._value)
|
|
{
|
|
var url = '';
|
|
|
|
if (this._basedir)
|
|
url += this._basedir +'/';
|
|
|
|
if (this._subdir)
|
|
url += this._subdir +'/';
|
|
|
|
url += this._value;
|
|
|
|
if (force)
|
|
url += '?' + (new Date()).getTime ();
|
|
|
|
this._empty = false;
|
|
this.node.src = url;
|
|
this.node.style.display = '';
|
|
}
|
|
else
|
|
{
|
|
delete this.node.src;
|
|
this.node.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
,putValue: function (value)
|
|
{
|
|
this.render (false);
|
|
}
|
|
|
|
,onMouseOver: function (cell)
|
|
{
|
|
if (!this._showFull)
|
|
return;
|
|
|
|
var src = this._fullDir ? this._fullDir : 'full';
|
|
src += '/'+ this._value;
|
|
|
|
if (this._stamp)
|
|
src += '?'+ this._stamp;
|
|
|
|
if (!cell.error)
|
|
this._fullImage.show (this._basedir +'/'+ src);
|
|
}
|
|
|
|
,onMouseOut: function ()
|
|
{
|
|
this._fullImage.hide ();
|
|
}
|
|
|
|
,setEditable: function (editable)
|
|
{
|
|
if (editable)
|
|
{
|
|
var obj = this;
|
|
this.style.cursor = 'pointer';
|
|
this.node.addEventListener ('dblclick',
|
|
this.onDoubleClick.bind (this));
|
|
}
|
|
}
|
|
|
|
,onDoubleClick: function (event)
|
|
{
|
|
var editor = new Htk.ImageEditor ();
|
|
editor.setData (cell.value, this._directory);
|
|
|
|
this.popup = new Htk.Popup ();
|
|
this.popup.setChild (editor);
|
|
this.popup.show (this.node);
|
|
}
|
|
});
|
|
|