Separated chat-balloon-code to a component.

configuration.txt

@@ -81,8 +81,9 @@ web:
     spammessage: "You may only chat once every %interval% seconds."
     
     components:
-      - type: testcomponent
+      - type: chat
-      - type: testcomponent
+      - type: chatballoon
+        focuschatballoons: false
     
     defaultworld: world
     worlds:

web/js/chat.js

@@ -19,3 +19,77 @@ function sendChat(me, message) {
 		}
 	});
 }
+
+// Provides 'chat'-events by looking at the world-updates.
+componentconstructors['chat'] = function(dynmap, configuration) {
+	return {
+		dynmap: dynmap,
+		initialize: function() {
+			$(dynmap).bind('worldupdate', function(event, update) {
+				swtch(update.type, {
+					chat: function() {
+						$(dynmap).trigger('chat', [{source: 'player', name: update.playerName, text: update.message}]);
+					},
+					webchat: function() {
+						$(dynmap).trigger('chat', [{source: 'web', name: update.playerName, text: update.message}]);
+					}
+				});
+			});
+		}
+	};
+};
+
+// TODO: Maybe split this to another file.
+componentconstructors['chatballoon'] = function(dynmap, configuration) {
+	return {
+		dynmap: dynmap,
+		options: configuration,
+		chatpopups: {},
+		initialize: function() {
+			var me = this;
+			$(dynmap).bind('chat', function(event, message) {
+				if (message.source != 'player') {
+					return;
+				}
+				var player = dynmap.players[message.name];
+				var playerMarker = player && player.marker;
+				if (!playerMarker) {
+					return;
+				}
+				var popup = me.chatpopups[message.name];
+				if (!popup) {
+					popup = { lines: [ message.text ] };
+				} else {
+					popup.lines[popup.lines.length] = message.text;
+				}
+	
+				var MAX_LINES = 5;
+				if (popup.lines.length > MAX_LINES) {
+					popup.lines = popup.lines.slice(1);
+				}
+				var htmlMessage = '<div id="content"><b>' + message.name + "</b><br/><br/>";
+				var line;
+				for (line in popup.lines) {
+					htmlMessage = htmlMessage + popup.lines[line] + "<br/>";
+				}
+				htmlMessage = htmlMessage + "</div>";
+				if (!popup.infoWindow) {
+					popup.infoWindow = new google.maps.InfoWindow({
+						disableAutoPan: !(me.options.focuschatballoons || false),
+					    content: htmlMessage
+					});
+				} else {
+					popup.infoWindow.setContent(htmlMessage);
+				}
+				popup.infoWindow.open(dynmap.map, playerMarker);
+				me.chatpopups[message.name] = popup;
+				if (popup.timeout) { window.clearTimeout(popup.timeout); }
+				popup.timeout = window.setTimeout(function() {
+					popup.infoWindow.close();
+					popup.infoWindow = null;
+					delete me.chatpopups[message.name];
+				}, 8000);
+			});
+		}
+	};
+};

web/js/map.js

@@ -38,7 +38,7 @@ function splitArgs(s) {
 }
 
 function swtch(value, options, defaultOption) {
-	return (options[value] || defaultOption)(value);
+	return (options[value] || defaultOption || function(){})(value);
 }
 (function( $ ){
 	$.fn.scrollHeight = function(height) {
@@ -363,9 +363,6 @@ DynMap.prototype = {
 	update: function() {
 		var me = this;
 
-		// TODO: is there a better place for this?
-		this.cleanPopups();
-
 		$(me).trigger('worldupdating');
 		$.getJSON(me.options.updateUrl + "world/" + me.world.name + "/" + me.lasttimestamp, function(update) {
 				if (!update) {
@@ -459,59 +456,12 @@ DynMap.prototype = {
 	unregisterTile: function(mapType, tileName) {
 		delete this.registeredTiles[tileName];
 	},
-	cleanPopups: function() {
-		var POPUP_LIFE = 8000;
-		var d = new Date();
-		var now = d.getTime();
-		var popupIndex;
-		for (popupIndex in this.chatPopups) {
-			var popup = this.chatPopups[popupIndex];
-			if (now - popup.popupTime > POPUP_LIFE) {
-				popup.infoWindow.close();
-				popup.infoWindow = null;
-				delete this.chatPopups[popupIndex];
-			}
-		}
-	},
 	onPlayerChat: function(playerName, message) {
 		var me = this;
 		var chatPopups = this.chatPopups;
 		var map = me.map;
 		var player = me.players[playerName];
 		var playerMarker = player && player.marker;
-		if (me.options.showchatballoons) {
-			if (playerMarker) {
-				var popup = chatPopups[playerName];
-				if (!popup) {
-					popup = { lines: [ message ] };
-				} else {
-					popup.lines[popup.lines.length] = message;
-				}
-	
-				var MAX_LINES = 5;
-				if (popup.lines.length > MAX_LINES) {
-					popup.lines = popup.lines.slice(1);
-				}
-				var htmlMessage = '<div id="content"><b>' + playerName + "</b><br/><br/>";
-				var line;
-				for (line in popup.lines) {
-					htmlMessage = htmlMessage + popup.lines[line] + "<br/>";
-				}
-				htmlMessage = htmlMessage + "</div>";
-				var now = new Date();
-				popup.popupTime = now.getTime();
-				if (!popup.infoWindow) {
-					popup.infoWindow = new google.maps.InfoWindow({
-						disableAutoPan: !(me.options.focuschatballoons || false),
-					    content: htmlMessage
-					});
-				} else {
-					popup.infoWindow.setContent(htmlMessage);
-				}
-				popup.infoWindow.open(map, playerMarker);
-				this.chatPopups[playerName] = popup;
-			}
-		}
 		if (me.options.showchatwindow) {
 			var messagelist = me.messagelist;