image upload from chat

inc/fileuploader.php

@@ -146,7 +146,7 @@ class fileUploader
 
 		if($this->save($sFileName.'.'.$sExt))
 		{
-			return array('success'=>true, 'file_name'=>$sFileName.'.'.$sExt);
+			return array('success'=>true, 'file_name'=>$sFileName.'.'.$sExt, 'file_path'=>$_GET['serv_name'].$this->sFolderPath);
 		}
 		else
 		{

jquery/common.js

@@ -47,10 +47,12 @@ $.prototype.addButton = function(sType, sTitle, oClickLink, sId, sButtonClass, s
 		asAttributes.href = oClickLink;
 		asAttributes.target = '_blank';
 	}
-	var $Button = $('<a>', asAttributes)
-		.append($('<i>', {'class':'icon fa fa-c-'+sType}))
-		.append($('<span>', {'class':'value'}).text(sTitle))
-		.appendTo($This);
+	var $Button = $('<a>', asAttributes).append($('<i>', {'class':'icon fa fa-c-'+sType}));
+	
+	if(sButtonClass.indexOf('no_text') == -1) $Button.append($('<span>', {'class':'value'}).text(sTitle));
+	else $Button.attr('title', sTitle);
+	
+	$Button.appendTo($This);
 	
 	//Function
 	if(!bLink) $Button.click(function(e){e.preventDefault(); oClickLink($(this));});
@@ -475,8 +477,7 @@ function debug(text, bQuery)
 function getLoginToken(sPass)
 {
 	if(!window.location.origin) window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
-	//return md5(sPass+window.location.origin+window.location.pathname);
-	return md5(sPass+'http://databap.lutran.fr/');
+	return md5(sPass+window.location.origin+window.location.pathname);
 }
 
 function md5(str)

jquery/databap.js

@@ -710,14 +710,20 @@ function Databap()
 		$msg.hide().insertBefore(elem).slideDown('fast', function(){databap.updateScrollBar('bottom');}).delay(5000).slideUp('fast', function(){$(this).remove();databap.updateScrollBar();});
 	};
 	
-	this.feedback = function(sClass, sMsg)
+	this.feedback = function(sClass, sMsg, bClean)
 	{
+		bClean = bClean || false;
 		if(sClass=='error' && sMsg=='') sMsg = 'Aïe ! Une erreur inconnue est suvenue';
 		else if(sClass=='error' && $.inArray(sMsg, self.consts.errors.system)!=-1) sMsg = 'Une erreur interne est survenue. Merci de contacter l\'admin';
+		
+		//clean box
+		$Box = $('#title_feedback');
+		if(bClean) $Box.empty();
+		
 		$('<span>', {'class':'feedback '+sClass})
 			.append($('<i>', {'class':'fa fa-inline fa-c-'+sClass}))
 			.append(self.addPunctuation(sMsg))
-			.appendTo('#title_feedback')
+			.appendTo($Box)
 			.slideDown('fast')
 			.delay(5000)
 			.slideUp('fast', function(){$(this).remove();});

jquery/fileuploader.js

@@ -486,24 +486,27 @@ qq.FileUploader = function(o){
 	// call parent constructor
 	qq.FileUploaderBasic.apply(this, arguments);
 	
-	// additional options	
+	var sDefTemplate = '<div class="uploader_box">' + 
+							'<div class="uploader_droparea round">' +
+								'<span>' +
+									((typeof o.addSlideText !== 'undefined')?o.addSlideText:'Glisser les images ici') +
+								'</span>' +
+							'</div>' +
+							'<a class="uploader_button button round"><i class="icon fa fa-c-add"></i>'+
+							((typeof o.addFileText !== 'undefined')?o.addFileText:'Ajouter une image') +
+							'</a>' +
+							'<div class="uploader_buffer"></div>' +
+							'<ul id="uploader_list" class="uploader_list"></ul>' + 
+						'</div>';
+	var sTemplate = (typeof o.template !== 'undefined')?o.template:sDefTemplate;
+	
+	// additional options
 	qq.extend(this._options, {
 		element: null,
 		// if set, will be used instead of uploader_list in template
 		listElement: null,
 				
-		template:'<div class="uploader_box">' + 
-					'<div class="uploader_droparea round">' +
-						'<span>' +
-							((typeof o.addSlideText !== 'undefined')?o.addSlideText:'Glisser les images ici') +
-						'</span>' +
-					'</div>' +
-					'<a class="uploader_button button round"><i class="icon fa fa-c-add"></i>'+
-					((typeof o.addFileText !== 'undefined')?o.addFileText:'Ajouter une image') +
-					'</a>' +
-					'<div class="uploader_buffer"></div>' +
-					'<ul id="uploader_list" class="uploader_list"></ul>' + 
-				'</div>',
+		template:sTemplate,
 
 		// template for one item in file list
 		fileTemplate:'<li id="uploader_item">' +

masks/chat.html

@@ -24,12 +24,17 @@
 		</div>
 		<div id="chat_input" class="round">
 			<form id="chat_form" name="chat_form">
-				<i id="message_img" class="fa fa-fw fa-20 fa-c-comment"></i><input type="text" id="message" name="message" value="" maxlength="500" autofocus />
-				<input type="hidden" id="chan" name="chan" value="" maxlength="50" />
+				
 			</form>
 		</div>
 	</div>
 	<div id="template" class="hide">
+		<div id="message_input">
+			<i id="message_img" class="fa fa-fw fa-20 fa-c-comment"></i>
+			<input type="text" id="message" name="message" value="" maxlength="500" autofocus />
+			<input type="hidden" id="chan" name="chan" value="" maxlength="50" />
+			<i id="upload_img" class="fa fa-fw fa-20 fa-c-image"></i>
+		</div>
 		<div id="help" class="help tiny_round">
 				<p class="title">Manuel d'utilisation</p>
 				<p class="title righty">&nbsp;<span id="close_help" class="clickable"><i class="fa fa-30 fa-c-close"></i></span></p>
@@ -93,7 +98,7 @@ databap.pageInit = function()
 	//Bind message box key events
 	databap.getMainElem('#chat_form').submit(function(e){e.preventDefault();});
 	$MsgInput.bind('keydown', function(e){if(e.which == 9)e.preventDefault();});
-	$MsgInput.keyup(function(event){add_message(event);});
+	$MsgInput.keyup(function(e){keyController(e);});
 	
 	//Loading the chat
 	self.initScrollBar('#chat_container', '#chat_messages_box', '#chat_messages');
@@ -114,6 +119,9 @@ databap.pageInit = function()
 	//Init sidebar events
 	initSideBar();
 	
+	//Setup Image upload
+	initImageUpload();
+	
 	//Init's end
 	databap.setInitEnd(true);
 };
@@ -124,7 +132,7 @@ databap.onResize = function()
 	self.setScrollBarSize('maximize');
 	
 	//Message Input
-	$('#message').width($('#chat_input').width() - $('#message_img').outerWidth(true)- 1);
+	//$('#message').width($('#chat_input').width() - $('#message_img').outerWidth(true)- 1);
 };
 
 //Disconnect from the chat
@@ -143,6 +151,49 @@ databap.onKeyDown = function(e)
 	else databap.tmp('refresh', false);
 };
 
+function initImageUpload()
+{	
+	//load Uploader
+	self.tmp('uploader', new qq.FileUploader
+	(
+		{
+			element: document.getElementById('chat_form'),
+			action: databap.getActionLink('upload_image'),
+			allowedExtensions: databap.consts.authorized_img_exts,
+			sizeLimit: parseInt(databap.consts.max_size)*100,
+			template:	'<div class="uploader_box">' + 
+							'<div class="uploader_droparea round">' +
+								'<span>Glisser les images ici</span>' +
+							'</div>' +
+							'<a class="uploader_button hide"></a>' +
+							'<div class="uploader_buffer hide"></div>' +
+							'<ul id="uploader_list" class="uploader_list hide"></ul>' + 
+						'</div>',
+			onComplete:function(id, fileName, result)
+			{
+				if(result.success==true)
+				{
+					postMessage('/img '+result.file_path+result.file_name);
+				}
+			},
+			onProgress:function(id, fileName, loaded, total)
+			{
+				databap.feedback('success', 'Télécharge: '+(loaded/total*100)+'%', true);
+			},
+			showMessage:function(sMsg)
+			{
+				databap.feedback('error', sMsg);
+			},
+			debug: false,
+			stepId: 1
+	    }
+	));
+	$('.uploader_box').append($('#message_input').children());
+	
+	//prompt file explorer
+	$('#upload_img').click(function(){$('#c1_file').click();});
+}
+
 function initSideBar()
 {
 	//Sidebar Events
@@ -503,7 +554,42 @@ function quitChan(sChanKeyName)
 	else databap.addFailIcon('Ceci est le dernier chan');
 }
 
-function add_message(e)
+function postMessage(sMsg)
+{
+	sMsg = sMsg || '';
+	var bSuccess = true;
+	if(databap.tmp('sending_msg') == true)
+	{
+		databap.feedback('warning', 'Pas si pressé ! J\'ai pas encore envoyé le dernier message');
+		bSuccess = false;
+	}
+	else
+	{
+		if(sMsg!='')
+		{
+			databap.tmp('msg_buffer', $('#message').val());
+			$('#message').val(sMsg);
+		}
+		databap.tmp('sending_msg', true);
+		databap.saveForm
+		(
+			'add_message',
+			databap.getMainElem('#chat_form'),
+			function(oData)
+			{
+				databap.tmp('sending_msg', false);
+				if(oData.result==databap.consts.error) databap.feedback('error', oData.desc);
+				else refresh_chat();
+			},
+			true,
+			'json'
+		);
+		if(sMsg!='') $('#message').val(databap.tmp('msg_buffer'));
+	}
+	return bSuccess;
+}
+
+function keyController(e)
 {
 	if(e.keyCode != 9) databap.tmp('tab_info', {}); //See case 9, tab
 	switch(e.keyCode)
@@ -516,31 +602,7 @@ function add_message(e)
 			else if(chat_message.substr(0, 7) == '/quit #') quitChan(getChanKeyName(chat_message.substr(7)));
 			else if(chat_message == '/help') displayHelp();
 			else if(chat_message.substr(0, 8) == '/invite ') invite($.trim(chat_message.substr(8)), currentChan());
-			else if(chat_message != '' && databap.tmp('sending_msg') == false) //send
-			{
-				if(databap.tmp('sending_msg') == true)
-				{
-					databap.feedback('warning', 'Pas si pressé ! J\'ai pas encore envoyé le dernier message');
-					bSuccess = false;
-				}
-				else
-				{
-					databap.tmp('sending_msg', true);
-					databap.saveForm
-					(
-						'add_message',
-						databap.getMainElem('#chat_form'),
-						function(oData)
-						{
-							databap.tmp('sending_msg', false);
-							if(oData.result==databap.consts.error) databap.feedback('error', oData.desc);
-							else refresh_chat();
-						},
-						true,
-						'json'
-					);
-				}
-			}
+			else if(chat_message != '') bSuccess = postMessage();
 			
 			if(bSuccess)
 			{

style/_fa-custom.scss

@@ -306,4 +306,8 @@ vertical-align	0%		-5%			-10%		-15%		-20%		-25%		-30%
 
 .fa-c-file-png:before, .fa-c-file-gif:before, .fa-c-file-jpg:before, .fa-c-file-jpeg:before {
 	content: "\f1c5";
+}
+
+.fa-c-image:before {
+	content: "\f03e";
 }

style/databap.scss

@@ -663,6 +663,7 @@
 	background:$col_none;
 	height:100%;
 	padding:5px;
+	position: relative;
 }
 
 .g_white_transparent {
@@ -814,30 +815,70 @@
 	margin-right:5px;
 }
 
-#chat #chat_input {
-	background:$col_main_3;
-	color:#94BDF9;
-	overflow: hidden;
+/* Chat - Input */
+
+#chat {
+	
+	#chat_input {
+		background:$col_main_3;
+		color:#94BDF9;
+		overflow: hidden;
+	}
+	
+	#c1_file {
+		display: none;
+	}
+	
+	.uploader_box {
+		position:inherit;
+		width:auto;
+	}
+
+	#upload_img {
+		cursor:pointer;
+		margin-top:2px;
+	}
+	i.fa#upload_img:hover {
+		color:#EFAB00;
+	}
+
+	#chat_form .uploader_box > * {
+		float:left;
+		padding: 7px 0px;
+	}
+	
+	.uploader_droparea {
+		background:#D9E5F2;
+		height:100%;
+		top:0;
+	}
+	
+	.uploader_droparea-active {
+		background:#EFAB00;
+		color:white;
+	}
+	
+	#chat_input .fa {
+		color:$col_main_1;
+		margin-right:5px;
+		margin-left:5px;
+	}
+	
+	#chat_input input#message {
+		background:$col_main_3;
+		margin:0;
+		border:none;
+		min-width:200px;
+		width:calc(100% - 72px); /* 32 icons width * 2 */
+		font-size:$size_vbig;
+	}
+	
+	#chat_input input#message:hover, #chat #chat_input input#message:focus {
+		background-color:transparent;
+	}
 }
 
-#chat #chat_input .fa {
-	color:$col_main_1;
-	margin-right:3px;
-	margin-left:3px;
-}
-
-#chat #chat_input input#message {
-	background:$col_main_3;
-	margin:0;
-	padding:7px 0;
-	border:none;
-	min-width:200px;
-	font-size:$size_vbig;
-}
-
-#chat #chat_input input#message:hover, #chat #chat_input input#message:focus {
-	background-color:transparent;
-}
+/* Chat - Sidebar */
 
 #chat #sidebar {
 	position:absolute;