presence demo

.vscode/launch.json

@@ -0,0 +1,38 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Launch",
+			"type": "node",
+			"request": "launch",
+			"program": "${workspaceRoot}/lib/main.js",
+			"stopOnEntry": false,
+			"args": [],
+			"cwd": "${workspaceRoot}",
+			"preLaunchTask": null,
+			"runtimeExecutable": null,
+			"runtimeArgs": [
+				"--nolazy", "--expose-gc"
+			],
+			"env": {
+				"NODE_ENV": "development",
+				"DEBUG": "*"
+			},
+			"externalConsole": false,
+			"sourceMaps": false,
+			"outDir": null
+		},
+		{
+			"name": "Attach",
+			"type": "node",
+			"request": "attach",
+			"port": 5858,
+			"address": "localhost",
+			"restart": false,
+			"sourceMaps": false,
+			"outDir": null,
+			"localRoot": "${workspaceRoot}",
+			"remoteRoot": null
+		}
+	]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "files.exclude": {
+        "**/.git": true,
+        "**/.DS_Store": true,
+        "**/*.js.map": true,
+        "**/.*": true,
+        "**/*.js": {"when": "$(basename).ts"}
+    }
+}

.vscode/tasks.json

@@ -0,0 +1,20 @@
+// A task runner that calls the Typescipt compiler (tsc)
+{
+    "version": "0.1.0",
+
+    // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
+    "command": "tsc",
+
+    // The command is a shell script
+    "isShellCommand": true,
+
+    // Show the output window only if unrecognized errors occur. 
+    "showOutput": "silent",
+
+    // args is the app.ts program to compile.
+    "args": [],
+
+    // use the standard tsc problem matcher to find compile problems
+    // in the output.
+    "problemMatcher": "$tsc"
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 emitter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,31 @@
+# Serverless Chat with emitter.io
+* Source-Code: https://github.com/Kelindar/demo-chat
+* Tutorial: http://www.codeproject.com/Articles/1113531/Serverless-HTML-Chat-with-Emitter-Vue-and-Bootstra
+
+![screen](https://github.com/emitter-io/demo-chat/raw/master/demo.gif) 
+
+This article presents a group chat tutorial, allowing multiple participants to chat together. It also features things such [identicons](https://jdenticon.com/), two-way data binding using [vue.js](https://vuejs.org/), [bootstrap css](https://getbootstrap.com/css/) and CSS animations with help of [ani
+mate.css](https://daneden.github.io/animate.css/). Below is a code-snipped from the source code.
+
+```javascript
+emitter.on('connect', function(){
+    // once we're connected, subscribe to the 'chat' channel
+    console.log('emitter: connected');
+    emitter.subscribe({
+        key: key,
+        channel: "article1",
+        last: 5
+    });
+
+    jdenticon.update(".img-circle");
+})
+
+// on every message, print it out
+emitter.on('message', function(msg){
+    console.log('emitter: received ' + msg.asString() );
+    vue.$data.messages.push(msg.asObject());
+    setTimeout(function(){ 
+        jdenticon.update(".img-circle");
+    },5);
+});
+```

css/styles.css

@@ -0,0 +1,99 @@
+
+@import url(https://fonts.googleapis.com/css?family=Sue+Ellen+Francisco);
+
+body{
+	background-color: rgb(244, 244, 244);
+}
+
+.entry {
+	font-family: "Sue Ellen Francisco";
+	min-height: 30px;
+	margin-bottom: 10px;
+	font-size: 25px;
+	color: #000;
+}
+
+.btn {
+	border-radius: 0px;
+	text-transform: uppercase;
+	font-family: "Sue Ellen Francisco";
+	font-size: 2rem;
+}
+
+.btn:hover, .btn:focus{
+	color: #fff;
+}
+
+.btn-login {
+	background-color: #286090;
+    border-color: #204d74;
+	color: #fff;
+}
+
+.btn-login:hover, .btn-login:focus{
+	background-color: #204d74;
+}
+
+.btn-logout {
+	background-color: #d9534f;
+    border-color: #d43f3a;
+	color: #fff;
+}
+
+.btn-logout:hover, .btn-logout:focus{
+	background-color: #d43f3a;
+}
+
+.wide{
+	width: 100%;
+}
+
+.watch-content a{
+	color: #fff;
+	text-transform: uppercase;
+}
+
+.marvel-device.iphone5s{
+	width: 160px;
+    height: 250px;
+	border-radius: 25px;
+	padding: 78px 12px;
+}
+
+.marvel-device.iphone5s .home {
+    -moz-border-radius: 36px;
+    -webkit-border-radius: 36px;
+    border-radius: 36px;
+    width: 34px;
+    height: 34px;
+    margin-left: -20px;
+}
+
+.marvel-device.iphone5s:before, .marvel-device.iphone5c:before {
+    border-radius: 22px;
+}
+
+.marvel-device .screen{
+	color: #000;
+	font-family: "Sue Ellen Francisco";
+	padding-top:10px;
+}
+
+.avatar{
+    margin-bottom: 28px;
+    height: 170px;
+}
+
+.avatar-login{
+	-webkit-filter: grayscale(100%);
+	filter: grayscale(100%);
+}
+
+.avatar-logout{
+	-webkit-filter: none;
+	filter:none;
+}
+
+.screen h3 {
+	text-decoration: underline;
+}

img/License.txt

@@ -0,0 +1,29 @@
+You must attribute the image to its author:
+
+In order to use a vector or a part of it, you must attribute it to its author, 
+so we will be able to continue creating new graphic resources every day.
+
+
+How to attribute it?
+
+For websites: 
+
+Please, copy this code on your website to accredit the author:
+<a href="http://www.freepik.com">Designed by Freepik</a>
+
+For printing: 
+
+Paste this text on the final work so the authorship is known.
+- For example, in the acknowledgements chapter of a book: 
+"Designed by Freepik.com"
+
+
+You are free to use this image:
+
+- For both personal and commercial projects and to modify it.
+- In a website or presentation template or application or as part of your design.
+
+You are not allowed to:
+
+- Sub-license, resell or rent it.
+- Include it in any online or offline archive or database.

index-embed.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>HTML5 Chat with Emitter</title>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/devices.min.css" />
+    <link rel="stylesheet" href="css/styles.css" type="text/css" />
+</head>
+<body style="background-color: transparent;">
+<div class="container" id="app">
+  <div class="row">
+
+        <div class="col-sm-4">
+            <div class="marvel-device iphone5s silver">
+                <div class="top-bar"></div>
+                <div class="sleep"></div>
+                <div class="volume"></div>
+                <div class="camera"></div>
+                <div class="sensor"></div>
+                <div class="speaker"></div>
+                <div class="screen">
+                    <img class="avatar avatar-{{device1}}" src="img/avatar1.png" />
+                    <a href="#"  class="btn btn-{{device1}} wide" v-on:click="toggleDevice1()" >{{device1}}</a>
+                </div>
+                <div class="home"></div>
+                <div class="bottom-bar"></div>
+            </div>
+        </div>
+
+        <div class="col-sm-4">
+            <div class="marvel-device iphone5s silver">
+                <div class="top-bar"></div>
+                <div class="sleep"></div>
+                <div class="volume"></div>
+                <div class="camera"></div>
+                <div class="sensor"></div>
+                <div class="speaker"></div>
+                <div class="screen">
+                    <h3>Now Online: {{occupancy}}</h3>
+                    <div v-for="user in users" track-by="name" class="row ">
+                        <div class="entry">{{user.name}}</div>
+                    </div>
+                </div>
+                <div class="home"></div>
+                <div class="bottom-bar"></div>
+            </div>
+        </div>
+
+        <div class="col-sm-4">
+            <div class="marvel-device iphone5s silver">
+                <div class="top-bar"></div>
+                <div class="sleep"></div>
+                <div class="volume"></div>
+                <div class="camera"></div>
+                <div class="sensor"></div>
+                <div class="speaker"></div>
+                <div class="screen">
+                    <img class="avatar avatar-{{device2}}" src="img/avatar2.png" />
+                    <a href="#" class="btn btn-{{device2}} wide" v-on:click="toggleDevice2()" >{{device2}}</a>
+                </div>
+                <div class="home"></div>
+                <div class="bottom-bar"></div>
+            </div>
+        </div>
+    </div>
+
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js" type="application/javascript"></script>
+<script src="https://s3-eu-west-1.amazonaws.com/cdn.emitter.io/js/emitter.min.js" type="text/javascript"></script>
+<script src="js/app.utils.js" type="text/javascript"></script>
+<script src="js/app.js" type="text/javascript"></script>
+</body>
+</html>