[Client] Better poll tag

This commit is contained in:
syuilo 2017-02-14 17:17:39 +09:00
parent 8f666521ec
commit 3279a3eba2

View File

@ -1,4 +1,4 @@
<mk-poll> <mk-poll data-is-voted={ isVoted }>
<ul> <ul>
<li each={ poll.choices } onclick={ vote.bind(null, id) } class={ voted: voted }> <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> <div class="backdrop" if={ parent.result } style={ 'width:' + (votes / parent.total * 100) + '%' }></div>
@ -9,7 +9,12 @@
</span> </span>
</li> </li>
</ul> </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"> <style type="stylus">
:scope :scope
display block display block
@ -45,6 +50,20 @@
> .votes > .votes
margin-left 4px margin-left 4px
> p
a
color inherit
&[data-is-voted]
> ul > li
cursor default
&:hover
background transparent
&:active
background transparent
</style> </style>
<script> <script>
@mixin \api @mixin \api
@ -52,7 +71,11 @@
@post = @opts.post @post = @opts.post
@poll = @post.poll @poll = @post.poll
@total = @poll.choices.reduce ((a, b) -> a + b.votes), 0 @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) ~> @vote = (id) ~>
if (@poll.choices.some (c) -> c.is_voted) then return if (@poll.choices.some (c) -> c.is_voted) then return
@ -66,6 +89,7 @@
c.is_voted = true c.is_voted = true
@update do @update do
poll: @poll poll: @poll
is-voted: true
result: true result: true
total: @total + 1 total: @total + 1