[Client] Better poll tag
This commit is contained in:
parent
fd28d8b779
commit
cf85de5d05
|
@ -1,4 +1,4 @@
|
|||
<mk-poll>
|
||||
<mk-poll data-is-voted={ isVoted }>
|
||||
<ul>
|
||||
<li each={ poll.choices } onclick={ vote.bind(null, id) } class={ voted: voted }>
|
||||
<div class="backdrop" if={ parent.result } style={ 'width:' + (votes / parent.total * 100) + '%' }></div>
|
||||
|
@ -9,7 +9,12 @@
|
|||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p>{ total }人が投票</p>
|
||||
<p if={ total > 0 }>
|
||||
<span>{ total }人が投票</span>
|
||||
・
|
||||
<a if={ !isVoted } onclick={ toggleResult }>{ result ? '投票する' : '結果を見る' }</a>
|
||||
<span if={ isVoted }>投票済み</span>
|
||||
</p>
|
||||
<style type="stylus">
|
||||
:scope
|
||||
display block
|
||||
|
@ -45,6 +50,20 @@
|
|||
> .votes
|
||||
margin-left 4px
|
||||
|
||||
> p
|
||||
a
|
||||
color inherit
|
||||
|
||||
&[data-is-voted]
|
||||
> ul > li
|
||||
cursor default
|
||||
|
||||
&:hover
|
||||
background transparent
|
||||
|
||||
&:active
|
||||
background transparent
|
||||
|
||||
</style>
|
||||
<script>
|
||||
@mixin \api
|
||||
|
@ -52,7 +71,11 @@
|
|||
@post = @opts.post
|
||||
@poll = @post.poll
|
||||
@total = @poll.choices.reduce ((a, b) -> a + b.votes), 0
|
||||
@result = @poll.choices.some (c) -> c.is_voted
|
||||
@is-voted = @poll.choices.some (c) -> c.is_voted
|
||||
@result = @is-voted
|
||||
|
||||
@toggle-result = ~>
|
||||
@result = !@result
|
||||
|
||||
@vote = (id) ~>
|
||||
if (@poll.choices.some (c) -> c.is_voted) then return
|
||||
|
@ -66,6 +89,7 @@
|
|||
c.is_voted = true
|
||||
@update do
|
||||
poll: @poll
|
||||
is-voted: true
|
||||
result: true
|
||||
total: @total + 1
|
||||
|
||||
|
|
Loading…
Reference in New Issue