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

This commit is contained in:
FrozenCow 2011-03-31 11:25:09 +02:00
parent 9a09cace54
commit 7464e5b809
6 changed files with 153 additions and 161 deletions

View File

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

View File

@ -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">

View File

@ -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) {
}
});
});
if (dynmap.options.allowwebchat) {
// Accepts 'sendchat'-events to send chat messages to the server.
$(dynmap).bind('sendchat', function(event, message) {
var data = '{"name":"'+ip+'","message":"'+message+'"}';
$.ajax({
type: 'POST',
url: 'up/sendmessage',
data: data,
dataType: 'json',
success: function(response) {
//handle response
if(response) {
$(dynmap).trigger('chat', [{source: 'me', name: ip, text: 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);
});
}
};
};

53
web/js/chatballoon.js Normal file
View File

@ -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);
});
}
};
};

74
web/js/chatbox.js Normal file
View File

@ -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());
});
}
};
};

View File

@ -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];