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

/**
 * 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;
			}
		},
		/**
		 * The timestamp field of the last update, used for caching purposes.
		 **/
		stampColumn: {
			type: String
			,set: function(x) {
				this._stampColumn = x;
				this._refreshSrc();
			}
			,get: function() {
				return this._stampColumn;
			}
		},
		/**
		 * 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.imageUrl +'/';
	
		if (this._directory)
			src += this._directory +'/';
		if (subdir)
			src += subdir +'/';

		src += this._value;
		
		if (this._stamp)
			src += '?'+ this._stamp;
		else if (this._stampColumn && this.form)
			src += '?'+ this.form.get(this._stampColumn);
	
		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() {
		this._refreshSrc();
	}

	,_onImageError: function() {
		this._error = true;
	}

	,_onClick: function() {
		if (!this._fullDir || !this._value || this._error)
			return;
	
		(new Htk.FullImage()).show(this._makeSrc(this._fullDir));		
	}
	
	,_onEditClick: function(event) {
		event.stopPropagation();

		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) {
		this._stamp = new Date().getTime();
		this._refreshSrc(cell);
		this.popup.hide();
	}

	,_onEditorClose: function(editor) {
		editor.disconnectByInstance(this);
	}
});