188 lines
3.4 KiB
JavaScript
Executable File
188 lines
3.4 KiB
JavaScript
Executable File
Htk.ColumnImage = new Class
|
|
({
|
|
Extends: Htk.Column
|
|
,Tag: 'htk-column-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;
|
|
}
|
|
,get: function ()
|
|
{
|
|
return this._directory;
|
|
}
|
|
},
|
|
/**
|
|
* The directory where the images are allocated.
|
|
**/
|
|
subdir:
|
|
{
|
|
type: String
|
|
,value: null
|
|
},
|
|
/**
|
|
* Whether to show the full image when mouse hover.
|
|
**/
|
|
showFull:
|
|
{
|
|
type: Boolean
|
|
,value: false
|
|
},
|
|
/**
|
|
* Subdirectory where full images are allocated.
|
|
**/
|
|
fullDir:
|
|
{
|
|
type: String
|
|
,set: function (x)
|
|
{
|
|
this._fullDir = x;
|
|
}
|
|
,get: function ()
|
|
{
|
|
return this._fullDir;
|
|
}
|
|
}
|
|
}
|
|
|
|
,_directory: null
|
|
,_basedir: null
|
|
|
|
,initialize: function (props)
|
|
{
|
|
this._cssClass = 'cell-image';
|
|
this._fullImage = new Htk.FullImage ();
|
|
this.parent (props);
|
|
}
|
|
|
|
,render: function (tr)
|
|
{
|
|
var td = this.parent (tr);
|
|
|
|
var img = document.createElement ('img');
|
|
img.alt = ''
|
|
td.appendChild (img);
|
|
|
|
var cell =
|
|
{
|
|
img: img
|
|
,value: this.value
|
|
,tr: tr
|
|
,error: false
|
|
,stamp: null
|
|
};
|
|
|
|
this._setSrc (cell);
|
|
|
|
if (this.showFull)
|
|
{
|
|
img.addEventListener ('mouseover', this._onMouseOver.bind (this, cell));
|
|
img.addEventListener ('mouseout', this._onMouseOut.bind (this));
|
|
}
|
|
if (this.editable)
|
|
{
|
|
img.className = 'editable';
|
|
img.addEventListener ('dblclick', this._onDoubleClick.bind (this, cell));
|
|
img.addEventListener ('error', this._onImageError.bind (this, cell));
|
|
}
|
|
|
|
return td;
|
|
}
|
|
|
|
,_setSrc: function (cell)
|
|
{
|
|
if (cell.value)
|
|
{
|
|
var url = this._basedir +'/';
|
|
|
|
if (this.subdir)
|
|
url += this.subdir +'/';
|
|
|
|
url += cell.value;
|
|
|
|
if (cell.stamp)
|
|
url += '?'+ cell.stamp;
|
|
|
|
cell.img.src = url;
|
|
}
|
|
else
|
|
this._onImageError (cell);
|
|
}
|
|
|
|
,_onImageError: function (cell)
|
|
{
|
|
if (!cell.error)
|
|
{
|
|
cell.error = true;
|
|
cell.img.src = 'image/unknown.svg';
|
|
}
|
|
}
|
|
|
|
,_onMouseOver: function (cell)
|
|
{
|
|
if (cell.error)
|
|
return;
|
|
|
|
var src = this._fullDir ? this._fullDir : 'full';
|
|
src += '/'+ cell.value;
|
|
|
|
if (cell.stamp)
|
|
src += '?'+ cell.stamp;
|
|
|
|
this._fullImage.show (this._basedir +'/'+ src);
|
|
}
|
|
|
|
,_onMouseOut: function ()
|
|
{
|
|
this._fullImage.hide ();
|
|
}
|
|
|
|
,_onDoubleClick: function (cell)
|
|
{
|
|
var editor = new Htk.ImageEditor ();
|
|
editor.setData (cell.value, this._directory);
|
|
|
|
this.nameChangedHandler = this._onNameChange.bind (this, cell);
|
|
editor.on ('name-changed', this.nameChangedHandler);
|
|
|
|
this.fileUploadedHandler = this._onFileUpload.bind (this, cell);
|
|
editor.on ('file-uploaded', this.fileUploadedHandler);
|
|
|
|
this.editorClosedHandler = this._onEditorClose.bind (this);
|
|
editor.on ('closed', this.editorClosedHandler);
|
|
|
|
this.popup = new Htk.Popup ();
|
|
this.popup.setChild (editor);
|
|
this.popup.show (cell.img);
|
|
}
|
|
|
|
,_onNameChange: function (cell, editor, value)
|
|
{
|
|
cell.value = value;
|
|
this._setSrc (cell);
|
|
this.changed (cell.tr, value);
|
|
}
|
|
|
|
,_onFileUpload: function (cell, editor)
|
|
{
|
|
cell.stamp = new Date ().getTime ();
|
|
this._setSrc (cell);
|
|
this.popup.hide ();
|
|
}
|
|
|
|
,_onEditorClose: function (editor)
|
|
{
|
|
editor.disconnect ('name-changed', this.nameChangedHandler);
|
|
editor.disconnect ('file-uploaded', this.fileUploadedHandler);
|
|
editor.disconnect ('closed', this.editorClosedHandler);
|
|
}
|
|
});
|