To run this, install dependencies, update conversation_id and xid(if you want) in src/polisVariables.js, and then npm run serve. You can use any other data attributes you would otherwise use for the polis embed as well.
Component currently lives in src/components/Polis.vue. It is adapted from the polis embed for Vue so that it can interact better with Vue's reactivity and provide more room for behavior / ui customization.
You can listen for polis events that are sent via window.postMessage (vote, write, doneVoting, init) on the component by using the v-on directive. As there is no good way to do resizing with current props, there is no listener for the resize event exposed at the moment.
Supply config to the component - for each data attribute you would place on the embed div, just use the part after data-. so to supply conversation_id, you would do :conversation_id="yourConversationId".
You'll need to supply either conversation_id or both site_id and page_id, or the component will throw an error.
Watch out when changing props passed to this component, any changes will cause the iframe to reload. Might change this in the near future.
Basic usage with conversation_id
<template>
<Polis :conversation_id="conversation_id"/>
</template>
<script>
import Polis from "./components/Polis";
export default {
components: {
Polis
},
data(){
return {
conversation_id: "some_conversation_id"
}
}
}
</script>
conversation_id + xid
<template>
<Polis :conversation_id="conversation_id" :xid="xid"/>
</template>
<script>
import Polis from "./components/Polis";
export default {
components: {
Polis
},
data(){
return {
conversation_id: "some_conversation_id",
xid: "some_xid"
}
}
}
</script>
Adding an event listener for a vote
<template>
<div>
You've voted on {{ votes }} comments this session.
<Polis :conversation_id="conversation_id" @vote="votes += 1"/>
</div>
</template>
<script>
import Polis from "./components/Polis";
export default {
components: {
Polis
},
data(){
return {
votes: 0,
conversation_id: "some_conversation_id"
}
}
}
</script>
Event listeners for different conversations
<template>
<div>
You've voted on {{ firstVotes }} comments for conversation 1 this session.
You've voted on {{ secondVotes }} comments for conversation 2 this session.
<Polis :conversation_id="first_conversation_id" @vote="firstVotes += 1"/>
<Polis :conversation_id="second_conversation_id" @vote="secondVotes += 1"/>
</div>
</template>
<script>
import Polis from "./components/Polis";
export default {
components: {
Polis
},
data(){
return {
firstVotes: 0,
secondVotes: 0,
first_conversation_id: "some_conversation_id",
second_conversation_id: "some_other_conversation_id",
}
}
}
</script>
npm install
npm run serve
npm run build
npm run lint
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent