Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
syuilo 2018-02-22 22:03:44 +09:00
parent 7816282318
commit bc632cefe5
11 changed files with 104 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

164
src/web/app/common/views/components/poll.vue
View file

@ -1,11 +1,11 @@
<template>
<div :data-is-voted="isVoted">
<div class="mk-poll" :data-is-voted="isVoted">
<ul>
<li v-for="choice in poll.choices" :key="choice.id" @click="vote.bind(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', choice.text) : ''">
<div class="backdrop" :style="{ 'width:' + (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', choice.text) : ''">
<div class="backdrop" :style="{ 'width': (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
<span>
<template v-if="choice.is_voted">%fa:check%</template>
{{ text }}
{{ choice.text }}
<span class="votes" v-if="showResult">({{ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', choice.votes) }})</span>
</span>
</li>
@ -19,100 +19,100 @@
</div>
</template>
<script lang="typescript">
export default {
props: ['post'],
data() {
return {
showResult: false
};
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['post'],
data() {
return {
showResult: false
};
},
computed: {
poll(): any {
return this.post.poll;
},
computed: {
poll() {
return this.post.poll;
},
total() {
return this.poll.choices.reduce((a, b) => a + b.votes, 0);
},
isVoted() {
return this.poll.choices.some(c => c.is_voted);
}
total(): number {
return this.poll.choices.reduce((a, b) => a + b.votes, 0);
},
created() {
this.showResult = this.isVoted;
},
methods: {
toggleShowResult() {
this.showResult = !this.showResult;
},
vote(id) {
if (this.poll.choices.some(c => c.is_voted)) return;
(this as any).api('posts/polls/vote', {
post_id: this.post.id,
choice: id
}).then(() => {
this.poll.choices.forEach(c => {
if (c.id == id) {
c.votes++;
c.is_voted = true;
}
});
this.showResult = true;
});
}
isVoted(): boolean {
return this.poll.choices.some(c => c.is_voted);
}
};
},
created() {
this.showResult = this.isVoted;
},
methods: {
toggleShowResult() {
this.showResult = !this.showResult;
},
vote(id) {
if (this.poll.choices.some(c => c.is_voted)) return;
(this as any).api('posts/polls/vote', {
post_id: this.post.id,
choice: id
}).then(() => {
this.poll.choices.forEach(c => {
if (c.id == id) {
c.votes++;
Vue.set(c, 'is_voted', true);
}
});
this.showResult = true;
});
}
}
});
</script>
<style lang="stylus" scoped>
:scope
.mk-poll
> ul
display block
margin 0
padding 0
list-style none
> ul
> li
display block
margin 0
padding 0
list-style none
margin 4px 0
padding 4px 8px
width 100%
border solid 1px #eee
border-radius 4px
overflow hidden
cursor pointer
> li
display block
margin 4px 0
padding 4px 8px
width 100%
border solid 1px #eee
border-radius 4px
overflow hidden
cursor pointer
&:hover
background rgba(0, 0, 0, 0.05)
&:hover
background rgba(0, 0, 0, 0.05)
&:active
background rgba(0, 0, 0, 0.1)
&:active
background rgba(0, 0, 0, 0.1)
> .backdrop
position absolute
top 0
left 0
height 100%
background $theme-color
transition width 1s ease
> .backdrop
position absolute
top 0
left 0
height 100%
background $theme-color
transition width 1s ease
> .votes
margin-left 4px
> .votes
margin-left 4px
> p
a
color inherit
> p
a
color inherit
&[data-is-voted]
> ul > li
cursor default
&[data-is-voted]
> ul > li
cursor default
&:hover
background transparent
&:hover
background transparent
&:active
background transparent
&:active
background transparent
</style>