Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@rdxi
rdxi committed Oct 20, 2017
0 parents commit 1e47506
Show file tree
Hide file tree
Showing 8 changed files with 504 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
.vscode/
21 changes: 21 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"name": "chattr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"animal-id": "0.0.1",
"bcryptjs": "^2.4.3",
"chance": "^1.0.11",
"express": "^4.16.2",
"ioredis": "^3.1.4",
"jsonwebtoken": "^8.1.0",
"sanitize-html": "^1.14.1",
"socket.io": "^2.0.3"
}
}
Binary file added public/css/OpenSans-Regular.ttf
Binary file not shown.
148 changes: 148 additions & 0 deletions public/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
@font-face {
font-family: 'OpenSans';
font-style: normal;
font-weight: 400;
src: url('OpenSans-Regular.ttf') format('truetype');
}

html, body {
height: 100%;
min-height: 100%;
}

img {
max-width: 100%;
}

body {
font-size: 18px;
font-family: 'OpenSans', sans-serif;
padding: 0;
margin: 0;
}

input, textarea, button {
font-size: 18px;
font-family: 'OpenSans', sans-serif;
padding: 0;
margin: 0;
resize: none;
}

.container {
display: flex;
height: 100%;
}

.sidebar {
width: 240px;
min-width: 240px;

padding: 10px;
box-sizing: border-box;

background-color: rgba(65, 138, 94, 255);
color: #fff;
border-right: 1px solid #285523;
}

.sidebar-users {
margin-bottom: 20px;
}

.sidebar-user {
color: #fff;
padding: 2px 10px 2px 10px;
}

.sidebar-users--offline .sidebar-user {
opacity: 0.7;
}

.sidebar-users-title {
margin-bottom: 5px;
opacity: 0.7;
}

.main {
background-color: rgba(242, 248, 242, 255);
position: relative;

flex-direction: column;
flex-grow: 1;
display: flex;
}

.main-title {
width: 100%;
font-weight: 700;

padding: 10px 20px;
box-sizing: border-box;
}

.main-messages {

padding: 10px 20px;
box-sizing: border-box;

flex-grow: 1;
overflow: auto;
}

.main-message {
padding-top: 10px;
padding-bottom: 10px;
position: relative;
padding-left: 50px;

word-break: break-all;
}

.main-message-avatar {
position: absolute;
left: 0;
top: 15px;

width: 40px;
height: 40px;
}

.main-message-avatar img {
border-radius: 10px;
}

.main-message-user {
display: inline-block;
vertical-align: baseline;
font-weight: bold;
}

.main-message-time {
display: inline-block;
vertical-align: baseline;
color: #999;
font-size: 14px;
}

.main-message-text {
width: 100%;
margin-left: 5px;
}

.main-message-text img {
max-height: 500px;
}

.main-input {
padding: 10px 20px;
box-sizing: border-box;
}

.main-input input {
resize: none;
box-sizing: border-box;
width: 100%;
padding: 10px;
}

77 changes: 77 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chattr</title>

<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="container">
<div class="sidebar">
<div class="sidebar-users">
<div class="sidebar-users-title">
Users online
</div>
<div class="sidebar-user">Johnatan</div>
<div class="sidebar-user">Kate</div>
</div>
<div class="sidebar-users sidebar-users--offline">
<div class="sidebar-users-title">
Users offline
</div>
<div class="sidebar-user">Bobbert</div>
<div class="sidebar-user">Very long person name weird too long</div>
</div>
</div>
<div class="main">
<div class="main-title">
Chattr discussion
</div>
<div class="main-messages">
<!-- <div class="main-message">
<div class="main-message-avatar"><img src="http://www.gravatar.com/avatar/cd93653575932c775ae455c18e8b2874?d=retro" alt="avatar"></div>
<div class="main-message-user">Bobbert</div>
<div class="main-message-time">Oct 20th, 18:10</div>
<div class="main-message-text">Hello frien</div>
</div>
<div class="main-message">
<div class="main-message-avatar"><img src="http://www.gravatar.com/avatar/a2a2b6fccb725f6d1ee2c95c029d0b5b?d=retro" alt="avatar"></div>
<div class="main-message-user">Johnatan</div>
<div class="main-message-time">Oct 20th, 18:10</div>
<div class="main-message-text">farewell</div>
</div> -->
</div>
<div class="main-input">
<form action="">
<input id="user-message" type="text" placeholder="your message">
</form>
<!-- <textarea placeholder="your message"></textarea> -->
</div>
</div>
</div>

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="js/libs/anchorme.min.js"></script>
<script src="js/client.js"></script>

<script id="message-template" type="text/template">
<div class="main-message">
<div class="main-message-avatar"><img src="{{avatar}}"></div>
<div class="main-message-user">{{user}}</div>
<div class="main-message-time">{{time}}</div>
<div class="main-message-text">{{{text}}}</div>
{{#image}}
<div class="main-message-image"><img src="{{image}}"></div>
{{/image}}
</div>
</script>
</body>
</html>
100 changes: 100 additions & 0 deletions public/js/client.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
$(function () {
var socket = io();

// verify local token or get new one from server
// socket.emit('hello', {localToken: localToken});

socket.on('connect', function() {
var localToken = localStorage.getItem('token');
socket.emit('hello', {localToken: localToken});
});

socket.on('token', function(token) {
var localToken = localStorage.setItem('token', token);
console.log(token);
});

socket.on('invalid token', function() {
// delete local token and get new one from server
localStorage.removeItem('token');
socket.emit('hello', {localToken: null});
});


$('form').submit(function(){
socket.emit('chat message', $('#user-message').val());
$('#user-message').val('');
return false;
});

socket.on('initial message history', function(items) {
console.log('initial messages: ', items);

if (items) {
items.forEach(function(item) {
var obj = JSON.parse(item);
renderMessage({
avatar: obj.avatar,
user: obj.name,
time: obj.time,
text: obj.text
});
});
}
});


socket.on('chat message', function(obj){

console.log(obj);

renderMessage({
avatar: obj.avatar,
user: obj.name,
time: obj.time,
text: obj.text
});

// var messages = $('.main-messages');

});

var renderMessage = function(msg) {
var messagesContainer = $('.main-messages');

var avatar = msg.avatar || '//www.gravatar.com/avatar/00000000000000000000000000000000';
var user = msg.user || 'anonymous';
// var time = msg.time || moment().format('MMM Do, HH:mm');
var time = msg.time ? moment(msg.time).format("MMM Do, HH:mm") : moment().format("MMM Do, HH:mm");
var text = anchorme(msg.text) || '??no text??';



// TODO: auto-embed images
// var image = $(text).siblings('a').filter(function() {
// return /(jpg|gif|png)$/.test($(this).attr('href'));
// });

// TODO?: add emojis button like slack 😀😗😙😑😮😯😴😛😕😟
// make only 3 emojis: crying laugh, ok, and poop
// https://unicode.org/emoji/charts/full-emoji-list.html 💩💩💩

// var image = $(text);
// console.log(image);


var template = $('#message-template').html();

var html = Mustache.render(template, {
avatar: avatar,
user: user,
time: time,
text: text
});

messagesContainer.append(html);
messagesContainer[0].scrollTop = messagesContainer[0].scrollHeight;

};

});
1 change: 1 addition & 0 deletions public/js/libs/anchorme.min.js

Large diffs are not rendered by default.

Loading

0 comments on commit 1e47506

Please sign in to comment.