Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Rename chat-message-* class to chat-msg-*

Browse Source
This commit is contained in:
JC Brand 2015-10-28 08:52:19 +00:00
parent ca2b40f79c
commit 7ad3c385aa
9 changed files with 61 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
converse.js
View File

@ -1551,7 +1551,7 @@
'username': username, 'username': username,
'message': '', 'message': '',
'extra_classes': extra_classes 'extra_classes': extra_classes
})).children('.chat-message-content').first().text(text) })).children('.chat-msg-content').first().text(text)
.addHyperlinks() .addHyperlinks()
.addEmoticons(converse.visible_toolbar_buttons.emoticons).parent(); .addEmoticons(converse.visible_toolbar_buttons.emoticons).parent();
}, },

20
mockup/chatroom2.html
View File

@ -41,27 +41,27 @@
<div class="chat-area"> <div class="chat-area">
<div class="chat-content"> <div class="chat-content">
<div class="chat-message "> <div class="chat-message ">
<span class="chat-message-room">18:50 luke:&nbsp;</span> <span class="chat-msg-room">18:50 luke:&nbsp;</span>
<span class="chat-message-content">leia: hi :)</span> <span class="chat-msg-content">leia: hi :)</span>
</div> </div>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-message-room">19:40 leia:&nbsp;</span> <span class="chat-msg-room">19:40 leia:&nbsp;</span>
<span class="chat-message-content"> <span class="chat-msg-content">
I'll be gone for a while, will be back in about an hour</span> I'll be gone for a while, will be back in about an hour</span>
</div> </div>
<time class="chat-info chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time> <time class="chat-info chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span> <span class="chat-msg-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<span class="chat-message-content"> <span class="chat-msg-content">
I'll be gone for a while, will be back in about an hour</span> I'll be gone for a while, will be back in about an hour</span>
</div> </div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-message-me">19:42 me:&nbsp;</span> <span class="chat-msg-me">19:42 me:&nbsp;</span>
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span> <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div> </div>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span> <span class="chat-msg-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<span class="chat-message-content">Another message to check that scrolling works.</span> <span class="chat-msg-content">Another message to check that scrolling works.</span>
</div> </div>
</div> </div>
<form class="sendXMPPMessage" action="" method="post"> <form class="sendXMPPMessage" action="" method="post">

40
mockup/index.html
View File

@ -298,28 +298,28 @@
<div class="chat-info"><strong>/help</strong>:This is an info message</div> <div class="chat-info"><strong>/help</strong>:This is an info message</div>
<div class="chat-info chat-error">This is an error message</div> <div class="chat-info chat-error">This is an error message</div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-message-me">09:35 me:&nbsp;</span> <span class="chat-msg-me">09:35 me:&nbsp;</span>
<span class="chat-message-content"> <span class="chat-msg-content">
Hello world Hello world
<span class="icon-smiley"></span> <span class="icon-smiley"></span>
</span> </span>
</div> </div>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-msg-author chat-message-them">19:25 Benedict-John:&nbsp;</span> <span class="chat-msg-author chat-msg-them">19:25 Benedict-John:&nbsp;</span>
<span class="chat-message-content">Dagsê</span> <span class="chat-msg-content">Dagsê</span>
</div> </div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-message-me">19:39 me:&nbsp;</span> <span class="chat-msg-me">19:39 me:&nbsp;</span>
<span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span> <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
</div> </div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-message-me">19:42 me:&nbsp;</span> <span class="chat-msg-me">19:42 me:&nbsp;</span>
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span> <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div> </div>
<div class="chat-info chat-event">JC Brand is busy</div> <div class="chat-info chat-event">JC Brand is busy</div>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-message-me">19:43 me:&nbsp;</span> <span class="chat-msg-me">19:43 me:&nbsp;</span>
<span class="chat-message-content">Another message to check that scrolling works.</span> <span class="chat-msg-content">Another message to check that scrolling works.</span>
</div> </div>
</div> </div>
@ -374,27 +374,27 @@
<div class="chat-area"> <div class="chat-area">
<div class="chat-content"> <div class="chat-content">
<div class="chat-message "> <div class="chat-message ">
<span class="chat-message-room">18:50 luke:&nbsp;</span> <span class="chat-msg-room">18:50 luke:&nbsp;</span>
<span class="chat-message-content">leia: hi :)</span> <span class="chat-msg-content">leia: hi :)</span>
</div> </div>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-message-room">19:40 leia:&nbsp;</span> <span class="chat-msg-room">19:40 leia:&nbsp;</span>
<span class="chat-message-content"> <span class="chat-msg-content">
I'll be gone for a while, will be back in about an hour</span> I'll be gone for a while, will be back in about an hour</span>
</div> </div>
<time class="chat-info chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time> <time class="chat-info chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span> <span class="chat-msg-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<span class="chat-message-content"> <span class="chat-msg-content">
I'll be gone for a while, will be back in about an hour</span> I'll be gone for a while, will be back in about an hour</span>
</div> </div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-message-me">19:42 me:&nbsp;</span> <span class="chat-msg-me">19:42 me:&nbsp;</span>
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span> <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div> </div>
<div class="chat-message "> <div class="chat-message ">
<span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span> <span class="chat-msg-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
<span class="chat-message-content">Another message to check that scrolling works.</span> <span class="chat-msg-content">Another message to check that scrolling works.</span>
</div> </div>
</div> </div>
<form class="sendXMPPMessage" action="" method="post"> <form class="sendXMPPMessage" action="" method="post">

12
sass/_chatbox.scss
View File

@ -88,29 +88,29 @@
max-width: 100px; max-width: 100px;
display: inline-block; display: inline-block;
padding-right: 3px; padding-right: 3px;
&.chat-message-author { &.chat-msg-author {
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
float: left; float: left;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
&.chat-message-them { &.chat-msg-them {
color: $message-them-color; color: $message-them-color;
} }
&.chat-message-me { &.chat-msg-me {
color: $link-color; color: $link-color;
} }
&.chat-message-content { &.chat-msg-content {
word-wrap: break-word; word-wrap: break-word;
} }
} }
} }
.delayed { .delayed {
.chat-message-them { .chat-msg-them {
color: #FB5D50; color: #FB5D50;
} }
.chat-message-me { .chat-msg-me {
color: #7EABBB; color: #7EABBB;
} }
} }

2
sass/_chatrooms.scss
View File

@ -33,7 +33,7 @@
.mentioned { .mentioned {
font-weight: bold; font-weight: bold;
} }
.chat-message-room { .chat-msg-room {
color: $message-them-color; color: $message-them-color;
} }
.participants { .participants {

34
spec/chatbox.js
View File

@ -453,9 +453,9 @@
expect(msg_obj.get('delayed')).toEqual(false); expect(msg_obj.get('delayed')).toEqual(false);
// Now check that the message appears inside the chatbox in the DOM // Now check that the message appears inside the chatbox in the DOM
var $chat_content = chatboxview.$el.find('.chat-content'); var $chat_content = chatboxview.$el.find('.chat-content');
var msg_txt = $chat_content.find('.chat-message').find('.chat-message-content').text(); var msg_txt = $chat_content.find('.chat-message').find('.chat-msg-content').text();
expect(msg_txt).toEqual(message); expect(msg_txt).toEqual(message);
var sender_txt = $chat_content.find('span.chat-message-them').text(); var sender_txt = $chat_content.find('span.chat-msg-them').text();
expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy(); expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy();
}.bind(converse)); }.bind(converse));
}.bind(converse)); }.bind(converse));
@ -511,9 +511,9 @@
expect(msg_obj.get('delayed')).toEqual(false); expect(msg_obj.get('delayed')).toEqual(false);
// Now check that the message appears inside the chatbox in the DOM // Now check that the message appears inside the chatbox in the DOM
var $chat_content = chatboxview.$el.find('.chat-content'); var $chat_content = chatboxview.$el.find('.chat-content');
var msg_txt = $chat_content.find('.chat-message').find('.chat-message-content').text(); var msg_txt = $chat_content.find('.chat-message').find('.chat-msg-content').text();
expect(msg_txt).toEqual(msgtext); expect(msg_txt).toEqual(msgtext);
var sender_txt = $chat_content.find('span.chat-message-them').text(); var sender_txt = $chat_content.find('span.chat-msg-them').text();
expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy(); expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy();
}); });
@ -552,7 +552,7 @@
expect(msg_obj.get('delayed')).toEqual(false); expect(msg_obj.get('delayed')).toEqual(false);
// Now check that the message appears inside the chatbox in the DOM // Now check that the message appears inside the chatbox in the DOM
var $chat_content = chatboxview.$el.find('.chat-content'); var $chat_content = chatboxview.$el.find('.chat-content');
var msg_txt = $chat_content.find('.chat-message').find('.chat-message-content').text(); var msg_txt = $chat_content.find('.chat-message').find('.chat-msg-content').text();
expect(msg_txt).toEqual(msgtext); expect(msg_txt).toEqual(msgtext);
}); });
@ -634,9 +634,9 @@
expect(msg_obj.get('fullname')).toEqual(contact_name.split(' ')[0]); expect(msg_obj.get('fullname')).toEqual(contact_name.split(' ')[0]);
expect(msg_obj.get('sender')).toEqual('them'); expect(msg_obj.get('sender')).toEqual('them');
expect(msg_obj.get('delayed')).toEqual(true); expect(msg_obj.get('delayed')).toEqual(true);
msg_txt = $chat_content.find('.chat-message').find('.chat-message-content').text(); msg_txt = $chat_content.find('.chat-message').find('.chat-msg-content').text();
expect(msg_txt).toEqual(message); expect(msg_txt).toEqual(message);
sender_txt = $chat_content.find('span.chat-message-them').text(); sender_txt = $chat_content.find('span.chat-msg-them').text();
expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy(); expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy();
message = 'This is a current message'; message = 'This is a current message';
@ -665,9 +665,9 @@
expect(msg_obj.get('fullname')).toEqual(contact_name.split(' ')[0]); expect(msg_obj.get('fullname')).toEqual(contact_name.split(' ')[0]);
expect(msg_obj.get('sender')).toEqual('them'); expect(msg_obj.get('sender')).toEqual('them');
expect(msg_obj.get('delayed')).toEqual(false); expect(msg_obj.get('delayed')).toEqual(false);
msg_txt = $chat_content.find('.chat-message').last().find('.chat-message-content').text(); msg_txt = $chat_content.find('.chat-message').last().find('.chat-msg-content').text();
expect(msg_txt).toEqual(message); expect(msg_txt).toEqual(message);
sender_txt = $chat_content.find('span.chat-message-them').last().text(); sender_txt = $chat_content.find('span.chat-msg-them').last().text();
expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy(); expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy();
}.bind(converse)); }.bind(converse));
@ -683,7 +683,7 @@
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
expect(view.model.messages.length, 2); expect(view.model.messages.length, 2);
expect(converse.emit.mostRecentCall.args, ['messageSend', message]); expect(converse.emit.mostRecentCall.args, ['messageSend', message]);
expect(view.$el.find('.chat-content').find('.chat-message').last().find('.chat-message-content').text()).toEqual(message); expect(view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content').text()).toEqual(message);
}.bind(converse)); }.bind(converse));
it("is sanitized to prevent Javascript injection attacks", function () { it("is sanitized to prevent Javascript injection attacks", function () {
@ -694,7 +694,7 @@
spyOn(view, 'sendMessage').andCallThrough(); spyOn(view, 'sendMessage').andCallThrough();
test_utils.sendMessage(view, message); test_utils.sendMessage(view, message);
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-message-content'); var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.text()).toEqual(message); expect(msg.text()).toEqual(message);
expect(msg.html()).toEqual('&lt;p&gt;This message contains &lt;em&gt;some&lt;/em&gt; &lt;b&gt;markup&lt;/b&gt;&lt;/p&gt;'); expect(msg.html()).toEqual('&lt;p&gt;This message contains &lt;em&gt;some&lt;/em&gt; &lt;b&gt;markup&lt;/b&gt;&lt;/p&gt;');
}.bind(converse)); }.bind(converse));
@ -707,7 +707,7 @@
spyOn(view, 'sendMessage').andCallThrough(); spyOn(view, 'sendMessage').andCallThrough();
test_utils.sendMessage(view, message); test_utils.sendMessage(view, message);
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-message-content'); var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.text()).toEqual(message); expect(msg.text()).toEqual(message);
expect(msg.html()).toEqual('This message contains a hyperlink: <a target="_blank" href="http://www.opkode.com">www.opkode.com</a>'); expect(msg.html()).toEqual('This message contains a hyperlink: <a target="_blank" href="http://www.opkode.com">www.opkode.com</a>');
}.bind(converse)); }.bind(converse));
@ -731,7 +731,7 @@
var message = messages[i]; var message = messages[i];
test_utils.sendMessage(view, message); test_utils.sendMessage(view, message);
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-message-content'); var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.html()).toEqual(emoticons[i]); expect(msg.html()).toEqual(emoticons[i]);
} }
}.bind(converse)); }.bind(converse));
@ -745,28 +745,28 @@
var message = "http://www.opkode.com/'onmouseover='alert(1)'whatever"; var message = "http://www.opkode.com/'onmouseover='alert(1)'whatever";
test_utils.sendMessage(view, message); test_utils.sendMessage(view, message);
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-message-content'); var msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.text()).toEqual(message); expect(msg.text()).toEqual(message);
expect(msg.html()).toEqual('<a target="_blank" href="http://www.opkode.com/%27onmouseover=%27alert%281%29%27whatever">http://www.opkode.com/\'onmouseover=\'alert(1)\'whatever</a>'); expect(msg.html()).toEqual('<a target="_blank" href="http://www.opkode.com/%27onmouseover=%27alert%281%29%27whatever">http://www.opkode.com/\'onmouseover=\'alert(1)\'whatever</a>');
message = 'http://www.opkode.com/"onmouseover="alert(1)"whatever'; message = 'http://www.opkode.com/"onmouseover="alert(1)"whatever';
test_utils.sendMessage(view, message); test_utils.sendMessage(view, message);
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-message-content'); msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.text()).toEqual(message); expect(msg.text()).toEqual(message);
expect(msg.html()).toEqual('<a target="_blank" href="http://www.opkode.com/%22onmouseover=%22alert%281%29%22whatever">http://www.opkode.com/"onmouseover="alert(1)"whatever</a>'); expect(msg.html()).toEqual('<a target="_blank" href="http://www.opkode.com/%22onmouseover=%22alert%281%29%22whatever">http://www.opkode.com/"onmouseover="alert(1)"whatever</a>');
message = "https://en.wikipedia.org/wiki/Ender's_Game"; message = "https://en.wikipedia.org/wiki/Ender's_Game";
test_utils.sendMessage(view, message); test_utils.sendMessage(view, message);
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-message-content'); msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.text()).toEqual(message); expect(msg.text()).toEqual(message);
expect(msg.html()).toEqual('<a target="_blank" href="https://en.wikipedia.org/wiki/Ender%27s_Game">https://en.wikipedia.org/wiki/Ender\'s_Game</a>'); expect(msg.html()).toEqual('<a target="_blank" href="https://en.wikipedia.org/wiki/Ender%27s_Game">https://en.wikipedia.org/wiki/Ender\'s_Game</a>');
message = "https://en.wikipedia.org/wiki/Ender%27s_Game"; message = "https://en.wikipedia.org/wiki/Ender%27s_Game";
test_utils.sendMessage(view, message); test_utils.sendMessage(view, message);
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-message-content'); msg = view.$el.find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.text()).toEqual(message); expect(msg.text()).toEqual(message);
expect(msg.html()).toEqual('<a target="_blank" href="https://en.wikipedia.org/wiki/Ender%27s_Game">https://en.wikipedia.org/wiki/Ender%27s_Game</a>'); expect(msg.html()).toEqual('<a target="_blank" href="https://en.wikipedia.org/wiki/Ender%27s_Game">https://en.wikipedia.org/wiki/Ender%27s_Game</a>');
}.bind(converse)); }.bind(converse));

4
spec/chatroom.js
View File

@ -188,7 +188,7 @@
view.onChatRoomMessage(message.nodeTree); view.onChatRoomMessage(message.nodeTree);
var $chat_content = view.$el.find('.chat-content'); var $chat_content = view.$el.find('.chat-content');
expect($chat_content.find('.chat-message').length).toBe(1); expect($chat_content.find('.chat-message').length).toBe(1);
expect($chat_content.find('.chat-message-content').text()).toBe(text); expect($chat_content.find('.chat-msg-content').text()).toBe(text);
expect(converse.emit).toHaveBeenCalledWith('message', message.nodeTree); expect(converse.emit).toHaveBeenCalledWith('message', message.nodeTree);
}.bind(converse)); }.bind(converse));
@ -251,7 +251,7 @@
view.onChatRoomMessage(message.nodeTree); view.onChatRoomMessage(message.nodeTree);
var $chat_content = view.$el.find('.chat-content'); var $chat_content = view.$el.find('.chat-content');
expect($chat_content.find('.chat-message').length).toBe(1); expect($chat_content.find('.chat-message').length).toBe(1);
expect($chat_content.find('.chat-message-content').last().text()).toBe(text); expect($chat_content.find('.chat-msg-content').last().text()).toBe(text);
// We don't emit an event if it's our own message // We don't emit an event if it's our own message
expect(converse.emit.callCount, 1); expect(converse.emit.callCount, 1);
}.bind(converse)); }.bind(converse));

4
src/templates/action.html
View File

@ -1,4 +1,4 @@
<div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}"> <div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}">
<span class="chat-message-{{sender}}">{{time}} **{{username}} </span> <span class="chat-msg-{{sender}}">{{time}} **{{username}} </span>
<span class="chat-message-content">{{message}}</span> <span class="chat-msg-content">{{message}}</span>
</div> </div>

4
src/templates/message.html
View File

@ -1,4 +1,4 @@
<div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}" data-msgid="{{msgid}}"> <div class="chat-message {{extra_classes}}" data-isodate="{{isodate}}" data-msgid="{{msgid}}">
<span class="chat-message-{{sender}}">{{time}} {{username}}:&nbsp;</span> <span class="chat-msg-{{sender}}">{{time}} {{username}}:&nbsp;</span>
<span class="chat-message-content">{{message}}</span> <span class="chat-msg-content">{{message}}</span>
</div> </div>