hedera-web/forms/admin/photos/photos.js

Hedera.Photos = new Class
({
	Extends: Hedera.Form
	,filesData: []
	,uploadCount: 0
	,errors: false

	,activate: function ()
	{
		this.$('schema').value = 'catalog';
	}

	,addFiles: function (files)
	{
		if (!files)
			return;

		for (var i = 0; i < files.length; i++)
			this.addFile (files[i]);
	}

	,addFile: function (file)
	{
		var doc = document;
		var div = doc.createElement ('div');

		var button = new Htk.Button ({
			tip: 'Remove',
			icon: 'delete'
		});
		button.on ('click', this.onFileRemove, this);
		div.appendChild (button.node);

		var thumb = doc.createElement ('img');
		thumb.file = file;
		thumb.className = 'thumb';
		div.appendChild (thumb);

		var reader = new FileReader ();
		reader.onload = function (e) { thumb.src = e.target.result; };
		reader.readAsDataURL(file);

		var name = doc.createElement ('input');
		name.type = 'text';
		name.value = getFileName (file.name);
		div.appendChild (name);

		var status = doc.createElement ('span');
		status.className = 'status';
		div.appendChild (status);

		var fileData = {
			div: div,
			file: file,
			name: name,
			status: status,
			sent: false,
			loading : false
		};
		this.filesData.push (fileData);
		button.value = fileData;

		this.$('file-list').appendChild (div);
	}

	,onUploadClick: function ()
	{
		var filesData = this.filesData;
		var formData = new FormData();
		var count = 0;

		for (var i = 0; i < filesData.length; i++)
		{
			var fileData = filesData[i];
	
			if (!(fileData.sent || fileData.loading))
			{
				formData.append ('image', fileData.file);
				formData.append ('name', fileData.name.value);
				formData.append ('schema', this.$('schema').value);
				formData.append ('srv', 'json:image/upload');
				this.conn.sendFormData (formData,
					this.onFileUpload.bind (this, fileData));

				fileData.loading = true;
				this.uploadCount++;
				count++;
			}
		}

		if (count === 0)
			Htk.Toast.showWarning ('There are no files to upload');
	}

	,onFileUpload: function (fileData, data, error)
	{
		fileData.loading = false;

		if (data)
		{
			var iconName = 'ok';
			var title = _('ImageAdded');
			fileData.sent = true;
			fileData.name.disabled = true;
		}
		else
		{
			var iconName = 'error';
			var title = error.message;
			this.errors = true;
		}

		var status = fileData.status;
		Vn.Node.removeChilds (status);
	
		var icon = new Htk.Icon ({icon: iconName});
		status.appendChild (icon.node);
		status.title = title;

		this.uploadCount--;

		if (this.uploadCount === 0)
		{
			if (!this.errors)
				Htk.Toast.showMessage (_('Upload finished successfully'));
			else
				Htk.Toast.showError (_('Some errors happened on upload'));

			this.errors = false;
		}
	}

	,onFileRemove: function (button)
	{
		var fileData = button.value;
		this.$('file-list').removeChild (fileData.div);

		for (var i = 0; i < this.filesData.length; i++)
		if (this.filesData[i] === fileData)
		{
			this.filesData.splice (i, 1);
			break;
		}
	}

	,onClearClick: function ()
	{
		this.filesData = [];
		Vn.Node.removeChilds (this.$('file-list'));
	}

	,onDropzoneClick: function ()
	{
		this.$('file').click ();
	}

	,onFileChange: function ()
	{
		this.addFiles (this.$('file').files);
	}

	,onDragEnter: function (event)
	{
		Vn.Node.addClass (this.$('dropzone'), 'dragover');
	}

	,onDragLeave: function (event)
	{
		Vn.Node.removeClass (this.$('dropzone'), 'dragover');
	}

	,onDragOver: function (event)
	{
		event.preventDefault ();
	}

	,onDragEnd: function (event)
	{
		Vn.Node.removeClass (this.$('dropzone'), 'dragover');
		event.dataTransfer.clearData ();
	}

	,onDrop: function (event)
	{
		event.preventDefault ();
		this.addFiles (event.dataTransfer.files);
	}
});

function getFileName (path)
{
	var barIndex = path.lastIndexOf ('/');
	if (barIndex === -1)
		barIndex = path.lastIndexOf ('\\');
	if (barIndex === -1)
		barIndex = 0;

	var dotIndex = path.lastIndexOf ('.');
	if (dotIndex === -1)
		dotIndex = 0;

	return path.substr (barIndex, dotIndex);
}