From ed5a3cae68e6d9cdb4a3421faeae17d66ae211a9 Mon Sep 17 00:00:00 2001
From: BlueRaja <BlueRaja.admin@gmail.com>
Date: Sun, 2 Jun 2013 16:28:09 -0500
Subject: Refactored chat.  Chat now refreshes very slowly when it is not the
 active tab (or the window is minimized)

---
 pages/chat.php | 221 ++++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 140 insertions(+), 81 deletions(-)

(limited to 'pages/chat.php')

diff --git a/pages/chat.php b/pages/chat.php
index 4f903a8..0bc1cb5 100644
--- a/pages/chat.php
+++ b/pages/chat.php
@@ -18,36 +18,34 @@ if (!$accepted) {
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
 <script>
-var lastID = 1;
-var chatTimerDelayUpper = 9000;
-var chatTimerDelayLower = 2000;
-var chatTimerDelay = 5000;
 
+var lastID = 1;
+const chatTimerDelayUpper = 9000;
+const chatTimerDelayLower = 2000;
+const chatTimerDelayDefault = 5000;
+const chatTimerDelayWindowHidden = 90000;
+var chatTimerDelay = chatTimerDelayDefault;
+var isChatWindowVisible = true;
 var skipNextGetChat = false;
-
 var chatBuffer = new Array();
 
 getChatTimer();
 function getChatTimer() {
 	setTimeout("getChatTimer()", chatTimerDelay);
-	if (chatTimerDelay < chatTimerDelayUpper)
-		chatTimerDelay += 150;
+	if (isChatWindowVisible)
+		chatTimerDelay = Math.min(chatTimerDelay + 300, chatTimerDelayUpper);
 	if (skipNextGetChat) {
 		skipNextGetChat = false;
 		return;
 	}
 	getChat();
+	//addChatMessage("Debug", "Chat timer called!");
 }
 
 var firstGetChat = true;
 function getChatDone(data) {
-	var items = [];
-	var p; //our prep string
 	var newChats = false;
-	
-	var lastDisplay = '';
-	var lastMessage = '';
-	
+
 	////console.log('datalength', data.length);
 	
 	if (data.length < 3 || data == 'false')
@@ -65,88 +63,35 @@ function getChatDone(data) {
 	
 		var postDate = new Date();
 		postDate.setTime(postDate.getTime() + chat.secondsSince * 1000);
-		//var timestamp = postDate.format("ddd h:MM TT");
-		//var timestamp = postDate.format("h:MM:ss");
-		var timestamp = postDate.format("hh:MM:ss");
-		var timestampDetails = postDate.format("ddd h:MM TT");
 		
 		if (!chat.message) return;
 		
-		var strClass = '';
-		if (chat.userID == userObj.ID) {
-			strClass += ' self';
-		}
-		if (chat.userID == null || chat.userID <= 0) {
-			strClass += ' server';
-			chat.displayName = 'SERVER'
-		}
-		
-		var usernameClass = '';
-		if (chat.message.indexOf("/me ") == 0) {
-			chat.message = chat.message.substring(4);
-			usernameClass = ' me';
-		}
-		
-		var isSpoiler = false;
-		if (chat.message.indexOf("/spoiler ") == 0) {
-			chat.message = chat.message.substring(9);
-			isSpoiler = true;
-		}
-		
-		if (!isSpoiler) {
-			document.title = chat.displayName+': '+chat.message.substring(0, 20)+' | Pathery Chat';
-		} else {
-			document.title = chat.displayName+': ~Spoiler~ | Pathery Chat';
-		}
-		
-		//console.log("INSIDE BUILD START");
-		p = '';
-		p = p+ " <div class='chatColumn1'>";
-		p = p+ " 	<span class='chatTimestamp' title='"+timestampDetails+"'>["+timestamp+"]</span>";
-		p = p+ "		<div class='grid_td chatBadge' style='float:left; width:35px; height:35px; background:"+chat.wallColor+" url("+linkEmblem(chat.wallEmblem, chat.wallOrientation)+");'>";
-		p = p+ "			<div style='background-color:transparent;' class='grid_td_inner grid_td_rocks'>";
-		p = p+ "			</div>";
-		p = p+ "		</div>";
-		p = p+ "	</div>";
+		var isSelf = (chat.userID == userObj.ID);
+		var isServer = false;
 		
-		p = p+ " <div class='chatColumn2'>";
 		if (chat.userID == null || chat.userID <= 0) {
-			p = p+ "<span class='chatUsername"+usernameClass+"'><a href='home'>";
-		} else {
-			p = p+ "<span class='chatUsername"+usernameClass+"'><a href='achievements?id="+chat.userID+"' style='color:"+chat.displayColor+"'>";
+			isServer = true;
+			chat.displayName = 'SERVER'
 		}
-		p = p+ chat.displayName+"</a></span>";
-		
-		if (isSpoiler == true) p = p+ "	<span class='chatText spoiler' onclick='spoil(this);'>";
-		else p = p+ "	<span class='chatText'>";
-		p = p+ chatReplaceAndEncode(chat.message);
-		p = p+ "	</span>";
-		p = p+ "	</div>";
 		
 		//Message is legitmently new or a server message?
 		if (chat.ID > lastID || typeof(chat.ID) == 'undefined') {
-			items.push('<div class="chatMessage'+strClass+'" id="C_' + chat.ID + '">' + p + '</div>');
+			addChatMessage(chat.displayName, chat.message, postDate, isSelf, isServer, chat.wallColor, chat.wallEmblem,
+				chat.wallOrientation, chat.userID, chat.displayColor, chat.ID);
 			newChats = true;
 		}
-		lastDisplay = chat.displayName
-		lastMessage = chat.message 
-		if (chat.ID > 0) lastID = chat.ID;
+		
+		//console.log("INSIDE BUILD START"); 
+		if (chat.ID > 0)
+			lastID = chat.ID;
 	});
 	
 	//console.log("BUILD DONE");
 	
-	if (newChats) {
-		if (chatTimerDelay > chatTimerDelayLower)	chatTimerDelay -= 1000;
-		
-		var elem = $("#chatContainer");
-		var atBottom = (elem.scrollTop() >= elem[0].scrollHeight - elem.outerHeight() - 1);	
-
-		$("#chatContainer").append(items.join(''));
+	if (newChats && !firstGetChat) {
+		if (isChatWindowVisible)
+			chatTimerDelay = chatTimerDelayLower;
 
-		if (atBottom || firstGetChat) {
-			$("#chatContainer").scrollTop($("#chatContainer")[0].scrollHeight);
-			firstGetChat = false;
-		}
 		if (chatIsMuted == 'false') {
 			soundManager.setVolume('charm', 20);
 			soundManager.setPan('charm', -60)
@@ -154,6 +99,72 @@ function getChatDone(data) {
 			soundManager.play('charm');
 		}
 	}
+	
+	firstGetChat = false;
+}
+
+function addChatMessage(displayName, message, postDate, isSelf, isServer, wallColor, wallEmblem, wallOrientation, userID, displayColor, chatID)
+{
+	if(!postDate)
+		postDate = new Date();
+	var timestamp = postDate.format("hh:MM:ss");
+	var timestampDetails = postDate.format("ddd h:MM TT");
+
+	var strClass = '';
+	if (isSelf)
+		strClass += ' self';
+	if (isServer)
+		strClass += ' server';
+
+	var usernameClass = '';
+	if (message.indexOf("/me ") == 0) {
+		message = message.substring(4);
+		usernameClass = ' me';
+	}
+
+	var isSpoiler = false;
+	if (message.indexOf("/spoiler ") == 0) {
+		message = message.substring(9);
+		isSpoiler = true;
+	}
+	
+	if (!isSpoiler) {
+		document.title = displayName + ': '+ message.substring(0, 20) + ' | Pathery Chat';
+	} else {
+		document.title = displayName + ': ~Spoiler~ | Pathery Chat';
+	}
+	
+	var p = '';
+	p = p+ " <div class='chatColumn1'>";
+	p = p+ " 	<span class='chatTimestamp' title='"+timestampDetails+"'>["+timestamp+"]</span>";
+	p = p+ "		<div class='grid_td chatBadge' style='float:left; width:35px; height:35px; background:"+wallColor+" url("+linkEmblem(wallEmblem, wallOrientation)+");'>";
+	p = p+ "			<div style='background-color:transparent;' class='grid_td_inner grid_td_rocks'>";
+	p = p+ "			</div>";
+	p = p+ "		</div>";
+	p = p+ "	</div>";
+
+	p = p+ " <div class='chatColumn2'>";
+	if (userID == null || userID <= 0) {
+		p = p+ "<span class='chatUsername"+usernameClass+"'><a href='home'>";
+	} else {
+		p = p+ "<span class='chatUsername"+usernameClass+"'><a href='achievements?id="+userID+"' style='color:"+displayColor+"'>";
+	}
+	p = p+ displayName+"</a></span>";
+
+	if (isSpoiler == true) p = p+ "	<span class='chatText spoiler' onclick='spoil(this);'>";
+	else p = p+ "	<span class='chatText'>";
+	p = p+ chatReplaceAndEncode(message);
+	p = p+ "	</span>";
+	p = p+ "	</div>";
+	
+	var chatContainer = $("#chatContainer");
+	var isAtBottom = (chatContainer.length == 1 && chatContainer.scrollTop() >= chatContainer[0].scrollHeight - chatContainer.outerHeight() - 1);	
+
+	chatContainer.append('<div class="chatMessage'+strClass+'" id="C_' + chatID + '">' + p + '</div>');
+
+	if (isAtBottom || firstGetChat) {
+		chatContainer.scrollTop(chatContainer[0].scrollHeight);
+	}
 }
 
 function chatReplaceAndEncode(chat) {
@@ -253,11 +264,9 @@ function sendChat() {
 }
 
 $(document).ready(function() {
-
     $('#sendChat').live("submit", function() {
         sendChat()
     });
-	 
 });
 
 function htmlEncode(value){
@@ -268,6 +277,56 @@ function htmlEncode(value){
     }
 }
 
+//Code for checking if the window is currently visible or not
+//Adapted from http://stackoverflow.com/a/1060034/238419
+$(function() {
+	var hidden = "hidden";
+
+    // Standards:
+    if (hidden in document)
+        document.addEventListener("visibilitychange", onchange);
+    else if ((hidden = "mozHidden") in document)
+        document.addEventListener("mozvisibilitychange", onchange);
+    else if ((hidden = "webkitHidden") in document)
+        document.addEventListener("webkitvisibilitychange", onchange);
+    else if ((hidden = "msHidden") in document)
+        document.addEventListener("msvisibilitychange", onchange);
+    // IE 9 and lower:
+    else if ('onfocusin' in document)
+        document.onfocusin = document.onfocusout = onchange;
+    // All others:
+    else
+        window.onpageshow = window.onpagehide 
+            = window.onfocus = window.onblur = onchange;
+
+    function onchange (evt) {
+        var eventMapIsWindowShown = { 
+                focus:true, focusin:true, pageshow:true, blur:false, focusout:false, pagehide:false 
+            };
+
+        evt = evt || window.event;
+        if (evt.type in eventMapIsWindowShown)
+            isChatWindowVisible = eventMapIsWindowShown[evt.type];
+        else   
+            isChatWindowVisible = !this[hidden];
+		
+		if(isChatWindowVisible)
+			onChatWindowShown();
+		else
+			onChatWindowHidden();
+    }
+});
+
+function onChatWindowShown()
+{
+	chatTimerDelay = chatTimerDelayDefault;
+	getChatTimer();
+}
+
+function onChatWindowHidden()
+{
+	chatTimerDelay = chatTimerDelayWindowHidden;
+}
 
 <?
 $chatMute = (isset($_COOKIE['pref_chatMute']) && $_COOKIE['pref_chatMute'] == "true");
-- 
cgit v1.2.3