Desktop Notifications

masks/chat.html

@@ -24,7 +24,7 @@
 		</div>
 		<div id="chat_input" class="round">
 			<form id="chat_form" name="chat_form">
-				
+
 			</form>
 		</div>
 	</div>
@@ -80,7 +80,7 @@ databap.pageInit = function()
 	databap.consts.chanPrefix = 'chan_';
 	databap.consts.chanQuitPrefix = 'quit_chan_';
 	databap.consts.chanUnreadPrefix = 'unread_chan_';
-	
+
 	//Page variables
 	self.tmp('sending_msg', 'boolean');
 	self.tmp('refresh', 'boolean');
@@ -90,47 +90,50 @@ databap.pageInit = function()
 	self.tmp('last_message_id', '0');
 	self.tmp('scrolling', 'boolean');
 	databap.tmp('tab_info', 'object');
-	
+
 	//Main elements
 	$MsgInput = databap.getMainElem('#message');
 	$MsgInputBox = databap.getMainElem('#chat_input');
-	
+
 	//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(e){keyController(e);});
-	
+
 	//Loading the chat
 	self.initScrollBar('#chat_container', '#chat_messages_box', '#chat_messages');
-	
+
 	//Loading Chans
 	setChanButton();
 	databap.vars.chans_list[databap.consts.all_chan_id] = databap.consts.all_chan_text;
 	databap.tmp(['unread_msg', databap.consts.all_chan_text], 0);
 	joinChan(databap.consts.default_chan, true);
-	
+
 	//window focus
 	$(window).focus(onPageFocus);
 	$(window).blur(onPageBlur);
-	
+
 	//Message Input Focus
 	$MsgInput.focus();
 
 	//Init sidebar events
 	initSideBar();
-	
+
 	//Setup Image upload
 	initImageUpload();
-	
+
 	//Init's end
 	databap.setInitEnd(true);
+
+	//Notification Permission
+	if(!Push.Permission.has()) Push.Permission.request(()=>{}, ()=>{});
 };
 
 //On resize
 databap.onResize = function()
 {
 	self.setScrollBarSize('maximize');
-	
+
 	//Message Input
 	//$('#message').width($('#chat_input').width() - $('#message_img').outerWidth(true)- 1);
 };
@@ -152,7 +155,7 @@ databap.onKeyDown = function(e)
 };
 
 function initImageUpload()
-{	
+{
 	//Load Uploader
 	self.tmp('uploader', new qq.FileUploader
 	(
@@ -161,13 +164,13 @@ function initImageUpload()
 			action: databap.getActionLink('upload_image'),
 			allowedExtensions: databap.consts.authorized_img_exts,
 			sizeLimit: parseInt(databap.consts.max_size)*100,
-			template:	'<div class="uploader_box">' + 
+			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>' + 
+							'<ul id="uploader_list" class="uploader_list hide"></ul>' +
 						'</div>',
 			onComplete:function(id, fileName, result)
 			{
@@ -189,17 +192,17 @@ function initImageUpload()
 	    }
 	));
 	$('.uploader_box').append($('#message_input').children());
-	
+
 	//Prompt file explorer
 	$('#upload_img').click(function(){$('#c1_file').click();});
-	
+
 	//Clipboard handling
 	$(function(){$.pasteimage(function(sSource)
 	{
 		//Parse the uri to strip out "base64"
 		var sSourceSplit = sSource.split("base64,");
 	    var sSourceString = sSourceSplit[1];
-	    
+
 	    //Write base64-encoded string into input field
 	    postMessage('/imgsrc '+sSourceString);
 	});});
@@ -219,7 +222,7 @@ function initSideBar()
 					.addClass('round')
 					.closest('.sidebar_box').find('.sidebar_box_content')
 						.hide('fast');
-					
+
 				$This
 					.toggleClass('round')
 					.closest('.sidebar_box').find('.sidebar_box_content')
@@ -268,11 +271,11 @@ function getNews()
 					});
 				}
 				else $('<div>', {'class':'new'}).hide().text('Aucune news.').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')));
 			},
@@ -325,7 +328,7 @@ function setChanButton()
 								var $This = $(this);
 								joinChan($This.val());
 								$This.val('');
-								
+
 							}
 							if(typeof e.keyCode == 'undefined' || e.keyCode == 13)
 							{
@@ -336,7 +339,7 @@ function setChanButton()
 						})
 						.blur(function(){$(this).keyup();})
 				).hide()
-		);	
+		);
 }
 
 function getChanKeyName(sChanName)
@@ -367,7 +370,7 @@ function joinChan(sChanName, bFirstConn, asAttendees, bSwitchOnJoin)
 	asAttendees = asAttendees || [];
 	bSwitchOnJoin = (typeof bSwitchOnJoin === 'undefined')?true:bSwitchOnJoin;
 	var sChanName = ucwords(sChanName);
-	
+
 	if(sChanName!='')
 	{
 		//Join for the first time
@@ -393,10 +396,10 @@ function joinChan(sChanName, bFirstConn, asAttendees, bSwitchOnJoin)
 								if(!getChanName(iChanId)) addChanTab(iChanId, sReturnedChanName, data.channel_tab_names[iChanId], !bSwitchOnJoin);
 							}
 						);
-											
+
 						//Full reload of messages
 						refresh_chat(true);
-						
+
 						//Switch to the right chan
 						switchChan(bSwitchOnJoin?data.current_chan_id:null);
 					}
@@ -416,7 +419,7 @@ function joinChan(sChanName, bFirstConn, asAttendees, bSwitchOnJoin)
 			switchChan(bSwitchOnJoin?getChanKeyName(sChanName):null);
 		}
 	}
-	
+
 	//Focus input bar
 	$('#message').focus();
 }
@@ -449,26 +452,26 @@ function switchChan(sChanKeyName)
 {
 	var sChanName = currentChan(getChanName(sChanKeyName));
 	sChanKeyName = sChanKeyName || getChanKeyName(sChanName);
-	
+
 	//Unread msg
-	if(databap.vars.focus) 
+	if(databap.vars.focus)
 	{
 		databap.tmp(['unread_msg', sChanName], 0);
 		databap.tmp(['unread_msg', databap.consts.all_chan_text], 0);
 	}
 	syncUnreadMsg();
-	
+
 	//Switch current channel button to active
 	$('#chat_chan').find('span[id^="'+databap.consts.chanPrefix+'"]').removeClass('active').addClass('clickable');
 	$('#'+databap.consts.chanPrefix+sChanKeyName).addClass('active').removeClass('clickable');
-	
+
 	//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();
-	
+
 	//Update scrollbar
 	databap.updateScrollBar(self.tmp('scrolling')?'relative':'bottom');
-	
+
 	//Show Current channel members
 	databap.getMainElem('#connected_users').find('p').hide();
 	databap.getMainElem('#connected_users').find('p.class_'+sChanKeyName).show();
@@ -511,7 +514,7 @@ function addChanTab(sChanKeyName, sChanName, sChanTabName, bLightUp)
 	sChanTabName = sChanTabName || sChanName;
 	databap.vars.chans_list[sChanKeyName] = sChanName;
 	databap.tmp(['unread_msg', sChanName], 0);
-	
+
 	//Add channel tab
 	var sChanId = databap.consts.chanPrefix+sChanKeyName;
 	if(!$('#'+sChanId).length)
@@ -524,8 +527,8 @@ function addChanTab(sChanKeyName, sChanName, sChanTabName, bLightUp)
 							.append('<span class="chan_title">'+sChanTabName+'</span>')
 							.append('<span class="chan_unread" id="'+sChanUnreadId+'"></span>')
 							.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
 		$('#join_chan').before($ChanButton);
 	}
@@ -549,16 +552,16 @@ function quitChan(sChanKeyName)
 				databap.showError(textStatus);
 			}
 		);
-		
+
 		//Delete tab
 		$('#'+databap.consts.chanPrefix+sChanKeyName).fadeOut('fast', function(){$(this).remove();});
-		
+
 		//Delete from list
 		delete databap.vars.chans_list[sChanKeyName];
-		
+
 		//Switch back to another chan
 		if(sChanName == currentChan()) switchChan(Object.keys(databap.vars.chans_list)[1]);
-		
+
 		//Delete messages
 		databap.getMainElem('#chat_messages').find('p.class_'+sChanKeyName).remove();
 	}
@@ -614,7 +617,7 @@ function keyController(e)
 			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 != '') bSuccess = postMessage();
-			
+
 			if(bSuccess)
 			{
 				databap.vars.prev_chat_value = chat_message;
@@ -644,11 +647,11 @@ function keyController(e)
 			$This = databap.getMainElem('#message');
 			var sChatMsg = $This.val();
 			var iChatMsgLen = sChatMsg.length;
-			
+
 			if(!e.altKey && iChatMsgLen>0)
 			{
 				var iCurPos, iFirstPos, iOffset, sWord, sWordLen, bInvite;
-				
+
 				//Loading previous data
 				bLooping = !$.isEmptyObject(databap.tmp('tab_info'));
 				if(bLooping)
@@ -665,7 +668,7 @@ function keyController(e)
 					iFirstPos = sChatMsg.substr(0, iCurPos).lastIndexOf(' ') + 1;
 					iOffset = sChatMsg.substr(iFirstPos).indexOf(' ');
 					sWord = sChatMsg.substr(iFirstPos, (iOffset==-1)?iChatMsgLen:iOffset);
-					
+
 					//@ excluded
 					if(sWord.substr(0, 1)=='@')
 					{
@@ -675,35 +678,35 @@ function keyController(e)
 				}
 				sWordLen = sWord.length;
 				bInvite = (sChatMsg.substr(0, 7) == '/invite');
-				
+
 				//No guess if not at least one letter
 				if(sWordLen>0 || bInvite)
 				{
 					//turn to safename for matching
 					var sSafeWord = getSafeNickname(sWord);
 					var iSafeWordLen = sSafeWord.length;
-					
+
 					//List of current channel users
 					var asUserList = databap.tmp(['users', bInvite?databap.consts.all_chan_id:getChanKeyName(currentChan())]);
 					var asSafeUserList = Object.keys(asUserList);
 					var iUserListLen = asSafeUserList.length;
-					
+
 					//Starting list where we left off
 					var iCount = 0;
 					var iIndex = 0;
-					if(bLooping) iIndex = (Number(array_search(databap.tmp(['tab_info', 'safe_nickname']), asSafeUserList)) + 1)%iUserListLen; 
+					if(bLooping) iIndex = (Number(array_search(databap.tmp(['tab_info', 'safe_nickname']), asSafeUserList)) + 1)%iUserListLen;
-					
+
 					//Looping on user names to find the one(s) starting with the searched word
 					while(iCount < iUserListLen)
 					{
 						//Checking for first letters of user names
 						if(sSafeWord == asSafeUserList[iIndex].substr(0, sSafeWord.length)) break;
-						
+
 						//Looping to the top of the list once finished
 						iIndex = (iIndex + 1)%iUserListLen;
 						iCount++;
 					}
-					
+
 					if(iCount !== iUserListLen)
 					{
 						//Replace text in message input box
@@ -713,7 +716,7 @@ function keyController(e)
 						var sNickName = asUserList[sSafeNickName];
 						$This.val(sBeforeWord+sNickName+sAfterWord);
 						$This.setCursorPosition((sBeforeWord+sNickName).length);
-						
+
 						//Save value for tab-loops
 						if(bLooping) databap.tmp(['tab_info', 'safe_nickname'], sSafeNickName); //not saving index in case of user list refresh
 						else databap.tmp(['tab_info'], {'chat_msg':sChatMsg, 'cur_pos':iCurPos, 'first_pos':iFirstPos, 'word':sWord, 'safe_nickname':sSafeNickName});
@@ -734,7 +737,7 @@ function keyController(e)
 			{
 				$this.width(100);
 			}
-			else if(iInputSize > maxSize)	 
+			else if(iInputSize > maxSize)
 			{
 				$this.width(maxSize);
 			}
@@ -771,7 +774,7 @@ function refresh_chat(bReset)
 					{
 						//Update last read message id
 						self.tmp('last_message_id', Math.max(result.last_message_id, prevLastMsgId));
-						
+
 						//Display messages
 						$.each
 						(
@@ -781,14 +784,14 @@ function refresh_chat(bReset)
 								addMessage(message_info, bReset);
 							}
 						);
-						
+
 						//Image display
 						setImageDisplay();
-						
+
 						//News
 						if(databap.tmp('get_news') === true && !bReset) getNews();
 						databap.tmp('get_news', false);
-						
+
 						//Nicknames changes
 						if(updateUsersList === true || bReset)
 						{
@@ -818,22 +821,25 @@ 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 = '';
 	var sUnreadChanName, iUnreadCount;
 	var bSystemMsg = false;
 	var bImage = false;
+	var sNotif = '';
 
 	switch(message_info.msg_class)
 	{
 		case databap.consts.msg_types.user:
 			msg_body = sMsgPrefix+'<span class="text">'+message_info.message+'</span>';
+			sNotif = message_info.nickname+' : '+message_info.message;
 			break;
 		case databap.consts.msg_types.news:
 			databap.tmp('get_news', true);
 			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>';
+			sNotif = message_info.nickname+' a une news : '+message_info.message;
 			break;
 		case databap.consts.msg_types.add.code:
 			var url = databap.getInternalLink('code', message_info.message);
@@ -859,6 +865,7 @@ function addMessage(message_info, bReset)
 			msgTargetUser = message_info.message.substr(1, slicePos - 1);
 			var msg = message_info.message.slice(slicePos + 1);
 			msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console"> <span class="highlight">&#64;'+msgTargetUser+'</span>&gt;</span><span class="text">'+msg+'</span>';
+			sNotif = message_info.nickname+' @'+msgTargetUser+' : '+msg;
 			break;
 		case databap.consts.msg_types.nick:
 			msg_body = '<span class="text">'+message_info.message+' (<a href="'+databap.getInternalLink('profil', message_info.id_user)+'" target="_blank"><i class="fa fa-c-profile fa-inline"></i>'+message_info.name+'</a>)</span>';
@@ -875,6 +882,7 @@ function addMessage(message_info, bReset)
 			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 = sMsgPrefix+'<span class="text">'+msg+'</span>';
 			bImage = true;
+			sNotif = message_info.nickname+' a posté une image';
 			break;
 		case databap.consts.msg_types.reboot:
 			if(!bReset)
@@ -915,7 +923,7 @@ function addMessage(message_info, bReset)
 			msg_body = '<span class="text">'+message_info.nickname+' a modifi&eacute; la table <a href="'+url+'" target="_blank"><i class="fa fa-c-table fa-inline"></i>'+message_info.description+'</a></span>';
 			break;
 	}
-	
+
 	if(msg_body != '')
 	{
 		//Hide image button
@@ -929,7 +937,7 @@ function addMessage(message_info, bReset)
 			$Banner.find('.banner_title').width(message_info.message.width - 31);
 			$Msg.find('a').addClass('img_box').append($Banner);
 		}
-		
+
 		//Adding message to channel panel
 		$Message = $('<p>', {'class':message_info.msg_class+' class_'+sChanKeyName+' hide round_right'})
 					.append($('<span>', {'class':'time'}).text(((message_info.date==databap.consts.cur_date)?'':message_info.date+' - ')+message_info.time))
@@ -937,15 +945,28 @@ function addMessage(message_info, bReset)
 		$Message.find('.chan_link').click(function(){joinChan($(this).find('.chan_text').text());});
 		$Message.find('.user').click(setPm);
 		databap.getMainElem('#chat_messages').append($Message);
-		
+
 		//Unread messages
 		if(!bReset && !bSystemMsg /* && message_info.id_user!=databap.vars.user_id */)
 		{
 			sUnreadChanName = getChanName(message_info.id_chan);
 			iUnreadCount = (databap.tmp(['unread_msg', sUnreadChanName]) || 0) + 1;
 			databap.tmp(['unread_msg', sUnreadChanName], iUnreadCount);
+
+			//Desktop Notification
+			if(!databap.vars.focus && sNotif != '' && Push.Permission.has()) {
+				Push.create('Databap - '+message_info.nickname, {
+					body: sNotif,
+					icon: databap.consts.app_image_folder+(databap.tmp(['logos', message_info.id_user]) || 'logo_25.png'),
+					timeout: 4000,
+					onClick: function () {
+						window.focus();
+						this.close();
+					}
+				});
+			}
 		}
-		
+
 		//Move to bottom if user is typing
 		if(message_info.id_user===databap.vars.user_id) self.tmp('scrolling', false);
 	}
@@ -963,7 +984,7 @@ function setImageDisplay()
 	$Images.find('.banner .fa').toggleClass('fa-c-image', !self.vars2('opt_chat_images'));
 	$Images.find('.banner .fa').toggleClass('fa-c-close', self.vars2('opt_chat_images'));
 	$Images.find('.banner .button').attr('title', (self.vars2('opt_chat_images')?'Cacher':'Afficher')+' les images');
-	
+
 	databap.updateScrollBar('bottom');
 }
 
@@ -982,7 +1003,7 @@ function refresh_users()
 				databap.getMainElem('#connected_users').empty();
 				databap.tmp('users', {});
 				databap.tmp('id_users', {});
-				
+
 				$.each
 				(
 					result,
@@ -1000,7 +1021,8 @@ function refresh_users()
 								databap.tmp(['users', sChankeyName, sSafeNickName], sNickName);
 								databap.tmp(['users', databap.consts.all_chan_id, sSafeNickName], sNickName);
 								databap.tmp(['id_users', sNickName], user_info.id_user);
-								
+								databap.tmp(['logos', user_info.id_user], user_info.logo);
+
 								//Append name to user list box
 								var sProfileLink = databap.getInternalLink('profil', user_info.id_user);
 								var sMission = user_info.status || '';
@@ -1034,7 +1056,7 @@ function refresh_users()
 
 function getSafeNickname(sNickName)
 {
-	return sNickName.stripVowelAccent().toLowerCase();	
+	return sNickName.stripVowelAccent().toLowerCase();
 }
 
 function setPm()
@@ -1059,14 +1081,14 @@ function displayHelp()
 {
 	//Get template
 	$Help = $('#help').clone().attr('id', 'help_'+Math.floor((Math.random()*1000)));
-	
+
 	//Visible on all channels
 	$Help.find('p').addClass('class_'+databap.consts.all_chan_id);
 	$Help.appendTo('#chat_messages').slideDown('fast', function()
 	{
 		databap.updateScrollBar('bottom');
 	});
-	
+
 	//Close button activation
 	$Help.find('#close_help').click(function()
 	{
@@ -1076,4 +1098,4 @@ function displayHelp()
 		});
 	});
 }
-</script>
+</script>

masks/index.html

@@ -11,6 +11,7 @@
 	<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/push.min.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">
@@ -77,4 +78,4 @@
 		</div>
 	</div>
 </body>
-</html>
+</html>