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

/**
 * Class to display or edit an image. Also it allows to show it's full version.
 **/
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._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;
			}
		}
	}

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

	,_createNode: function ()
	{
		var node = this.createElement ('div');
		node.className = 'htk-image';
		
		var img = this.img = document.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 = document.createElement ('button');
			button.addEventListener ('click', this._onEditClick.bind (this));
			button.title = _('UpdateImage');
			this.node.appendChild (button);
			
			var img = document.createElement ('img');
			img.src = 'image/add-photo.svg';
			button.appendChild (img);

			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 ()
	{
		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 ();
		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);
	}
});