2015-09-16 16:11:15 +00:00
|
|
|
/**
|
|
|
|
* Class to display or edit an image. Also it allows to show it's full version.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2016-09-26 09:28:47 +00:00
|
|
|
module.exports = new Class
|
2015-01-23 13:09:30 +00:00
|
|
|
({
|
2015-11-09 08:14:33 +00:00
|
|
|
Extends: Htk.Field
|
2015-01-23 13:09:30 +00:00
|
|
|
,Tag: 'htk-image'
|
2015-03-09 08:36:54 +00:00
|
|
|
,Properties:
|
|
|
|
{
|
|
|
|
/**
|
|
|
|
* The directory where the images are allocated.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2015-03-09 08:36:54 +00:00
|
|
|
directory:
|
|
|
|
{
|
|
|
|
type: String
|
|
|
|
,set: function (x)
|
|
|
|
{
|
|
|
|
this._directory = x;
|
2016-05-02 13:05:49 +00:00
|
|
|
this._refreshSrc ();
|
2015-03-09 08:36:54 +00:00
|
|
|
}
|
|
|
|
,get: function ()
|
|
|
|
{
|
|
|
|
return this._directory;
|
|
|
|
}
|
2015-09-16 16:11:15 +00:00
|
|
|
},
|
|
|
|
/**
|
2016-05-02 13:05:49 +00:00
|
|
|
* The subdirectory where the images are allocated.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2015-09-16 16:11:15 +00:00
|
|
|
subdir:
|
|
|
|
{
|
|
|
|
type: String
|
|
|
|
,set: function (x)
|
|
|
|
{
|
|
|
|
this._subdir = x;
|
2016-05-02 13:05:49 +00:00
|
|
|
this._refreshSrc ();
|
2015-09-16 16:11:15 +00:00
|
|
|
}
|
|
|
|
,get: function ()
|
|
|
|
{
|
|
|
|
return this._subdir;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* Whether to show the full image when mouse hover.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2015-09-16 16:11:15 +00:00
|
|
|
fullDir:
|
|
|
|
{
|
|
|
|
type: String
|
|
|
|
,set: function (x)
|
2016-05-02 13:05:49 +00:00
|
|
|
{
|
2015-09-16 16:11:15 +00:00
|
|
|
this._fullDir = x;
|
2016-05-02 13:05:49 +00:00
|
|
|
this._refreshClick ();
|
2015-09-16 16:11:15 +00:00
|
|
|
}
|
|
|
|
,get: function ()
|
|
|
|
{
|
|
|
|
return this._fullDir;
|
|
|
|
}
|
2016-09-24 14:32:31 +00:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* The REST connection used to upload the image.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2016-09-24 14:32:31 +00:00
|
|
|
conn:
|
|
|
|
{
|
|
|
|
type: Vn.JsonConnection
|
2015-03-09 08:36:54 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
,_directory: null
|
2015-09-16 16:11:15 +00:00
|
|
|
,_subdir: null
|
|
|
|
,_fullDir: null
|
2016-05-02 13:05:49 +00:00
|
|
|
,_error: false
|
2015-12-10 13:48:43 +00:00
|
|
|
,_editable: false
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2016-10-16 14:16:08 +00:00
|
|
|
,render: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-10-16 14:16:08 +00:00
|
|
|
var node = this.createRoot ('div');
|
2016-05-02 13:05:49 +00:00
|
|
|
node.className = 'htk-image';
|
|
|
|
|
2016-10-16 14:16:08 +00:00
|
|
|
var img = this.img = this.createElement ('img');
|
2016-05-02 13:05:49 +00:00
|
|
|
img.addEventListener ('error', this._onImageError.bind (this));
|
|
|
|
node.appendChild (img);
|
|
|
|
|
|
|
|
this.setEditable ();
|
|
|
|
this._refreshClick ();
|
|
|
|
this._refreshSrc ();
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2015-12-10 13:48:43 +00:00
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
,_refreshClick: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-05-02 13:05:49 +00:00
|
|
|
if (!this.node)
|
|
|
|
return;
|
|
|
|
|
|
|
|
if (this.clickHandler)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2017-03-30 11:44:53 +00:00
|
|
|
Vn.Node.removeClass (this.node, 'clickable-img');
|
2016-05-02 13:05:49 +00:00
|
|
|
this.node.removeEventListener ('click', this.clickHandler);
|
|
|
|
this.clickHander = null;
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2015-12-10 13:48:43 +00:00
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
if (this._fullDir)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-05-02 13:05:49 +00:00
|
|
|
this.clickHandler = this._onClick.bind (this);
|
|
|
|
this.node.addEventListener ('click', this.clickHandler);
|
2017-03-30 11:44:53 +00:00
|
|
|
Vn.Node.addClass (this.node, 'clickable-img');
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2015-12-10 13:48:43 +00:00
|
|
|
}
|
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
,setEditable: function ()
|
2015-12-10 13:48:43 +00:00
|
|
|
{
|
2016-05-02 13:05:49 +00:00
|
|
|
if (!this.node)
|
2015-12-10 13:48:43 +00:00
|
|
|
return;
|
2016-05-02 13:05:49 +00:00
|
|
|
|
|
|
|
if (this.editButton)
|
|
|
|
{
|
|
|
|
this.node.removeChild (this.editButton);
|
|
|
|
this.editButton = null;
|
|
|
|
}
|
2015-12-10 13:48:43 +00:00
|
|
|
|
|
|
|
if (this._editable)
|
2016-05-02 13:05:49 +00:00
|
|
|
{
|
2016-10-16 14:16:08 +00:00
|
|
|
var button = this.createElement ('button');
|
2016-05-02 13:05:49 +00:00
|
|
|
button.addEventListener ('click', this._onEditClick.bind (this));
|
|
|
|
button.title = _('UpdateImage');
|
|
|
|
this.node.appendChild (button);
|
|
|
|
|
2016-09-26 09:28:47 +00:00
|
|
|
var icon = new Htk.Icon ({icon: 'add-photo'});
|
2016-10-16 14:16:08 +00:00
|
|
|
button.appendChild (icon.node);
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
this.editButton = button;
|
|
|
|
}
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2016-05-02 13:05:49 +00:00
|
|
|
|
|
|
|
,_makeSrc: function (subdir)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-05-02 13:05:49 +00:00
|
|
|
var src = Vn.Config['image_dir'] +'/';
|
2015-09-16 16:11:15 +00:00
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
if (this._directory)
|
|
|
|
src += this._directory +'/';
|
|
|
|
if (subdir)
|
|
|
|
src += subdir +'/';
|
|
|
|
|
|
|
|
src += this._value;
|
2015-09-16 16:11:15 +00:00
|
|
|
|
|
|
|
if (this._stamp)
|
|
|
|
src += '?'+ this._stamp;
|
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
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 ();
|
2015-09-16 16:11:15 +00:00
|
|
|
}
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2015-12-10 13:48:43 +00:00
|
|
|
,_onImageError: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-05-02 13:05:49 +00:00
|
|
|
this._error = true;
|
|
|
|
}
|
|
|
|
|
2016-12-23 08:57:49 +00:00
|
|
|
,_onClick: function (event)
|
2016-05-02 13:05:49 +00:00
|
|
|
{
|
2016-12-23 08:57:49 +00:00
|
|
|
if (event.defaultPrevented || !this._fullDir || !this._value || this._error)
|
2015-12-10 13:48:43 +00:00
|
|
|
return;
|
|
|
|
|
2016-12-23 08:57:49 +00:00
|
|
|
(new Htk.FullImage ()).show (this._makeSrc (this._fullDir));
|
|
|
|
event.preventDefault ();
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2015-12-10 13:48:43 +00:00
|
|
|
|
2016-05-02 13:05:49 +00:00
|
|
|
,_onEditClick: function (event)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-12-23 08:57:49 +00:00
|
|
|
event.preventDefault ();
|
2016-10-11 14:45:10 +00:00
|
|
|
|
2016-09-24 14:32:31 +00:00
|
|
|
var editor = new Htk.ImageEditor ({conn: this.conn});
|
2015-12-10 13:48:43 +00:00
|
|
|
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);
|
|
|
|
|
2015-12-15 16:08:24 +00:00
|
|
|
this.popup = new Htk.Popup
|
|
|
|
({
|
|
|
|
modal: true,
|
|
|
|
child: editor
|
|
|
|
});
|
2015-03-09 08:36:54 +00:00
|
|
|
this.popup.show (this.node);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2015-12-10 13:48:43 +00:00
|
|
|
|
|
|
|
,_onNameChange: function (editor, value)
|
|
|
|
{
|
|
|
|
this.value = value;
|
|
|
|
}
|
|
|
|
|
|
|
|
,_onFileUpload: function (cell, editor)
|
|
|
|
{
|
|
|
|
this._stamp = new Date ().getTime ();
|
2016-08-25 10:47:09 +00:00
|
|
|
this._refreshSrc (cell);
|
2015-12-10 13:48:43 +00:00
|
|
|
this.popup.hide ();
|
|
|
|
}
|
|
|
|
|
|
|
|
,_onEditorClose: function (editor)
|
|
|
|
{
|
|
|
|
editor.disconnectByInstance (this);
|
|
|
|
}
|
2015-01-23 13:09:30 +00:00
|
|
|
});
|
|
|
|
|