Merge pull request #4323 from KDSBrowne/x2.0-replace-getElementById-instances

[HTML5] - Replace Instances of getElementById

bigbluebutton-html5/imports/api/1.1/chat/server/methods/sendChat.js

@@ -2,7 +2,6 @@ import { Meteor } from 'meteor/meteor';
 import { check } from 'meteor/check';
 import Logger from '/imports/startup/server/logger';
 import RedisPubSub from '/imports/startup/server/redis';
-import { translateHTML5ToFlash } from '/imports/api/common/server/helpers';
 import RegexWebUrl from '/imports/utils/regex-weburl';
 
 const HTML_SAFE_MAP = {

bigbluebutton-html5/imports/api/common/server/helpers.js

@@ -1,16 +1,3 @@
-import { logger } from '/imports/startup/server/logger';
-import { redisPubSub } from '/imports/startup/server';
-import { BREAK_LINE, CARRIAGE_RETURN, NEW_LINE } from '/imports/utils/lineEndings.js';
-
-export function appendMessageHeader(eventName, messageObj) {
-  let header;
-  header = {
-    timestamp: new Date().getTime(),
-    name: eventName,
-  };
-  messageObj.header = header;
-  return messageObj;
-}
 
 export const indexOf = [].indexOf || function (item) {
   for (let i = 0, l = this.length; i < l; i++) {
@@ -22,19 +9,7 @@ export const indexOf = [].indexOf || function (item) {
   return -1;
 };
 
-export function publish(channel, message) {
-  return redisPubSub.publish(channel, message.header.name, message.payload, message.header);
-}
-
-// translate '\n' newline character and '\r' carriage
-// returns to '<br/>' breakline character for Flash
-export const translateHTML5ToFlash = function (message) {
-  let result = message;
-  result = result.replace(new RegExp(CARRIAGE_RETURN, 'g'), BREAK_LINE);
-  result = result.replace(new RegExp(NEW_LINE, 'g'), BREAK_LINE);
-  return result;
-};
-
+//used in 1.1
 export const inReplyToHTML5Client = function (arg) {
   return arg.routing.userId === 'nodeJSapp';
 };

bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx

@@ -181,6 +181,7 @@ class MessageList extends Component {
               time={message.time}
               chatAreaId={this.props.id}
               lastReadMessageTime={this.props.lastReadMessageTime}
+              scrollArea={this.scrollArea}
             />
           ))}
         </div>

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/component.jsx

@@ -54,19 +54,25 @@ export default class MessageListItem extends Component {
   }
 
   componentDidMount() {
-    const scrollArea = document.getElementById(this.props.chatAreaId);
-    eventsToBeBound.forEach(
-      e => scrollArea.addEventListener(e, this.handleMessageInViewport, false),
-    );
+    const { scrollArea } =  this.props;
+
+    if (scrollArea) {
+      eventsToBeBound.forEach(
+        e => { scrollArea.addEventListener(e, this.handleMessageInViewport, false) },
+      );
+    }
 
     this.handleMessageInViewport();
   }
 
   componentWillUnmount() {
-    const scrollArea = document.getElementById(this.props.chatAreaId);
-    eventsToBeBound.forEach(
-      e => scrollArea.removeEventListener(e, this.handleMessageInViewport, false),
-    );
+    const { scrollArea } = this.props;
+
+    if (scrollArea) {
+      eventsToBeBound.forEach(
+        e => { scrollArea.removeEventListener(e, this.handleMessageInViewport, false) },
+      );
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -158,6 +164,7 @@ export default class MessageListItem extends Component {
                   chatAreaId={this.props.chatAreaId}
                   lastReadMessageTime={this.props.lastReadMessageTime}
                   handleReadMessage={this.props.handleReadMessage}
+                  scrollArea={this.props.scrollArea}
                 />
               ))}
             </div>

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/message/component.jsx

@@ -41,7 +41,7 @@ export default class MessageListItem extends Component {
     if (!this.ticking) {
       window.requestAnimationFrame(() => {
         const node = this.text;
-        const scrollArea = document.getElementById(this.props.chatAreaId);
+        const { scrollArea } = this.props;
 
         if (isElementInViewport(node)) {
           this.props.handleReadMessage(this.props.time);
@@ -63,14 +63,16 @@ export default class MessageListItem extends Component {
     }
 
     const node = this.text;
+    const { scrollArea } = this.props;
 
     if (isElementInViewport(node)) {
       this.props.handleReadMessage(this.props.time);
     } else {
-      const scrollArea = document.getElementById(this.props.chatAreaId);
-      eventsToBeBound.forEach(
-        e => scrollArea.addEventListener(e, this.handleMessageInViewport, false),
-      );
+      if (scrollArea){
+        eventsToBeBound.forEach(
+          e => { scrollArea.addEventListener(e, this.handleMessageInViewport, false) },
+        );
+      }  
     }
   }
 
@@ -79,10 +81,14 @@ export default class MessageListItem extends Component {
       return;
     }
 
-    const scrollArea = document.getElementById(this.props.chatAreaId);
-    eventsToBeBound.forEach(
-      e => scrollArea.removeEventListener(e, this.handleMessageInViewport, false),
-    );
+    const { scrollArea } = this.props;
+
+    if (scrollArea) {
+      eventsToBeBound.forEach(
+        e => { scrollArea.removeEventListener(e, this.handleMessageInViewport, false) },
+      );
+    }
+    
   }
 
   render() {