0
1
Fork 0
hedera-web-mindshore/js/htk/field/image.js

218 lines
3.8 KiB
JavaScript
Raw Normal View History

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-11-09 08:14:33 +00:00
Extends: Htk.Field
,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
2016-10-16 14:16:08 +00:00
,render: function ()
{
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-12-10 13:48:43 +00:00
2016-05-02 13:05:49 +00:00
,_refreshClick: function ()
{
2016-05-02 13:05:49 +00:00
if (!this.node)
return;
if (this.clickHandler)
{
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-12-10 13:48:43 +00:00
2016-05-02 13:05:49 +00:00
if (this._fullDir)
{
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-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);
2016-05-02 13:05:49 +00:00
this.editButton = button;
}
}
2016-05-02 13:05:49 +00:00
,_makeSrc: function (subdir)
{
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-12-10 13:48:43 +00:00
,_onImageError: function ()
{
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-12-10 13:48:43 +00:00
2016-05-02 13:05:49 +00:00
,_onEditClick: function (event)
{
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);
this.popup = new Htk.Popup
({
modal: true,
child: editor
});
2015-03-09 08:36:54 +00:00
this.popup.show (this.node);
}
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);
}
});