diff options
| -rw-r--r-- | demo/components/chat.js | 4 | ||||
| -rw-r--r-- | demo/components/like-button.js | 4 | ||||
| -rw-r--r-- | demo/components/moderation.js | 36 | ||||
| -rw-r--r-- | demo/index.html | 4 |
4 files changed, 45 insertions, 3 deletions
diff --git a/demo/components/chat.js b/demo/components/chat.js index 08b478b..2d68ee0 100644 --- a/demo/components/chat.js +++ b/demo/components/chat.js @@ -32,7 +32,9 @@ export default { }, template: ` - Chat Channel: <input v-model="channel"/> + <p> + Chat Channel: <input v-model="channel"/> + </p> <graffiti-objects :tags="[channel]" v-slot="{objects}"> <ul v-for="object in messageObjects(objects)"> diff --git a/demo/components/like-button.js b/demo/components/like-button.js index 1c9649a..5c9b1a5 100644 --- a/demo/components/like-button.js +++ b/demo/components/like-button.js @@ -3,11 +3,11 @@ export default { props: ['messageID'], methods: { - likeObjects(objects) { + likeObjects(objects, messageID=this.messageID) { return objects.filter(o=> 'like' in o && 'timestamp' in o && - o.like == this.messageID && + o.like == messageID && typeof o.timestamp == 'number') }, diff --git a/demo/components/moderation.js b/demo/components/moderation.js new file mode 100644 index 0000000..8ba4e98 --- /dev/null +++ b/demo/components/moderation.js @@ -0,0 +1,36 @@ +import Chat from './chat.js' +import LikeButton from './like-button.js' + +export default { + + data: ()=> ({ + likeThreshold: 0, + channel: 'demo' + }), + + methods: { + messageObjects: Chat.methods.messageObjects, + likeObjects: LikeButton.methods.likeObjects, + }, + + template: ` + <p> + Chat Channel: <input v-model="channel"/> + </p> + + <p> + Only show me objects with more than <input v-model.number="likeThreshold"/> likes. + </p> + + <graffiti-objects :tags="[channel]" v-slot="{objects}"> + <ul v-for="object in messageObjects(objects)"> + <graffiti-objects :tags="[object._id]" v-slot="{objects: responses}"> + <li v-if="likeObjects(responses, object._id).length >= likeThreshold"> + <em><Name :of="object._by"/></em>: + {{ object.message }} + </li> + </graffiti-objects> + </ul> + </graffiti-objects>` +} + diff --git a/demo/index.html b/demo/index.html index b409ee4..57b3132 100644 --- a/demo/index.html +++ b/demo/index.html @@ -16,12 +16,14 @@ import { createApp } from 'vue' import { Name, SetMyName } from './components/name.js' import Chat from './components/chat.js' + import Moderation from './components/moderation.js' import GraffitiVue from 'graffiti-vue' createApp() .use(GraffitiVue) .component('Name', Name) .component('SetMyName', SetMyName) .component('Chat', Chat) + .component('Moderation', Moderation) .mount('#app') </script> </head> @@ -61,6 +63,8 @@ <h2>Moderation</h2> + <moderation></moderation> + <h2>Private Messages</h2> <h2>Tagging</h2> |