hedera-web/js/htk/field/image.js

218 lines
3.8 KiB
JavaScript

/**
* Class to display or edit an image. Also it allows to show it's full version.
*/
module.exports = new Class
({
Extends: Htk.Field
,Tag: 'htk-image'
,Properties:
{
/**
* The directory where the images are allocated.
*/
directory:
{
type: String
,set: function (x)
{
this._directory = x;
this._refreshSrc ();
}
,get: function ()
{
return this._directory;
}
},
/**
* The subdirectory where the images are allocated.
*/
subdir:
{
type: String
,set: function (x)
{
this._subdir = x;
this._refreshSrc ();
}
,get: function ()
{
return this._subdir;
}
},
/**
* Whether to show the full image when mouse hover.
*/
fullDir:
{
type: String
,set: function (x)
{
this._fullDir = x;
this._refreshClick ();
}
,get: function ()
{
return this._fullDir;
}
},
/**
* The REST connection used to upload the image.
*/
conn:
{
type: Vn.JsonConnection
}
}
,_directory: null
,_subdir: null
,_fullDir: null
,_error: false
,_editable: false
,render: function ()
{
var node = this.createRoot ('div');
node.className = 'htk-image';
var img = this.img = this.createElement ('img');
img.addEventListener ('error', this._onImageError.bind (this));
node.appendChild (img);
this.setEditable ();
this._refreshClick ();
this._refreshSrc ();
}
,_refreshClick: function ()
{
if (!this.node)
return;
if (this.clickHandler)
{
Vn.Node.removeClass (this.node, 'clickable');
this.node.removeEventListener ('click', this.clickHandler);
this.clickHander = null;
}
if (this._fullDir)
{
this.clickHandler = this._onClick.bind (this);
this.node.addEventListener ('click', this.clickHandler);
Vn.Node.addClass (this.node, 'clickable');
}
}
,setEditable: function ()
{
if (!this.node)
return;
if (this.editButton)
{
this.node.removeChild (this.editButton);
this.editButton = null;
}
if (this._editable)
{
var button = this.createElement ('button');
button.addEventListener ('click', this._onEditClick.bind (this));
button.title = _('UpdateImage');
this.node.appendChild (button);
var icon = new Htk.Icon ({icon: 'add-photo'});
button.appendChild (icon.node);
this.editButton = button;
}
}
,_makeSrc: function (subdir)
{
var src = Vn.Config['image_dir'] +'/';
if (this._directory)
src += this._directory +'/';
if (subdir)
src += subdir +'/';
src += this._value;
if (this._stamp)
src += '?'+ this._stamp;
return src;
}
,_refreshSrc: function ()
{
if (!this.node)
return;
if (this._value)
{
this._error = false;
this.img.src = this._makeSrc (this._subdir);
}
else
delete this.img.src;
}
,putValue: function (value)
{
this._refreshSrc ();
}
,_onImageError: function ()
{
this._error = true;
}
,_onClick: function (event)
{
if (event.defaultPrevented || !this._fullDir || !this._value || this._error)
return;
(new Htk.FullImage ()).show (this._makeSrc (this._fullDir));
event.preventDefault ();
}
,_onEditClick: function (event)
{
event.preventDefault ();
var editor = new Htk.ImageEditor ({conn: this.conn});
editor.setData (this.value, this._directory);
editor.on ('name-changed', this._onNameChange, this);
editor.on ('file-uploaded', this._onFileUpload, this);
editor.on ('closed', this._onEditorClose, this);
this.popup = new Htk.Popup
({
modal: true,
child: editor
});
this.popup.show (this.node);
}
,_onNameChange: function (editor, value)
{
this.value = value;
}
,_onFileUpload: function (cell, editor)
{
this._stamp = new Date ().getTime ();
this._refreshSrc (cell);
this.popup.hide ();
}
,_onEditorClose: function (editor)
{
editor.disconnectByInstance (this);
}
});