v1.0.0 RC 1

masks/add_code.html

@@ -1,206 +0,0 @@
-<div id="add_code_container">
-	<form id="add_code" name="add_code">
-		<div class="h1_wrap">
-			<h1 class="round" id="add_code_title"><span>Ajouter du code</span></h1>
-			<div id="loggued_name_container">
-				<p id="logging_info" class="round_top">Vous &ecirc;tes sur le point de poster sous le compte de <span id="loggued_name"></span> (<span id="loggued_company"></span>)</p>
-				<p><input type="button" id="logout_btn" class="round" value="Ce n'est pas vous ?" /></p>
-			</div>
-			<textarea id="content" name="content" class="round"></textarea>
-		</div>
-		<table id="extra_data">
-			<tr>
-				<td>Description</td>
-				<td><input type="text" name="description" id="description" class="round" maxlength="200" /></td>
-			</tr>
-			<tr>
-				<td>Lien (facultatif)</td>
-				<td>
-					<input type="text" name="link" id="link" class="round" maxlength="200" />
-					<span id="available_phrase" class="round"></span>
-					<span id="link_result" class="share round"></span>
-					<input type="hidden" name="link_escaped" id="link_escaped" value="" />
-				</td>
-			</tr>
-			<tr id="auth_name_container" style="display:none;">
-				<td>Nom &amp; pr&eacute;nom</td>
-				<td><input type="text" name="auth_name" class="round" /></td>
-			</tr>
-			<tr id="auth_company_container" style="display:none;">
-				<td>Soci&eacute;t&eacute;</td>
-				<td><input type="text" name="auth_company" class="round" value="Micropole" /></td>
-			</tr>
-			<tr><td colspan="2" class="last"><input type="button" id="add_code_btn" name="add_code_btn" value="Envoyer" class="button heavy round" /></td></tr>
-		</table>
-	</form>
-</div>
-<script type="text/javascript">
-databap.pageInit = function()
-{
-	//Tmp
-	databap.tmp('last_val', 'string');
-	
-	//content
-	databap.getMainElem('#content').text(databap.consts.add_code_text);
-	databap.getMainElem('#content').click(function(){clearDefaultValue($(this), databap.consts.add_code_text);});
-
-	//link phrase
-	databap.getMainElem('#link').bind
-	(
-		'keyup',
-		function()
-		{
-			$link = databap.getMainElem('#link_result');
-			var link = $.trim($(this).val());
-			var escaped_link = link.replace(/ /g, '_');
-			if(escaped_link!=databap.tmp('last_val'))
-			{
-				databap.tmp('last_val', escaped_link);
-				$link.text(databap.getCodeLink(escaped_link));
-				databap.getMainElem('#link_escaped').val(escaped_link);
-				if(escaped_link!='') 
-				{
-					//check availability
-					checkUrlAvailability($.trim(escaped_link));
-				}
-				else
-				{
-					if($link.is(':visible')) $link.hide('fast');
-					databap.getMainElem('#available_phrase').hide('fast');
-				}
-			}
-		}
-	);
-
-	//submit
-	databap.getMainElem('#add_code').submit(function(event){event.preventDefault();});
-	databap.getMainElem('#add_code_btn').click
-	(
-		function()
-		{
-			var code = databap.getMainElem('#content').val();
-									
-			if
-			(
-				code!=databap.consts.add_code_text &&
-				code!='' &&
-				databap.getMainElem('#description').val()!='' &&
-				databap.getMainElem('#auth_name').val()!='' &&
-				databap.getMainElem('#auth_company').val()!=''
-			)
-			{
-				databap.saveForm
-				(
-					'add_code',
-					databap.getMainElem('#add_code'),
-					function(iCodeId)
-					{
-						if(!iCodeId || iCodeId===null || iCodeId==0)
-						{
-							databap.addErrorBefore('Erreur d\'authentification', '#add_code_btn');
-							databap.$main.find('#auth_name_container, #auth_company_container').show('fast');
-						}
-						else
-						{
-							var link = databap.getMainElem('#link_escaped').val();
-							databap.vars.code = (link=='')?iCodeId:link;
-							debug('returned : '+databap.vars.code); 
-							databap.switchPage(databap.pages.read_code);
-						}
-					},
-					true
-				);
-			}
-			else
-			{
-				databap.addErrorBefore('Tous les champs ne sont pas remplis', '#add_code_btn');
-			}
-		}
-	);
-
-	//Add logged in warning
-	/*databap.getUserInfo
-	(
-		function(user)
-		{
-			//hide logon fields
-			databap.getMainElem('#auth_name_container, #auth_company_container').hide();
-
-			//show loggued user information
-			databap.getMainElem('#loggued_name').text(user.name);
-			databap.getMainElem('#loggued_company').text(user.company);
-			databap.getMainElem('#loggued_name_container').show();
-		}
-	);
-
-	//post re-login 
-	databap.getMainElem('#logout_btn').click
-	(
-		function()
-		{
-			databap.getMainElem('#auth_name_container, #auth_company_container').show();
-			databap.getMainElem('#loggued_name_container').hide('fast');
-		}
-	);*/
-
-	//On resize
-	//databap.resetSize = function(){databap.getMainElem('#content').height('300');};
-	databap.onResize = function()
-	{
-		//TODO : to be replaced by tinyscrollbar
-		databap.$main.css('overflow', 'auto');
-		
-		var iCodeContainerHeight = $('#add_code_container').height();
-		if(iCodeContainerHeight != databap.consts.pageMaxHeight)
-		{
-			databap.getMainElem('#content').height('+='+(databap.consts.pageMaxHeight-iCodeContainerHeight));
-		}
-	};
-
-	//Init's end
-	databap.setInitEnd(true);
-};
-
-function checkUrlAvailability(phrase, bTriggered)
-{
-	if(bTriggered == true)
-	{
-		databap.getInfo
-		(
-			'url',
-			function(bExist)
-			{
-				var availabilityClass, availabilityText;
-				var $link = databap.getMainElem('#link_result');
-				if(bExist=='0')
-				{
-					availabilityClass = 'available';
-					availabilityText = 'Disponible';
-					if($link.is(':hidden')) $link.show('fast');
-				}
-				else
-				{
-					availabilityClass = 'unavailable';
-					availabilityText = 'Indisponible';
-					if($link.is(':visible')) $link.hide('fast');
-				}
-				databap.getMainElem('#available_phrase')
-					.removeClass('available unavailable')
-					.addClass(availabilityClass)
-					.text(availabilityText)
-					.show('fast');
-			},
-			{link_escaped:phrase},
-			'html',
-			function(){},
-			true
-		);
-	}
-	else
-	{
-		databap.addBufferIcon();
-		if(typeof oCheckLinkTimer != "undefined") clearTimeout(oCheckLinkTimer);
-		oCheckLinkTimer = setTimeout(function(){checkUrlAvailability(phrase, true);}, 500);	
-	}
-}
-</script>

masks/article.html

@@ -0,0 +1,21 @@
+<div id="article">
+	<!-- <iframe id="art_frame"></iframe> -->
+	<p class="loading_box step_box round"><i class="fa fa-60 fa-inline fa-spin fa-c-loading"></i>L'article est en cours de chargement...</p>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	self.getInfo
+	(
+		'get_article',
+		function(asArtInfo)
+		{
+			//$('#art_frame').attr('src', asArtInfo.link_art);
+			self.goToExternalLink(asArtInfo.link_art);
+		},
+		{id:self.vars.id},
+		'json',
+		function(){}
+	);
+}
+</script>

masks/chat.html

@@ -1,44 +1,45 @@
 <div id="chat">
-	<div class="h1_wrap" id="chat_title">
-		<h1 class="round"><span>Chat</span></h1>
-	</div>
-
 	<div id="chat_chan">
-		<p class="tab_bar"><span id="join_chan" class="round_top clickable"></span></p>
+		<p class="tab_bar"><span id="join_chan" class="chan round_top clickable"></span></p>
 	</div>
 	<div id="sidebar">
 		<div class="sidebar_box round">
-			<div id="connected_users_title" class="sidebar_box_title round_top clickable">Connect&eacute;s</div>
-			<div id="connected_users" class="sidebar_box_content"></div>
+			<div class="sidebar_box_title round_top round clickable">Connect&eacute;s</div>
+			<div id="connected_users" class="sidebar_box_content hide"></div>
 		</div>
 		<div class="sidebar_box round">
-			<div class="sidebar_box_title round_top clickable round">Aide</div>
+			<div class="sidebar_box_title round_top round clickable">News</div>
+			<div id="news" class="sidebar_box_content hide"><p class="loading"><i class="fa fa-spin fa-inline fa-c-loading"></i></p></div>
+		</div>
+		<div class="sidebar_box round">
+			<div class="sidebar_box_title round_top round clickable">Aide</div>
 			<div id="help_open" class="sidebar_box_content help_paperclip clickable hide"></div>
 		</div>
 	</div>
 	<div id="chat_room" class="round">
 		<div id="chat_container">
-			<div class="scrollbar"><div class="track round"><div class="thumb round clickable"><div class="end round clickable"></div></div></div></div>
 			<div id="chat_messages_box">
 				<div id="chat_messages"></div>
 			</div>
 		</div>
 		<div id="chat_input" class="tiny_round">
 			<form id="chat_form" name="chat_form">
-				<input type="text" id="message" name="message" value="" maxlength="500" />
+				<i id="message_img" class="fa fa-fw fa-20 fa-c-comment"></i><input type="text" id="message" name="message" value="" maxlength="500" />
 				<input type="hidden" id="chan" name="chan" value="" maxlength="50" />
 			</form>
 		</div>
 	</div>
 	<div id="template" class="hide">
 		<div id="help" class="help tiny_round">
-				<p class="title">Manuel d'utilisation<span id="close_help" class="clickable">x</span></p>
+				<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>
 				<p class="subtitle"><span>Message</span></p>
 				<p class="item"><span class="key">Echap</span>Supprime le texte en cours de r&eacute;daction</p>
 				<p class="item"><span class="key">Fl&egrave;che haut</span>R&eacute;p&egrave;te dernier message envoy&eacute;</p>
 				<p class="item"><span class="key">@X Y</span>Vous dites Y &agrave; X (pseudo de Y en rouge)</p>
 				<p class="item"><span class="key">/me X</span>Votre_pseudo X. Utile lorsque vous voulez parler de vous &agrave; la 3&egrave;me personne. Par exemple : /me se touche la nouille au taff</p>
-				<p class="item"><span class="key">/mail X Y</span>Vous envoyez &agrave; X un email contenant Y (adresse professionel)</p>
+				<p class="item"><span class="key">/mail X Y</span>Vous envoyez &agrave; X un email contenant Y (adresse professionnelle)</p>
+				<p class="item"><span class="key">/news X</span>Vous annoncez le message X (votre message est ajouté à la liste des news automatiquement)</p>
 				<p class="item">
 					<span class="key">Tab</span>
 					Chaque hit pr&eacute;-remplie le message en faisant d&eacute;filer la liste des connect&eacute;s.
@@ -48,6 +49,7 @@
 				<p class="subtitle"><span>Chans</span></p>
 				<p class="item">Les chans sont divis&eacute;s en trois cat&eacute;gories : les chans priv&eacute;s (PM, pour deux personnes seulement), les chans entreprise (pour toutes les personnes d'une m&ecirc;me entreprise) et les autres (chans publiques)</p>
 				<p class="item"><span class="key">/join #X</span>Vous rejoignez le chan X (si autoris&eacute;)</p>
+				<p class="item"><span class="key">/invite X</span>Vous invitez X à rejoindre le chan (si autoris&eacute;)</p>
 				<p class="item"><span class="key">/pm #X</span>Vous rejoignez le chan priv&eacute; (vous et X)</p>
 				<p class="item"><span class="key">/quit #X</span>Vous quittez le chan X</p>
 				<p class="item"><span class="key">/chans</span>Liste des chans publiques disponibles (aussi accessible via /channels et /list)</p>
@@ -77,7 +79,8 @@ databap.pageInit = function()
 	//Page variables
 	databap.tmp('sending_msg', 'boolean');
 	databap.tmp('refresh', 'boolean');
-	databap.initVar('unread_msg', 'object');
+	self.vars2('unread_msg', 'object');
+	databap.tmp('news_period', 10*60*1000);
 	
 	//Main elements
 	$MsgInput = databap.getMainElem('#message');
@@ -90,7 +93,7 @@ databap.pageInit = function()
 	
 	//Loading the chat
 	databap.vars.last_message_id = '0';
-	oScrollbar = $('#chat_container').tinyscrollbar({viewport:'#chat_messages_box', overview:'#chat_messages'});
+	self.initScrollBar('#chat_container', '#chat_messages_box', '#chat_messages');
 	
 	//Loading Chans
 	setChanButton();
@@ -99,67 +102,117 @@ databap.pageInit = function()
 	joinChan(databap.consts.default_chan, true);
 	
 	//window focus
-	//databap.onMouveEnter = function(){if(databap.vars.inputFocus){onPageFocus();}else{$MsgInput.focus();}};
-	//databap.onMouveLeave = function(){$MsgInput.focus();onPageBlur();};
 	$(window).focus(onPageFocus);
 	$(window).blur(onPageBlur);
-	//$(window).focus(function(){debug('focus');}).blur(function(){debug('blur');});
 	
 	//Message Input Focus
-	//$MsgInput.focus(function(){onPageFocus();databap.vars.inputFocus=true;});
-	//$MsgInput.blur(function(){onPageBlur();databap.vars.inputFocus=false;});
 	$MsgInput.focus();
-	//databap.onKeyDown = function(e){if(!databap.vars.inputFocus)$MsgInput.focus();};
 
-	//On resize
-	//databap.resetSize = function(){databap.getMainElem('#chat_messages_box').height(databap.getMainElem('#sidebar').outerHeight());};
-	databap.onResize = function()
-	{
-		databap.$main.css('overflow', 'hidden');
-		
-		//debug('chat page resize triggered');
-		var $cb = databap.getMainElem('#chat_messages_box');
-		var iMaxHeight = databap.consts.pageMaxHeight - 15 -  ($('#chat_title').outerHeight(true) + $('#chat_chan').outerHeight(true) + $('#chat_room').outerHeight(true) - $('#chat_messages_box').outerHeight(true));
-		if($cb.height() != iMaxHeight)
-		{
-			//$cb.animate({height: maxHeight}, 400, function(){oScrollbar.tinyscrollbar_update('bottom');resizing=false;});
-			$cb.height(iMaxHeight);
-			oScrollbar.tinyscrollbar_update('bottom');
-		}
-	};
-	
-	//Disconnect from the chat
-	databap.onQuit = function()
-	{
-		if(databap.tmp('refresh') == false) databap.getSyncInfo('disconnect_chat');
-		databap.vars.chans_list = {};
-		if(typeof oChatTimer != "undefined") clearTimeout(oChatTimer);
-		if(typeof oUserTimer != "undefined") clearTimeout(oUserTimer);
-	};
-	
-	databap.onKeyDown = function(e)
-	{
-		if(e.keyCode == 116) databap.tmp('refresh', true);
-		else databap.tmp('refresh', false);
-	};
-
-	//Sidebar
-	databap.getMainElem('.sidebar_box_title').click
-	(
-		function()
-		{
-			$(this).toggleClass('round')
-				.closest('.sidebar_box').find('.sidebar_box_content').toggle('fast', function(){databap.resizeMain('true');});
-		}
-	);
-
-	//Help
-	databap.getMainElem('#help_open').click(displayHelp);
+	//Init sidebar events
+	initSideBar();
 	
 	//Init's end
 	databap.setInitEnd(true);
 };
 
+//On resize
+databap.onResize = function()
+{
+	self.setScrollBarSize('maximize');
+	
+	//Message Input
+	$('#message').width($('#chat_input').width() - $('#message_img').outerWidth(true)- 1);
+};
+
+//Disconnect from the chat
+databap.onQuit = function()
+{
+	if(databap.tmp('refresh') == false) databap.getSyncInfo('disconnect_chat');
+	databap.vars.chans_list = {};
+	if(typeof oChatTimer != "undefined") clearTimeout(oChatTimer);
+	if(typeof oUserTimer != "undefined") clearTimeout(oUserTimer);
+	return true;
+};
+
+databap.onKeyDown = function(e)
+{
+	if(e.keyCode == 116) databap.tmp('refresh', true);
+	else databap.tmp('refresh', false);
+};
+
+function initSideBar()
+{
+	//Sidebar Events
+	$('#sidebar').find('.sidebar_box_title').click
+	(
+		function()
+		{
+			$This = $(this);
+			if(!$This.closest('.sidebar_box').find('.sidebar_box_content').is(":visible"))
+			{
+				$('#sidebar').find('.sidebar_box_title').not($This)
+					.addClass('round')
+					.closest('.sidebar_box').find('.sidebar_box_content')
+						.hide('fast');
+					
+				$This
+					.toggleClass('round')
+					.closest('.sidebar_box').find('.sidebar_box_content')
+						.toggle('fast', function()
+						{
+							databap.resizeMain('true');
+							switch($(this).attr('id'))
+							{
+								case 'help_open': $('#help_open').click(); break;
+								case 'news': getNews(); break;
+							}
+						});
+			}
+		}
+	);
+	$('#sidebar').find('.sidebar_box_title').eq(0).click();
+
+	//Help
+	databap.getMainElem('#help_open').click(displayHelp);
+}
+
+function getNews()
+{
+	if(typeof databap.tmp('news_timer') != "undefined") clearTimeout(databap.tmp('news_timer'));
+	var $NewsBox = $('#news');
+	if($NewsBox.is(':visible'))
+	{
+		databap.getInfo
+		(
+			'news',
+			function(asNews)
+			{
+				$.each(asNews.news, function(ikey, asNew)
+				{
+					$('<div>', {'class':'new'}).hide()
+						.append($('<p>')
+							.append($('<i>', {'class':'fa fa-inline fa-30 fa-c-news'}))
+							.append($('<span>').text(asNew.message)))
+						.append($('<p>', {'class':'signature'})
+							.text('—'+asNew.nickname)
+							.append('<br />')
+							.append($('<span>', {'class':'news_time'}).text(asNew.time_desc)))
+						.appendTo($NewsBox);
+				});
+				
+				$NewsBox.find('.loading').hide();
+				$NewsBox.find('.new').toggle();
+				$NewsBox.find('.new:hidden').remove();
+				
+				//Request in 10mins
+				databap.tmp('news_timer', setTimeout(getNews, databap.tmp('news_period')));
+			},
+			{},
+			'json'
+		);
+	}
+}
+
 function onPageFocus()
 {
 	databap.vars.focus=true;
@@ -176,31 +229,47 @@ function onPageBlur()
 
 function setChanButton()
 {
-	var sAddChanText = '+';
-	$JoinButton = $('#join_chan');
-	if($JoinButton.text() == sAddChanText)
-	{
-		$JoinButton
-			.addClass('active')
-			.empty()
-			.append($('<span>#<input type="text" id="input_chan" class="round" /></span>'))
-			.find('#input_chan').focus().keyup
-			(
-				function(e)
+	$('#join_chan')
+		//.click(function(){$('#join_chan_button').click();})
+		.append
+		(
+			$('<span>', {id:'join_chan_button'})
+				.click(function()
 				{
-					if(e.keyCode == 13)
-					{
-						setChanButton();
-						joinChan($(this).val());
-					}
-				}
-			);
-	}
-	else $JoinButton
-			.empty()
-			.text(sAddChanText)
-			.removeClass('active')
-			.click(function(){setChanButton();});	
+					$(this).hide();
+					$('#join_chan_input').css('display', '');
+					$('#join_chan').addClass('active').find('#input_chan').focus();
+				})
+				.append('&nbsp;')
+				.append($('<i>', {'class':'fa fa-c-plus'}))
+				.append('&nbsp;')
+		)
+		.append
+		(
+			$('<span>', {id:'join_chan_input'})
+				.text('#')
+				.append
+				(
+					$('<input>', {type:'text', id:'input_chan', 'class':'round'})
+						.keyup(function(e)
+						{
+							if(e.keyCode == 13)
+							{
+								var $This = $(this);
+								joinChan($This.val());
+								$This.val('');
+								
+							}
+							if(typeof e.keyCode == 'undefined' || e.keyCode == 13)
+							{
+								$('#join_chan_input').css('display', 'none');
+								$('#join_chan_button').show();
+								$('#join_chan').removeClass('active');
+							}
+						})
+						.blur(function(){$(this).keyup();})
+				).hide()
+		);	
 }
 
 function getChanKeyName(sChanName)
@@ -306,7 +375,7 @@ function switchChan(sChanKeyName)
 	//Show current channel messages
 	databap.getMainElem('#chat_messages').find('p').hide();
 	databap.getMainElem('#chat_messages').find('p.class_'+sChanKeyName+', p.class_'+databap.consts.all_chan_id).show();
-	oScrollbar.tinyscrollbar_update('bottom');
+	databap.updateScrollBar('bottom');
 	
 	//Show Current channel members
 	databap.getMainElem('#connected_users').find('p').hide();
@@ -358,11 +427,11 @@ function addChanTab(sChanKeyName, sChanName, sChanTabName, bLightUp)
 		//Prepare clickable chan button
 		var sChanQuitId = databap.consts.chanQuitPrefix+sChanKeyName;
 		var sChanUnreadId = databap.consts.chanUnreadPrefix+sChanKeyName;
-		var $ChanButton = 	$('<span id="'+sChanId+'" class="chan clickable round_top'+(bLightUp?' light_up':'')+'">#</span>')
+		var $ChanButton = 	$('<span id="'+sChanId+'" class="chan clickable inc_border round_top'+(bLightUp?' light_up':'')+'">#</span>')
 							.click(function(){$(this).removeClass('light_up');joinChan(databap.vars.chans_list[$(this).attr('id').substr(databap.consts.chanPrefix.length)]);})
 							.append('<span class="chan_title">'+sChanTabName+'</span>')
 							.append('<span class="chan_unread" id="'+sChanUnreadId+'"></span>')
-							.append($('<a id="'+sChanQuitId+'" class="quit_chan clickable">x</a>').click(function(e){e.stopPropagation();quitChan($(this).attr('id').substr(databap.consts.chanQuitPrefix.length));}));
+							.append($('<a id="'+sChanQuitId+'" class="quit_chan clickable"><i class="fa fa-c-close"></i></a>').click(function(e){e.stopPropagation();quitChan($(this).attr('id').substr(databap.consts.chanQuitPrefix.length));}));
 							
 		
 		//Add channel tab name and bind delete button
@@ -418,7 +487,6 @@ function add_message(e)
 			else if(chat_message != '' && databap.tmp('sending_msg') == false) //send
 			{
 				databap.tmp('sending_msg', true);
-				//debug(databap.tmp('sending_msg'));
 				databap.saveForm
 				(
 					'add_message',
@@ -426,7 +494,6 @@ function add_message(e)
 					function(id)
 					{
 						databap.tmp('sending_msg', false);
-						//debug(databap.tmp('sending_msg'));
 						refresh_chat();
 					},
 					true
@@ -455,6 +522,11 @@ function add_message(e)
 			}
 			break;
 		case 9 : //tab
+			/* Action Plan
+			- Detect current caret position : $this.getCursorPosition()
+			- Find word wrapped around cursor : while loop until non alphanum char before and after caret position
+			- 
+			*/
 			//Init
 			$this = databap.getMainElem('#message');
 			var chat_message = $.trim($this.val());
@@ -465,6 +537,7 @@ function add_message(e)
 	
 				//Finding last word
 				var last_word = (chat_message.lastIndexOf(" ")==-1)?chat_message:chat_message.substr(chat_message.lastIndexOf(" ") + 1);
+				debug(last_word);
 				if(last_word.substr(0, 1)=='@') last_word = last_word.substr(1);
 	
 				var last_word_len = last_word.length;
@@ -540,7 +613,7 @@ function refresh_chat(bReset)
 {
 	var bReset = (typeof bReset != 'undefined' && bReset == true);
 	if(typeof oChatTimer != "undefined") clearTimeout(oChatTimer);
-	if(databap.vars.current_page == databap.pages.chat)
+	if(databap.vars.current_page == 'chat')
 	{
 		if(!databap.vars.loading)
 		{
@@ -579,7 +652,7 @@ function refresh_chat(bReset)
 						//Nicknames changes
 						if(updateUsersList === true || prevLastMsgId == 0)
 						{
-							oScrollbar.tinyscrollbar_update('bottom');
+							databap.updateScrollBar('bottom');
 							refresh_users();
 							updateUsersList = false;
 						}
@@ -605,27 +678,35 @@ function refresh_chat(bReset)
 
 function addMessage(message_info, bReset)
 {
+	message_info.nickname = message_info.nickname || '';
+	
 	var sChanKeyName = message_info.id_chan;
+	var sMsgPrefix = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console">&gt;</span>';
 	var msg_body = '';
+
 	switch(message_info.msg_class)
 	{
 		case 'U':
-			msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console">&gt;</span><span class="text">'+message_info.message+'</span>';
+			msg_body = sMsgPrefix+'<span class="text">'+message_info.message+'</span>';
+			break;
+		case 'NW':
+			if(!bReset) getNews();
+			msg_body = '<span class="text action">'+message_info.nickname+' a une news : <span class="news"><i class="fa fa-30 fa-c-news"></i> '+message_info.message+' <i class="fa fa-30 fa-c-news"></i></span></span>';
 			break;
 		case 'A':
-			var url = databap.getCodeLink(message_info.message);
+			var url = databap.getInternalLink('code', message_info.message);
 			msg_body = '<span class="text">'+message_info.nickname+' a ajout&eacute; un nouveau code : <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
 			break;
 		case 'E':
-			var url = databap.getCodeLink(message_info.message);
+			var url = databap.getInternalLink('code', message_info.message);
 			msg_body = '<span class="text">'+message_info.nickname+' a modifi&eacute; le code <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
 			break;
 		case 'PA':
-			var url = databap.getProcLink(message_info.message);
+			var url = databap.getInternalLink('proc', message_info.message);
 			msg_body = '<span class="text">'+message_info.nickname+' a ajout&eacute; une nouvelle proc&eacute;dure : <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
 			break;
 		case 'PE':
-			var url = databap.getProcLink(message_info.message);
+			var url = databap.getInternalLink('proc', message_info.message);
 			msg_body = '<span class="text">'+message_info.nickname+' a modifi&eacute; la proc&eacute;dure <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
 			break;
 		case 'M':
@@ -647,24 +728,25 @@ function addMessage(message_info, bReset)
 			break;
 		case 'I':
 			var msg = '<a href="'+message_info.message[3]+'" target="_blank"><img src="'+message_info.message[0]+'" width="'+message_info.message[1]+'" height="'+message_info.message[2]+'" class="proxy"></a>';
-			msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console">&gt;</span><span class="text">'+msg+'</span>';
+			msg_body = sMsgPrefix+'<span class="text">'+msg+'</span>';
 			break;
 		case '9':
 			var msg = '<a href="'+message_info.message.url+'" target="_blank" title="'+message_info.message.title+'"><img src="'+message_info.message.url_img+'" width="'+message_info.message.width+'" height="'+message_info.message.height+'" class="proxy" /></a>';
-			msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console">&gt;</span><span class="text">'+msg+'</span>';
+			msg_body = sMsgPrefix+'<span class="text">'+msg+'</span>';
 			break;
 		case 'R':
 			if(!bReset)
 			{
 				msg_body = '<span class="text action">'+message_info.message+'</span>';
-				setTimeout('databap.tmp(\'refresh\', true);databap.goTo(databap.vars.current_page);', databap.consts.reboot_delay*1000);
+				setTimeout(databap.refresh, databap.consts.reboot_delay*1000);
 			}
 			break;
 		case 'V':
 			if(!bReset) joinChan(sChanKeyName, false, [], false);
 			break;
 		case 'B':
-			msg_body = '<span class="text action">Nouvel article sur le blog BI de SAP : <a href="'+databap.getExternalLink('a', message_info.message)+'" target="_blank">'+message_info.art_title+'</a> ';
+			var url = databap.getInternalLink('a', message_info.message);
+			msg_body = '<span class="text action">Nouvel article sur le blog BI de SAP : <a href="'+url+'" target="_blank">'+message_info.art_title+'</a> ';
 			msg_body+= 'par <a title="Lien vers la page de l\'auteur" href="'+message_info.link_auth+'" target="_blank">'+message_info.name+'</a> ('+message_info.art_date+')'+'</span>';
 			break;
 		case 'S':
@@ -672,13 +754,21 @@ function addMessage(message_info, bReset)
 			msg_body = '<span class="text action">'+message_info.nickname+' '+message_info.message+'</span>';
 			break;
 		case 'DA':
-			var url = databap.getExternalLink('doc', message_info.message);
+			var url = databap.getInternalLink('doc', message_info.message);
 			msg_body = '<span class="text">'+message_info.nickname+' a ajout&eacute; une nouvelle documentation : <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
 			break;
 		case 'DE':
-			var url = databap.getExternalLink('doc', message_info.message);
+			var url = databap.getInternalLink('doc', message_info.message);
 			msg_body = '<span class="text">'+message_info.nickname+' a modifi&eacute; la documentation <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
 			break;
+		case 'TA':
+			var url = databap.getInternalLink('table', message_info.message);
+			msg_body = '<span class="text">'+message_info.nickname+' a ajout&eacute; une nouvelle table : <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
+			break;
+		case 'TE':
+			var url = databap.getInternalLink('table', message_info.message);
+			msg_body = '<span class="text">'+message_info.nickname+' a modifi&eacute; la table <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
+			break;
 	}
 	
 	if(msg_body != '')
@@ -693,7 +783,7 @@ function addMessage(message_info, bReset)
 function refresh_users()
 {
 	if(typeof oUserTimer != "undefined") clearTimeout(oUserTimer);
-	if(databap.vars.current_page == databap.pages.chat)
+	if(databap.vars.current_page == 'chat')
 	{
 		var delay = databap.consts.keep_alive / 10; //seconds
 		databap.getInfo
@@ -713,19 +803,20 @@ function refresh_users()
 						$.each
 						(
 							chan_info,
-							function(id_user, user_info)
+							function(key, user_info)
 							{
 								var sNickName = user_info.nickname.replace('"', '\'');
 								users_list.push(sNickName);
-								var afk = (user_info.afk=='1')?'<img src="'+databap.consts.app_image_folder+'afk.png" class="afk" />':'';
-								var profileLink = databap.getExternalLink('profil', user_info.id_user);
-								var mission = 'Mission actuelle : '+user_info.status;
+								var profileLink = databap.getInternalLink('profil', user_info.id_user);
+								var mission = 'Mission actuelle : '+(user_info.status || 'Aucune');
 								var pm = 'Cliquez pour lancer un channel privé avec '+user_info.name+' ('+user_info.company+')';
-								var user =	'<p class="class_'+sChankeyName+'">'
-											+'<a href="'+profileLink+'" title="'+mission+'" target="_blank"><img src="'+databap.consts.app_image_folder+user_info.logo+'" style="vertical-align:middle" />'+afk+'</a>'
-											+'<a class="connectedUser clickable '+sNickName+'" id="'+user_info.id_user+'" title="'+pm+'">'+sNickName+'</a>'
-											+'</p>';
-								$user = $(user).css("visibility", "hidden");
+								var user =	$('<p>', {'class':'connected_user class_'+sChankeyName})
+												.append($('<a>', {'class':'connected_user_logo', href:profileLink, title:mission, target:'_blank'})
+													.append($('<img>', {src:databap.consts.app_image_folder+user_info.logo}))
+													.append((user_info.afk=='1')?$('<i>', {class:'fa fa-c-afk afk'}):''))
+												.append($('<a>', {'class':'connected_user_name clickable '+sNickName, id:user_info.id_user, title:pm}).text(sNickName));
+								
+								$user = $(user)/*.css("visibility", "hidden")*/;
 								$user.find('.connectedUser').click(joinPmChan);
 								databap.getMainElem('#connected_users').append($user);
 							}
@@ -734,7 +825,7 @@ function refresh_users()
 				);
 				
 				//Resize Nickname
-				var iMaxSize = 126 - 24 - 5; //boxSize - imageSize - marginLeftSize
+				/*var iMaxSize = 126 - 24 - 5; //boxSize - imageSize - marginLeftSize
 				$.each
 				(
 				    users_list,
@@ -751,7 +842,7 @@ function refresh_users()
 							$nick.parent().css("visibility", "visible");
 						});
 				    }
-				);
+				);*/
 				
 				switchChan();
 			},
@@ -793,9 +884,15 @@ function displayHelp()
 	
 	//Visible on all channels
 	$Help.find('p').addClass('class_'+databap.consts.all_chan_id);
-	$Help.appendTo('#chat_messages').slideDown('fast', function(){oScrollbar.tinyscrollbar_update('bottom');});
+	$Help.appendTo('#chat_messages').slideDown('fast', function()
+	{
+		databap.updateScrollBar('bottom');
+	});
 	
 	//Close button activation
-	$Help.find('#close_help').click(function(){$(this).closest('.help').slideUp('fast', function(){oScrollbar.tinyscrollbar_update('bottom');});});
+	$Help.find('#close_help').click(function(){$(this).closest('.help').slideUp('fast', function()
+	{
+		databap.updateScrollBar('bottom');
+	});});
 }
 </script>

masks/code.html

@@ -0,0 +1,330 @@
+<div id="add_code_container">
+	<form id="add_code" name="add_code">
+		<div class="loggued">
+			<textarea id="content" name="content" class="round"></textarea>
+		</div>
+		<table id="extra_data" style="display:none;">
+			<tr>
+				<td>Description</td>
+				<td><input type="text" name="description" id="description" class="round" maxlength="200" /></td>
+			</tr>
+			<tr>
+				<td>Lien (facultatif)</td>
+				<td>
+					<input type="text" name="link" id="link" class="round" maxlength="200" />
+					<span id="available_phrase" class="round"><i class="fa fa-30 fa-inline"></i><span id="available_phrase_text"></span></span>
+					<span id="link_result" class="share round"><i class="fa fa-inline fa-30 fa-c-share"></i><span id="link_result_text"></span></span>
+					<input type="hidden" name="link_escaped" id="link_escaped" value="" />
+				</td>
+			</tr>
+			<tr><td colspan="2" class="last" id="button_box"></td></tr>
+		</table>
+	</form>
+</div>
+<div id="reader">
+	<div id="code_menu"></div>
+	<div id="previous_versions" class="standalone"></div>
+	<div id="reader_box"><div id="reader_subbox" style="margin-top:10px;"><div id="code_container"></div></div></div>
+	<div id="next_versions" class="standalone"></div>
+	<div id="edit_container" class="side_margins">
+		<form name="edit_code" id="edit_code">
+			<textarea id="content" name="content" class="round"></textarea>
+			<input type="hidden" id="id" name="id" value="" />
+		</form>
+	</div>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	self.tmp('started', false);
+	self.tmp('add', $('#add_code_container'));
+	self.tmp('read', $('#reader'));
+	
+	var bEdit = (self.vars.id > 0 || self.vars.id!='');
+	self.tmp('add').toggle(!bEdit);
+	self.tmp('read').toggle(bEdit);
+	
+	var fOnFinish = function(){databap.setInitEnd(true);};
+	bEdit?initReadCode(fOnFinish):initAddCode(fOnFinish);
+};
+
+databap.onResize = function()
+{
+	//Add Code
+	self.maximizeElem(self.tmp('add').find('#content'));
+	
+	//Read Code
+	self.setScrollBarSize('optimize');
+};
+
+databap.onQuit = function(){ return (self.tmp('started') === false); };
+
+/* Add Code */
+
+function initAddCode(fOnFinish)
+{
+	//Tmp
+	databap.tmp('last_val', 'string');
+	
+	//content
+	databap.tmp('add').find('#content')
+		.addDefaultValue(databap.consts.add_code_text)
+		.one('keydown', function()
+		{
+			//Block exit
+			databap.tmp('started', true);
+			
+			//Add other fields
+			var $ExtraBox = databap.tmp('add').find('#extra_data');
+			if($ExtraBox.is(':hidden')) $(this).animate({'height':'-='+$ExtraBox.show().outerHeight(true)});
+		});
+
+	//Button
+	databap.tmp('add').find('#button_box').addButton('ok', 'Envoyer', add_code, 'add_code_btn', 'heavy');
+	
+	//link phrase
+	databap.tmp('add').find('#link').bind
+	(
+		'keyup',
+		function()
+		{
+			$link = databap.tmp('add').find('#link_result_text');
+			var link = $.trim($(this).val());
+			var escaped_link = link.replace(/ /g, '_');
+			if(escaped_link!=databap.tmp('last_val'))
+			{
+				databap.tmp('last_val', escaped_link);
+				$link.text(databap.getInternalLink('code', escaped_link, true));
+				databap.tmp('add').find('#link_escaped').val(escaped_link);
+				if(escaped_link!='') checkUrlAvailability($.trim(escaped_link));
+				else databap.tmp('add').find('#link_result').add(databap.tmp('add').find('#available_phrase')).hide('fast');
+			}
+		}
+	);
+	fOnFinish();
+}
+
+//submit
+function add_code()
+{
+	var code = self.tmp('add').find('#content').val();
+							
+	if
+	(
+		code!=databap.consts.add_code_text &&
+		code!='' &&
+		self.tmp('add').find('#description').val()!=''
+	)
+	{
+		databap.saveForm
+		(
+			'add_code',
+			self.tmp('add').find('#add_code'),
+			function(iCodeId)
+			{
+				var link = self.tmp('add').find('#link_escaped').val();
+				databap.tmp('started', false);
+				databap.goToInternalLink('code', iCodeId);
+			},
+			true
+		);
+	}
+	else
+	{
+		databap.addErrorBefore('Tous les champs ne sont pas remplis', self.tmp('add').find('#add_code_btn'));
+	}
+}
+
+function checkUrlAvailability(phrase, bTriggered)
+{
+	if(bTriggered == true)
+	{
+		databap.getInfo
+		(
+			'url',
+			function(bExist)
+			{
+				var availabilityClass, availabilityText;
+				var $link = databap.getMainElem('#link_result');
+				if(bExist=='0')
+				{
+					availabilityClass = 'available';
+					availabilityText = 'Disponible';
+					if($link.is(':hidden')) $link.show('fast');
+				}
+				else
+				{
+					availabilityClass = 'unavailable';
+					availabilityText = 'Indisponible';
+					if($link.is(':visible')) $link.hide('fast');
+				}
+				var $AvailableBox = databap.getMainElem('#available_phrase');
+				$AvailableBox
+					.removeClass('available unavailable')
+					.addClass(availabilityClass);
+				$AvailableBox.find('#available_phrase_text').text(availabilityText);
+				$AvailableBox.show('fast');
+			},
+			{link_escaped:phrase},
+			'html',
+			function(){},
+			true
+		);
+	}
+	else
+	{
+		databap.addBufferIcon();
+		if(typeof oCheckLinkTimer != "undefined") clearTimeout(oCheckLinkTimer);
+		oCheckLinkTimer = setTimeout(function(){checkUrlAvailability(phrase, true);}, 500);	
+	}
+}
+
+/* Read Code */
+
+function initReadCode(fOnFinish)
+{
+	databap.tmp('edit_btn', 'object');
+	databap.initScrollBar('#reader_box', '#reader_subbox', '#code_container');
+	databap.setCodeContainer
+	(
+		function()
+		{
+			databap.getInfo
+			(
+				'read_code',
+				function(jContent)
+				{
+					//append code to main and refresh id
+					databap.appendCode(databap.tmp('read').find('#code_reader'), jContent);
+					
+					if(typeof jContent.other_versions !== 'undefined')
+					{
+						//Truncated versions
+						if(jContent.truncated)
+						{
+							var $Truncated = $(databap.consts.versionHtml);
+							$Truncated.find('#item_link')
+								.text('...')
+								.prop('href', databap.getInternalLink('code', jContent.truncated))
+								.prop('title', 'Afficher les versions masquées');
+							databap.tmp('read').find('#previous_versions').append($Truncated);
+						}
+						
+						//Display other versions
+						$.each
+						(
+							jContent.other_versions,
+							function(key, code_info)
+							{
+								$verHtml = $(databap.consts.versionHtml);
+						 		$verHtml.find('#description').html(code_info.description);
+						 		$verHtml.find('i.fa').addClass('fa-c-code');
+							 	$verHtml.find('#author_name').html(code_info.name);
+								$verHtml.find('#author_company').html(code_info.company);
+								$verHtml.find('#led').html(code_info.led);
+								$verHtml.find('#item_link').prop('href', databap.getInternalLink('code', code_info.id_code)).prop('title', 'Afficher cette version du code');
+								
+								$verHtml = databap.setElemTags($verHtml, code_info.id_code);
+								var anchor = '#'+((parseInt(code_info.id_code) < parseInt(databap.vars.id))?'previous':'next')+'_versions';
+								databap.tmp('read').find(anchor).append($verHtml);
+							}
+						);
+					}
+					
+					//Buttons
+					databap.tmp('read').find('#code_menu')
+						.addButton('edit', 'Modifier', edit, 'edit', '', 'edit_btn')
+						.addButton('raw', 'Fichier brut', databap.getActionLink('raw_code', {id:databap.vars.phrase}), 'raw')
+						.addButton('save', 'Télécharger', databap.getActionLink('dl_code', {id:databap.vars.phrase}), 'save')
+						.addButton('print', 'Imprimer', databap.getActionLink('print_code', {id:databap.vars.phrase}), 'edit')
+						.addButton('share', 'Partager', function(){databap.shareEvent('code', databap.vars.phrase);}, 'share');
+					
+					//expanding
+					databap.tmp('read').find("input").click(function(){expand($(this));});
+					databap.tmp('read').find("#code_container input[id^=expand_loop]").hover
+					(
+						function()
+						{
+							databap.tmp('read').find('.'+$(this).attr('id').substr(7)).toggleClass('code_hover');
+						}
+					);
+					
+					//Edit Buttons
+					databap.tmp('read').find('#edit_container').addButton('ok', 'Corriger', valid_edit, 'edit_btn');
+					
+					fOnFinish();
+				},
+				{id:databap.vars.id},
+				'json',
+				function(){},
+				true
+			);
+		},
+		'#code_container'
+	);
+}
+
+//Button actions
+function edit()
+{
+	if(databap.tmp('read').find('#content').val()=='')
+	{
+		//make space for edit box
+		databap.tmp('read').find('#previous_versions, #next_versions, #reader_box').slideUp('fast');
+
+		databap.getInfo
+		(
+			'nude_code', 
+			function(data)
+			{
+				databap.vars.old_code = data;
+				databap.tmp('read').find('#content').val(databap.vars.old_code);
+				databap.tmp('read').find('#id').val(databap.vars.id);
+				databap.tmp('read').find('#edit_container').show('fast', function(){databap.maximizeElem(databap.tmp('read').find('#content'));});
+				databap.tmp('edit_btn').find('.icon').attr('class', 'icon fa fa-c-c'); //TODO add to standard code
+				databap.tmp('edit_btn').find('.value').text('Afficher');
+			}, 
+			{id:databap.vars.id}
+		);
+	}
+	else
+	{
+		//display other versions
+		databap.tmp('read').find('#previous_versions, #reader_box, #next_versions').slideDown('fast');
+		databap.tmp('read').find('#'+databap.getElemTag('tab_left', databap.vars.id)).height('auto');
+		databap.tmp('read').find('#content').add('#id').val('');
+		databap.tmp('read').find('#edit_container').hide('fast');
+		databap.tmp('edit_btn').find('.icon').attr('class', 'icon fa fa-c-edit');
+		databap.tmp('edit_btn').find('.value').text('Modifier');
+	}
+}
+function valid_edit()
+{		
+	code = databap.tmp('read').find('textarea#content').val();			
+	if(code !='')
+	{
+		if(code != databap.vars.old_code)
+		{
+			databap.saveForm
+			(
+				'edit_code',
+				databap.tmp('read').find('#edit_code'),
+				function(iCodeId)
+				{
+					databap.vars.old_code = '';
+					databap.goToInternalLink('code', iCodeId);
+				},
+				true
+			);
+		}
+		else
+		{
+			databap.addWarningBefore('Aucune modification n\'a &eacute;t&eacute; effectu&eacute;e', databap.tmp('edit_btn'));
+		}
+	}
+	else
+	{
+		databap.addErrorBefore('Le champ code est vide', databap.tmp('edit_btn'));
+	}
+}
+</script>

masks/code_block.html

@@ -1,5 +1,5 @@
 <div id="code_reader" class="code_reader round">
-	<div id="author_box" class="author_box round_top"><span id="description"></span> &bull; <span id="author_name"></span> (<span id="author_company"></span>) &bull; <span id="led"></span></div>
+	[#]item[#]
 	<div id="tab_left" class="tab_left round_bottom">
 		<form name="code_form" id="code_form">
 			<pre><ol id="code_lines" class="code_lines round_right">Chargement du code...</ol></pre>

masks/doc.html

@@ -1,26 +1,26 @@
 <div id="doc">
-	<div class="h1_wrap">
-		<h1 class="round"><span>Documentation</span></h1>
-	</div>
 	<div id="doc_container">
 		<div id="titles_edit" class="hide">
 			<form id="doc_form" name="doc_form">
 				<div id="title_edit" class="step_box round">
 					<p class="step_nb_box">Titre</p>
-					<input type="text" name="title" id="title" class="step_line_item round" maxlength="200" value="" />
+					<input type="text" name="title" id="title" class="step_line_item inc_border round" maxlength="200" value="" />
 				</div>
 				<div id="desc_edit" class="step_box round">
 					<p class="step_nb_box">Description</p>
-					<input type="text" name="description" id="description" class="step_line_item round" maxlength="500" value="" />
+					<input type="text" name="description" id="description" class="step_line_item inc_border round" maxlength="500" value="" />
 				</div>
-				<div id="attach_file"></div>
-				<div id="doc_menu"><span id="submit_doc" class="button ok round">Valider</span></div>
+				<div id="desc_edit" class="step_box round">
+					<p class="step_nb_box">Fichiers</p>
+					<div id="attach_file"></div>
+				</div>
+				<div id="doc_menu"><a id="submit_doc" class="button round"><i class="fa fa-c-ok"></i>Valider</a></div>
 			</form>
 		</div>
 		<div id="titles_read" class="step_box round hide">
 			<p class="read_title"><span id="titles_read_title"></span></p>
 			<p class="read_details">Cr&eacute;&eacute; par <span id="titles_read_user"></span> (<span id="titles_read_company"></span>) le <span id="titles_read_led"></span></p>
-			<p class="read_description"><span id="titles_read_description"></span></p>
+			<p class="read_description"><i class="fa fa-c-desc"></i><span id="titles_read_description"></span></p>
 		</div>
 		<div id="docs_read" class="step_box round hide">
 			<p class="step_nb_box">Documents</p>
@@ -28,28 +28,11 @@
 		</div>
 	</div>
 </div>
-<div id="image_model" class="hide">
-	<span id="image_action">
-		<input type="text" id="image_desc" name="image_desc" class="image_description round" />
-		<input type="hidden" name="image_name" id="image_name" value="" />
-		<input type="button" id="delete_image" class="button delete round" />
-	</span>
-</div>
 <script type="text/javascript">
 databap.pageInit = function()
 {
-	//image
-	databap.vars.imageHtml = databap.getMainElem('#image_model').html();
-	
-	//On Resize Event
-	databap.onResize = function()
-	{
-		//TODO : to be replaced by tinyscrollbar
-		databap.$main.css('overflow', 'auto');
-	
-		var maxWidth = databap.getMainElem('#desc_edit').find('p.step_nb_box').width();
-		databap.getMainElem('#description').width(maxWidth-10);
-	};
+	self.tmp('started', false);
+	self.initScrollBar('#main', '#doc', '#doc_container');
 	
 	//load Uploader
 	oUploader = new qq.FileUploader
@@ -60,17 +43,17 @@ databap.pageInit = function()
 			allowedExtensions: databap.consts.authorized_file_exts,
 			sizeLimit: parseInt(databap.consts.max_size)*100,
 			addSlideText: 'Glisser les fichier ici',
-			addFileText: 'Ajouter un fichier',
-			debug:true,
-			stepId:1
+			addFileText: 'Ajouter des fichiers',
+			debug: true,
+			stepId: 1
         }
 	);
 
-	if(databap.vars.doc_id>0)
+	if(databap.vars.id>0)
 	{
 		loadDoc
 		(
-			databap.vars.doc_id,
+			databap.vars.id,
 			function()
 			{
 				databap.setInitEnd(true);
@@ -89,6 +72,15 @@ databap.pageInit = function()
 	databap.getMainElem('#submit_doc').click(saveDoc);
 };
 
+databap.onResize = function()
+{
+	self.setScrollBarSize('maximize');
+	//var maxWidth = databap.getMainElem('#desc_edit').find('p.step_nb_box').width();
+	//databap.getMainElem('#description').width(maxWidth-10);
+};
+
+databap.onQuit = function(){ return (self.tmp('started') === false); };
+
 function loadDoc(iDocId, fOnSuccess)
 {
 	databap.getInfo
@@ -103,16 +95,13 @@ function loadDoc(iDocId, fOnSuccess)
 			databap.getMainElem('#titles_read_description').html(doc_info.description);
 
 			//links
-			for(i in doc_info.files)
+			for(var i in doc_info.files)
 			{
-				databap.getMainElem('#doc_links')
-					.append(
-						$('<a>', {title:'T&eacute;l&eacute;charger cette documentation', href:databap.getActionLink('dl_file&id='+i)})
-							.addClass(doc_info.files[i].ext)
-							.text(doc_info.files[i].description)
-						)
-					.append('<br />');
-				
+				databap.getMainElem('#doc_links').addButton('file-'+doc_info.files[i].ext+' fa-30', 
+															doc_info.files[i].description, 
+															databap.getActionLink('dl_file', {id:i}),
+															null,
+															'inverse');
 			}
 			setDisplay('read');
 			fOnSuccess();
@@ -133,7 +122,7 @@ function saveDoc()
 			databap.getMainElem('#doc_form'), 
 			function(data)
 			{
-				if(data.result == 'success') loadDoc(data.doc_id);
+				if(data.result == 'success') databap.goToInternalLink('doc', data.doc_id);
 			}, 
 			true, 
 			'json'
@@ -164,37 +153,4 @@ function setDisplay(sNewMode)
 	}
 }
 
-function addImage(stepId, imageId, imageName, imageDesc)
-{
-	//get image number
-	$ImageBox = databap.getMainElem('#'+databap.getElemTag('uploader_item', [stepId, imageId]));
-	
-	//Create new image
-	$newImage = $(databap.vars.imageHtml);
-	
-	//Set image name
-	$newImage.find('#image_name').val(imageName);
-
-	//Set image description
-	$newImage.find('#image_desc').val(imageDesc);
-	
-	//delete button for this image
-	$newImage.find('#delete_image').click
-	(
-		function()
-		{
-			var stepIds = databap.getElemIds($(this).attr('id'));
-			removeImage(stepIds[0], stepIds[1]);
-		}
-	);
-	
-	//Add ids
-	$newImage = databap.setElemTags($newImage, [stepId, imageId]);
-	
-	//Add Image to the step
-	$newImage.appendTo($ImageBox);
-	
-	return imageId;
-}
-
 </script>

masks/error.html

@@ -1,7 +1,4 @@
 <div id="err_404">
-	<div class="h1_wrap" id="chat_title">
-		<h1 class="round"><span>Page introuvable</span></h1>
-	</div>
 	<p>Sorry Bro!</p>
 	<p><a id="back_to_main" class="button round" href="#">Revenir &agrave; la page d'accueil</a></p>
 </div>

masks/index.html

@@ -1,29 +1,24 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-	<meta http-equiv="content-type" content="text/html; charset=#text_enc#" />
-	<meta name="author" content="Francois Lutran" />
+	<meta http-equiv="content-type" content="text/html; charset=[#]text_enc[#]" />
+	<meta name="author" content="François Lutran" />
 	<meta name="description" content="Abap database for consultants" />
 	<meta name="keywords" content="ABAP, SAP, BW, BI" />
 	<meta name="viewport" content="width=device-width" />
 	<link rel="shortcut icon" href="images/favicon_gc3.ico" />
-	<link href="index.php?a=css&v=0.94" rel="stylesheet" type="text/css" />
-	<script type="text/javascript" src="jquery/jquery.min.js?v0.94"></script>
-	<!-- <script type="text/javascript" src="jquery/resize.js"></script> -->
-	<script type="text/javascript" src="jquery/tinyscrollbar.js?v0.94"></script>
-	<script type="text/javascript" src="jquery/fileuploader.js?v0.94"></script>
-	<script type="text/javascript" src="jquery/handler.js?v0.94"></script>
+	<link href="style/fa.css?v[#]version[#]" rel="stylesheet" type="text/css" />
+	<link href="index.php?a=css&v=[#]version[#]" rel="stylesheet" type="text/css" />
+	<script type="text/javascript" src="jquery/jquery.min.js?v[#]version[#]"></script>
+	<script type="text/javascript" src="jquery/jquery.mods.js?v[#]version[#]"></script>
+	<script type="text/javascript" src="jquery/fileuploader.js?v[#]version[#]"></script>
+	<script type="text/javascript" src="jquery/common.js?v[#]version[#]"></script>
+	<script type="text/javascript" src="jquery/databap.js?v[#]version[#]"></script>
 	<script type="text/javascript">
-		$(document).ready
-		(
-			function()
-			{
-				//#line_break#databap.vars = {<!-- [PART] VARS [START] -->#var_name# : '#var_value#'#coma#<!-- [PART] VARS [END] -->};
-				//#line_break#databap.pages = {<!-- [PART] PAGES [START] -->#page_name# : '#page_value#'#coma#<!-- [PART] PAGES [END] -->},
-				//#line_break#databap.consts = #constants#;
-				//#line_break#databap.init('#first_page#');
-			}
-		);
+		databap = new Databap();
+		databap.consts = [#]constants[#];
+		databap.vars = [#]variables[#];
+		$(document).ready(databap.init);
 	</script>
 	<title>Databap</title>
 </head>
@@ -34,8 +29,13 @@
 		<div id="header">
 			<table class="maximized">
 				<tr>
-					<td class="cell lefty"><a href="#index_link#" class="logo2"><img src="images/logo_43.png" /></a><!-- <a href="http://www.micropole.com" title="Groupe Micropole" target="_blank" id="micropole" class="title round"><img src="images/logo_mu_25.png" alt="Micropole" /></a> --></td>
-					<td class="cell righty"><form name="form_header" id="form_header"><input type="text" name="query" id="query" class="round_left" /><input type="button" name="search_btn_submit" id="search_btn_submit" value="&gt;" class="clickable round_right" /></form></td>
+					<td class="cell lefty"><a href="[#]index_link[#]" class="logo"><img src="images/logo_43.png" /></a></td>
+					<td class="cell righty">
+						<form name="form_header" id="form_header">
+							<div id="search_btn_submit" class="round_right clickable"><i class="fa fa-c-search"></i></div>
+							<input type="text" name="query" id="query" class="round_left" />
+						</form>
+					</td>
 				</tr>
 			</table>
 		</div>
@@ -43,26 +43,36 @@
 			<div id="menu_title"><p>m</p><p>e</p><p>n</p><p>u</p></div>
 			<div id="menu_box">
 				<h1 class="title">databap</h1>
-				<ul style="list-style: none;" id="menu_items">
-					<li id="add_ln">Ajouter du code</li>
-					<li id="procedure_ln">Ajouter une proc&eacute;dure</li>
-					<!-- <li id="doc_ln">Doc</li> -->
-					<li id="list_ln">Liste compl&egrave;te</li>
-<!--				<li id="quick_code_access_ln">N&deg;<input type="text" name="quick_code_access_id" id="quick_code_access_id" class="round" value="code" /></li>-->
-					<li id="profile_ln">Profil</li>
-					<li id="chat_ln">Chat</li>
-					<li id="options_ln">Options</li>
-					<li id="rss_ln"><a href="#rss_link#" target="_blank">Flux Rss</a></li>
-					<li id="log_me_out_ln">Quitter</li>
-					<li id="close_menu_ln" class="mobile">Fermer</li>
+				<ul id="menu_items">
+					<li><a href="#accueil"><i class="fa fa-fw fa-20 fa-c-welcome"></i>Accueil</a></li>
+					<li><a href="#code"><i class="fa fa-fw fa-20 fa-c-code"></i>Ajouter du code</a></li>
+					<li><a href="#procedure"><i class="fa fa-fw fa-20 fa-c-procedure"></i>Ajouter une proc&eacute;dure</a></li>
+					<li><a href="#table"><i class="fa fa-fw fa-20 fa-c-table"></i>Ajouter une table</a></li>
+					<li><a href="#doc"><i class="fa fa-fw fa-20 fa-c-doc"></i>Ajouter une doc</a></li>
+					<li><a href="#liste"><i class="fa fa-fw fa-20 fa-c-list"></i>Liste compl&egrave;te</a></li>
+					<li><a href="#profil"><i class="fa fa-fw fa-20 fa-c-profile"></i>Profil</a></li>
+					<li><a href="#chat"><i class="fa fa-fw fa-20 fa-c-chat"></i>Chat</a></li>
+					<li><a href="#options"><i class="fa fa-fw fa-20 fa-c-options"></i>Paramètres</a></li>
+					<li><a href="[#]rss_link[#]" target="_blank"><i class="fa fa-fw fa-20 fa-c-rss"></i>Flux Rss</a></li>
+					<li><a href="#logout"><i class="fa fa-fw fa-20 fa-c-logmeout"></i>Quitter</a></li>
+					<li class="mobile"><a id="close_menu_ln"><i class="fa fa-fw fa-20 fa-c-fold"></i>Fermer</a></li>
 				</ul>
 			</div>
-			<a href="#index_link#" class="useless_button round" title="The Secret Useless Button"></a>
+			<a href="[#]index_link[#]" class="useless_button round" title="The Secret Useless Button"></a>
+		</div>
+		<div id="main_container" class="round">
+			<div id="page_title">
+				<div class="h1_wrap side_margins">
+					<h1 class="round">
+						<i class="fa fa-fw fa-20 fa-c-loading fa-spin"></i>
+						<span id="title_text">Chargement...</span>
+					</h1>
+				</div>
+			</div>
+			<div id="main"></div>
 		</div>
-		<div id="main" class="round"></div>
 		<div id="footer">
-			<p><a href="#index_link#">v0.94 Beta</a>. Designed and powered by <a href="mailto:francois@lutran.fr" title="Envoyer un mail">Fran&ccedil;ois Lutran</a>.
-			Databap Project under <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPLv3</a> License.</p>
+			<p><a href="[#]index_link[#]">v[#]version[#]</a> - Designed and powered by <a href="mailto:francois@lutran.fr" title="Envoyer un mail">Fran&ccedil;ois Lutran</a> - Databap Project under <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPLv3 License</a>.</p>
 		</div>
 	</div>
 </body>

masks/item.html

@@ -0,0 +1,6 @@
+<div id="author_box" class="author_box clickable round">
+	<a id="item_link" href="" target="_blank">
+		<i class="fa fa-inline fa-30"></i><span id="description" class="description"></span>
+		<span class="glue-right"><span id="author_name"></span> (<span id="author_company"></span>) &bull; <span id="led"></span></span>
+	</a>
+</div>

masks/list.html

@@ -1,27 +1,34 @@
 <div id="list">
-	<div class="h1_wrap">
-		<h1 class="round"><span>La liste</span></h1>
-	</div>
 	<div id="list_container" class="standalone"></div>
 </div>
 <script type="text/javascript">
 databap.pageInit = function()
 {
-	//TODO : to be replaced by tinyscrollbar
-	databap.$main.css('overflow', 'auto');
-
-	databap.getInfo
+	self.initScrollBar('#main', '#list', '#list_container');
+	
+	var $ListBox = self.getMainElem('#list_container');
+	self.getInfo
 	(
 		'list',
 		function(items)
 		{
-			for(id in items) databap.appendItem(items[id], databap.getMainElem('#list_container'));
+			for(var id in items)
+			{
+				self.appendItem(items[id], $ListBox, false);
+			}
 			
 			//Init's end
-			databap.setInitEnd(true);
+			self.setInitEnd(true);
 		},
 		{},
-		'json'
+		'json',
+		function(){},
+		true
 	);
 };
+
+databap.onResize = function()
+{
+	self.setScrollBarSize('optimize');
+};
 </script>

masks/logon.html

@@ -1,32 +1,96 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
-	<meta name="author" content="Franzz" />
+	<meta http-equiv="content-type" content="text/html; charset=[#]text_enc[#]" />
+	<meta name="author" content="François Lutran" />
+	<meta name="description" content="Abap database for consultants" />
+	<meta name="keywords" content="ABAP, SAP, BW, BI" />
 	<meta name="viewport" content="width=device-width" />
 	<link rel="shortcut icon" href="images/favicon_gc3.ico" />
-	<link href="style.css" rel="stylesheet" type="text/css" />
+	<link href="style/screen.css?v[#]version[#]" rel="stylesheet" type="text/css" />
+	<link href="style/fa.css?v[#]version[#]" rel="stylesheet" type="text/css" />
+	<script type="text/javascript" src="jquery/jquery.min.js?v[#]version[#]"></script>
+	<script type="text/javascript" src="jquery/common.js?v[#]version[#]"></script>
 	<title>Databap &bull; Logon</title>
 </head>
 <body>
-	<div id="logon_logo">databap</div>
-	<div id="logon_container">
-		<form id="logon" name="logon" method="post">
-			<div id="logon_box" class="round">
-				<div class="key"></div>
+	<div id="logon">
+		<div class="logo">databap</div>
+		<div class="container">
+			<div class="box round">
+				<div class="key">
+					<i class="fa fa-c-lock"></i>
+				</div>
 				<table>
 					<tr>
-						<td class="desc">Nom et pr&eacute;nom&nbsp;</td>
-						<td class="value"><input type="text" name="auth_name" id="auth_name" class="round" value="#name#" /></td>
+						<td class="desc">Nom &amp; prénom</td>
+						<td class="value"><input type="text" name="auth_name" id="auth_name" class="round" value="" /></td>
 					</tr>
 					<tr>
-						<td class="desc">Soci&eacute;t&eacute;</td>
-						<td class="value"><input type="password" name="auth_company" class="round" value="#company#" /></td>
+						<td class="desc">Mot de passe</td>
+						<td class="value"><input type="password" name="auth_pass" id="auth_pass" class="round" value="" /></td>
+					</tr>
+					<tr>
+						<td colspan="2" class="validate">
+							<form id="logon_form" name="logon_form" method="post">
+								<input type="hidden" name="auth_token" id="auth_token" value="" />
+								<span class="feedback">[#]feedback[#]</span>
+								<input type="button" name="log_me_in" id="log_me_in" value="Ok" class="round" />
+							</form>
+						</td>
 					</tr>
-					<tr><td colspan="2" class="validate"><input type="submit" name="log_me_in" id="log_me_in" value="Ok" class="round" /></td></tr>
 				</table>
 			</div>
-		</form>
+		</div>
+		<div id="footer">
+			<p>v[#]version[#] - Designed and powered by <a href="mailto:francois@lutran.fr" title="Envoyer un mail">Fran&ccedil;ois Lutran</a> - Databap Project under <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPLv3 License</a>.</p>
+		</div>
 	</div>
 </body>
+<script type="text/javascript">
+	$(document).ready(function()
+	{
+		//Events
+		$(window).keyup(function(e){if(e.which==13) logMeIn();});
+		$('#log_me_in').click(logMeIn);
+	});
+
+	//Hashing and sending auth credentials
+	function logMeIn()
+	{
+		var sName = $.trim($('#auth_name').val().toLowerCase()).replace(/ +/g, " ");
+		var sPass = $.trim($('#auth_pass').val());
+		if(sName!='' && sPass!='')
+		{
+			//Buffer
+			$('.key').find('i').removeClass('fa-c-lock').addClass('fa-spin fa-c-loading');
+			$('#auth_token').val(hex_md5(sName)+'[#]name_pass_sep[#]'+getLoginToken(sPass));
+			$('#logon_form').submit();
+			
+			//TODO
+			/*var sFormVars = $('#logon_form').serialize();
+			$.ajax
+			(
+				{
+					type: 'POST',
+					url: self.getActionLink(action),
+					data: sFormVars,
+					success:function(result)
+							{
+								$('.key').find('i').removeClass('fa-spin fa-c-loading').addClass('fa-c-lock');
+								if(result.success=='ok') location.reload();
+								else $('.feedback').text('Données incorrectes');
+							},
+					error:	function(jqXHR, textStatus, errorThrown)
+							{
+								debug('Error handler.js 331');
+								self.showError(textStatus);
+							},
+					dataType:'json'
+				}
+			);*/
+		}
+		else $('.feedback').text('Formulaire incomplet');
+	}
+</script>
 </html>

masks/logout.html

@@ -0,0 +1,6 @@
+<div id="logout">
+	<p><i class="fa fa-spin fa-c-loading"></i>Déconnexion...</p>
+</div>
+<script type="text/javascript">
+self.getInfo('log_me_out', function(){document.location='';});
+</script>

masks/options.html

@@ -1,64 +1,47 @@
 <div id="options">
-	<div class="h1_wrap">
-		<h1 class="round"><span>Options</span></h1>
-	</div>
 	<div id="options_container">
-		<form id="options_form" name="options_form">
-			<div id="options_input" class="round"><p class="loading">Chargement en cours...</p></div>
-			<input type="button" value="Valider" name="options_submit" id="options_submit" class="button heavy round" />
-		</form>
+		<div class="options_box round">
+			<h2><i class="fa fa-c-param fa-inline"></i>Options</h2>
+			<form id="options_form" name="options_form">
+				<div id="options_input">
+					<p class="loading">Chargement en cours...</p>
+				</div>
+			</form>
+		</div>
+		<div class="options_box round">
+			<h2><i class="fa fa-c-lock fa-inline"></i>Mot de passe</h2>
+			<div id="pass_input"></div>
+			<form id="pass_form" name="pass_form">
+				<input type="hidden" id="old_auth_token" name="old_auth_token" />
+				<input type="hidden" id="new_auth_token" name="new_auth_token" />
+			</form>
+		</div>
 	</div>
 </div>
 <script type="text/javascript">
 databap.pageInit = function()
 {
-	//TODO : to be replaced by tinyscrollbar
-	databap.$main.css('overflow', 'auto');
+	self.initScrollBar('#main', '#options', '#options_container');
+	
+	//Display password form
+	addOption('old_pass', {type:'P', option_name:'Mdp Actuel', user_value:''}, $('#pass_input'));
+	addOption('new_pass', {type:'P', option_name:'Nouveau mdp', user_value:''}, $('#pass_input'));
+	addOption('new_pass_conf', {type:'P', option_name:'Confirmation nouveau mdp', user_value:''}, $('#pass_input'));
+	$('#pass_form').addButton('ok', 'Valider', validate_pass, 'validate_pass', 'heavy inverse');
 	
 	databap.getInfo
 	(
 		'get_options',
 		function(options)
 		{
-			var selectHtml = '';
-			var optionHtml = '';
-			var nameAndId = '';
-			var selected = '';
-			
 			//remove default text
-			$('#options_input').find('.loading').hide();
+			$('#options_input').find('.loading').hide().remove();
 			
-			//Display options
-			$.each
-			(
-				options,
-				function(optNameId, optInfo)
-				{
-					optionHtml = '<div class="option_line"><label>'+optInfo.option_name+'</label>';
-					nameAndId = 'id="'+optNameId+'" name="'+optNameId+'"';
-					switch(optInfo.type)
-					{
-						case databap.consts.opt_type_text:
-							optionHtml += '<input type="text" '+nameAndId+' value="'+optInfo.user_value+'" class="round" />';
-							break;
-						case databap.consts.opt_type_select:
-							selectHtml = selected = '';
-							$.each
-							(
-								optInfo.select, 
-								function(selectId, selectName)
-								{
-									debug('id='+selectId+selectName);
-									//selected = (optinfo.user_value_id && selectId==optinfo.user_value_id)?' selected':'';
-									selectHtml += '<option value="'+selectId+'"'+selected+'>'+selectName+'</option>';
-								}
-							);
-							optionHtml += '<select '+nameAndId+' class="round">'+selectHtml+'</select>';
-							break;
-					}
-					$(optionHtml+'</div>').appendTo(databap.getMainElem('#options_input')).slideDown('fast');
-				}
-			);
+			//Display options form
+			$.each(options, addOption);
+			
+			//Submit button
+			$('#options_form').addButton('ok', 'Valider', validate_options, 'validate_options', 'heavy inverse');
 			
 			//Init's end
 			databap.setInitEnd(true);
@@ -68,26 +51,86 @@ databap.pageInit = function()
 		function(){},
 		true
 	);
-
-	databap.getMainElem('#options_submit').click
-	(
-		function()
-		{
-			databap.saveForm
-			(
-				'set_options',
-				databap.getMainElem('#options_form'),
-				function(result)
-				{
-					databap.addSuccessIcon();
-					databap.goTo('options');
-				},
-				'#options_submit'
-			);
-		}
-	);
-
-	var warning = '<p class="warning">Attention : Une fois la s&eacute;lection valid&eacute;e, la page se rafraichira automatiquement</p>';
-	databap.getMainElem('#options_container').append(warning);
 };
+
+databap.onResize = function()
+{
+	self.setScrollBarSize('maximize');
+};
+
+function addOption(optNameId, optInfo, $Box)
+{
+	$Box = $Box || $('#options_input');
+	var selected = '';
+	var $Option = $('<div>', {'class':'option_line'}).append($('<p>').text(optInfo.option_name));
+	switch(optInfo.type)
+	{
+		case databap.consts.opt_type_text:
+			$Option.append($('<input>', {type:'text', id:optNameId, name:optNameId, value:optInfo.user_value, 'class':'round'}));
+			break;
+		case databap.consts.opt_type_pass:
+			$Option.append($('<input>', {type:'password', id:optNameId, name:optNameId, value:optInfo.user_value, 'class':'round'}));
+			break;
+		case databap.consts.opt_type_select:
+			var $Select = $('<select>', {id:optNameId, name:optNameId, 'class':'round'}).appendTo($Option);
+			$.each
+			(
+				optInfo.select, 
+				function(selectId, selectName)
+				{
+					$Select
+						.append($('<option>', {value:selectId})
+							.prop('selected', (selectId==optInfo.user_value_id))
+							.text(selectName));
+				}
+			);
+			break;
+	}
+	$Option.appendTo($Box).slideDown('fast');
+}
+
+function validate_options()
+{
+	databap.saveForm
+	(
+		'set_options',
+		databap.getMainElem('#options_form'),
+		function(result)
+		{
+			databap.addSuccessIcon();
+			location.reload();
+		},
+		true
+	);
+}
+
+function validate_pass()
+{
+	sButtonId = '#validate_pass';
+	var sOldPass = $.trim($('#old_pass').val());
+	var sNewPass = $.trim($('#new_pass').val());
+	
+	if(sOldPass=='') databap.addErrorBefore('Mdp actuel manquant', sButtonId);
+	else if(sNewPass=='') databap.addErrorBefore('Mdp vide non autorisé', sButtonId);
+	else if(sNewPass!=$('#new_pass').val()) databap.addErrorBefore('Pas de blanc dans le mdp', sButtonId);
+	else if(sNewPass!=$('#new_pass_conf').val()) databap.addErrorBefore('Les nouveaux mdp ne coïncident pas', sButtonId);
+	else if(sNewPass==sOldPass) databap.addErrorBefore('Le nouveau mdp est le même que l\'actuel', sButtonId);
+	else
+	{
+		$('#old_auth_token').val(getLoginToken(sOldPass));
+		$('#new_auth_token').val(getLoginToken(sNewPass));
+		databap.saveForm
+		(
+			'set_pass',
+			databap.getMainElem('#pass_form'),
+			function(data)
+			{
+				if(data.result==databap.consts.success) databap.addSuccessBefore(data.desc, sButtonId);
+				else databap.addErrorBefore(data.desc, sButtonId);
+			},
+			true,
+			'json'
+		);
+	}
+}
 </script>

masks/profile.html

@@ -1,21 +1,19 @@
 <div id="profile">
-	<div class="h1_wrap">
-		<h1 class="round"><span>Profil</span></h1>
-	</div>
 	<div id="avatar" class="clickable round"></div>
 	<div class="user round">
-		<p>Nom : <span id="profile_name"></span></p>
-		<p>Soci&eacute;t&eacute; : <span id="profile_company"></span></p>
-		<p>Mission actuelle : <span id="profile_assignment"></span></p>
+		<p><i class="fa fa-fw fa-c-name"></i>Nom : <span id="profile_name"></span></p>
+		<p><i class="fa fa-fw fa-c-company"></i>Soci&eacute;t&eacute; : <img id="profile_company_logo" /><span id="profile_company"></span></p>
+		<p><i class="fa fa-fw fa-c-assignment"></i>Mission actuelle : <span id="profile_assignment"></span></p>
 	</div>
 	<p class="user_history_title">Historique</p>
-	<div id="user_history" class="round hide"></div>
+	<div>
+		<div id="history_box"><div id="history_subbox" class="round"><div id="user_history"></div></div></div>
+	</div>
 </div>
 <script type="text/javascript">
 databap.pageInit = function()
 {
-	//TODO : to be replaced by tinyscrollbar
-	databap.$main.css('overflow', 'auto');
+	databap.initScrollBar('#history_box', '#history_subbox', '#user_history');
 	
 	databap.getInfo
 	(
@@ -23,12 +21,13 @@ databap.pageInit = function()
 		function(profile)
 		{
 			//user info
-			databap.getMainElem('#profile_name').text(profile.name);
-			databap.getMainElem('#profile_company').text(profile.company);
-			databap.getMainElem('#profile_assignment').text(profile.status);
+			databap.getMainElem('#profile_name').text(profile.user.name);
+			databap.getMainElem('#profile_company').text(profile.user.company);
+			databap.getMainElem('#profile_company_logo').attr('src', databap.consts.app_image_folder+profile.user.logo).attr('alt', profile.user.logo);
+			databap.getMainElem('#profile_assignment').text(profile.user.status || 'Aucune');
 
 			//Profile link
-			databap.getMainElem('#avatar').click(function(){alert(databap.getExternalLink('p', profile.nickname));});
+			databap.getMainElem('#avatar').click(function(){alert(databap.getInternalLink('p', profile.user.nickname, true));});
 			
 			//user history
 			$UserHistory = databap.getMainElem('#user_history');
@@ -37,22 +36,33 @@ databap.pageInit = function()
 				$.each
 				(
 					profile.history,
-					function(id_code, code_info)
+					function(led, item)
 					{
-						var url = databap.getCodeLink(code_info.phrase);
-						var code = $('<p class="history_line">'+code_info.date+' - '+code_info.action+' : <a href="'+url+'" title="'+code_info.phrase+'" target="_blank">'+code_info.description+'</a></p>');
-						$UserHistory.append(code);
+						var iItemId = item.id;
+						var sUrl = databap.getInternalLink(item.type, iItemId);
+						var $Code = $('<p>', {'class':'history_line'})
+										.append(item.date+' - '+item.action+' :')
+										.append($('<a>', {href:sUrl, title:'Lien vers le document', target:'_blank'})
+											.append($('<i>', {'class':'fa fa-c-'+item.type}))
+											.append(item.title));
+										
+						$UserHistory.append($Code);
 					}
 				);
-				$UserHistory.show('fast', function(){databap.setInitEnd(true);});
+				databap.getMainElem('#history_subbox').show('fast', function(){databap.setInitEnd(true);});
 			}
 			else
 			{
 				databap.setInitEnd(true);
 			}
 		},
-		{user:databap.vars.profile_user},
+		{id:databap.vars.id},
 		'json'
 	);
 };
+
+databap.onResize = function()
+{
+	self.setScrollBarSize('optimize');
+}
 </script>

masks/raw_code.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=[#]text_enc[#]" />
+	<meta name="author" content="[#]author[#]" />
+	<link rel="shortcut icon" href="images/favicon_gc3.ico" />
+	<title>Databap &bull;</title>
+</head>
+<body>
+	<pre id="content"></pre>
+	<script>
+		document.getElementById("content").textContent = [#]content[#];
+		document.title = document.title+" "+[#]title[#];
+		if([#]print[#]) window.print();
+	</script>
+</body>
+</html>

masks/read_code.html

@@ -1,178 +0,0 @@
-<div id="reader">
-	<div class="h1_wrap">
-		<h1 class="round"><span>Revue de code</span></h1>
-	</div>
-	<div id="code_menu">
-		<a id="edit" class="button round">Modifier</a>
-		<a id="raw" class="button round" href="#" target="_blank">Fichier brut</a>
-		<a id="save" class="button round" href="#">T&eacute;l&eacute;charger</a>
-		<a id="print" class="button round" href="#" target="_blank">Imprimer</a>
-		<a id="share" class="button share round">Partager</a>
-	</div>
-	<div id="previous_versions" class="standalone"></div>
-	<div id="code_container"></div>
-	<div id="next_versions" class="standalone"></div>
-	<div id="edit_container">
-		<div class="h1_wrap">
-			<form name="edit_code" id="edit_code">
-				<textarea id="content" name="content" class="round"></textarea>
-				<input type="hidden" id="code" name="code" value="" />
-			</form>
-			<a id="edit_btn" class="button heavy round">Corriger</a>
-		</div>
-	</div>
-</div>
-<script type="text/javascript">
-	databap.pageInit = function()
-	{
-		//TODO : to be replaced by tinyscrollbar
-		databap.$main.css('overflow', 'auto');
-		
-		databap.setCodeContainer
-		(
-			function()
-			{
-				databap.getInfo
-				(
-					'read_code',
-					function(jContent)
-					{
-						//debug(jContent);
-						//append code to main and refresh id
-						databap.appendCode('#code_reader', jContent);
-						
-						if(typeof jContent.other_versions !== 'undefined')
-						{
-							if(jContent.truncated)
-							{
-								var $Truncated = $(databap.consts.versionHtml);
-								$Truncated.data('id_code', jContent.truncated).click(function(){databap.loadReadPage($(this).data('id_code'));});
-								$Truncated.find('#item_link').text('...');
-								$('#previous_versions').append($Truncated);
-							}
-							$.each
-							(
-								jContent.other_versions,
-								function(key, code_info)
-								{
-									$verHtml = $(databap.consts.versionHtml).data('id_code', code_info.id_code).click(function(){databap.loadReadPage($(this).data('id_code'));});
-									
-							 		$verHtml.find('#description').html(code_info.description);
-								 	$verHtml.find('#author_name').html(code_info.name);
-									$verHtml.find('#author_company').html(code_info.company);
-									$verHtml.find('#led').html(code_info.led);
-									$verHtml.find('#item_link').attr('target', '').attr('title', 'Afficher cette version du code');
-									
-									$verHtml = databap.setElemTags($verHtml, code_info.id_code);
-									var anchor = '#'+((parseInt(code_info.id_code) < parseInt(databap.vars.code))?'previous':'next')+'_versions';
-							 		$(anchor).append($verHtml);
-								}
-							);
-						}
-						
-						//expanding
-						$("input").click(function(){expand($(this));});
-						$("#code_container input[id^=expand_loop]").hover
-						(
-							function()
-							{
-								$('.'+$(this).attr('id').substr(7)).toggleClass('code_hover');
-							}
-						);
-
-						//action links
-						$("#edit").click
-						(
-							function()
-							{
-								if($('#content').val()=='')
-								{
-									//make space for edit box
-									databap.getMainElem('#previous_versions,#next_versions').slideUp
-									(
-										'fast',
-										function()
-										{
-											$code_container = $('#'+databap.getElemTag('tab_left', databap.vars.code));
-											$code_container.css('overflow', 'auto').height(Math.min($code_container.height(), 200));
-										}
-									);
-									
-									databap.getInfo
-									(
-										'nude_code', 
-										function(data)
-										{
-											databap.vars.old_code = data;
-											$('#content').val(databap.vars.old_code);
-											$('#code').val(databap.vars.code);
-											$('#edit_container').show('fast');
-										}, 
-										{code:databap.vars.code}
-									);
-								}
-							}
-						);
-						
-						databap.getMainElem('a#raw').attr('href', databap.getActionLink('raw_code', {code:databap.vars.phrase}));
-						databap.getMainElem('a#save').attr('href', databap.getActionLink('dl_code', {code:databap.vars.phrase}));
-						databap.getMainElem('a#print').attr('href', databap.getActionLink('print_code', {code:databap.vars.phrase}));
-						databap.getMainElem('#share').click
-						(
-							function()
-							{
-								$(this)
-								.hide()
-								.text(databap.getCodeLink(databap.vars.phrase))
-								.addClass('addr')
-								.slideDown('fast')
-								.unbind('click');
-							}
-						);
-						
-						//edit code
-						$('#edit_btn').click
-						(
-							function()
-							{		
-								code = $('textarea#content').val();			
-								if(code !='')
-								{
-									if(code != databap.vars.old_code)
-									{
-										databap.saveForm
-										(
-											'edit_code',
-											$('#edit_code'),
-											function(iCodeId)
-											{
-												databap.vars.code = iCodeId;
-												databap.vars.old_code = '';
-												databap.switchPage(databap.pages.read_code);
-											},
-											'#edit_btn'
-										);
-									}
-									else
-									{
-										databap.addErrorBefore('Aucune modification n\'a &eacute;t&eacute; effectu&eacute;e', '#edit_btn');
-									}
-								}
-								else
-								{
-									databap.addErrorBefore('Le champ code est vide', '#edit_btn');
-								}
-							}
-						);
-
-						//Init's end
-						databap.setInitEnd(true);
-					},
-					{code:databap.vars.code},
-					'json'
-				);
-			},
-			'#code_container'
-		);
-	};
-</script>

masks/search.html

@@ -1,22 +1,37 @@
 <div id="search">
-	<div class="h1_wrap">
-		<h1 class="round"><span>Recherche</span></h1>
+	<div class="step_box round">
+		<p class="step_nb_box">Recherche</p>
+		<input type="text" name="repeat_query" id="repeat_query" class="step_line_item inc_border round" maxlength="200" value="">
+		<div id="sub_button_box"></div>
+		<p class="summary"><span id="search_count">0</span> résultat<span id="search_multi"></span> pour la recherche "<span id="search_words"></span>".</p>
+	</div>
+	<div id="search_container">
+		<div id="list_container" class="standalone"></div>
 	</div>
-	<div id="list_container" class="standalone"></div>
 </div>
 <script type="text/javascript">
-	databap.pageInit = function()
-	{
-		//TODO : to be replaced by tinyscrollbar
-		databap.$main.css('overflow', 'auto');
-		
-		if($('#query').val()==databap.consts.search_box_text)
-		{
-			$('#query').val(databap.vars.search_words);
-		}
-		databap.loadSearchPage();
+databap.pageInit = function()
+{
+	self.initScrollBar('#main', '#search_container', '#list_container');
+	
+	self.tmp('searched_words', '');
+	if($('#query').val()!=databap.consts.search_box_text) databap.search();
 
-		//Init's end
-		databap.setInitEnd(true);
-	};
+	//Double link
+	$('#query').change(function(){$('#repeat_query').val($(this).val());});
+	$('#sub_button_box').addButton('search', 'Chercher', function(){$('#repeat_query').trigger('keyup');}, 'sub_button', 'inc_border inverse');
+	$('#repeat_query')
+		.addDefaultValue(self.consts.search_box_text, $('#query').val())
+		.change(function(){$('#query').val($(this).val());})
+		.keyup(function(e){if(e.which==13 || e.isTrigger) self.search();})
+		.width('calc(50% - '+$('#sub_button').outerWidth(true)+'px)');
+	
+	//Init's end
+	databap.setInitEnd(true);
+};
+
+databap.onResize = function()
+{
+	self.setScrollBarSize('maximize');
+}
 </script>

masks/table.html

@@ -0,0 +1,162 @@
+<div id="table">
+	<div id="table_container">
+		<form id="table_info">
+			<div id="table_meta" class="step_box form_success round">
+				<p class="step_box_title">
+					<span class="edit">Table</span>
+					<span class="read"><span id="read_system"></span>| <span id="read_title"></span> - <span id="read_description"></span></span></p>
+				<select id="system" name="system" class="edit inc_border round">
+					<option value="TOUS">Tous</option>
+					<option value="BW" selected="selected">BW</option>
+					<option value="ECC">ECC</option>
+				</select>
+				<input type="text" name="title" id="title" class="edit inc_border round" maxlength="200" value="" />
+				<input type="text" name="description" id="description" class="edit inc_border round" maxlength="500" value="" />
+				<input type="hidden" name="id" id="id" value="" />
+				<p class="read table_info"><i class="fa fa-c-desc fa-inline fa-30"></i>Dernière modification par <span id="read_name"></span> le <span id="read_date"></span></p>
+			</div>
+			<div id="table_main" class="step_box form_success round">
+				<p class="step_box_title"><!-- <a href="http://fr.wikipedia.org/wiki/Le_Monde_de_monsieur_Fred" target="_blank"> --><span title="Helmut Perchut">&quot;J'ai explication !&quot;</span><!-- </a> --></p>
+				<textarea name="keywords" id="keywords" class="edit inc_border round"></textarea>
+				<p class="read" id="read_keywords"></p>
+			</div>
+			<div id="validation" class="form_success"></div>
+		</form>
+	</div>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	//Scroll bar
+	self.initScrollBar('#main', '#table', '#table_container');
+	
+	//Table object
+	oTable = new Table(self.vars.id);
+	
+	//Init's end
+	databap.setInitEnd(true);
+};
+
+databap.onResize = function()
+{
+	self.setScrollBarSize('maximize');
+	//self.maximizeElem($('#keywords'), false, $('#table'));
+};
+
+function Table(iTableId)
+{
+	
+	this.DISPLAY_EDIT = 'edit';
+	this.DISPLAY_READ = 'read';
+	this.DISPLAY_ERROR = 'error'
+	this.ACTION_BTN_ID = 'table_button';
+	this.SUCCESS_CLASS = 'form_success';
+	this.ERROR_CLASS = 'form_error';
+	
+	this.sDisplay = '';
+	this.iTableId = iTableId || 0;
+	this.sTableName = '';
+	this.sFeedBackBoxId = '#validation';
+	tableself = this;
+	
+	$('#title').addDefaultValue('Nom de la table');
+	$('#description').addDefaultValue('Description');
+	$('#validation').addButton('dummy', '', function(){}, this.ACTION_BTN_ID, '', this.ACTION_BTN_ID);
+	this.$Button = databap.tmp(this.ACTION_BTN_ID);
+	
+	if(this.iTableId>0 || this.iTableId!='')
+	{
+		this.applyTableInfo();
+	}
+	else this.setDisplay(this.DISPLAY_EDIT);
+}
+
+Table.prototype.applyTableInfo = function()
+{
+	databap.getInfo
+	(
+		'get_table', 
+		function(asData)
+		{
+			if(asData.result == databap.consts.error)
+			{
+				tableself.setDisplay(tableself.DISPLAY_ERROR);
+				databap.addErrorBefore(asData.desc, tableself.sFeedBackBoxId);
+			}
+			else
+			{
+				tableself.sTableName = asData.title;
+				$.each(asData, function(sKey, sValue)
+				{
+					if(sKey=='warning' && sValue!='') databap.addWarningBefore(sValue, tableself.sFeedBackBoxId);
+					//debug('key='+sKey+', value='+sValue);
+					$('#read_'+sKey).html(sValue.replace(/(?:\r\n|\r|\n)/g, '<br />'));
+					$('#'+sKey).val(sValue);
+				});
+				tableself.setDisplay(tableself.DISPLAY_READ);
+				databap.updateScrollBar();
+			}
+		}, 
+		{id:this.iTableId},
+		'json',
+		function(){debug('Error: Unknown error thrown');},
+		true
+	);
+};
+
+Table.prototype.setDisplay = function(sDisplay)
+{
+	//debug(sDisplay);
+	var sOtherDisplay = '';
+	var bRedit = (this.sDisplay!='');  //Edit existing table
+	this.sDisplay = sDisplay || (this.sDisplay==this.DISPLAY_EDIT?this.DISPLAY_READ:this.DISPLAY_EDIT);
+	
+	var bSuccess = true;
+	switch(this.sDisplay)
+	{
+		case this.DISPLAY_READ:
+			sOtherDisplay = this.DISPLAY_EDIT;
+			this.$Button.modifyButton({'type':'edit', 'title':'Modifier', 'action':function(){tableself.setDisplay(sOtherDisplay)}});
+			break;
+		case this.DISPLAY_EDIT:
+			sOtherDisplay = this.DISPLAY_READ;
+			this.$Button.modifyButton({'type':'ok', 'title':'Valider', 'action':tableself.save});
+			if(bRedit) $('#title').prop('disabled', true).add('#description').focus().blur();
+			break;
+		case this.DISPLAY_ERROR:
+			bSuccess = false;
+			sOtherDisplay = 'dummy';
+			break;
+	}
+	$('.'+sOtherDisplay).add('.'+(bSuccess?this.ERROR_CLASS:this.SUCCESS_CLASS)).hide();
+	$('.'+this.sDisplay).add('.'+(bSuccess?this.SUCCESS_CLASS:this.ERROR_CLASS)).show();
+	databap.updateScrollBar();
+};
+
+Table.prototype.save = function()
+{
+	var $Form = $('#table_info');
+	if($Form.checkForm())
+	{
+		databap.saveForm
+		(
+			'add_table', 
+			$Form, 
+			function(asData)
+			{
+				if(asData.result == databap.consts.success)
+				{
+					databap.goToInternalLink('table', asData.name.toLowerCase());
+					//tableself.iTableId = asData.name;
+					//tableself.applyTableInfo();
+				}
+				else databap.addErrorBefore(asData.desc, tableself.sFeedBackBoxId);
+			},
+			true,
+			'json'
+		);
+	}
+	else databap.addWarningBefore('Formulaire incomplet', this.sFeedBackBoxId);
+};
+
+</script>

masks/welcome.html

@@ -1,49 +1,48 @@
 <div id="welcome">
-	<div class="h1_wrap">
-		<h1 class="round"><span>Bienvenue</span></h1>
-	</div>
 	<div id="welcome_container" class="round">
-		<p class="welcome_text">Bienvenue sur la base de donn&eacute;es Databap.</p>
-		<ul>
-			<li>Version 0.94 En cours de d&eacute;veloppement (maj du 31/05/2013)</li>
-			<li>Upcoming features :
-				<ul>
-					<li>Recherche avanc&eacute;e : expressions r&eacute;guli&egrave;res, version de document, recerche large (code, proc&eacute;dure, chat, Q&amp;A)</li>
-					<li>T&eacute;l&eacute;versement de documentation</li>
-					<li>Q&amp;A</li>
+		<p class="welcome_text">Bienvenue sur la plateforme Databap</p>
+		<div id="welcome_box"><div id="welcome_subbox">
+		<ul class="fa-ul">
+			<li><i class="fa-li fa fa-30 fa-c-ok"></i>Version <span id="version"></span> (maj du 15/06/2014)</li>
+			<li><i class="fa-li fa fa-30 fa-c-changelog"></i>Changelog
+				<ul class="fa-ul">
+					<li><i class="fa-li fa fa-c-checked"></i>Utilisation des # pour les accès aux pages, compatible avec les boutons prec/suiv des navigateurs. Ex: <a href="#chat">databap.lutran.fr#chat</a></li>
+					<li><i class="fa-li fa fa-c-checked"></i>Mot de passe personnalisé et modifiable dans les <a href="#options">options</a></li>
+					<li><i class="fa-li fa fa-c-checked"></i>paramètre dans les <a href="#options">options</a> pour supprimer les messages d'arrivée et de départ des gens (console)</li>
+					<li><i class="fa-li fa fa-c-checked"></i>T&eacute;l&eacute;versement de documentation</li>
+					<li><i class="fa-li fa fa-c-checked"></i>Documentation de tables ECC / BW</li>
+					<li><i class="fa-li fa fa-c-checked"></i>Homogénéisation des icônes</li>
+					<li><i class="fa-li fa fa-c-checked"></i>Recherche élargie sur tous les types de documents (codes, procédures, docs, articles et tables)</li>
+					<li><i class="fa-li fa fa-c-checked"></i>Commande /invite X : invite X à rejoindre le chan ouvert (Cf. Clippy)</li>
+					<li><i class="fa-li fa fa-c-checked"></i>Commande /news X : Vous annoncez le message X (votre message est ajouté à la liste des news automatiquement)</li>
 				</ul>
 			</li>
-			<li>Changelog :
-				<ul>
-					<li>/9gag</li>
-					<li>Nouvelle aide Clippy</li>
+			<li><i class="fa-li fa fa-30 fa-c-wip"></i>In progress
+				<ul class="fa-ul">
+					<li><i class="fa-li fa fa-c-unchecked"></i>Version compatible mobile (surtout pour le chat)</li>
+					<li><i class="fa-li fa fa-c-unchecked"></i>Version compatible IE8+</li>
+					<li><i class="fa-li fa fa-c-unchecked"></i>Recherche avanc&eacute;e : expressions r&eacute;guli&egrave;res, version de document</li>
+					<li><i class="fa-li fa fa-c-unchecked"></i>Messagerie interne</li>
+					<li><i class="fa-li fa fa-c-unchecked"></i>Q&amp;A (forum like)</li>
+					<li><i class="fa-li fa fa-c-unchecked"></i>Image de profil</li>
 				</ul>
 			</li>
-			<li><a href="mailto:francois@lutran.fr" class="feedback">Me contacter</a></li>
+			<li><i class="fa-li fa fa-30 fa-c-mail"></i><a href="mailto:francois@lutran.fr">Me contacter</a>, car toute idée est bonne à prendre !</li>
 		</ul>
-		<p class="redirect">Cette page sera automatiquement remplac&eacute; par la page "<span id="default_page"></span>" dans 10 secondes</p>
+		</div></div>
 	</div>
 </div>
 <script type="text/javascript">
-	databap.pageInit = function()
-	{
-		//TODO : to be replaced by tinyscrollbar
-		databap.$main.css('overflow', 'auto');
-		
-		$('#default_page').text(databap.consts.default_page);
-		setTimeout
-		(
-			function()
-			{
-				if(databap.vars.current_page == databap.pages.welcome)
-				{
-					databap.switchPage(databap.consts.default_page);
-				}
-			},
-			'10000'
-		);
+databap.pageInit = function()
+{
+	$('#version').text(databap.consts.version);
+	self.initScrollBar('#main', '#welcome_box', '#welcome_subbox');
 
-		//Init's end
-		databap.setInitEnd(true);
-	};
+	//Init's end
+	self.setInitEnd(true);
+};
+databap.onResize = function()
+{
+	self.setScrollBarSize('optimize');
+};
 </script>