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

/**
 * Class to display or edit an image. Also it allows to show it's full version.
 **/
var fullImage = null;
 
Htk.Image = 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._basedir = Vn.Config['image_dir'] +'/'+ x;
				this._setSrc ();
			}
			,get: function ()
			{
				return this._directory;
			}
		},
		/**
		 * The directory where the images are allocated.
		 **/
		subdir:
		{
			type: String
			,set: function (x)
			{
				this._subdir = x;
				this._setSrc ();
			}
			,get: function ()
			{
				return this._subdir;
			}
		},
		/**
		 * Whether to show the full image when mouse hover.
		 **/
		showFull:
		{
			type: Boolean
			,set: function (x)
			{
				if (x && !this._fullImage)
				{
					if (!fullImage)
						fullImage = new Htk.FullImage ();
				
					this._fullImage = fullImage;
					this.node.addEventListener ('mouseover', this._onMouseOver.bind (this));
					this.node.addEventListener ('mouseout', this._onMouseOut.bind (this));
				}
				
				this._showFull = x;
			}
			,get: function ()
			{
				return this._showFull;
			}
		},
		/**
		 * Subdirectory where full images are allocated.
		 **/
		fullDir:
		{
			type: String
			,set: function (x)
			{
				this._fullDir = x;
			}
			,get: function ()
			{
				return this._fullDir;
			}
		}
	}

	,_directory: null
	,_subdir: null
	,_basedir: null
	,_error: false
	,_showFull: false
	,_fullDir: null
	,_editable: false

	,initialize: function (props)
	{
		this.createElement ('img');
		this.node.className = 'htk-image';
		this.node.addEventListener ('error', this._onImageError.bind (this));

		this.setEditable (this._editable);
		this.parent (props);
	}
	
	,setEditable: function (editable)
	{
		if (editable)
		{
			Vn.Node.addClass (this.node, 'editable');
			this.node.addEventListener ('dblclick', this._onDoubleClick.bind (this));
		}
		else
			Vn.Node.removeClass (this.node, 'editable');
			
		this._setEmpty ();
	}

	,_setSrc: function ()
	{
		if (this._value)
		{
			var url = '';
		
			if (this._basedir)
				url += this._basedir +'/';

			if (this._subdir)
				url += this._subdir +'/';

			url += this._value;

			if (this._stamp)
				url += '?'+ this._stamp;

			this._error = false;
			this.node.src = url;
			this.node.style.display = '';
		}
		else
			this._setEmpty ();
	}
	
	,_setEmpty: function ()
	{
		if (this._value !== null && this._value !== '')
			return;
	
		if (this._editable)
			this.node.src = 'image/add-photo.svg';
		else
			delete this.node.src;
	}

	,putValue: function (value)
	{
		this._setSrc ();
	}

	,_onMouseOver: function ()
	{
		if (!this._showFull || !this._value || this._error)
			return;
	
		var src = this._fullDir ? this._fullDir : 'full';
		src += '/'+ this._value;

		if (this._stamp)
			src += '?'+ this._stamp;
	
		this._fullImage.show (this._basedir +'/'+ src);
	}
	
	,_onMouseOut: function ()
	{
		this._fullImage.hide ();
	}

	,_onImageError: function ()
	{
		if (this._error)
			return;
	
		this._error = true;
	}
	
	,_onDoubleClick: function ()
	{
		var editor = new Htk.ImageEditor ();
		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 ();
		this.popup.setChild (editor);
		this.popup.show (this.node);
	}

	,_onNameChange: function (editor, value)
	{
		this.value = value;
	}
	
	,_onFileUpload: function (cell, editor)
	{
		this._stamp = new Date ().getTime ();
		this.setSrc (cell);
		this.popup.hide ();
	}

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