diff options
| -rw-r--r-- | README.md | 5 | ||||
| -rw-r--r-- | demo/index.html | 50 | ||||
| -rw-r--r-- | demo/style.css | 3 | ||||
| -rw-r--r-- | plugins/vue/plugin.js | 7 |
4 files changed, 29 insertions, 36 deletions
@@ -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 @@ <html> <head> <meta charset="utf-8"> - <title>Graffiti Vue</title> + <title>Graffiti JS Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> + <link rel="stylesheet" href="./style.css"> <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script> <script type="importmap">{ "imports": { "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.prod.min.js", - "graffiti-vue": "../plugin.js" + "graffiti-vue": "https://graffiti.garden/graffiti-js/plugins/vue/plugin.js" }}</script> <script type="module"> - // "graffiti-vue": "https://graffiti.garden/graffiti-js/plugins/vue/plugin.js" import { createApp } from 'vue' import { Name, SetMyName } from './components/name.js' import Chat from './components/chat.js' @@ -25,19 +25,20 @@ </script> </head> <body id="app"> -<!--------------------------------------------------------------> - <h1> - Connection Status - </h1> + <h1>Graffiti Demo</h1> <p> - Connected to the Graffiti server? {{ $graffitiConnected }} + This demonstrates use of the <a href="">graffiti-js</a> library Vue interface. </p> - <h1> - Logging In - </h1> + <h2>Connection Status</h2> + + <p> + Connected to the Graffiti server? <b>{{ $graffitiConnected }}</b> + </p> + + <h2>Logging In</h2> <p> <button @click="$graffitiToggleLogIn"> @@ -45,15 +46,11 @@ </button> </p> - <p> - My Graffiti ID is "{{ $graffitiMyID }}" + <p v-if="$graffitiMyID"> + My Graffiti ID is <b>{{ $graffitiMyID }}</b> </p> - <br> - - <h1> - Profile - </h1> + <h2>Profile</h2> <p> My name is: <name :of="$graffitiMyID"></name> @@ -61,24 +58,15 @@ <set-my-name :tags="[$graffitiMyID]"></set-my-name> - <br> - - <h1> - Chatting - </h1> + <h2>Chatting</h2> <chat :tags="['demo']"></chat> - <!-- Add a like button --> - - - <!-- Filter by likes --> - + <h2>Moderation</h2> - <!-- different contexts --> + <h2>Context</h2> - <!-- Private messages --> + <h2>Private Messages</h2> -<!--------------------------------------------------------------> </body> </html> 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: ()=> { |