2015-01-23 13:09:30 +00:00
|
|
|
Htk.Image = new Class
|
|
|
|
({
|
|
|
|
Extends: Htk.Entry
|
|
|
|
,Tag: 'htk-image'
|
2015-03-09 08:36:54 +00:00
|
|
|
,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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
,_directory: null
|
|
|
|
,basedir: null
|
2015-01-23 13:09:30 +00:00
|
|
|
,empty: false
|
|
|
|
|
|
|
|
,initialize: function (props)
|
|
|
|
{
|
|
|
|
this.parent (props);
|
2015-03-09 08:36:54 +00:00
|
|
|
this.createElement ('img');
|
|
|
|
// this.node.addEventListener ('error', this.onImageError.bind (this));
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2015-03-09 08:36:54 +00:00
|
|
|
,onImageError: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
|
|
|
if (!this.empty)
|
|
|
|
{
|
|
|
|
this.empty = true;
|
|
|
|
this.node.src = 'image/empty.png';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
,render: function (force)
|
|
|
|
{
|
2015-03-09 08:36:54 +00:00
|
|
|
if (this._value)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-03-09 08:36:54 +00:00
|
|
|
var url = '';
|
|
|
|
|
|
|
|
if (this.basedir)
|
|
|
|
url += this.basedir +'/';
|
|
|
|
|
|
|
|
url += this._value;
|
2015-01-23 13:09:30 +00:00
|
|
|
|
|
|
|
if (force)
|
2015-03-09 08:36:54 +00:00
|
|
|
url += '?' + (new Date()).getTime ();
|
2015-01-23 13:09:30 +00:00
|
|
|
|
|
|
|
this.empty = false;
|
2015-03-09 08:36:54 +00:00
|
|
|
this.node.src = url;
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
else
|
2015-03-09 08:36:54 +00:00
|
|
|
this.onImageError ();
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2015-03-09 08:36:54 +00:00
|
|
|
,putValue: function (value)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
|
|
|
this.render (false);
|
|
|
|
}
|
|
|
|
|
|
|
|
,setShowFull: function (show)
|
|
|
|
{
|
|
|
|
if (show)
|
|
|
|
{
|
2015-03-09 08:36:54 +00:00
|
|
|
this.fullImage = new Htk.FullImage ();
|
|
|
|
this.node.addEventListener ('mouseover', this.onMouseOver.bind (this));
|
|
|
|
this.node.addEventListener ('mouseout', this.onMouseOut.bind (this));
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
,setEditable: function (editable)
|
|
|
|
{
|
|
|
|
if (editable)
|
|
|
|
{
|
|
|
|
var obj = this;
|
|
|
|
this.style.cursor = 'pointer';
|
|
|
|
this.node.addEventListener ('dblclick',
|
2015-03-09 08:36:54 +00:00
|
|
|
this.onDoubleClick.bind (this));
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-03-09 08:36:54 +00:00
|
|
|
,onDoubleClick: function (event)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-03-09 08:36:54 +00:00
|
|
|
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);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2015-03-09 08:36:54 +00:00
|
|
|
,onMouseOver: function (cell)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-03-09 08:36:54 +00:00
|
|
|
if (!cell.empty)
|
|
|
|
this.fullImage.show (this.basedir, cell.value);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2015-03-09 08:36:54 +00:00
|
|
|
|
|
|
|
,onMouseOut: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-03-09 08:36:54 +00:00
|
|
|
this.fullImage.hide ();
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|