moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-25 18:52:20 -05:00
Code Issues Releases Wiki Activity

Make MUCs look nicer

Browse Source
This commit is contained in:
Lance Stout 2013-12-13 16:16:40 -08:00
parent 4f63da4d20
commit 2ca32ca3bd
13 changed files with 181 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
clientapp/models/message.js
View File

@ -23,9 +23,9 @@ module.exports = HumanModel.define({
},
derived: {
mine: {
deps: ['from'],
deps: ['from', '_mucMine'],
fn: function () {
return me.isMe(this.from);
return this._mucMine || me.isMe(this.from);
}
},
sender: {
@ -81,16 +81,12 @@ module.exports = HumanModel.define({
nick: {
deps: ['mine', 'type'],
fn: function () {
if (this.mine) {
if (this.type === 'groupchat') {
return me.mucs.get(this.to.bare).nick;
} else {
return 'me';
}
}
if (this.type === 'groupchat') {
return this.from.resource;
}
if (this.mine) {
return 'me';
}
return me.getContact(this.from.bare).displayName;
}
},
@ -104,12 +100,20 @@ module.exports = HumanModel.define({
deps: ['edited', 'pending', 'body'],
cache: false,
fn: function () {
return templates.includes.bareMessage({message: this});
if (this.type === 'groupchat') {
return templates.includes.mucBareMessage({message: this});
} else {
return templates.includes.bareMessage({message: this});
}
}
},
templateHtml: {
fn: function () {
return templates.includes.wrappedMessage({message: this});
if (this.type === 'groupchat') {
return templates.includes.mucWrappedMessage({message: this});
} else {
return templates.includes.wrappedMessage({message: this});
}
}
},
classList: {
@ -128,6 +132,7 @@ module.exports = HumanModel.define({
},
session: {
_created: 'date',
_mucMine: 'bool',
receiptReceived: ['bool', true, false],
edited: ['bool', true, false],
delay: 'object'
@ -160,6 +165,10 @@ module.exports = HumanModel.define({
app.storage.archive.add(data);
},
shouldGroupWith: function (previous) {
return previous && previous.from.bare === this.from.bare;
if (this.type === 'groupchat') {
return previous && previous.from.full === this.from.full;
} else {
return previous && previous.from.bare === this.from.bare;
}
}
});

11
clientapp/models/muc.js
View File

@ -61,17 +61,24 @@ module.exports = HumanModel.define({
addMessage: function (message, notify) {
message.owner = me.jid.bare;
if (notify && (!this.activeContact || (this.activeContact && !app.hasFocus))) {
if (notify && (!this.activeContact || (this.activeContact && !app.state.focused)) && message.from.resource !== this.nick) {
this.unreadCount++;
app.notifications.create(this.displayName, {
body: message.body,
icon: this.avatar,
tag: this.id,
onclick: _.bind(app.navigate, app, '/chat/' + this.jid)
onclick: _.bind(app.navigate, app, '/groupchat/' + this.jid)
});
}
message.acked = true;
this.messages.add(message);
if (message.from.resource === this.nick) {
message = this.messages.get(message.id); // Grab the existing message object that was updated
message._mucMine = true;
this.lastSentMessage = message;
}
var newInteraction = new Date(message.created);
if (!this.lastInteraction || this.lastInteraction < newInteraction) {

76
clientapp/pages/groupchat.js
View File

@ -1,16 +1,27 @@
/*global $, app, me, client*/
"use strict";
var _ = require('underscore');
var BasePage = require('./base');
var templates = require('../templates');
var Message = require('../views/mucMessage');
var MessageModel = require('../models/message');
var chatHelpers = require('../helpers/chatHelpers');
module.exports = BasePage.extend({
module.exports = BasePage.extend(chatHelpers).extend({
template: templates.pages.groupchat,
initialize: function (spec) {
this.editMode = false;
this.listenTo(this, 'pageloaded', this.handlePageLoaded);
this.listenTo(this, 'pageunloaded', this.handlePageUnloaded);
this.listenTo(this.model.messages, 'change:body', this.refreshModel);
this.listenTo(this.model.messages, 'change:edited', this.refreshModel);
this.listenTo(this.model.messages, 'change:pending', this.refreshModel);
this.listenTo(this.model.messages, 'change:mine', this.refreshModel);
this.render();
},
events: {
@ -42,14 +53,51 @@ module.exports = BasePage.extend({
});
},
render: function () {
if (this.rendered) return this;
this.rendered = true;
this.renderAndBind();
this.typingTimer = null;
this.$chatInput = this.$('.chatBox textarea');
this.$chatBox = this.$('.chatBox');
this.$messageList = this.$('.messages');
this.renderCollection(this.model.messages, Message, this.$('.messages'));
this.$scrollContainer = this.$messageList;
this.listenTo(this.model.messages, 'add', this.handleChatAdded);
this.renderCollection();
$(window).on('resize', _.bind(this.handleWindowResize, this));
this.initializeScroll();
this.registerBindings();
return this;
},
renderCollection: function () {
var self = this;
var previous;
var bottom = this.isBottom() || this.$messageList.is(':empty');
this.model.messages.each(function (model, i) {
self.appendModel(model);
});
this.scrollIfPinned();
},
handleChatAdded: function (model) {
this.appendModel(model, true);
},
handlePageLoaded: function () {
this.scrollPageLoad();
this.handleWindowResize();
},
handlePageUnloaded: function () {
this.scrollPageUnload();
},
handleWindowResize: function () {
this.scrollIfPinned();
this.resizeInput();
},
handleKeyDown: function (e) {
clearTimeout(this.typingTimer);
if (e.which === 13 && !e.shiftKey) {
@ -140,7 +188,7 @@ module.exports = BasePage.extend({
var id = client.sendMessage(message);
message.id = id;
message.from = me.jid;
message.from = client.JID(this.model.jid.bare + '/' + this.model.nick);
if (this.editMode) {
this.model.lastSentMessage.correct(message);
@ -161,5 +209,27 @@ module.exports = BasePage.extend({
},
handleLeave: function () {
this.model.leave();
},
appendModel: function (model, preload) {
var self = this;
var isGrouped = model.shouldGroupWith(this.lastModel);
var newEl, first, last;
if (isGrouped) {
newEl = $(model.partialTemplateHtml);
last = this.$messageList.find('li').last();
last.find('.messageWrapper').append(newEl);
last.addClass('chatGroup');
} else {
newEl = $(model.templateHtml);
this.$messageList.append(newEl);
}
this.lastModel = model;
this.scrollIfPinned();
},
refreshModel: function (model) {
var existing = this.$('#chat' + model.cid);
existing.replaceWith(model.partialTemplateHtml);
}
});

31
clientapp/templates.js
View File

@ -101,6 +101,21 @@ exports.includes.messageGroup = function anonymous(locals) {
return buf.join("");
};
// mucBareMessage.jade compiled template
exports.includes.mucBareMessage = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push("<div" + jade.attrs({
id: "chat" + message.cid,
"class": "message" + " " + message.classList
}, {
"class": true,
id: true
}) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p></div>");
}
return buf.join("");
};
// mucListItem.jade compiled template
exports.includes.mucListItem = function anonymous(locals) {
var buf = [];
@ -115,11 +130,17 @@ exports.includes.mucListItem = function anonymous(locals) {
return buf.join("");
};
// mucMessage.jade compiled template
exports.includes.mucMessage = function anonymous(locals) {
// mucWrappedMessage.jade compiled template
exports.includes.mucWrappedMessage = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push('<li><div class="message"><span class="timestamp">' + jade.escape(null == (jade.interp = message.created) ? "" : jade.interp) + '</span><p class="body">' + jade.escape(null == (jade.interp = message.body) ? "" : jade.interp) + '</p><span class="sender">' + jade.escape(null == (jade.interp = message.nick) ? "" : jade.interp) + "</span></div></li>");
buf.push('<li><div class="sender"><div class="name">' + jade.escape(null == (jade.interp = message.from.resource) ? "" : jade.interp) + '</div><a href="#" class="messageAvatar"><!--img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")--></a></div><div class="messageWrapper"><div' + jade.attrs({
id: "chat" + message.cid,
"class": "message" + " " + message.classList
}, {
"class": true,
id: true
}) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p></div></div></li>");
}
return buf.join("");
};
@ -128,7 +149,7 @@ exports.includes.mucMessage = function anonymous(locals) {
exports.includes.wrappedMessage = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push('<li><a href="#" class="messageAvatar"><img' + jade.attrs({
buf.push('<li><div class="sender"><a href="#" class="messageAvatar"><img' + jade.attrs({
src: message.sender.avatar,
alt: message.sender.displayName,
"data-placement": "below"
@ -136,7 +157,7 @@ exports.includes.wrappedMessage = function anonymous(locals) {
src: true,
alt: true,
"data-placement": true
}) + '/><span class="name">' + jade.escape(null == (jade.interp = message.sender.displayName + ": &nbsp;") ? "" : jade.interp) + '</span></a><div class="messageWrapper"><div' + jade.attrs({
}) + '/></a></div><div class="messageWrapper"><div' + jade.attrs({
id: "chat" + message.cid,
"class": "message" + " " + message.classList
}, {

3
clientapp/templates/includes/mucBareMessage.jade Normal file
View File

@ -0,0 +1,3 @@
.message(id='chat'+message.cid, class=message.classList)
span.timestamp=message.formattedTime
p.body !{message.processedBody}

5
clientapp/templates/includes/mucMessage.jade
View File

@ -1,5 +0,0 @@
li
.message
span.timestamp=message.created
p.body=message.body
span.sender=message.nick

7
clientapp/templates/includes/mucWrappedMessage.jade Normal file
View File

@ -0,0 +1,7 @@
li
.sender
.name=message.from.resource
a.messageAvatar(href='#')
//img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
.messageWrapper
include mucBareMessage

6
clientapp/templates/includes/wrappedMessage.jade
View File

@ -1,6 +1,6 @@
li
a.messageAvatar(href='#')
img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
span.name=message.sender.displayName + ": &nbsp;"
.sender
a.messageAvatar(href='#')
img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
.messageWrapper
include bareMessage

2
package.json
View File

@ -23,7 +23,7 @@
"templatizer": "0.1.2",
"underscore": "1.5.1",
"raf-component": "1.1.1",
"stanza.io": "2.8.1",
"stanza.io": "2.9.0",
"notify.js": "0.0.3",
"wildemitter": "0.0.5",
"attachmediastream": "1.0.1",

22
public/css/otalk.css
View File

@ -990,6 +990,7 @@ button.secondary:hover:not(:disabled) {
position: relative;
bottom: 75px;
width: 100%;
display: table;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@ -1006,15 +1007,13 @@ button.secondary:hover:not(:disabled) {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #eee;
display: table-row;
}
.messages li:last-of-type {
border: none;
}
.messages li .messageAvatar {
position: absolute;
top: 50%;
left: 10px;
margin-top: -15px;
display: inline-block;
}
.messages li .messageAvatar img {
width: 30px;
@ -1031,10 +1030,25 @@ button.secondary:hover:not(:disabled) {
position: absolute;
width: 1px;
}
.messages .sender {
display: table-cell;
font-size: 12px;
font-weight: bold;
color: #565656;
padding: 10px;
text-align: right;
background-color: #f7f7f7;
border-top: 1px solid #e1e1e1;
}
.messages .sender .name {
padding-left: 10px;
}
.messages .messageWrapper {
padding-left: 50px;
display: table-cell;
vertical-align: middle;
padding: 10px;
border-top: 1px solid #eee;
}
.messages .message {
font-size: 12px;

22
public/css/pages/chat.styl
View File

@ -108,6 +108,7 @@
position: relative
bottom: 75px
width: 100%
display: table
borderbox()
li
@ -120,15 +121,13 @@
display: table
borderbox()
border-bottom: 1px solid $gray-lighter
display: table-row
&:last-of-type
border: none
.messageAvatar
position: absolute
top: 50%
left: 10px
margin-top: -15px
display: inline-block
img
avatar()
@ -138,10 +137,25 @@
position: absolute
width: 1px
.sender
display: table-cell
font-size: 12px
font-weight: bold
color: $gray
padding: 10px
text-align: right
background-color: #f7f7f7
border-top: 1px solid #e1e1e1
.name
padding-left: 10px
.messageWrapper
padding-left: 50px
display: table-cell
vertical-align: middle
padding: 10px
border-top: 1px solid #eee
.message
font-size: $font-size-small

2
public/x-manifest.cache
View File

@ -1,5 +1,5 @@
CACHE MANIFEST
# 0.0.1 1384923017253
# 0.0.1 1386980007554
CACHE:
/app.js