You can now change the font size of messages in the options bar
This commit is contained in:
perroned
parent
3c41b62492
commit
bd829c312f
@ -89,6 +89,9 @@ Handlebars.registerHelper "isUserMuted", (u) ->
|
||||
user.user.voiceUser?.muted
|
||||
else return false
|
||||
|
||||
Handlebars.registerHelper "messageFontSize", ->
|
||||
style: "font-size: #{getInSession("messageFontSize")}px;"
|
||||
|
||||
Handlebars.registerHelper "setInSession", (k, v) -> SessionAmplify.set k, v
|
||||
|
||||
Handlebars.registerHelper "visibility", (section) ->
|
||||
@ -122,6 +125,7 @@ Meteor.methods
|
||||
setInSession("bbbServerVersion", "0.90")
|
||||
setInSession("userName", null)
|
||||
setInSession("validUser", true) # got info from server, user is a valid user
|
||||
setInSession "messageFontSize", 14
|
||||
|
||||
@toggleCam = (event) ->
|
||||
# Meteor.Users.update {_id: context._id} , {$set:{"user.sharingVideo": !context.sharingVideo}}
|
||||
|
||||
@ -37,46 +37,46 @@ Template.chatInput.rendered = ->
|
||||
$('button[rel=tooltip]').tooltip()
|
||||
|
||||
Template.chatbar.helpers
|
||||
getChatGreeting: ->
|
||||
greeting =
|
||||
"<div class='chatGreeting'>
|
||||
<p>Welcome to #{getMeetingName()}!</p>
|
||||
<p>For help on using BigBlueButton see these (short) <a href='http://www.bigbluebutton.org/videos/' target='_blank'>tutorial videos</a>.</p>
|
||||
<p>To join the audio bridge click the headset icon (upper-left hand corner). Use a headset to avoid causing background noise for others.</p>
|
||||
<br/>
|
||||
<p>This server is running BigBlueButton #{getInSession 'bbbServerVersion'}.</p>
|
||||
</div>"
|
||||
getChatGreeting: ->
|
||||
greeting =
|
||||
"<div class='chatGreeting'>
|
||||
<p>Welcome to #{getMeetingName()}!</p>
|
||||
<p>For help on using BigBlueButton see these (short) <a href='http://www.bigbluebutton.org/videos/' target='_blank'>tutorial videos</a>.</p>
|
||||
<p>To join the audio bridge click the headset icon (upper-left hand corner). Use a headset to avoid causing background noise for others.</p>
|
||||
<br/>
|
||||
<p>This server is running BigBlueButton #{getInSession 'bbbServerVersion'}.</p>
|
||||
</div>"
|
||||
|
||||
# This method returns all messages for the user. It looks at the session to determine whether the user is in
|
||||
#private or public chat. If true is passed, messages returned are from before the user joined. Else, the messages are from after the user joined
|
||||
getFormattedMessagesForChat: () ->
|
||||
friend = chattingWith = getInSession('inChatWith') # the recipient(s) of the messages
|
||||
after = before = greeting = []
|
||||
# This method returns all messages for the user. It looks at the session to determine whether the user is in
|
||||
#private or public chat. If true is passed, messages returned are from before the user joined. Else, the messages are from after the user joined
|
||||
getFormattedMessagesForChat: () ->
|
||||
friend = chattingWith = getInSession('inChatWith') # the recipient(s) of the messages
|
||||
after = before = greeting = []
|
||||
|
||||
if chattingWith is 'PUBLIC_CHAT' # find all public messages
|
||||
before = Meteor.Chat.find({'message.chat_type': chattingWith, 'message.from_time': {$lt: String(getInSession("joinedAt"))}}).fetch()
|
||||
after = Meteor.Chat.find({'message.chat_type': chattingWith, 'message.from_time': {$gt: String(getInSession("joinedAt"))}}).fetch()
|
||||
if chattingWith is 'PUBLIC_CHAT' # find all public messages
|
||||
before = Meteor.Chat.find({'message.chat_type': chattingWith, 'message.from_time': {$lt: String(getInSession("joinedAt"))}}).fetch()
|
||||
after = Meteor.Chat.find({'message.chat_type': chattingWith, 'message.from_time': {$gt: String(getInSession("joinedAt"))}}).fetch()
|
||||
|
||||
greeting = [
|
||||
'class': 'chatGreeting',
|
||||
'message':
|
||||
'message': Template.chatbar.getChatGreeting(),
|
||||
'from_username': 'System',
|
||||
'from_time': getTime()
|
||||
]
|
||||
else
|
||||
me = getInSession("userId")
|
||||
after = Meteor.Chat.find({ # find all messages between current user and recipient
|
||||
'message.chat_type': 'PRIVATE_CHAT',
|
||||
$or: [{'message.from_userid': me, 'message.to_userid': friend},{'message.from_userid': friend, 'message.to_userid': me}]
|
||||
}).fetch()
|
||||
greeting = [
|
||||
'class': 'chatGreeting',
|
||||
'message':
|
||||
'message': Template.chatbar.getChatGreeting(),
|
||||
'from_username': 'System',
|
||||
'from_time': getTime()
|
||||
]
|
||||
else
|
||||
me = getInSession("userId")
|
||||
after = Meteor.Chat.find({ # find all messages between current user and recipient
|
||||
'message.chat_type': 'PRIVATE_CHAT',
|
||||
$or: [{'message.from_userid': me, 'message.to_userid': friend},{'message.from_userid': friend, 'message.to_userid': me}]
|
||||
}).fetch()
|
||||
|
||||
messages = (before.concat greeting).concat after
|
||||
###
|
||||
# Now after all messages + the greeting have been inserted into our collection, what we have to do is go through all messages
|
||||
# and modify them to join all sequential messages by users together so each entries will be chat messages by a user in the same time frame
|
||||
# we can use a time frame, so join messages together that are within 5 minutes of eachother, for example
|
||||
###
|
||||
messages = (before.concat greeting).concat after
|
||||
###
|
||||
# Now after all messages + the greeting have been inserted into our collection, what we have to do is go through all messages
|
||||
# and modify them to join all sequential messages by users together so each entries will be chat messages by a user in the same time frame
|
||||
# we can use a time frame, so join messages together that are within 5 minutes of eachother, for example
|
||||
###
|
||||
|
||||
Template.message.rendered = -> # When a message has been added and finished rendering, scroll to the bottom of the chat
|
||||
$('#chatbody').scrollTop($('#chatbody')[0].scrollHeight)
|
||||
@ -104,6 +104,13 @@ Template.optionsBar.events
|
||||
Template.optionsBar.rendered = ->
|
||||
$('div[rel=tooltip]').tooltip()
|
||||
|
||||
Template.optionsFontSize.events
|
||||
"click .fontSizeSelector": (event) ->
|
||||
selectedFontSize = parseInt(event.target.id)
|
||||
if selectedFontSize
|
||||
setInSession "messageFontSize", selectedFontSize
|
||||
else setInSession "messageFontSize", 12
|
||||
|
||||
Template.tabButtons.events
|
||||
'click .close': (event) -> # user closes private chat
|
||||
setInSession 'inChatWith', 'PUBLIC_CHAT'
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div id="chatbody">
|
||||
<ul class="chat">
|
||||
{{#each getFormattedMessagesForChat}}
|
||||
<li>{{> message}}</li>
|
||||
<li {{messageFontSize}}>{{> message}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
@ -28,6 +28,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="chatOptions">
|
||||
<p>Chat Options:</p>
|
||||
{{> optionsFontSize}}
|
||||
</template>
|
||||
|
||||
<!-- Displays and styles an individual message in the chat -->
|
||||
<template name="message">
|
||||
<strong>{{message.from_username}}</strong>
|
||||
@ -37,23 +42,46 @@
|
||||
|
||||
<!-- Displays the list of options available -->
|
||||
<template name="optionsBar">
|
||||
<p> Select a person to chat with privately</p>
|
||||
<div class="private-chat-user-box">
|
||||
{{#Layout template="scrollWindow" id="privateChatUserScrollWindow"}}
|
||||
{{#contentFor region="scrollContents"}}
|
||||
<table class="table table-hover">
|
||||
<tbody class="private-chat-user-list">
|
||||
{{#each getUsersInMeeting}}
|
||||
<tr class="private-chat-user-entry">
|
||||
{{#unless isCurrentUser userId}}
|
||||
{{user.name}}
|
||||
{{/unless}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{/contentFor}}
|
||||
{{/Layout}}
|
||||
<div class="optionsBar">
|
||||
<p>Select a person to chat with privately</p>
|
||||
<div class="private-chat-user-box" rel="tooltip" data-placement="top" title="Select a participant to open a private chat">
|
||||
{{#Layout template="scrollWindow" id="privateChatUserScrollWindow"}}
|
||||
{{#contentFor region="scrollContents"}}
|
||||
<table class="table table-hover">
|
||||
<tbody class="private-chat-user-list">
|
||||
{{#each getUsersInMeeting}}
|
||||
<tr class="private-chat-user-entry">
|
||||
{{#unless isCurrentUser userId}}
|
||||
{{user.name}}
|
||||
{{/unless}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{/contentFor}}
|
||||
{{/Layout}}
|
||||
</div>
|
||||
<br/>
|
||||
{{> chatOptions}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="optionsFontSize">
|
||||
<div class="dropdown" style="float:left">
|
||||
<span {{messageFontSize}}>Chat Message Font Size: </span>
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
||||
Font Size
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="height:80px; overflow-y:scroll; right:0px;">
|
||||
<li role="presentation"><a class="fontSizeSelector" id="8" role="menuitem" tabindex="-1" href="#">8</a></li>
|
||||
<li role="presentation"><a class="fontSizeSelector" id="10" role="menuitem" tabindex="-1" href="#">10</a></li>
|
||||
<li role="presentation"><a class="fontSizeSelector" id="12" role="menuitem" tabindex="-1" href="#">12</a></li>
|
||||
<li role="presentation"><a class="fontSizeSelector" id="14" role="menuitem" tabindex="-1" href="#">14</a></li>
|
||||
<li role="presentation"><a class="fontSizeSelector" id="16" role="menuitem" tabindex="-1" href="#">16</a></li>
|
||||
<li role="presentation"><a class="fontSizeSelector" id="18" role="menuitem" tabindex="-1" href="#">18</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user