moving to preact

idoco · Jan 13, 2017 · cde4c22 · cde4c22
1 parent bb42cde
commit cde4c22
Show file tree

Hide file tree

Showing 18 changed files with 445 additions and 156 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": ["es2015", "stage-0"],
+  "plugins": [
+    ["transform-react-jsx", { "pragma": "h" }]
+  ]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,15 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"]
+  }
+}
diff --git a/chat.html b/chat.html
@@ -2,57 +2,13 @@
 <html>
 <head>
     <title>Intergram!</title>
-    <link rel="stylesheet" type="text/css" href="https://idoco.github.io/intergram/style.css">
+    <link rel="stylesheet" type="text/css" href="css/chat.css">
 </head>
 <body>
 
-<ol id="messages" class="chat"></ol>
+<div id="intergramChat"></div>
+<script src="static/chat.js"></script>
+<audio id="messageSound" src="ping.mp3" preload="auto"></audio>
 
-<input id="m" class="textarea" type="text" placeholder="Type here!"/>
-
-<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
-<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
-<script>
-
-    writeToMessages("Hello! How can we help you?", 'other');
-
-    var userId = Math.random().toString(36).substr(2, 5); // 5 random chars
-    var chatId = getUrlParameter('id');
-
-    var socket = io.connect('https://intergram.herokuapp.com');
-
-    socket.emit('register', {
-        chatId: chatId,
-        userId: userId
-    });
-
-    socket.on(chatId, writeToMessages);
-    socket.on(chatId+"-"+userId, writeToMessages);
-
-    $('#m').keyup(function (e) {
-        if (e.keyCode == 13) {
-            var msg = $('#m').val();
-            $('#m').val('');
-            writeToMessages("You: " + msg, 'self');
-            socket.send(msg);
-        }
-    });
-
-    function writeToMessages(msg, writeAs) {
-        $('#messages').append(
-            "<li class=\"" + (writeAs || 'other') + "\"><div class=\"msg\">" +
-                msg +
-            "</div></li>");
-        window.scrollTo(0,document.body.scrollHeight)
-    }
-
-    function getUrlParameter(name) {
-        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
-        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
-        var results = regex.exec(location.search);
-        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
-    }
-
-</script>
 </body>
 </html>
diff --git a/css/chat.css b/css/chat.css
@@ -0,0 +1,136 @@
+
+
+html, body {
+    background: #e5e5e5;
+    font-family: 'Lato', sans-serif;
+    margin: 0px auto;
+}
+
+/* H E A D E R */
+
+.header {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    width: 100%;
+    height: 30px;
+    background: rgba(82,179,217,0.9);
+    z-index: 100;
+}
+
+.title {
+    position: absolute;
+    width: 90px;
+    height: 30px;
+    top: 0px;
+    left: 0px;
+    color: #fff;
+    line-height: 30px;
+    font-size: 20px;
+    padding-left: 10px;
+}
+
+/* M E S S A G E S */
+
+.chat {
+    list-style: none;
+    background: none;
+    margin: 0;
+    padding: 0 0 50px 0;
+    margin-bottom: 10px;
+}
+.chat li {
+    padding: 0.5rem;
+    font-size: 0.9rem;
+    overflow: hidden;
+    display: flex;
+}
+
+.other .msg {
+    order: 1;
+    border-top-left-radius: 0px;
+    box-shadow: -1px 2px 0px #D4D4D4;
+}
+.other:before {
+    content: "";
+    position: relative;
+    top: 0px;
+    right: 0px;
+    left: 40px;
+    width: 0px;
+    height: 0px;
+    border: 5px solid #fff;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+}
+
+.self {
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+.self .msg {
+    order: 1;
+    border-bottom-right-radius: 0px;
+    box-shadow: 1px 2px 0px #D4D4D4;
+}
+
+.msg {
+    background: white;
+    min-width: 50px;
+    padding: 10px;
+    border-radius: 2px;
+    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
+}
+
+::-webkit-scrollbar {
+    min-width: 12px;
+    width: 12px;
+    max-width: 12px;
+    min-height: 12px;
+    height: 12px;
+    max-height: 12px;
+    background: #e5e5e5;
+    box-shadow: inset 0px -32px 0px #fafafa;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #bbb;
+    border: none;
+    border-radius: 100px;
+    border: solid 3px #e5e5e5;
+    box-shadow: inset 0px 0px 3px #999;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #b0b0b0;
+    box-shadow: inset 0px 0px 3px #888;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background: #aaa;
+    box-shadow: inset 0px 0px 3px #7f7f7f;
+}
+
+::-webkit-scrollbar-button {
+    display: block;
+}
+
+/* I N P U T */
+
+input.textarea {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    width: 100%;
+    height: 30px;
+    z-index: 99;
+    background: #fafafa;
+    border: none;
+    outline: none;
+    padding-left: 15px;
+    padding-right: 15px;
+    color: #666;
+    font-weight: 400;
+}
diff --git a/devServer.js b/devServer.js
@@ -0,0 +1,15 @@
+let webpack = require('webpack');
+let WebpackDevServer = require('webpack-dev-server');
+let config = require('./webpack.config');
+
+new WebpackDevServer(webpack(config), {
+    publicPath: config.output.publicPath,
+    hot: true,
+    historyApiFallback: true
+}).listen(3000, 'localhost', function (err, result) {
+    if (err) {
+        console.log(err);
+    }
+
+    console.log('Listening at localhost:3000');
+});
diff --git a/embed/inject.js b/embed/inject.js
diff --git a/embed/style.css b/embed/style.css
diff --git a/index.html b/index.html
@@ -1,18 +1,14 @@
 <!doctype html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <title>Intergram Test Page</title>
-    <meta name="description" content="Intergram test page">
-    <meta name="author" content="idoco">
-</head>
-<body>
+  <head>
+    <title>Intergram Demo Page</title>
+  </head>
+  <body>
 
-<h3>Test Page</h3>
+    <h1>Intergram Demo Page</h1>
 
-<script> window.intergramId = 312940879; </script>
-<script id="intergram" type="text/javascript"
-        src="https://idoco.github.io/intergram/embed/inject.js"></script>
+    <script> window.intergramId = 312940879; </script>
+    <script src="static/widget.js"></script>
 
-</body>
+  </body>
 </html>
diff --git a/package.json b/package.json
@@ -2,13 +2,39 @@
   "name": "intergram",
   "version": "0.0.1",
   "description": "A live chat widget linked to your telegram messenger",
+  "scripts": {
+    "start": "node server.js",
+    "postinstall": "npm run build",
+    "dev": "node devServer.js",
+    "build": "shx mkdir -p dist && shx cp *.html dist && shx cp ping.mp3 dist && shx cp -r ./css dist && webpack --optimize-minimize -p",
+    "test": "npm run -s lint",
+    "lint": "eslint src",
+    "deploy": "gh-pages -d dist"
+  },
+  "authors": [
+    "Ido Cohen (http://github.com/idoco)"
+  ],
+  "devDependencies": {
+    "babel-core": "^6.0.20",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.0.1",
+    "babel-plugin-transform-react-jsx": "^6.4.0",
+    "babel-preset-es2015": "^6.0.15",
+    "babel-preset-stage-0": "^6.0.15",
+    "eslint": "^3.2.2",
+    "gh-pages": "^0.11.0",
+    "shx": "^0.2.2",
+    "webpack": "^1.14.0",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "webpack-dev-server": "^1.16.2"
+  },
   "dependencies": {
     "body-parser": "^1.15.2",
+    "compression": "^1.6.2",
     "express": "4.10.2",
+    "preact": "^5.6.0",
     "request": "^2.79.0",
-    "socket.io": "1.2.0"
-  },
-  "scripts": {
-    "start": "node server.js"
+    "socket.io": "^1.7.2",
+    "socket.io-client": "^1.7.2"
   }
 }
diff --git a/ping.mp3 b/ping.mp3