diff options
author | Yorhel <git@yorhel.nl> | 2009-02-28 11:52:35 +0100 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2009-02-28 11:52:35 +0100 |
commit | dfd7d32a1a7f53ff5e51db8e25ca75ab8a2ef049 (patch) | |
tree | 9bde9a77c16d8c0d390c8daecd6d89b4a0647263 | |
parent | fe3f588b873346789de148dda832fa19e8f10d07 (diff) |
Friendly and interactive interface for changing your tag vote
-rw-r--r-- | data/style.css | 9 | ||||
-rw-r--r-- | lib/VNDB/Handler/Tags.pm | 14 | ||||
-rw-r--r-- | static/f/forms.js | 44 |
3 files changed, 57 insertions, 10 deletions
diff --git a/data/style.css b/data/style.css index ec99ae2d..03990fa1 100644 --- a/data/style.css +++ b/data/style.css @@ -974,6 +974,15 @@ ul#catselect li li.exc { background-position: 0px -33px; color: $statnok$; } /***** VN tagmod *****/ #jt_box_tags .formtable table td { padding: 1px 3px } +.taglvl { display: block; float: left; width: 8px; height: 12px; border: 1px solid $border$; font-size: 1px; } +.taglvl0 { width: 15px; border: none!important; font-size: 11px; text-align: center; } +a.taglvl:hover { border-bottom: 1px solid!important } +.taglvlsel.taglvl-3 { background-color: #f00; border-color: #f00 } +.taglvlsel.taglvl-2 { background-color: #f40; border-color: #f40 } +.taglvlsel.taglvl-1 { background-color: #f80; border-color: #f80 } +.taglvlsel.taglvl1 { background-color: #cf0; border-color: #cf0 } +.taglvlsel.taglvl2 { background-color: #8f0; border-color: #8f0 } +.taglvlsel.taglvl3 { background-color: #0f0; border-color: #0f0 } diff --git a/lib/VNDB/Handler/Tags.pm b/lib/VNDB/Handler/Tags.pm index dfd992f2..b981381a 100644 --- a/lib/VNDB/Handler/Tags.pm +++ b/lib/VNDB/Handler/Tags.pm @@ -248,20 +248,16 @@ sub vntagmod { end; end; tbody; for my $t (sort { $a->{name} cmp $b->{name} } @$tags) { + my $m = (grep $_->{tag} == $t->{id}, @$my)[0] || {}; Tr; td; a href => "/g$t->{id}", $t->{name}; end; - td $t->{users}; - td sprintf '%.2f', $t->{rating}; + td $t->{users} - ($m ? 1 : 0); + td sprintf '%.2f', $m ? ($t->{rating}/$t->{users} - $m->{vote}) * ($t->{users}-1) : $t->{rating}; td $t->{spoiler}; - my $m = (grep $_->{tag} == $t->{id}, @$my)[0] || {}; - td; - input type => 'text', class => 'text', name => "tagvote_$t->{id}", value => $m->{vote}||'0', style => 'width: 15px; height: 14px'; - end; - td; - input type => 'text', class => 'text', name => "tagspoil_$t->{id}", value => $m->{spoiler}||'-', style => 'width: 15px; height: 14px'; - end; + td $m->{vote}||0; + td $m->{spoiler}||'-'; end; } end; diff --git a/static/f/forms.js b/static/f/forms.js index 1ebd9e92..25d3f9f9 100644 --- a/static/f/forms.js +++ b/static/f/forms.js @@ -881,7 +881,47 @@ function tglLoad() { return item.firstChild.nodeValue; }, tglAdd); n[1].onclick = tglAdd; + tglStripe(); + var l = x('tagtable').getElementsByTagName('tbody')[0].getElementsByTagName('tr'); + for(var i=0; i<l.length;i++) { + var o = l[i].getElementsByTagName('td')[4]; + tglVoteBar(o, o.innerHTML); + } +} + +function tglVoteBar(obj, vote) { + var r = ''; + for(i=-3;i<=3;i++) { + if(i) + r += '<a href="#" class="taglvl taglvl'+i+'" onmouseover="tglVoteBarSel(this, '+i+')"' + + ' onmouseout="tglVoteBarSel(this, '+vote+')" onclick="return tglVoteBar(this.parentNode, '+i+')"> </a>'; + else + r += '<div class="taglvl taglvl0">'+(vote?vote:'-')+'</div>'; + } + obj.innerHTML = r; + tglVoteBarSel(obj, vote); + return false; +} + +function tglVoteBarSel(obj, vote) { + if(obj.className.indexOf('taglvl') >= 0) + obj = obj.parentNode; + var l = obj.getElementsByTagName('a'); + for(var i=0; i<l.length; i++) { + var num = l[i].className.replace(/^.*taglvl(-?[1-3]).*$/, "$1"); + if(!num || num == l[i].className) continue; + if(num<0&&vote<=num || num>0&&vote>=num) { + if(l[i].className.indexOf('taglvlsel') < 0) + l[i].className += ' taglvlsel'; + } else + if(l[i].className.indexOf('taglvlsel') >= 0) + l[i].className = l[i].className.replace(/taglvlsel/, ''); + } + l = obj.getElementsByTagName('div'); + for(var i=0; i<l.length; i++) + if(l[i].className.indexOf('taglvl0') >= 0) + l[i].innerHTML = vote; } function tglAdd() { @@ -917,7 +957,9 @@ function tglAdd() { td.innerHTML = '0'; tr.appendChild(td); td = document.createElement('td'); - td.setAttribute('colspan', 2); + tglVoteBar(td, 1); + tr.appendChild(td); + td = document.createElement('td'); td.innerHTML = '-TODO-'; tr.appendChild(td); x('tagtable').getElementsByTagName('tbody')[0].appendChild(tr); |