Chat system frontend

a markdown chatter

by Brenton Strine

HTML

<script src="https://cdn.jsdelivr.net/markdown-it/7.0.1/markdown-it.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="chat">
<div class="chat-messages"></div>
<textarea class="chat-message-input"></textarea>
</div>

CSS

.chat-messages { height: 200px; 
overflow: scroll;}

textarea, 
.chat-messages { 
border: solid 1px #ccc; padding: 5px; margin: 5px;
}

.chat-messages {
  background-color: #fff;
}

textarea {
  width: calc(100% - 20px);
  height: 3em;
}

.message { padding-left: 40px;}
.message p {
  margin: 0 0 .5em 0;
}
.avatar { margin-left: -35px; margin-bottom: calc(-30px - 3px);
width: 30px; height: 30px; background-color: blue;
}
.name { font-weight: bold;}
.timestamp { text-decoration: italic; }

img { width: 100%;}

JavaScript

console.clear();
var md = window.markdownit({
  breaks:       true,
  langPrefix:   'language-',
  linkify:      true,
  typographer:  false
});
var result = md.render('# markdown-it rulezz!');
/*$.get( gravatarUrl, function( data ) {
  console.log(data);
});*/


$(function(){

$(".chat").on("keydown", ".chat-message-input", function(e){
        if (e.keyCode == 13) {
          if (e.shiftKey !== true) {

             e.preventDefault();
             var text = md.render(this.value);
            $(".chat-messages").append('<div class="message"><div class="avatar"><img src="'+gravatarUrl+'"/></div><div class="meta"><span class="name">Brenton</span><span class="timestamp">12:00pm</span></div>' + text +  "</div>");
            this.value = "";
            chatScrollDown();
          }
        }
    });
    

  function chatScrollDown(){
     // if(!scrolled){
          var $chatContainer = $(".chat-messages");
          $chatContainer.scrollTop($chatContainer[0].scrollHeight);
      //}
  }

  //var scrolled = false;
  //$(".chat-messages").on('scroll', function(e){
  //  var scrolledPosition = this.scrollTop + $(this).innerHeight();
  //  var scrollableHeight = this.scrollHeight;
  //  console.log(scrolledPosition, scrollableHeight);
  //  if( scrolledPosition === scrollableHeight ){
  //      scrolled = false;
  //  } else {
  //      scrolled = true;
  //  }
  //});
});

// ------------------------------------------------------------------------
// ------------------------------------------------------------------------
// MD5 ALgorithm from http://www.myersdaily.org/joseph/javascript/md5.js
// ------------------------------------------------------------------------
// ------------------------------------------------------------------------
var MD5 = function (string) {

   function RotateLeft(lValue, iShiftBits) {
           return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
   }

   function AddUnsigned(lX,lY) {
           var lX4,lY4,lX8,lY8,lResult;
  ...