Skip to content

Commit

Permalink
Styled message input area with bootstrap
Browse files Browse the repository at this point in the history 
Changes Done
-Added code of improved textarea in index.ejs, client.js
-removed unnecessary styling from style.css
-modified function to send msg in script.js
  • Loading branch information
@LalitNM
LalitNM committed Oct 18, 2020
1 parent de73b21 commit 97d2b1b
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 119 deletions.
38 changes: 27 additions & 11 deletions public/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const joinRoom = (room) => {
});
$(".error").hide();
$(`#${room_id}-msg`).attr("data-joined", 1);
$(`#${room_id}-msg,.write`).show();
$(`#${room_id}-msg`).show();
}

//requests server to leave a room
Expand All @@ -50,7 +50,7 @@ function leaveRoom(room) {
$(".error").html('<span id="error">You haven\'t joined this room yet. <a onclick="joinRoom( \'' + room + '\' )" id="joinBtn" href="#">Join</a> to see the conversation.</span>');

$(`#${room_id}-msg`).attr("data-joined", 0);
$(`#${room_id}-msg,.write`).hide();
$(`#${room_id}-msg`).hide();
$(".error").show();
}

Expand Down Expand Up @@ -83,7 +83,7 @@ const appendUserInfo = (room_name, description) => {

// Appending the content
const appendContentInfo = (room_name, online, data_joined) => {
const $write = $("#write");
emobox = document.getElementById(`emobox`).outerHTML;
const $contentInfo = `
<div class='right' id='${room_name}-msg' data-joined='${data_joined}' style='display:none;'>
<div class='top'><center id='online'><span>${room_name} Room</span>&nbsp;(<a href='#' onclick='leaveRoom("${room_name}")'>Leave room</a>)</center>
Expand All @@ -94,8 +94,17 @@ const appendContentInfo = (room_name, online, data_joined) => {
<span></span>
</div>
<div class='chat active-chat' data-chat='person1'></div>
<div class="write">
${$write.html()}
<div class="input-group write">
<textarea type="text" class="textarea form-control" placeholder="Message to ${room_name}..." data-active="lobby" rows="2"></textarea>
<div class="input-group-append">
<button class="btn smiley text-primary" type="button">
<i class="far fa-smile icon"></i>
${emobox}
</button>
<button class="btn send text-primary" type="button">
<i class="fas fa-paper-plane icon"></i>
</button>
</div>
</div>
</div>
`;
Expand Down Expand Up @@ -201,7 +210,7 @@ socket.on('Display Message', (data) => {
div.setAttribute("data-chat", "person1")
username.innerText = data.user;
timestamp.innerText = hours + ":" + mins + ":" + secs + ", " + month + " " + day;
userMsg.innerHTML = p;
userMsg.innerHTML = p.replace(/\n/g, '<br>');
if (class_name == 'self') {
username.classList.add("text-secondary");
timestamp.classList.add("text-secondary");
Expand Down Expand Up @@ -253,15 +262,14 @@ socket.on('room created other', (data) =>{
const { description, room_name, online, online_users } = data;
var date = new Date();
var room_id = convertIntoId(room_name);
const $write = $("#write");
const $userInfo = `
<li class='person' data-chat='person1' id='${room_name}' onclick='showRoom(this)'>
<span class='name'>${room_name}</span><br>
<span class='preview'>${description}</span>
</li>
`;
$('.people').append($userInfo);

emobox = document.getElementById(`emobox`).outerHTML;
const $contentInfo = `
<div class='right' id='${room_name}-msg' data-joined='0' style='display:none;'>
<div class='top'><center id='online'><span>${room_name} Room</span>&nbsp;(<a href='#' onclick='leaveRoom("${room_name}")'>Leave room</a>)</center>
Expand All @@ -272,8 +280,17 @@ socket.on('room created other', (data) =>{
<span></span>
</div>
<div class='chat active-chat' data-chat='person1'></div>
<div class="write">
${$write.html()}
<div class="input-group write">
<textarea type="text" class="textarea form-control" placeholder="Message to ${room_name}..." data-active="lobby" rows="2"></textarea>
<div class="input-group-append">
<button class="btn smiley text-primary" type="button">
<i class="far fa-smile icon"></i>
${emobox}
</button>
<button class="btn send text-primary" type="button">
<i class="fas fa-paper-plane icon"></i>
</button>
</div>
</div>
</div>
`;
Expand All @@ -294,7 +311,6 @@ socket.on('destroy room', function(data) {
}

$(".error").hide();
$(".write").css("display", "initial");

var room_id = convertIntoId(data);
$(`#${room_id}`).remove();
Expand Down
29 changes: 15 additions & 14 deletions public/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ $(document).ready(function() {

// event listener to dynamic element
$("body").on("keypress", '.textarea', function(val) {
if (val.which == 13) {
if (val.which == 13 && val.shiftKey) {
val.preventDefault();
sendMessage($(this).val());
$(this).val("");
}
Expand All @@ -15,6 +16,7 @@ $(document).ready(function() {
const input = $(this).parents('.write').find('.textarea');
sendMessage(input.val());
input.val("");
input.focus();
});

// Prevent new room modal from closing on Enter key
Expand Down Expand Up @@ -57,10 +59,9 @@ const showRoom = (name) => {
if ($(`#${room_id}-msg`).attr("data-joined") == 0) {
$(".error").css("display", "inherit");
$(".error").html('<span id="error">You haven\'t joined this room yet. <a onclick="joinRoom(\'' + name.id + '\')" id="joinBtn" href="#">Join</a> to see the conversation.</span>');
$(`#${room_id}-msg,.write`).hide();
$(`#${room_id}-msg`).hide();
} else {
$(".error").hide();
$(".write").css("display", "initial");
}

};
Expand Down Expand Up @@ -112,7 +113,7 @@ function closeSidebar() {
toggle.className += 'fa fa-angle-right';
}

function openSidebar() {
function openSidebar() {
const navbar = document.querySelector(".left");
navbar.classList.remove('menu-closed')
navbar.classList.add('open-menu')
Expand All @@ -125,30 +126,30 @@ function SidebarToggle() {
const navbar = document.querySelector(".left");
if (!navbar.classList.contains('menu-closed') && navbar.classList.contains('open-menu')) {
closeSidebar();
}
}
else {
openSidebar();
document.body.addEventListener('click', function(event) {
const sidebar = document.getElementsByClassName('left')[0]; //Ensuring that clicks inside the sidebar(outside lobbies) don't make the sidebar collapse
const lobbyName = document.getElementsByClassName('person'); //In case user clicks a lobby from the sidebar, the sidebar collapse. This is a list of classes
const addLobbyPage = document.getElementById('room'); //Ensuring that clicks on page to add lobby names doesn't make the sidebar collapse
for (let i=0; i<lobbyName.length; i++) {
for (let i=0; i<lobbyName.length; i++) {
if(lobbyName[i].contains(event.target)) {
closeSidebar();
closeSidebar();
return;
}
}
if(!sidebar.contains(event.target) && !addLobbyPage.contains(event.target)) {
closeSidebar();
if(!sidebar.contains(event.target) && !addLobbyPage.contains(event.target)) {
closeSidebar();
}
}, false);
}, false);
}
}

function notify(data, type){
var msgHeader;
var msgBody;
var msgBody;

if(data.indexOf('|') > -1){
var notfication = data.split('|');
msgHeader = notfication[0];
Expand All @@ -168,12 +169,12 @@ function notify(data, type){
</div>
<div class="toast-body">${msgBody}</div>
</div>`;

$('#toast-wrapper').append(toastTemplate);
// Init notiifications
$('.toast').toast({delay: 3000});
$(`#${notficationID}`).toast('show');
$(`#${notficationID}`).on('hidden.bs.toast', function () {
$(`#${notficationID}`).remove();
});
}
}
88 changes: 5 additions & 83 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
box-sizing: border-box;
}

/* To style icons of font-awesome */
.icon {
font-size: 2rem
}

li {
list-style: none;
}
Expand Down Expand Up @@ -200,84 +205,6 @@ body {
}
}

.write {
z-index: 10;
position: absolute;
bottom: 16px;
height: 42px;
width: 95% !important;
margin-left: 1em;
border: 1px solid #e6e6e6;
background-color: #eceff1;
width: inherit;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.write input {
font-size: 16px;
float: left;
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
width: -o-calc(100% - 90px);
width: calc(100% - 90px);
height: 40px;
padding: 0 10px;
color: #1a1a1a;
border: 0;
outline: none;
background-color: transparent;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
}

.write-right {
float: right;
}

.write .write-link.smiley:before {
display: inline-block;
float: left;
width: 40px;
height: 42px;
content: '';
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
}

/* font-awesome smiley */
.fa-smile {
position: absolute;
font-size: 32px;
right: 3.5rem;
bottom: 0.3rem;
color: #57585a;
}

.write .write-link.send {
display: inline-block;
float: left;
width: 42px;
height: 42px;
margin-left: 5px;
content: '';
background-size: 38px 38px;
background-repeat: no-repeat;
background-position: center;
}

/* font-awesome send */
.fa-paper-plane {
font-size: 30px;
margin-top: 0.3rem;
}

.write#join {
padding-left: 0;
}

.app-container .right .card.others {
float: left;
}
Expand All @@ -300,11 +227,6 @@ body {
background-size: 40px 42px;
}

/* font-awesome class */
.fa-plus-circle {
font-size: 40px;
}

#newRoom:hover, #submit:hover, #cancel:hover {
border-color: #0b2d63;
color: #0b2d63;
Expand Down
22 changes: 11 additions & 11 deletions views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<div class="card m-2">
<div class="card-body text-center" data-toggle="modal" data-target="#newRoomModal">
<p class="card-text mb-0">
<a class="text-primary" id="newRoom">
<a class="text-primary icon" id="newRoom">
<i class="fas fa-plus-circle"></i>
</a>
</p>
Expand All @@ -60,16 +60,16 @@
<div class="chat" data-chat="person1">

</div>
<div class="write" id="write">
<input type="text" id="textarea" class="textarea" data-active="lobby" />
<div class="write-right">
<!-- font-awesome smiley -->
<a href="#" class="write-link smiley"><i class="far fa-smile"></i>
<ul id="emobox" class="emobox">
</ul>
</a>
<!-- font-awesome send -->
<a href="javascript:;" class="write-link send text-primary"><i class="fas fa-paper-plane"></i></a>
<div class="input-group write">
<textarea type="text" class="textarea form-control" placeholder="Message to lobby..." data-active="lobby" rows="2"></textarea>
<div class="input-group-append">
<button class="btn smiley text-primary" type="button">
<i class="far fa-smile icon"></i>
<ul id="emobox" class="emobox"></ul>
</button>
<button class="btn send text-primary" type="button">
<i class="fas fa-paper-plane icon"></i>
</button>
</div>
</div>
</div>
Expand Down

0 comments on commit 97d2b1b

Please sign in to comment.