From 391f25648b5df7d17bbb8968c0c78b080f94218d Mon Sep 17 00:00:00 2001 From: Yorhel Date: Fri, 2 Oct 2009 15:09:48 +0200 Subject: JS: Rewrote release list dropdown Abstacted a simple set of reusable functions for generating dropdown lists, as I'm likely going to need that more often. --- data/style.css | 18 +++--- lib/VNDB/Handler/VNPage.pm | 2 +- static/f/script.js | 140 +++++++++++++++++++++++++++------------------ 3 files changed, 96 insertions(+), 64 deletions(-) diff --git a/data/style.css b/data/style.css index 0eeb0f73..02dca828 100644 --- a/data/style.css +++ b/data/style.css @@ -694,14 +694,16 @@ a.addnew { margin: 0; } -#vldd { position: absolute; left: -500px; border: 1px solid $border$; background-color: $secbg$; width: 180px; } -#vldd ul { float: left; width: 90px; list-style-type: none; margin: 0; padding: 0 } -#vldd li b { display: block; font-weight: normal; padding-left: 5px; } -#vldd li i { display: block; font-style: normal; padding-left: 10px; } -#vldd li a { display: block; padding-left: 10px; color: $link$; border: 0; } -#vldd li a:hover { background: url($_boxbg$) repeat } -#vldd ul.full { width: 180px; text-align: center; } -#vldd ul.full li a { padding: 0 } +#dd_box { position: absolute; left: -500px; border: 1px solid $border$; background-color: $secbg$; } +#dd_box ul { list-style-type: none; margin: 0; padding: 0 } +#dd_box li b { display: block; font-weight: normal; padding-left: 5px; } +#dd_box li i { display: block; font-style: normal; padding-left: 10px; } +#dd_box li a { display: block; padding-left: 10px; color: $link$; border: 0; } +#dd_box li a:hover { background: url($_boxbg$) repeat } +#dd_box .vrdd { width: 180px; } +#dd_box .vrdd ul { float: left; width: 90px; } +#dd_box .vrdd ul.full { width: 180px; text-align: center; } +#dd_box .vrdd ul.full li a { padding: 0 } diff --git a/lib/VNDB/Handler/VNPage.pm b/lib/VNDB/Handler/VNPage.pm index 74aef27f..126aa504 100644 --- a/lib/VNDB/Handler/VNPage.pm +++ b/lib/VNDB/Handler/VNPage.pm @@ -426,7 +426,7 @@ sub _releases { end; td class => 'tc5'; if($self->authInfo->{id}) { - a href => "/r$rel->{id}", id => "rlsel_$rel->{id}"; + a href => "/r$rel->{id}", id => "rlsel_$rel->{id}", class => 'vnrlsel'; lit $rel->{ulist} ? liststat $rel->{ulist} : '--'; end; } else { diff --git a/static/f/script.js b/static/f/script.js index 1c1a298e..fce39a11 100644 --- a/static/f/script.js +++ b/static/f/script.js @@ -56,7 +56,7 @@ function byClass() { // [class], [parent, class], [tagname, class], [parent, tag var ret = []; for(var i=0; i ddx+o.offsetWidth+100 || mouseY < ddy-5 || mouseY > ddy+o.offsetHeight+5) - || (tg && tg.id.substr(0,6) == 'rlsel_' && tg.id != 'rlsel_'+o.relId)) { - document.body.removeChild(o); - o = null; - } + if((mouseX < ddx-10 || mouseX > ddx+box.offsetWidth+10 || mouseY < ddy-10 || mouseY > ddy+box.offsetHeight+10) + || (lnk && lnk.id == box.dd_id)) + ddHide(); } - if(!o && tg) { - o = tg; + + if(!box.dd_used && lnk) { + var content = lnk.dd_contents(lnk, box); + if(content == null) + return; + setContent(box, content); + box.dd_id = lnk.id; + box.dd_used = true; + + var o = lnk; ddx = ddy = 0; do { ddx += o.offsetLeft; ddy += o.offsetTop; } while(o = o.offsetParent); - ddx -= 185; - var cu = tg.id.substr(6); - var st = tg.innerHTML.split(' / '); - if(st[0].indexOf('loading') >= 0) - return; - var r = ''; - if(tg.innerHTML != '--') - r += ''; - - o = document.createElement('div'); - o.id = 'vldd'; - o.relId = tg.id.substr(6); - o.style.left = ddx+'px'; - o.style.top = ddy+'px'; - o.innerHTML = r; - document.body.appendChild(o); + if(lnk.dd_align == 'left') + ddx -= box.offsetWidth; + if(lnk.dd_align == 'bottom') + ddy += lnk.offsetHeight; + box.style.left = ddx+'px'; + box.style.top = ddy+'px'; + } +} + + + +// release list dropdown on VN pages + +var rstat = [ 'Unknown', 'Pending', 'Obtained', 'On loan', 'Deleted' ]; +var vstat = [ 'Unknown', 'Playing', 'Finished', 'Stalled', 'Dropped' ]; +function rlDropDown(lnk) { + var relid = lnk.id.substr(6); + var st = getText(lnk).split(' / '); + if(st[0].indexOf('loading') >= 0) + return null; + + var rs = tag('ul', tag('li', tag('b', 'Release status'))); + var vs = tag('ul', tag('li', tag('b', 'Play status'))); + for(var i=0;i= 0) + rs.appendChild(tag('li', tag('i', rstat[i]))); + else + rs.appendChild(tag('li', tag('a', {href:'#', rl_rid:relid, rl_act:'r'+i, onclick:rlMod}, rstat[i]))); + } + for(var i=0;i= 0) + vs.appendChild(tag('li', tag('i', vstat[i]))); + else + vs.appendChild(tag('li', tag('a', {href:'#', rl_rid:relid, rl_act:'v'+i, onclick:rlMod}, vstat[i]))); } + + return tag('div', {class:'vrdd'}, rs, vs, st[0] == '--' ? null : + tag('ul', {class:'full'}, tag('li', tag('a', {href:'#', rl_rid: relid, rl_act:'del', onclick:rlMod}, 'Remove from VN List'))) + ); } -function vlMod(rid, act) { - document.body.removeChild(x('vldd')); - x('rlsel_'+rid).innerHTML = 'loading...'; - ajax('/xml/rlist.xml?id='+rid+';e='+act, function(hr) { - x('rlsel_'+rid).innerHTML = hr.responseXML.getElementsByTagName('rlist')[0].firstChild.nodeValue; +function rlMod() { + var lnk = byId('rlsel_'+this.rl_rid); + ddHide(); + setContent(lnk, tag('b', {class: 'patch'}, 'loading...')); + ajax('/xml/rlist.xml?id='+this.rl_rid+';e='+this.rl_act, function(hr) { + // TODO: get rid of innerHTML here... + lnk.innerHTML = hr.responseXML.getElementsByTagName('rlist')[0].firstChild.nodeValue; }); return false; } - +{ + var l = byClass('a', 'vnrlsel'); + for(var i=0;i