192 lines
3.4 KiB
JavaScript
Executable File
192 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.parent (props);
|
|
this.fullImage = new Htk.FullImage ();
|
|
}
|
|
|
|
,render: function (tr)
|
|
{
|
|
var td = this.parent (tr);
|
|
|
|
var className = 'cell-image';
|
|
|
|
if (td.className)
|
|
className = td.className +' '+ className;
|
|
|
|
td.className = className;
|
|
|
|
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/empty.png';
|
|
}
|
|
}
|
|
|
|
,onMouseOver: function (cell)
|
|
{
|
|
var src = this._fullDir ? this._fullDir : 'full';
|
|
src += '/'+ cell.value;
|
|
|
|
if (cell.stamp)
|
|
src += '?'+ cell.stamp;
|
|
|
|
if (!cell.error)
|
|
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);
|
|
}
|
|
});
|