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>
<div class="chat-message-input" contenteditable="true"></div>
</div>

CSS

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

textarea, 
div { 
border: solid 1px #ccc; padding: 5px; margin: 5px;
}

JavaScript

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


$(function(){

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

             e.preventDefault();
             var text = md.render(this.textContent);
            $(".chat-messages").append('<div class="message">' + text +  "</div>");
            this.innerHTML = "";
            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;
  //  }
  //});
});