glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

ok the MapChat renders using react...

Browse source
This commit is contained in:
Devin Howard 2016-12-19 00:08:48 -05:00
parent 88419294f1
commit f51a155879
5 changed files with 113 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

178
frontend/src/Metamaps/Views/ChatView.js
View file

@ -10,6 +10,7 @@ import ReactDOM from 'react-dom'
// TODO is this line good or bad // TODO is this line good or bad
// Backbone.$ = window.$ // Backbone.$ = window.$
import Realtime from '../Realtime'
import MapChat from '../../components/MapChat' import MapChat from '../../components/MapChat'
const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false }) const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false })
@ -68,12 +69,12 @@ const ChatView = {
render: () => { render: () => {
const self = ChatView const self = ChatView
ReactDOM.render(React.createElement(MapChat, { ReactDOM.render(React.createElement(MapChat, {
show: self.show, isOpen: self.isOpen,
leaveCall: Realtime.leaveCall(), leaveCall: Realtime.leaveCall,
joinCall: Realtime.joinCall(), joinCall: Realtime.joinCall,
participants: self.participants, participants: self.participants,
unreadMessages: self.unreadMessages unreadMessages: self.unreadMessages
})) }), document.getElementById('chat-box-wrapper'))
}, },
show: () => { show: () => {
ChatView.show = true ChatView.show = true
@ -127,6 +128,26 @@ const ChatView = {
// TODO set textarea to be empty in react // TODO set textarea to be empty in react
$(document).trigger(ChatView.events.message + '-' + this.room, [{ message: text }]) $(document).trigger(ChatView.events.message + '-' + this.room, [{ message: text }])
}, },
leaveConversation: () => {
// TODO refactor
// this.$participants.removeClass('is-participating')
},
mapperJoinedCall: () => {
// TODO refactor
// this.$participants.find('.participant-' + id).addClass('active')
},
mapperLeftCall: () => {
// TODO refactor
// this.$participants.find('.participant-' + id).removeClass('active')
},
invitationPending: () => {
// TODO refactor
// this.$participants.find('.participant-' + id).addClass('pending')
},
invitationAnswered: () => {
// TODO refactor
// this.$participants.find('.participant-' + id).removeClass('pending')
}
} }
var Handlers = { var Handlers = {
@ -163,101 +184,82 @@ var Handlers = {
} }
} }
ChatView.prototype.conversationInProgress = function(participating) { // ChatView.prototype.conversationInProgress = function(participating) {
this.$conversationInProgress.show() // this.$conversationInProgress.show()
this.$participants.addClass('is-live') // this.$participants.addClass('is-live')
if (participating) this.$participants.addClass('is-participating') // if (participating) this.$participants.addClass('is-participating')
this.$button.addClass('active') // this.$button.addClass('active')
} // }
ChatView.prototype.conversationEnded = function() { // ChatView.prototype.conversationEnded = function() {
this.$conversationInProgress.hide() // this.$conversationInProgress.hide()
this.$participants.removeClass('is-live') // this.$participants.removeClass('is-live')
this.$participants.removeClass('is-participating') // this.$participants.removeClass('is-participating')
this.$button.removeClass('active') // this.$button.removeClass('active')
this.$participants.find('.participant').removeClass('active') // this.$participants.find('.participant').removeClass('active')
this.$participants.find('.participant').removeClass('pending') // this.$participants.find('.participant').removeClass('pending')
} // }
ChatView.prototype.leaveConversation = function() {
this.$participants.removeClass('is-participating')
}
ChatView.prototype.mapperJoinedCall = function(id) { // ChatView.prototype.addParticipant = function(participant) {
this.$participants.find('.participant-' + id).addClass('active') // this.participants.add(participant)
} // }
ChatView.prototype.mapperLeftCall = function(id) { // ChatView.prototype.removeParticipant = function(username) {
this.$participants.find('.participant-' + id).removeClass('active') // var p = this.participants.find(p => p.get('username') === username)
} // if (p) {
// this.participants.remove(p)
// }
// }
ChatView.prototype.invitationPending = function(id) { // ChatView.prototype.removeParticipants = function() {
this.$participants.find('.participant-' + id).addClass('pending') // this.participants.remove(this.participants.models)
} // }
ChatView.prototype.invitationAnswered = function(id) { // ChatView.prototype.open = function() {
this.$participants.find('.participant-' + id).removeClass('pending') // this.$container.css({
} // right: '0'
// })
// this.$messageInput.focus()
// this.isOpen = true
// this.unreadMessages = 0
// this.$unread.hide()
// this.scrollMessages(0)
// $(document).trigger(ChatView.events.openTray)
// }
ChatView.prototype.addParticipant = function(participant) { // ChatView.prototype.addMessage = function(message, isInitial, wasMe) {
this.participants.add(participant) // this.messages.add(message)
} // Private.addMessage.call(this, message, isInitial, wasMe)
// }
//
// ChatView.prototype.scrollMessages = function(duration) {
// duration = duration || 0
ChatView.prototype.removeParticipant = function(username) { // this.$messages.animate({
var p = this.participants.find(p => p.get('username') === username) // scrollTop: this.$messages[0].scrollHeight
if (p) { // }, duration)
this.participants.remove(p) // }
}
}
ChatView.prototype.removeParticipants = function() { // ChatView.prototype.clearMessages = function() {
this.participants.remove(this.participants.models) // this.unreadMessages = 0
} // this.$unread.hide()
// this.$messages.empty()
// }
ChatView.prototype.open = function() { // ChatView.prototype.close = function() {
this.$container.css({ // this.$container.css({
right: '0' // right: '-300px'
}) // })
this.$messageInput.focus() // this.$messageInput.blur()
this.isOpen = true // this.isOpen = false
this.unreadMessages = 0 // $(document).trigger(ChatView.events.closeTray)
this.$unread.hide() // }
this.scrollMessages(0)
$(document).trigger(ChatView.events.openTray)
}
ChatView.prototype.addMessage = function(message, isInitial, wasMe) { // ChatView.prototype.remove = function() {
this.messages.add(message) // this.$button.off()
Private.addMessage.call(this, message, isInitial, wasMe) // this.$container.remove()
} // }
ChatView.prototype.scrollMessages = function(duration) {
duration = duration || 0
this.$messages.animate({
scrollTop: this.$messages[0].scrollHeight
}, duration)
}
ChatView.prototype.clearMessages = function() {
this.unreadMessages = 0
this.$unread.hide()
this.$messages.empty()
}
ChatView.prototype.close = function() {
this.$container.css({
right: '-300px'
})
this.$messageInput.blur()
this.isOpen = false
$(document).trigger(ChatView.events.closeTray)
}
ChatView.prototype.remove = function() {
this.$button.off()
this.$container.remove()
}
/** /**
* @class * @class

3
frontend/src/Metamaps/Views/Room.js
View file

@ -26,7 +26,8 @@ const Room = function(opts = {}) {
this.messages = new Backbone.Collection() this.messages = new Backbone.Collection()
this.currentMapper = new Backbone.Model({ name: opts.username, image: opts.image }) this.currentMapper = new Backbone.Model({ name: opts.username, image: opts.image })
this.chat = new ChatView(this.messages, this.currentMapper, this.room, { this.chat = ChatView
this.chat.init(this.messages, this.currentMapper, this.room, {
soundUrls: opts.soundUrls soundUrls: opts.soundUrls
}) })

4
frontend/src/components/MapChat/Participant.js
View file

@ -28,7 +28,7 @@ class Participant extends Component {
} }
} }
ChatView.propTypes = { Participant.propTypes = {
color: PropTypes.string, // css color color: PropTypes.string, // css color
id: PropTypes.number, id: PropTypes.number,
image: PropTypes.string, // image url image: PropTypes.string, // image url
@ -36,4 +36,4 @@ ChatView.propTypes = {
username: PropTypes.string username: PropTypes.string
} }
export default ChatView export default Participant

10
frontend/src/components/MapChat/Unread.js Normal file
View file

@ -0,0 +1,10 @@
import React from 'react'
const Unread = props => {
if (props.count <= 0) {
return null
}
return <div className="chat-unread"></div>
}
export default Unread

15
frontend/src/components/MapChat/index.js
View file

@ -1,8 +1,11 @@
import React, { PropTypes, Component } from 'react' import React, { PropTypes, Component } from 'react'
import Unread from './Unread'
import Participant from './Participant'
import Message from './Message'
class MapChat extends Component { class MapChat extends Component {
render() { render = () => {
const rightOffset = this.props.show ? '-300px' : '0' const rightOffset = this.props.isOpen ? '-300px' : '0'
return ( return (
<div className="chat-box" <div className="chat-box"
style={{ right: rightOffset }} style={{ right: rightOffset }}
@ -13,15 +16,15 @@ class MapChat extends Component {
<div className="cursor-toggle" /> <div className="cursor-toggle" />
</div> </div>
<div className="participants"> <div className="participants">
<div className="conversation-live"> <div className="conversation-live">
LIVE LIVE
<span className="call-action leave" onClick={this.props.leaveCall}> <span className="call-action leave" onClick={this.props.leaveCall}>
LEAVE LEAVE
</span> </span>
<span className="call-action join" onClick={this.props.joinCall}> <span className="call-action join" onClick={this.props.joinCall}>
JOIN JOIN
</span> </span>
</div> </div>
</div> </div>
<div className="chat-header"> <div className="chat-header">
CHAT CHAT
@ -39,7 +42,7 @@ class MapChat extends Component {
} }
MapChat.propTypes = { MapChat.propTypes = {
show: PropTypes.bool, isOpen: PropTypes.bool,
leaveCall: PropTypes.func, leaveCall: PropTypes.func,
joinCall: PropTypes.func, joinCall: PropTypes.func,
participants: PropTypes.arrayOf(PropTypes.shape({ participants: PropTypes.arrayOf(PropTypes.shape({