Current user indicators

ronan18 · ronan18 · commit 84ba167a530a · 2018-05-03T21:36:00.000-07:00
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
 
   <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
   <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
-  <title>Graphite Writer BETA v0.3.3 | Create Text Documents Online For Free</title>
+  <title>Graphite Writer BETA v0.4.0 | Create Text Documents Online For Free</title>
 </head>
 
 <body>
diff --git a/src/assets/editor.scss b/src/assets/editor.scss
@@ -5,6 +5,9 @@
   .ql-editor {
     min-height: 100vh;
   }
+  .ql-font-roboto {
+    font-family: "Roboto", sans-serif;
+  }
   #editor {
     margin-bottom: 5%;
   }
@@ -62,7 +65,7 @@
   }
 
   .input {
-    margin-bottom: .5em;
+    margin-bottom: 0.5em;
   }
 
   .share-row {
@@ -76,7 +79,7 @@
     margin-bottom: 0;
   }
   .share-item {
-    margin-top: .5em;
+    margin-top: 0.5em;
   }
 
   .ql-toolbar {
@@ -85,7 +88,7 @@
     border-top-left: 0.5px solid $gray-accent;
     border-top-left-radius: 3px;
   }
- 
+
   .ql-container {
     border-bottom-right: 0.5px solid $gray-accent;
     border-bottom-right-radius: 3px;
diff --git a/src/components/editor.vue b/src/components/editor.vue
@@ -13,8 +13,8 @@
       <div class="share-row">
         
         <div class="share-col">
-          <span class="user" v-for="user in users" :key="user.uid">
-            <img :src="user.profile_picture" :alt="user.name" class="round-profile share-item" :tooltip="user.name">
+          <span class="user" v-for="user in currentUsers" :key="user.uid">
+            <img :src="user.image" :alt="user.name" class="round-profile share-item" :tooltip="user.name">
           </span>
           &nbsp;
           <button v-if="!opts.readOnly" @click="share" class="button dark input"><i class="fas fa-user-plus"></i></button>
@@ -68,14 +68,15 @@ import { encode } from "punycode";
 import { log } from "util";
 
 Quill.register("modules/magicUrl", MagicUrl);
-
+const FontAttributor = Quill.import("attributors/class/font");
 const Hashids = require("hashids");
 let hashids = new Hashids();
 let typingTimer; //timer identifier
 let doneTypingInterval = 5000;
 let updates = [];
-var Clipboard = Quill.import("modules/clipboard");
-
+const Clipboard = Quill.import("modules/clipboard");
+FontAttributor.whitelist = ["roboto", "Serif", "Sans Serif"];
+Quill.register(FontAttributor, true);
 class MyClipboard extends Clipboard {
   onPaste(e) {
     var wrapper = document.querySelector("#editor-wrapper");
@@ -234,7 +235,8 @@ export default {
     shareUrl: null,
     realTimeId: null,
     personToShareWith: null,
-    shareError: null
+    shareError: null,
+    currentUsers: []
   }),
   created() {
     const startLoad = performance.now();
@@ -296,6 +298,33 @@ export default {
                   time: endLoad - startLoad,
                   page: "documents"
                 });
+              firebase
+                .database()
+                .ref(
+                  `/documentMeta/${this.docUser}/${this.docId}/currentUsers/${
+                    this.uid
+                  }`
+                )
+                .set({
+                  uid: this.uid,
+                  image: firebase.auth().currentUser.photoURL,
+                  name: firebase.auth().currentUser.displayName
+                });
+              firebase
+                .database()
+                .ref(
+                  `/documentMeta/${this.docUser}/${this.docId}/currentUsers/${
+                    this.uid
+                  }`
+                )
+                .onDisconnect()
+                .remove();
+              firebase
+                .database()
+                .ref(`/documentMeta/${this.docUser}/${this.docId}/currentUsers`)
+                .on("value", data => {
+                  this.currentUsers = data.val();
+                });
               console.log(endLoad - startLoad + " loaded");
             });
           firebase
@@ -345,7 +374,27 @@ export default {
       }
     });
   },
-
+  beforeRouteLeave: function(to, from, next) {
+    firebase
+      .database()
+      .ref(
+        `/documentMeta/${this.docUser}/${this.docId}/currentUsers/${this.uid}`
+      )
+      .remove();
+    firebase
+      .database()
+      .ref(`/documents/${this.docUser}/${this.docId}/changes`)
+      .off();
+    firebase
+      .database()
+      .ref(`/documentMeta/${this.docUser}/${this.docId}/info`)
+      .off();
+    firebase
+      .database()
+      .ref(`/documentMeta/${this.docUser}/${this.docId}/currentUsers`)
+      .off();
+    next();
+  },
   methods: {
     shareWithPerson() {
       if (validateEmail(this.personToShareWith)) {

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,9 @@`
`5`	`5`	`.ql-editor {`
`6`	`6`	`min-height: 100vh;`
`7`	`7`	`}`
	`8`	`+ .ql-font-roboto {`
	`9`	`+ font-family: "Roboto", sans-serif;`
	`10`	`+ }`
`8`	`11`	`#editor {`
`9`	`12`	`margin-bottom: 5%;`
`10`	`13`	`}`
`@@ -62,7 +65,7 @@`
`62`	`65`	`}`
`63`	`66`
`64`	`67`	`.input {`
`65`		`- margin-bottom: .5em;`
	`68`	`+ margin-bottom: 0.5em;`
`66`	`69`	`}`
`67`	`70`
`68`	`71`	`.share-row {`
`@@ -76,7 +79,7 @@`
`76`	`79`	`margin-bottom: 0;`
`77`	`80`	`}`
`78`	`81`	`.share-item {`
`79`		`- margin-top: .5em;`
	`82`	`+ margin-top: 0.5em;`
`80`	`83`	`}`
`81`	`84`
`82`	`85`	`.ql-toolbar {`
`@@ -85,7 +88,7 @@`
`85`	`88`	`border-top-left: 0.5px solid $gray-accent;`
`86`	`89`	`border-top-left-radius: 3px;`
`87`	`90`	`}`
`88`		`-`
	`91`	`+`
`89`	`92`	`.ql-container {`
`90`	`93`	`border-bottom-right: 0.5px solid $gray-accent;`
`91`	`94`	`border-bottom-right-radius: 3px;`