From 03cb2d4c75d018250dcb242d3611182abaa30af1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 20:40:18 +0200
Subject: [PATCH] show users count

---
 .../Components/Routes/Collaboration/index.vue | 43 ++++++++++++++++++-
 examples/assets/sass/main.scss                |  9 ++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index 9189911b..e7420bc4 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="editor">
-    <editor-content class="editor__content" :editor="editor" v-if="editor && !loading" />
+    <div class="message">
+      With the Collaboration Extension it's possible for several users to work on a document at the same time. To make this possible, client-side and server-side code is required. This example shows this using a <a href="https://glitch.com/edit/#!/tiptap-sockets" target="_blank">socket server</a>. Try it out below:
+    </div>
+    <template v-if="editor && !loading">
+      <div class="count">
+        {{ count }} {{ count === 1 ? 'user' : 'users' }} connected
+      </div>
+      <editor-content class="editor__content" :editor="editor"  />
+    </template>
     <em v-else>
       Connecting to socket server …
     </em>
@@ -22,6 +30,7 @@ export default {
       loading: true,
       editor: null,
       socket: null,
+      count: 0,
     }
   },
 
@@ -51,6 +60,10 @@ export default {
         ],
       })
     },
+
+    setCount(count) {
+      this.count = count
+    },
   },
 
   mounted() {
@@ -60,6 +73,8 @@ export default {
       .on('init', data => this.onInit(data))
       // send all updates to the collaboration extension
       .on('update', data => this.editor.extensions.options.collaboration.update(data))
+      // get count of connected users
+      .on('getCount', count => this.setCount(count))
   },
 
   beforeDestroy() {
@@ -67,3 +82,29 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+@import "~variables";
+
+.count {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  color: rgba($color-black, 0.5);
+  color: #27b127;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  line-height: 1;
+
+  &:before {
+    content: '';
+    display: inline-flex;
+    background-color: #27b127;
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+    margin-right: 0.3rem;
+  }
+}
+</style>
diff --git a/examples/assets/sass/main.scss b/examples/assets/sass/main.scss
index 89a88025..9c62a81e 100644
--- a/examples/assets/sass/main.scss
+++ b/examples/assets/sass/main.scss
@@ -74,6 +74,15 @@ h3 {
   background-color: rgba($color-black, 0.1);
 }
 
+.message {
+  background-color: rgba($color-black, 0.05);
+  color: rgba($color-black, 0.7);
+  padding: 1rem;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+  font-style: italic;
+}
+
 @import "./editor";
 @import "./menubar";
 @import "./menububble";