You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openmeetings.apache.org by so...@apache.org on 2017/03/30 05:13:05 UTC
svn commit: r1789431 - in /openmeetings/application:
branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/
branches/3.2.x/openmeetings-web/src/main/webapp/css/
trunk/openmeetings-web/src/main/java/org/apache/openmeetings/...
Author: solomax
Date: Thu Mar 30 05:13:05 2017
New Revision: 1789431
URL: http://svn.apache.org/viewvc?rev=1789431&view=rev
Log:
[OPENMEETINGS-1616] chat is fixed to add messages to the bottom
Modified:
openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html
openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js
openmeetings/application/branches/3.2.x/openmeetings-web/src/main/webapp/css/chat.css
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/chat.css
Modified: openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html
URL: http://svn.apache.org/viewvc/openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html?rev=1789431&r1=1789430&r2=1789431&view=diff
==============================================================================
--- openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html (original)
+++ openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html Thu Mar 30 05:13:05 2017
@@ -7,20 +7,20 @@
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
-
+
http://www.apache.org/licenses/LICENSE-2.0
-
+
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-
+
-->
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
- <div id="chat" class="ui-state-default">
+ <div id="chatPopup" class="ui-state-default">
<div onclick="Chat.toggle();" class="control block clickable ui-widget-header ui-state-active"><div class="ui-icon ui-icon-caret-1-n sort-icon"></div><div class="label"><wicket:message key="244"/></div></div>
<div wicket:id="chat"></div>
</div>
Modified: openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js
URL: http://svn.apache.org/viewvc/openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js?rev=1789431&r1=1789430&r2=1789431&view=diff
==============================================================================
--- openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js (original)
+++ openmeetings/application/branches/3.2.x/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js Thu Mar 30 05:13:05 2017
@@ -19,13 +19,12 @@
var Chat = function() {
var chatTabs
, tabTemplate = "<li><a href='#{href}'>#{label}</a></li>"
- , msgTemplate = "<div id='chat-msg-id-#{id}'><img class='profile' src='#{imgSrc}'/><span class='from' data-user-id='#{userId}'>#{from}</span><span class='date align-right'>#{sent}</span>#{msg}</div>"
+ , msgTemplate = "<div class='clear' id='chat-msg-id-#{id}'><img class='profile' src='#{imgSrc}'/><span class='from' data-user-id='#{userId}'>#{from}</span><span class='date align-right'>#{sent}</span>#{msg}</div>"
, acceptTemplate = "<div class='tick om-icon align-right clickable' data-msgid='#{msgid}' data-roomid='#{roomid}' onclick='var e=$(this);chatActivity('accept',e.data(\"roomid\"),e.data(\"msgid\"));e.parent().remove();'></div>"
, infoTemplate = "<div class='user om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);showUserInfo(e.data(\"userId\"));'></div>"
, addTemplate = "<div class='add om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);addContact(e.data(\"userId\"));'></div>"
, messageTemplate = "<div class='new-email om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);privateMessage(e.data(\"userId\"));'></div>"
, inviteTemplate = "<div class='invite om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);inviteUser(e.data(\"userId\"));'></div>"
- , clearBlock = "<div class='clear'></div>"
, closeBlock = "<span class='ui-icon ui-icon-close' role='presentation'></span>"
, closedHeight = "20px"
, openedHeight = "345px"
@@ -90,7 +89,7 @@ var Chat = function() {
$('#chatPanel').resizable({
handles: "n, w"
, disabled: isClosed()
- , alsoResize: "#chat, #chat .ui-tabs .ui-tabs-panel.messageArea"
+ , alsoResize: "#chatPopup, #chat .ui-tabs .ui-tabs-panel.messageArea"
, minHeight: 195
, minWidth: 260
, stop: function(event, ui) {
@@ -139,11 +138,12 @@ var Chat = function() {
, addMessage: function(m) {
if ($('#chat').length > 0 && m && m.type == "chat") {
if (isClosed()) {
- $('#chat .control.block').addClass('ui-state-highlight');
+ $('#chatPopup .control.block').addClass('ui-state-highlight');
audio.play();
}
var msg, cm;
while (!!(cm = m.msg.pop())) {
+ var area = $('#' + cm.scope);
msg = $(msgTemplate.replace(/#\{id\}/g, cm.id)
.replace(/#\{userId\}/g, cm.from.id)
.replace(/#\{imgSrc\}/g, !!cm.from.img ? cm.from.img : './profile/' + cm.from.id + '?anticache=' + Date.now())
@@ -160,30 +160,37 @@ var Chat = function() {
if (cm.needModeration) {
msg.append(acceptTemplate.replace(/#\{msgid\}/g, cm.id).replace(/#\{roomid\}/g, cm.scope.substring(9)));
}
- if (!$('#' + cm.scope).length) {
+ if (!area.length) {
this.addTab(cm.scope, cm.scopeName);
}
if (m.mode == "accept") {
$('#chat-msg-id-' + cm.id).remove();
}
- msg.append(clearBlock);
- $('#' + cm.scope).prepend(msg);
+ var btm = area.scrollTop() + area.innerHeight() >= area[0].scrollHeight;
+ area.append(msg);
+ if (btm) {
+ area.animate({
+ scrollTop: area[0].scrollHeight
+ }, 300);
+ }
}
}
}
, open: function() {
if (isClosed()) {
- $('#chat .control.block .ui-icon').removeClass('ui-icon-caret-1-n').addClass('ui-icon-caret-1-s');
- $('#chat .control.block').removeClass('ui-state-highlight');
- $('#chatPanel, #chat').animate({height: openedHeight}, 1000);
+ $('#chatPopup .control.block .ui-icon').removeClass('ui-icon-caret-1-n').addClass('ui-icon-caret-1-s');
+ $('#chatPopup .control.block').removeClass('ui-state-highlight');
+ $('#chatPanel, #chatPopup').animate({height: openedHeight}, 1000);
$('#chatPanel').resizable("option", "disabled", false);
+ $('#chat .messageArea').each(function(idx) {
+ $(this).scrollTop($(this)[0].scrollHeight);
+ });
}
}
, close: function() {
if (!isClosed()) {
- $('#chat .control.block .ui-icon').removeClass('ui-icon-caret-1-s').addClass('ui-icon-caret-1-n');
- $('#chatPanel').animate({height: closedHeight}, 1000);
- $('#chatPanel, #chat').animate({height: closedHeight}, 1000);
+ $('#chatPopup .control.block .ui-icon').removeClass('ui-icon-caret-1-s').addClass('ui-icon-caret-1-n');
+ $('#chatPanel, #chatPopup').animate({height: closedHeight}, 1000);
$('#chatPanel').resizable("option", "disabled", true);
}
}
Modified: openmeetings/application/branches/3.2.x/openmeetings-web/src/main/webapp/css/chat.css
URL: http://svn.apache.org/viewvc/openmeetings/application/branches/3.2.x/openmeetings-web/src/main/webapp/css/chat.css?rev=1789431&r1=1789430&r2=1789431&view=diff
==============================================================================
--- openmeetings/application/branches/3.2.x/openmeetings-web/src/main/webapp/css/chat.css (original)
+++ openmeetings/application/branches/3.2.x/openmeetings-web/src/main/webapp/css/chat.css Thu Mar 30 05:13:05 2017
@@ -24,10 +24,10 @@
width: 600px;
height: 20px;
}
-#chatPanel #chat {
+#chatPanel #chatPopup {
height: 20px;
}
-##chat .btn-toolbar {
+#chat .btn-toolbar {
margin-top: 2px;
margin-bottom: 0;
margin-left: 5px;
@@ -48,10 +48,10 @@
padding: 2px .5em;
float: left;
}
-#chat .control.block .ui-icon {
+#chatPopup .control.block .ui-icon {
text-align: center;
}
-#chat .control.block .label {
+#chatPopup .control.block .label {
display: inline-block;
padding-left: 20px;
}
@@ -73,7 +73,7 @@
.ui-tabs .ui-tabs-panel.messageArea {
height: 165px;
overflow-y: auto;
- padding: 5px;
+ padding: 0 5px;
}
#chatMessage .wysiwyg-editor {
height: 70px;
Modified: openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html
URL: http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html?rev=1789431&r1=1789430&r2=1789431&view=diff
==============================================================================
--- openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html (original)
+++ openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html Thu Mar 30 05:13:05 2017
@@ -7,20 +7,20 @@
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
-
+
http://www.apache.org/licenses/LICENSE-2.0
-
+
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-
+
-->
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
- <div id="chat" class="ui-state-default">
+ <div id="chatPopup" class="ui-state-default">
<div onclick="Chat.toggle();" class="control block clickable ui-widget-header ui-state-active"><div class="ui-icon ui-icon-caret-1-n sort-icon"></div><div class="label"><wicket:message key="244"/></div></div>
<div wicket:id="chat"></div>
</div>
Modified: openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js
URL: http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js?rev=1789431&r1=1789430&r2=1789431&view=diff
==============================================================================
--- openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js (original)
+++ openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js Thu Mar 30 05:13:05 2017
@@ -19,13 +19,12 @@
var Chat = function() {
var chatTabs
, tabTemplate = "<li><a href='#{href}'>#{label}</a></li>"
- , msgTemplate = "<div id='chat-msg-id-#{id}'><img class='profile' src='#{imgSrc}'/><span class='from' data-user-id='#{userId}'>#{from}</span><span class='date align-right'>#{sent}</span>#{msg}</div>"
+ , msgTemplate = "<div class='clear' id='chat-msg-id-#{id}'><img class='profile' src='#{imgSrc}'/><span class='from' data-user-id='#{userId}'>#{from}</span><span class='date align-right'>#{sent}</span>#{msg}</div>"
, acceptTemplate = "<div class='tick om-icon align-right clickable' data-msgid='#{msgid}' data-roomid='#{roomid}' onclick='var e=$(this);chatActivity('accept',e.data(\"roomid\"),e.data(\"msgid\"));e.parent().remove();'></div>"
, infoTemplate = "<div class='user om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);showUserInfo(e.data(\"userId\"));'></div>"
, addTemplate = "<div class='add om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);addContact(e.data(\"userId\"));'></div>"
, messageTemplate = "<div class='new-email om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);privateMessage(e.data(\"userId\"));'></div>"
, inviteTemplate = "<div class='invite om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);inviteUser(e.data(\"userId\"));'></div>"
- , clearBlock = "<div class='clear'></div>"
, closeBlock = "<span class='ui-icon ui-icon-close' role='presentation'></span>"
, closedHeight = "20px"
, openedHeight = "345px"
@@ -90,7 +89,7 @@ var Chat = function() {
$('#chatPanel').resizable({
handles: "n, w"
, disabled: isClosed()
- , alsoResize: "#chat, #chat .ui-tabs .ui-tabs-panel.messageArea"
+ , alsoResize: "#chatPopup, #chat .ui-tabs .ui-tabs-panel.messageArea"
, minHeight: 195
, minWidth: 260
, stop: function(event, ui) {
@@ -139,11 +138,12 @@ var Chat = function() {
, addMessage: function(m) {
if ($('#chat').length > 0 && m && m.type == "chat") {
if (isClosed()) {
- $('#chat .control.block').addClass('ui-state-highlight');
+ $('#chatPopup .control.block').addClass('ui-state-highlight');
audio.play();
}
var msg, cm;
while (!!(cm = m.msg.pop())) {
+ var area = $('#' + cm.scope);
msg = $(msgTemplate.replace(/#\{id\}/g, cm.id)
.replace(/#\{userId\}/g, cm.from.id)
.replace(/#\{imgSrc\}/g, !!cm.from.img ? cm.from.img : './profile/' + cm.from.id + '?anticache=' + Date.now())
@@ -160,30 +160,37 @@ var Chat = function() {
if (cm.needModeration) {
msg.append(acceptTemplate.replace(/#\{msgid\}/g, cm.id).replace(/#\{roomid\}/g, cm.scope.substring(9)));
}
- if (!$('#' + cm.scope).length) {
+ if (!area.length) {
this.addTab(cm.scope, cm.scopeName);
}
if (m.mode == "accept") {
$('#chat-msg-id-' + cm.id).remove();
}
- msg.append(clearBlock);
- $('#' + cm.scope).prepend(msg);
+ var btm = area.scrollTop() + area.innerHeight() >= area[0].scrollHeight;
+ area.append(msg);
+ if (btm) {
+ area.animate({
+ scrollTop: area[0].scrollHeight
+ }, 300);
+ }
}
}
}
, open: function() {
if (isClosed()) {
- $('#chat .control.block .ui-icon').removeClass('ui-icon-caret-1-n').addClass('ui-icon-caret-1-s');
- $('#chat .control.block').removeClass('ui-state-highlight');
- $('#chatPanel, #chat').animate({height: openedHeight}, 1000);
+ $('#chatPopup .control.block .ui-icon').removeClass('ui-icon-caret-1-n').addClass('ui-icon-caret-1-s');
+ $('#chatPopup .control.block').removeClass('ui-state-highlight');
+ $('#chatPanel, #chatPopup').animate({height: openedHeight}, 1000);
$('#chatPanel').resizable("option", "disabled", false);
+ $('#chat .messageArea').each(function(idx) {
+ $(this).scrollTop($(this)[0].scrollHeight);
+ });
}
}
, close: function() {
if (!isClosed()) {
- $('#chat .control.block .ui-icon').removeClass('ui-icon-caret-1-s').addClass('ui-icon-caret-1-n');
- $('#chatPanel').animate({height: closedHeight}, 1000);
- $('#chatPanel, #chat').animate({height: closedHeight}, 1000);
+ $('#chatPopup .control.block .ui-icon').removeClass('ui-icon-caret-1-s').addClass('ui-icon-caret-1-n');
+ $('#chatPanel, #chatPopup').animate({height: closedHeight}, 1000);
$('#chatPanel').resizable("option", "disabled", true);
}
}
Modified: openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/chat.css
URL: http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/chat.css?rev=1789431&r1=1789430&r2=1789431&view=diff
==============================================================================
--- openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/chat.css (original)
+++ openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/chat.css Thu Mar 30 05:13:05 2017
@@ -24,10 +24,10 @@
width: 600px;
height: 20px;
}
-#chatPanel #chat {
+#chatPanel #chatPopup {
height: 20px;
}
-##chat .btn-toolbar {
+#chat .btn-toolbar {
margin-top: 2px;
margin-bottom: 0;
margin-left: 5px;
@@ -48,10 +48,10 @@
padding: 2px .5em;
float: left;
}
-#chat .control.block .ui-icon {
+#chatPopup .control.block .ui-icon {
text-align: center;
}
-#chat .control.block .label {
+#chatPopup .control.block .label {
display: inline-block;
padding-left: 20px;
}
@@ -73,7 +73,7 @@
.ui-tabs .ui-tabs-panel.messageArea {
height: 165px;
overflow-y: auto;
- padding: 5px;
+ padding: 0 5px;
}
#chatMessage .wysiwyg-editor {
height: 70px;