script.js

Creating socket.io instance

var socket = new io.Socket(); 
socket.connect();

an action has happened, send it to the server

function sendAction(action, data)
{
	console.log('--> ' + action, data);

	var message = { 
		action: action,
		data: data
	}

	socket.send ( message );
}


socket.on('connect', function(){ 
	console.log('successful socket.io connect');

let the path be the room name

	var path = location.pathname.substr(1);

imediately join the room which will trigger the initializations

	sendAction('joinRoom', path);
});

socket.on('disconnect', function(){ 

alert("Server disconnected. Please reload page.");

});

socket.on('message', function(data){ 
	getMessage(data);
});

respond to an action event

function getMessage( m )
{
	var message = m; 
	var action = message.action;
	var data = message.data;

	console.log('<-- ' + action, m);

	switch (action)
	{
		case 'roomAccept':

okay we're accepted, then request initialization

			sendAction('initializeMe', null);
			break;
			
		case 'initFiles':
			initFiles(data);
			break;

		case 'moveFile':
			$("#" + data.id).animate({
				left: data.position.left+"px",
				top: data.position.top+"px" 
			}, 500);
			break;

		case 'initialUsers':
			console.log('active users', data);
			initialUsers(data);
			break;

		case 'join-announce':
			console.log('new User entered Desktop', data);
			joinRoom(data);
			break;

		case 'leave-announce':
			console.log('User left desk', data);
			leaveRoom(data);
			break;

		case 'newFile':
			console.log('newFile', data);
			drawUploadingFile(data.filesgroupid, data.name, data.x, data.y, data.format);
			break;

		case 'createFile':
			console.log('createFile', data);
			setUploadedFile(data.filesgroupid, data.file._id, data.file.name, data.file.format);
			break;

		case 'renameFile':
			$("#" + data.id).find('h3').text(data.value);
			break;

		case 'deleteFile':
			console.log('deleteFile', data);
			$("#" + data.id).remove();
			break;

		case 'progress':
			showProcess(data.filesgroupid, data.bytesReceived, data.bytesExpected);
			break;

		default:

unknown message

			console.log('unknows message', action, data);
			break;
	}


} 

Just Drawing a new file

function drawNewFile(id, name, x, y, format) {

	var fileID = id;
	var formatValue = format.substr(0,format.indexOf('/'));
	var formatClass = '';

	console.log(format);

	switch(formatValue) {

		case 'video': 
									formatClass = 'video';
									break;
		case 'image':
									formatClass = 'picture';
									break;
		case 'text':
									formatClass = 'text';
									break;
		case 'audio':
									formatClass = 'audio';
									break;
		case 'application':
									if(format.substr(format.indexOf('/')+1) == 'pdf') {
										formatClass = 'pdf';
										break;
									}
		default: 			formatClass = 'unknown';
									break;
	}


	var fileHTML = '<div id="' + fileID + '" class="file draggable">\
										<div class="operations">\
											<a href="http://' + location.host + '/download' + location.pathname + '/' + fileID + '" class="download">download</a>\
											<a href="#" class="delete">delete</a>\
										</div>\
										<div class="format">\
											<div class="image ' + formatClass + '"></div>\
										</div>\
										<h3 class="title">' + name + '</h3>\
									</div>';

	var $file = $(fileHTML);

	$file.appendTo('#wrapper');

	$file.draggable();

	
	$file.css('display', 'none').css('top', y).css('left', x);
	$file.fadeIn(Math.floor(Math.random() * 3000));

After a drag:

	$file.bind( "dragstop", function(event, ui) {
		console.log('dragstop', this);
		var data = {
			id: fileID,
			position: ui.position,
			oldposition: ui.originalPosition,
		};
		sendAction('moveFile', data);
	});

when user press delete button

	$file.find('.delete').click(	function(){
			$file.remove();

notify server of delete

			sendAction( 'deleteFile' , { 'id': fileID });
		}
	);
	

rename files

	$file.find('h3').editable( onFileChange,
		{
			style   : 'inherit',
			cssclass   : 'file-edit-form',
			type      : 'text',
			onblur: 'submit',
			event: 'dblclick'						
		}
	);

	function onFileChange( text, result ) {

		var input = $('form.' + result.cssclass).find('input');
		var original = input.val();
		var newtext = text;
		$('form.file-edit-form').remove();
		sendAction('renameFile', { id: fileID, value: text });
		return(newtext);
	}	

}

Show uploading file

function drawUploadingFile(filesgroupid, name, x, y, format, isOrigin) {
	
	if(isOrigin == undefined) isOrigin = '';

	var FileGroupId = filesgroupid;


	var formatValue = format.substr(0,format.indexOf('/'));
	var formatClass = '';

	switch(formatValue) {

		case 'video': 
									formatClass = 'video';
									break;
		case 'image':
									formatClass = 'picture';
									break;
		case 'text':
									formatClass = 'text';
									break;
		case 'audio':
									formatClass = 'audio';
									break;
		case 'application':
									if(format.substr(format.indexOf('/')+1) == 'pdf') {
										formatClass = 'pdf';
										break;
									}
		default: 			formatClass = 'unknown';
									break;
	}

	var fileHTML = '<div class="file draggable ' + filesgroupid + ' ' + isOrigin + '">\
										<div class="operations">\
										</div>\
										<div class="format">\
											<div class="image ' + formatClass + '"></div>\
											<div class="progress">\
												<div class="progressBack"></div>\
												<div class="progressPercent">\
													<div class="progressCenter">\
														<span></span>\
													</div>\
												</div>\
											</div>\
										</div>\
										<h3 class="title">'+name+'</h3>\
									</div>';


	var $file = $(fileHTML);

	$file.css('top', y).css('left', x);

	$file.appendTo('#wrapper');

}

Set file when upload has completed

function setUploadedFile(filesgroupid, id, name, format) {
	
	var $file = $('.'+filesgroupid);
	var fileID = id;

	var formatValue = format.substr(0,format.indexOf('/'));
	var formatClass = '';

	switch(formatValue) {

		case 'video': 
									formatClass = 'video';
									break;
		case 'image':
									formatClass = 'picture';
									break;
		case 'text':
									formatClass = 'text';
									break;
		case 'audio':
									formatClass = 'audio';
									break;
		case 'application':
									if(format.substr(format.indexOf('/')+1) == 'pdf') {
										formatClass = 'pdf';
										break;
									}
		default: 			formatClass = 'unknown';
									break;
	}

	var $fileFormat = $file.find('.image');
	if($fileFormat.hasClass('unknown')) {
		$fileFormat.removeClass('unknown');
		$fileFormat.addClass(formatClass);
	}

	if($file.hasClass("origin")) {
		var data = {
			id: fileID,
			position: {
				top: parseInt($file.css('top')),
				left: parseInt($file .css('left'))
			},
		};
		sendAction('moveFile', data);
	}

	$file.removeClass(filesgroupid);
	$file.attr('id', fileID);

	$file.find('h3').text(name);

	$file.find('.progress').fadeOut(function() {
		$(this).remove();	
	});

	var fileHTML = '<a href="http://' + location.host + '/download' + location.pathname + '/' + fileID + '" class="download">download</a><a href="#" class="delete">delete</a>';

	$file.find('div.operations').prepend(fileHTML);

	$file.draggable();

After a drag:

	$file.bind( "dragstop", function(event, ui) {
		console.log('dragstop', this);
		var data = {
			id: fileID,
			position: ui.position,
			oldposition: ui.originalPosition,
		};
		sendAction('moveFile', data);
	});

when user press delete button

	$file.find('.delete').click(	function(){
			$file.remove();

notify server of delete

			sendAction( 'deleteFile' , { 'id': fileID });
		}
	);
	

rename files

	$file.find('h3').editable( onFileChange,
		{
			style   : 'inherit',
			cssclass   : 'file-edit-form',
			type      : 'text',
			onblur: 'submit',
			event: 'dblclick',			
		}
	);

	function onFileChange( text, result ) {

		var input = $('form.' + result.cssclass).find('input');
		var original = input.val();
		var newtext = text;
		$('form.file-edit-form').remove();
		sendAction('renameFile', { id: fileID, value: text });
		return(newtext);
	}	


}

Show Process of files

function showProcess(id, bytesReceived, bytesExpected) {
	
	var percent = ((bytesReceived/bytesExpected).toFixed(3));

	
	var newHeight = (((-percent*46) % 46) + 46) % 46;
	var newOpacity = ((-percent*100 % 100) + 100) % 100;

	if($('.'+id).length == 0) {
		drawUploadingFile(id, 'uploading...', 0, 0, 'unknown');	
	}

	$('.' + id + ' .progressPercent span').text(Math.round(100*percent));
	
	$('.' + id + ' .progressBack').css('height', newHeight);
	$('.' + id + ' .progressBack').css('opacity', newOpacity/100);


}

Join/leave desktop

var sids_users = new Array();
function initialUsers(users) {

	for (user in users) {
		$('#activeUser').append('<li id="'+users[user].sid+'" style="background:'+getRandomColor()+';"></li>');
		sids_users.push(users[user].sid);
	}

	$('#activeUser').find('li').css('width', 100/users.length+'%');
}

function joinRoom(user) {
	$('#activeUser').append('<li id="'+user.sid+'" style="background:'+getRandomColor()+';"></li>');
	sids_users.push(user.sid);
	$('#activeUser').find('li').css('width', 100/sids_users.length+'%');
}

function leaveRoom(user) {
	$('#activeUser').find('#'+user.sid).remove();
	var i=0;
	for (i=0;i<=sids_users.length;i++){
		if(user.sid == sids_users[i]) {
			sids_users.splice(i,1);
		}
	}
	$('#activeUser').find('li').css('width', 100/sids_users.length+'%');
}

function getRandomColor() {
	var letters = '0123456789ABCDEF'.split('');
	var color = '#';
	for (var i = 0; i < 6; i++ ) {
			color += letters[Math.round(Math.random() * 15)];
	}
	return color;
}

first time init files

function initFiles( fileArray ) {
	for (i in fileArray) {
		file = fileArray[i];
		drawNewFile(file._id, file.name, file.x, file.y, file.format);
	}
}

Init Drag&Drop

function initDnD() {

	var dropbox = document.getElementById("wrapper");

init event handlers

	dropbox.addEventListener("dragenter", dragEnter, false);
	dropbox.addEventListener("dragexit", dragExit, false);
	dropbox.addEventListener("dragover", dragOver, false);
	dropbox.addEventListener("drop", drop, false);
}

function dragEnter(evt) {
	evt.stopPropagation();
	evt.preventDefault();

sign an drag

}

function dragExit(evt) {
	evt.stopPropagation();
	evt.preventDefault();
}

function dragOver(evt) {
	evt.stopPropagation();
	evt.preventDefault();
}

function drop(evt) {
	evt.stopPropagation();
	evt.preventDefault();

Get the dropped files.

	var files = evt.dataTransfer.files;
	

If anything is wrong with the dropped files, exit.

	if(typeof files == "undefined" || files.length == 0)
		return;

Start Upload

	uploader.startUpload(files);
	
}

function initBrowserWarning() {
	var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
	var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
	
	if(!isChrome && !isFirefox)
		console.log('no browser support for drag&drop upload');
}

Gloabl variables

uploader = null;

jQuery DOM Ready

$(function() {
	

Upload script html5Uploader jQuery Plugin

Detector demo

	if (!$.fileUploadSupported) {
		$(document.body).addClass('not_supported');
		$('#detector').text('This browser is NOT supported.');
	} else {
		$('#detector').text('This browser is supported.');
	}

Enable plug-in

	$('#wrapper').fileUpload( {
		url: '/upload' + location.pathname + '/',
		type: 'POST',
		dataType: 'json',
		complete: function () {
			$(document.body).removeClass('uploading');
		},
		success: function (result, status, xhr) {
			if (!result) {
				window.alert('Server error.');
				return;
			}
			if (result.error !== 0) {
				window.alert(result.error);
				return;
			}
			window.alert('Success! You have sent a file named \'' + result.name + '\' with MIME type \'' + result.type + '\'.');
		}
	});
	
	
});