Separated chatbox to a separate component (into different files).

configuration.txt

@@ -84,6 +84,9 @@ web:
       - type: chat
       - type: chatballoon
         focuschatballoons: false
+      - type: chatbox
+        showplayerfaces: true
+        messagettl: 5
     
     defaultworld: world
     worlds:

web/index.html

@@ -17,6 +17,7 @@
 
 	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 	<script type="text/javascript" src="js/jquery.json.js"></script>
+	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
 	<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
 	<script type="text/javascript" src="js/custommarker.js"></script>
 	<script type="text/javascript" src="js/minecraft.js"></script>
@@ -26,7 +27,8 @@
 	<script type="text/javascript" src="js/clock.timeofday.js"></script>
 	<script type="text/javascript" src="js/clock.digital.js"></script>
 	<script type="text/javascript" src="js/chat.js"></script>
-	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
+	<script type="text/javascript" src="js/chatballoon.js"></script>
+	<script type="text/javascript" src="js/chatbox.js"></script>
 	<script type="text/javascript" src="config.js"></script>
 
 	<script type="text/javascript">

web/js/chat.js

@@ -5,26 +5,12 @@ $.ajax({
 	dataType: "jsonp",
 	success: function(getip) { ip = getip.ip; }
 	});
-function sendChat(me, message) {
-	var data = '{"name":"'+ip+'","message":"'+message+'"}';
-	$.ajax({
-		type: 'POST',
-		url: 'up/sendmessage',
-		data: data,
-		dataType: 'json',
-		success: function(response) {
-			//handle response
-			if(response)
-				me.onPlayerChat('', response);
-		}
-	});
-}
 
-// Provides 'chat'-events by looking at the world-updates.
 componentconstructors['chat'] = function(dynmap, configuration) {
 	return {
 		dynmap: dynmap,
 		initialize: function() {
+			// Provides 'chat'-events by monitoring the world-updates.
 			$(dynmap).bind('worldupdate', function(event, update) {
 				swtch(update.type, {
 					chat: function() {
@@ -35,61 +21,25 @@ componentconstructors['chat'] = function(dynmap, configuration) {
 					}
 				});
 			});
-		}
-	};
-};
 			
-// TODO: Maybe split this to another file.
+			if (dynmap.options.allowwebchat) {
-componentconstructors['chatballoon'] = function(dynmap, configuration) {
+				// Accepts 'sendchat'-events to send chat messages to the server.
-	return {
+				$(dynmap).bind('sendchat', function(event, message) {
-		dynmap: dynmap,
+					var data = '{"name":"'+ip+'","message":"'+message+'"}';
-		options: configuration,
+					$.ajax({
-		chatpopups: {},
+						type: 'POST',
-		initialize: function() {
+						url: 'up/sendmessage',
-			var me = this;
+						data: data,
-			$(dynmap).bind('chat', function(event, message) {
+						dataType: 'json',
-				if (message.source != 'player') {
+						success: function(response) {
-					return;
+							//handle response
-				}
+							if(response) {
-				var player = dynmap.players[message.name];
+								$(dynmap).trigger('chat', [{source: 'me', name: ip, text: message}]);
-				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/chatballoon.js

@@ -0,0 +1,53 @@
+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/chatbox.js

@@ -0,0 +1,74 @@
+componentconstructors['chatbox'] = function(dynmap, configuration) {
+	return {
+		dynmap: dynmap,
+		initialize: function() {
+			var chat = $('<div/>')
+				.addClass('chat')
+				.appendTo(dynmap.options.container);
+			var messagelist = $('<div/>')
+				.addClass('messagelist')
+				.appendTo(chat);
+			
+			if (dynmap.options.allowwebchat) {
+				var chatinput = $('<input/>')
+					.addClass('chatinput')
+					.attr({
+						id: 'chatinput',
+						type: 'text',
+						value: ''
+					})
+					.keydown(function(event) {
+						if (event.keyCode == '13') {
+							event.preventDefault();
+							if(chatinput.val() != '') {
+								$(dynmap).trigger('sendchat', [chatinput.val()]);
+								chatinput.val('');
+							}
+						}
+					})
+					.appendTo(chat);
+			}
+			
+			$(dynmap).bind('chat', function(event, message) {
+				var playerName = message.name;
+				var messageRow = $('<div/>')
+					.addClass('messagerow');
+
+				var playerIconContainer = $('<span/>')
+					.addClass('messageicon');
+
+				if (message.source === 'player' && configuration.showplayerfaces) {
+					getMinecraftHead(playerName, 16, function(head) {
+						messageRow.icon = $(head)
+							.addClass('playerIcon')
+							.appendTo(playerIconContainer);
+					});
+				}
+
+				if (message.source === 'player' && configuration.showworld) {
+					var playerWorldContainer = $('<span/>')
+					 .addClass('messagetext')
+					 .text('['+dynmap.players[message.name].location.world.name+']')
+					 .appendTo(messageRow);
+				}
+
+				var playerNameContainer = $('<span/>')
+					.addClass('messagetext')
+					.text(' '+message.name+': ');
+
+				var playerMessageContainer = $('<span/>')
+					.addClass('messagetext')
+					.text(message.text);
+
+				messageRow.append(playerIconContainer,playerNameContainer,playerMessageContainer);
+				//messageRow.append(playerIconContainer,playerWorldContainer,playerGroupContainer,playerNameContainer,playerMessageContainer);
+				setTimeout(function() { messageRow.remove(); }, (configuration.messagettl * 1000));
+				messagelist.append(messageRow);
+				
+				messagelist.show();
+				//var scrollHeight = jQuery(me.messagelist).attr('scrollHeight');
+				messagelist.scrollTop(messagelist.scrollHeight());
+			});
+		}
+	};
+};

web/js/map.js

@@ -78,7 +78,6 @@ DynMap.prototype = {
 	worlds: {},
 	registeredTiles: [],
 	players: {},
-	chatPopups: [],
 	lasttimestamp: '0',
 	followingPlayer: '',
 	configure: function(configuration) {
@@ -260,36 +259,6 @@ DynMap.prototype = {
 			.addClass('compass')
 			.appendTo(container);
 		
-		// The chat
-		if (me.options.showchatwindow) {
-			var chat = me.chat = $('<div/>')
-				.addClass('chat')
-				.appendTo(container);
-			var messagelist = me.messagelist = $('<div/>')
-				.addClass('messagelist')
-				.appendTo(chat);
-			if (me.options.allowwebchat) {
-				var chatinput = me.chatinput = $('<input/>')
-					.addClass('chatinput')
-					.attr({
-						id: 'chatinput',
-						type: 'text',
-						value: ''
-					})
-					.keydown(function(event) {
-						if (event.keyCode == '13') {
-							event.preventDefault();
-							if(chatinput.val() != '')
-							{
-								sendChat(me, chatinput.val());
-								chatinput.val('');
-							}
-						}
-					})
-					.appendTo(chat);
-			}
-		}
-		
 		// TODO: Enable hash-links.
 		/*
 		var link;
@@ -405,15 +374,7 @@ DynMap.prototype = {
 						swtch(update.type, {
 							tile: function() {
 								me.onTileUpdated(update.name);
-							},
-							chat: function() {
-								me.onPlayerChat(update.playerName, update.message);
-							},
-							webchat: function() {
-								me.onPlayerChat('[WEB]' + update.playerName, update.message);
 							}
-						}, function(type) {
-							console.log('Unknown type ', type, '!');
 						});
 					}
 					/* remove older messages from chat*/
@@ -456,57 +417,6 @@ DynMap.prototype = {
 	unregisterTile: function(mapType, tileName) {
 		delete this.registeredTiles[tileName];
 	},
-	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.showchatwindow) {
-			var messagelist = me.messagelist;
-
-			var messageRow = $('<div/>')
-				.addClass('messagerow');
-
-			var playerIconContainer = $('<span/>')
-				.addClass('messageicon');
-
-			if (me.options.showplayerfacesinmenu) {
-				getMinecraftHead(playerName, 16, function(head) {
-					messageRow.icon = $(head)
-						.addClass('playerIcon')
-						.appendTo(playerIconContainer);
-				});
-			}
-
-			if (playerName !== 'Server') {
-				var playerWorldContainer = $('<span/>')
-				 .addClass('messagetext')
-				 .text('['+me.world+']');
-	
-				var playerGroupContainer = $('<span/>')
-				 .addClass('messagetext')
-				 .text('[Group]');
-			}
-
-			var playerNameContainer = $('<span/>')
-				.addClass('messagetext')
-				.text(' '+playerName+': ');
-
-			var playerMessageContainer = $('<span/>')
-				.addClass('messagetext')
-				.text(message);
-
-			messageRow.append(playerIconContainer,playerNameContainer,playerMessageContainer);
-			//messageRow.append(playerIconContainer,playerWorldContainer,playerGroupContainer,playerNameContainer,playerMessageContainer);
-			setTimeout(function() { messageRow.remove(); }, (me.options.messagettl * 1000));
-			messagelist.append(messageRow);
-			
-			me.messagelist.show();
-			//var scrollHeight = jQuery(me.messagelist).attr('scrollHeight');
-			me.messagelist.scrollTop(me.messagelist.scrollHeight());
-		}
-	},
 	onTileUpdated: function(tileName) {
 		var me = this;
 		var tile = this.registeredTiles[tileName];