diff options
| -rw-r--r-- | demo/components/moderation.js | 4 | ||||
| -rw-r--r-- | demo/components/private-messaging.js | 66 | ||||
| -rw-r--r-- | demo/index.html | 7 | ||||
| -rw-r--r-- | graffiti.js | 3 |
4 files changed, 76 insertions, 4 deletions
diff --git a/demo/components/moderation.js b/demo/components/moderation.js index 1a2b0fd..4cf8071 100644 --- a/demo/components/moderation.js +++ b/demo/components/moderation.js @@ -22,6 +22,8 @@ export default { <graffiti-objects :tags="[channel]" v-slot="{objects}"> + <h3>Example 1</h3> + <p> Only show me objects with more than <input v-model.number="likeThreshold"/> likes. </p> @@ -35,6 +37,8 @@ export default { </graffiti-objects> </ul> + <h3>Example 2</h3> + <p> Only show me objects that <select v-model="admin"> diff --git a/demo/components/private-messaging.js b/demo/components/private-messaging.js new file mode 100644 index 0000000..61f783b --- /dev/null +++ b/demo/components/private-messaging.js @@ -0,0 +1,66 @@ +import Chat from './chat.js' +import {Name} from './name.js' + +export default { + + data: ()=> ({ + recipient: null, + message: '' + }), + + methods: { + messageObjects: Chat.methods.messageObjects, + chatObjects(objects) { + return this.messageObjects(objects).filter(o=> + '_to' in o && o._to.length == 1) + }, + + sendMessage() { + if (!this.message) return + this.$graffitiUpdate({ + message: this.message, + timestamp: Date.now(), + _to: [this.recipient], + _tags: [this.$graffitiMyID, this.recipient] + }) + this.message = '' + } + }, + + template: ` + Send private message to: + <graffiti-objects :tags="['demo']" v-slot="{objects}"> + <select v-model="recipient"> + <option v-for="id in objects.notMine.authors" :value="id"> + <Name :of="id"> + </option> + </select> + </graffiti-objects> + + <form @submit.prevent="sendMessage"> + <input v-model="message"> + <input type="submit" value="Submit"/> + </form> + + <graffiti-objects :tags="[$graffitiMyID]" v-slot="{objects}"> + + <h3>My Outbox</h3> + + <ul v-for="object in chatObjects(objects).mine"> + <li> + To <em><Name :of="object._to[0]"/></em>: + {{ object.message }} + </li> + </ul> + + <h3>My Inbox</h3> + + <ul v-for="object in chatObjects(objects).notMine"> + <li> + From <em><Name :of="object._by"/></em>: + {{ object.message }} + </li> + </ul> + + </graffiti-objects>` +} diff --git a/demo/index.html b/demo/index.html index 57b3132..1f05b25 100644 --- a/demo/index.html +++ b/demo/index.html @@ -17,6 +17,7 @@ import { Name, SetMyName } from './components/name.js' import Chat from './components/chat.js' import Moderation from './components/moderation.js' + import PrivateMessaging from './components/private-messaging.js' import GraffitiVue from 'graffiti-vue' createApp() .use(GraffitiVue) @@ -24,6 +25,7 @@ .component('SetMyName', SetMyName) .component('Chat', Chat) .component('Moderation', Moderation) + .component('PrivateMessaging', PrivateMessaging) .mount('#app') </script> </head> @@ -65,9 +67,8 @@ <moderation></moderation> - <h2>Private Messages</h2> + <h2>Private Messaging</h2> - <h2>Tagging</h2> - + <private-messaging></private-messaging> </body> </html> diff --git a/graffiti.js b/graffiti.js index 4100e08..824fdf6 100644 --- a/graffiti.js +++ b/graffiti.js @@ -140,7 +140,7 @@ export default class { // Replace the object by copying // so references to it don't break this.#recursiveCopy(objectMap[uuid], object) - } else { + } else if (!('_id' in object)) { // Add properties to the object // so it can be updated and removed @@ -148,6 +148,7 @@ export default class { Object.defineProperty(object, '_id', { value: this.#objectUUID(object) }) Object.defineProperty(object, '_update', { value: ()=>this.update(object) }) Object.defineProperty(object, '_remove', { value: ()=>this.remove(object) }) + objectMap[uuid] = object } } |