add emoji picker, sidebarHandlers.js, client.js refactoring, update s…

…creenshot

public/css/style.css

@@ -124,6 +124,7 @@ input, textarea, button {
 .sidebar-user {
   color: #fff;
   padding: 2px 10px 2px 10px;
+  cursor: pointer;
 }
 
 .sidebar-users-title {
@@ -237,11 +238,20 @@ input, textarea, button {
   position: relative;
 }
 
-.main-input input {
+.main-input input#user-message {
   resize: none;
   box-sizing: border-box;
   width: 100%;
   padding: 10px;
+  transition: 0.1s background-color;
+  box-shadow: none;
+  border: 1px solid #aaa;
+  padding-right: 40px;
+}
+
+.main-input input#user-message.highlighted {
+  background-color: #eee;
+  background-color: #fafafa;
 }
 
 .modal-overlay {
@@ -283,6 +293,7 @@ input, textarea, button {
 .modal-text {
   text-align: center;
   font-size: 22px;
+  margin: 5px 0;
 }
 
 
@@ -344,6 +355,33 @@ input, textarea, button {
 }
 
 
+.emoji-picker {
+  position: absolute;
+  bottom: 8px;
+  right: 7px;
+  font-size: 24px;
+}
+
+.emoji-picker-button {
+  cursor: pointer;
+}
+
+.emoji-picker-list {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  width: 146px;
+  right: -6px;
+  background-color: #fff;
+  padding: 10px;
+  outline: 1px solid #ccc;
+  margin-bottom: 5px;
+}
+
+.emoji-picker-list span {
+  cursor: pointer;
+}
+
 /* @userMention library styling */
 .tribute-container {
   position: absolute;

public/index.html

@@ -43,6 +43,25 @@
       <div class="main-input">
         <form action="">
           <input id="user-message" type="text" placeholder="your message">
+          <div class="emoji-picker">
+            <div class="emoji-picker-button">😊</div>
+            <div class="emoji-picker-list">
+              <span>👌</span>
+              <span>😂</span>
+              <span>💩</span>
+              <span>😊</span>
+              <span>😀</span>
+              <span>😗</span>
+              <span>😛</span>
+              <span>😑</span>
+              <span>😮</span>
+              <span>😟</span>
+              <span>😯</span>
+              <span>😕</span>
+              <span>😴</span>
+              <span>😍</span>
+            </div>
+          </div>
         </form>
       </div>
     </div>

public/js/client.js

@@ -7,6 +7,10 @@ var renderMessages = require('./renderHtml.js').renderMessages;
 var renderSidebarUsers = require('./renderHtml.js').renderSidebarUsers;
 var renderCurrentUser = require('./renderHtml.js').renderCurrentUser;
 var userMentions = require('./userMentions.js');
+var emojiHandlers = require('./emojiHandlers.js');
+var sidebarHandlers = require('./sidebarHandlers.js');
+var modalHandlers = require('./modalHandlers.js');
+
 var currentUser = {};
 
 var socket = io();
@@ -53,7 +57,6 @@ socket.on('user list', function(obj) {
   userMentions.updateUserList(obj.users, currentUser);
 });
 
-
 socket.on('welcome modal', function(username) {
   $('.modal-subtitle-name').text(username);
   $('.modal-overlay').show();
@@ -66,7 +69,6 @@ $('form').on('submit', function(){
   var tooManyCharacters = inputValue.length > 1000;
   var userMentions = inputValue.match(/(?:^|\s|$)@([[a-z0-9_-]+]*)/gi);
 
-
   if (inputIsEmpty) return false;
 
   if (tooManyCharacters) {
@@ -78,19 +80,4 @@ $('form').on('submit', function(){
   input.val('');
 
   return false;
-});
-
-$('.modal-button .button-close').on('click', function() {
-  $('.modal-overlay').hide();
-});
-
-var toggleSidebar = function() {
-  var sidebarToggle = $('.sidebar-toggle');
-  var sidebar = $('.sidebar');
-
-  sidebarToggle.on('click', function() {
-    sidebar.toggleClass('sidebar--visible');
-  });
-};
-
-toggleSidebar();
+});

public/js/emojiHandlers.js

@@ -0,0 +1,27 @@
+var $ = require('jquery');
+var highlightInput = require('./utils/highlightInput.js');
+
+var emojiPicker = function() {
+  var pickerButton = $('.emoji-picker-button');
+  var pickerList = $('.emoji-picker-list');
+  var userMessageInput = $('#user-message');
+
+  pickerButton.on('click', function() {
+    pickerList.toggle();
+  });
+
+  pickerList.on('click', 'span', function() {
+    var pickedEmoji = $(this).text();
+    userMessageInput.val(userMessageInput.val() + pickedEmoji);
+
+    highlightInput(userMessageInput[0]);
+    userMessageInput.focus();
+  });
+
+  // prevent text selection on doubleclick
+  $('.emoji-picker-list span, .emoji-picker-button').on('mousedown', function(e) {
+    e.preventDefault();
+  });
+};
+
+module.exports = emojiPicker();

public/js/modalHandlers.js

@@ -0,0 +1,9 @@
+var $ = require('jquery');
+
+var modalHandlers = function() {
+  $('.modal-button .button-close').on('click', function() {
+    $('.modal-overlay').hide();
+  });
+};
+
+module.exports = modalHandlers();

public/js/renderHtml.test.js

@@ -6,13 +6,10 @@ const window = new JSDOM(html).window;
 
 const $ = require('jquery')(window);
 const proxyquire = require('proxyquire').noCallThru();
+const soundOfMessageStub = {play: ()=> null};
 
-// const { SocketIO, MockServer } = require('mock-socket');
-// io = SocketIO;
-// var soundOfMessage = {play: ()=> null};
-var soundOfMessage = '';
-var renderHtml = proxyquire('./renderHtml.js', {'jquery': $, './soundOfMessage.js': soundOfMessage});
-var renderMessages = renderHtml.renderMessages;
+const renderHtml = proxyquire('./renderHtml.js', {'jquery': $, './soundOfMessage.js': soundOfMessageStub});
+const renderMessages = renderHtml.renderMessages;
 
 
 
@@ -24,15 +21,15 @@ test('render html', function(t) {
       text: 'Hello'
     };
 
-    t.equal($('.main-message-text').text(), '', 'No text before rendering');
+    t.equal($('.main-message-text').text(), '', 'no text before rendering');
     renderMessages(dataObj);
-    t.equal($('.main-message-text').text(), 'Hello', 'Text after rendering');
+    t.equal($('.main-message-text').text(), 'Hello', 'text after rendering');
 
     $('.main-messages').html('');
     t.end();
   });
 
-  t.test('renderMessages - one message', function(t) {
+  t.test('renderMessages - 1 message', function(t) {
     var dataObj = {
       name: 'Bob',
       text: 'Hello'
@@ -46,7 +43,7 @@ test('render html', function(t) {
     t.end();
   });
 
-  t.test('renderMessages - three message', function(t) {
+  t.test('renderMessages - 3 messages', function(t) {
     var dataObj = [
       '{"name": "Bob", "text": "Hello"}',
       '{"name": "Rob", "text": "Hewwo"}',

public/js/sidebarHandlers.js

@@ -0,0 +1,31 @@
+var $ = require('jquery');
+var highlightInput = require('./utils/highlightInput.js');
+
+var sidebarHandlers = function() {
+
+  var addSidebarUserToInput = function() {
+    $('.sidebar-users-items').on('click', '.sidebar-user', function() {
+      var userMessageInput = $('#user-message');
+      var userName = $(this).text();
+
+      userMessageInput.val(userMessageInput.val() + '@' + userName + ' ');
+
+      highlightInput(userMessageInput[0]);
+      userMessageInput.focus();
+    });
+  };
+
+  var toggleSidebarOnMobile = function() {
+    var sidebarToggle = $('.sidebar-toggle');
+    var sidebar = $('.sidebar');
+
+    sidebarToggle.on('click', function() {
+      sidebar.toggleClass('sidebar--visible');
+    });
+  };
+
+  addSidebarUserToInput();
+  toggleSidebarOnMobile();
+};
+
+module.exports = sidebarHandlers();

public/js/soundOfMessage.js

@@ -1,3 +1,4 @@
 var soundOfMessage = new Audio('css/sounds/new-message.mp3');
+soundOfMessage.volume = 0.5;
 
 module.exports = soundOfMessage;

public/js/utils/highlightInput.js

@@ -0,0 +1,11 @@
+var $ = require('jquery');
+
+var highlightInput = function(element) {
+  $(element).addClass('highlighted');
+
+  setTimeout(function() {
+    $(element).removeClass('highlighted');
+  }, 100);
+};
+
+module.exports = highlightInput;