From 9f3ef64f0e12db565fa145721de6b98ed104ada8 Mon Sep 17 00:00:00 2001
From: theia
Date: Fri, 3 Feb 2023 13:09:28 -0500
Subject: Demo to root
---
README.md | 5 +++--
demo/index.html | 50 +++++++++++++++++++-------------------------------
demo/style.css | 3 +++
plugins/vue/plugin.js | 7 ++++---
4 files changed, 29 insertions(+), 36 deletions(-)
create mode 100644 demo/style.css
diff --git a/README.md b/README.md
index 8c06ad0..9aa4eb4 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
# Graffiti Javascript Library
-This is the base Javascript library that interfaces with the [Graffiti server](https://github.com/graffiti-garden/graffiti-server).
-It also includes a plugin that extends it to operate with the [Vue.js framework](https://vuejs.org/).
+This is the base Javascript library that interfaces with the [Graffiti server](https://github.com/graffiti-garden/graffiti-server). It also includes a plugin that extends it to operate with the [Vue.js framework](https://vuejs.org/).
+
+Check out the live [demo](https://graffiti.garden/graffiti-js/demo) of the library and plugin in action. The demo's source code is in the `/demo` folder.
diff --git a/demo/index.html b/demo/index.html
index 7a142c1..06e83d3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -2,16 +2,16 @@
- Graffiti Vue
+ Graffiti JS Demo
+
-
-
- Connection Status
-
+
Graffiti Demo
- Connected to the Graffiti server? {{ $graffitiConnected }}
+ This demonstrates use of the graffiti-js library Vue interface.
-
- Logging In
-
+
Connection Status
+
+
+ Connected to the Graffiti server? {{ $graffitiConnected }}
+
+
+
Logging In
-
- My Graffiti ID is "{{ $graffitiMyID }}"
+
+ My Graffiti ID is {{ $graffitiMyID }}
-
-
-
- Profile
-
+
Profile
My name is:
@@ -61,24 +58,15 @@
-
-
-
- Chatting
-
+
Chatting
-
-
-
-
-
+
Moderation
-
+
Context
-
+
Private Messages
-
diff --git a/demo/style.css b/demo/style.css
new file mode 100644
index 0000000..7bdf592
--- /dev/null
+++ b/demo/style.css
@@ -0,0 +1,3 @@
+h2 {
+ margin-top: 1.5em;
+}
diff --git a/plugins/vue/plugin.js b/plugins/vue/plugin.js
index 76fb0de..f789449 100644
--- a/plugins/vue/plugin.js
+++ b/plugins/vue/plugin.js
@@ -10,8 +10,8 @@ export default {
// Initialize graffiti with reactive entries
const graffiti = new Graffiti(graffitiURL, ()=>reactive({}))
- // Create a reactive variable that tracks
- // connection changes
+ // Create a reactive variable that
+ // tracks connection state
const connectionState = ref(false)
;(function waitForState(state) {
graffiti.connectionState(state).then(()=> {
@@ -22,7 +22,8 @@ export default {
get: ()=> connectionState.value
})
- // the connection state becomes true
+ // Latch on to the graffiti ID
+ // when the connection state first becomes true
let myID = null
Object.defineProperty(app.config.globalProperties, "$graffitiMyID", {
get: ()=> {
--
cgit v1.2.3-70-g09d2