From ad638b58f65285285adda787b79b9422ca43313b Mon Sep 17 00:00:00 2001
From: Yorhel <git@yorhel.nl>
Date: Mon, 5 Oct 2009 13:03:43 +0200
Subject: JS: Moved, rewrote and improved VN tag linking

- You can now click the spoiler column to scroll through the options
- Or mouse-over the spoiler column to see a JS dropdown with the options
(no more select box, which introduces several more clicks to do the same)
---
 static/f/forms.js  | 143 -----------------------------------
 static/f/script.js | 214 +++++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 193 insertions(+), 164 deletions(-)

(limited to 'static/f')

diff --git a/static/f/forms.js b/static/f/forms.js
index d490b0d8..99b8bd13 100644
--- a/static/f/forms.js
+++ b/static/f/forms.js
@@ -114,153 +114,10 @@ function vnpSerialize(type) {
 
 
 
-
-
-
-   /****************************************************\
-   *   V I S U A L   N O V E L   T A G   L I N K I N G  *
-   \****************************************************/
-
-
-function tglLoad() {
-  var n = x('tagtable').getElementsByTagName('tfoot')[0].getElementsByTagName('input');
-  dsInit(n[1], '/xml/tags.xml?q=', function(item, tr) {
-    var td = document.createElement('td');
-    td.innerHTML = shorten(item.firstChild.nodeValue, 40);
-    if(item.getAttribute('meta') == 'yes')
-      td.innerHTML += ' <b class="grayedout">meta</b>';
-    else if(item.getAttribute('state') == 0)
-      td.innerHTML += ' <b class="grayedout">awaiting moderation</b>';
-    tr.appendChild(td);
-  }, function(item) {
-    return item.firstChild.nodeValue;
-  }, tglAdd);
-  n[2].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');
-    tglSpoiler(o[2], parseInt(o[2].innerHTML));
-    tglVoteBar(o[1], parseInt(o[1].innerHTML));
-  }
-}
-
-function tglSpoiler(obj, spoil) {
-  var r = '<select onchange="tglSerialize()">';
-  for(var i=-1; i<=2; i++)
-    r += '<option value="'+i+'"'+(spoil==i?' selected="selected"':'')+'>'
-      +(i == -1 ? 'neutral' : i == 0 ? 'no spoiler' : i == 1 ? 'minor spoiler' : 'major spoiler')
-      +'&nbsp;</option>';
-  obj.innerHTML = r+'</select>';
-}
-
-function tglVoteBar(obj, vote) {
-  var r = '';
-  for(var i=-3;i<=3;i++)
-    r += '<a href="#" class="taglvl taglvl'+i+'" onmouseover="tglVoteBarSel(this, '+i+')"'
-       + ' onmouseout="tglVoteBarSel(this, '+vote+')" onclick="return tglVoteBar(this.parentNode, '+i+')">&nbsp;</a>';
-  obj.innerHTML = r;
-  tglVoteBarSel(obj, vote);
-  tglSerialize();
-  return false;
-}
-
-function tglVoteBarSel(obj, vote) {
-  if(obj.className.indexOf('taglvl') >= 0)
-    obj = obj.parentNode;
-  var l = obj.getElementsByTagName('a');
-  var num;
-  for(var i=0; i<l.length; i++) {
-    if((num = l[i].className.replace(/^.*taglvl(-?[0-3]).*$/, "$1")) == l[i].className)
-      continue;
-    if(num == 0)
-      l[i].innerHTML = vote == 0 ? '-' : vote;
-    else 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/, '');
-  }
-}
-
-function tglAdd() {
-  var n = x('tagtable').getElementsByTagName('tfoot')[0].getElementsByTagName('input');
-  n[1].disabled = n[2].disabled = true;
-  n[2].value = 'loading...';
-  ajax('/xml/tags.xml?q=name:'+encodeURIComponent(n[1].value), function(hr) {
-    n[1].disabled = n[1].disabled = false;
-    n[2].value = 'Add tag';
-    n[1].value = '';
-
-    var items = hr.responseXML.getElementsByTagName('item');
-    if(items.length < 1)
-      return alert('Item not found!');
-    if(items[0].getAttribute('meta') == 'yes')
-      return alert('Can\'t use meta tags here!');
-    var name = items[0].firstChild.nodeValue;
-    var l = x('tagtable').getElementsByTagName('a');
-    for(var i=0; i<l.length; i++)
-      if(l[i].innerHTML == qq(name))
-        return alert('Tag is already present!');
-
-    var tr = document.createElement('tr');
-    var td = document.createElement('td');
-    td.innerHTML = '<a href="/g'+items[0].getAttribute('id')+'">'+qq(name)+'</a>';
-    td.className = 'tc1';
-    tr.appendChild(td);
-    td = document.createElement('td');
-    tglVoteBar(td, 2);
-    td.className = 'tc2';
-    tr.appendChild(td);
-    td = document.createElement('td');
-    tglSpoiler(td, -1);
-    td.className = 'tc3';
-    tr.appendChild(td);
-    td = document.createElement('td');
-    td.className = 'tc4';
-    td.innerHTML = '-';
-    tr.appendChild(td);
-    td = document.createElement('td');
-    td.innerHTML = '-';
-    td.className = 'tc5';
-    tr.appendChild(td);
-    x('tagtable').getElementsByTagName('tbody')[0].appendChild(tr);
-    tglStripe();
-    tglSerialize();
-  });
-}
-
-function tglStripe() {
-  var l = x('tagtable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
-  for(var i=0;i<l.length;i++)
-    l[i].className = i%2 ? 'odd' : '';
-}
-
-function tglSerialize() {
-  var r = '';
-  var l = x('tagtable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
-  for(var i=0; i<l.length;i++) {
-    var lnk = l[i].getElementsByTagName('a')[0].href;
-    var vt = l[i].getElementsByTagName('td')[1].getElementsByTagName('a');
-    var id;
-    if((id = lnk.replace(/^.*g([1-9][0-9]*)$/, "$1")) != lnk && vt.length > 3 && vt[3].innerHTML != '-')
-      r += (r?' ':'')+id+','+vt[3].innerHTML+','+(l[i].getElementsByTagName('select')[0].selectedIndex-1);
-  }
-  x('taglinks').value = r;
-}
-
-
-
-
 // load
 
 if(x('jt_box_rel_vn'))
   vnpLoad('vn');
 if(x('jt_box_rel_prod'))
   vnpLoad('producers');
-if(x('taglinks'))
-  tglLoad();
-
 
diff --git a/static/f/script.js b/static/f/script.js
index a6c5499c..de0b612d 100644
--- a/static/f/script.js
+++ b/static/f/script.js
@@ -251,9 +251,10 @@ ivInit();
 /*  D R O P D O W N  */
 
 function ddInit(obj, align, contents) {
-  obj.dd_align = align; // only 'left' and 'bottom' supported at the moment
+  obj.dd_align = align; // see ddRefresh for details
   obj.dd_contents = contents;
   document.onmousemove = ddMouseMove;
+  document.onscroll = ddHide;
   if(!byId('dd_box'))
     addBody(tag('div', {id:'dd_box', dd_used: false}));
 }
@@ -263,6 +264,7 @@ function ddHide() {
   setText(box, '');
   box.style.left = '-500px';
   box.dd_used = false;
+  box.dd_lnk = null;
 }
 
 function ddMouseMove(e) {
@@ -278,34 +280,44 @@ function ddMouseMove(e) {
     var mouseX = e.pageX || (e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
     var mouseY = e.pageY || (e.clientY + document.body.scrollTop  + document.documentElement.scrollTop);
     if((mouseX < ddx-10 || mouseX > ddx+box.offsetWidth+10 || mouseY < ddy-10 || mouseY > ddy+box.offsetHeight+10)
-        || (lnk && lnk.id == box.dd_id))
+        || (lnk && lnk == box.dd_lnk))
       ddHide();
   }
 
   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_lnk = lnk;
     box.dd_used = true;
-
-    var o = lnk;
-    ddx = ddy = 0;
-    do {
-      ddx += o.offsetLeft;
-      ddy += o.offsetTop;
-    } while(o = o.offsetParent);
-
-    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';
+    if(!ddRefresh())
+      ddHide();
   }
 }
 
+function ddRefresh() {
+  var box = byId('dd_box');
+  if(!box.dd_used)
+    return false;
+  var lnk = box.dd_lnk;
+  var content = lnk.dd_contents(lnk, box);
+  if(content == null)
+    return false;
+  setContent(box, content);
+
+  var o = lnk;
+  ddx = ddy = 0;
+  do {
+    ddx += o.offsetLeft;
+    ddy += o.offsetTop;
+  } while(o = o.offsetParent);
+
+  if(lnk.dd_align == 'left')
+    ddx -= box.offsetWidth;
+  if(lnk.dd_align == 'tagmod')
+    ddx += lnk.offsetWidth-35;
+  box.style.left = ddx+'px';
+  box.style.top = ddy+'px';
+  return true;
+}
+
 
 // release list dropdown on VN pages
 
@@ -1122,6 +1134,166 @@ if(x('jt_box_vn_scr'))
 
 
 
+/*  V I S U A L   N O V E L   T A G   L I N K I N G  (/v+/tagmod)  */
+
+var tglSpoilers = [ 'neutral', 'no spoiler', 'minor spoiler', 'major spoiler' ];
+
+function tglLoad() {
+  // tag dropdown search
+  dsInit(byId('tagmod_tag'), '/xml/tags.xml?q=', function(item, tr) {
+    tr.appendChild(tag('td',
+      shorten(item.firstChild.nodeValue, 40),
+      item.getAttribute('meta') == 'yes' ? tag('b', {class:'grayedout'}, ' meta') :
+      item.getAttribute('state') == 0    ? tag('b', {class:'grayedout'}, ' awaiting moderation') : null
+    ));
+  }, function(item) {
+    return item.firstChild.nodeValue;
+  }, tglAdd);
+  byId('tagmod_add').onclick = tglAdd;
+
+  // JS'ify the voting bar and spoiler setting
+  tglStripe();
+  var trs = byName(byId('tagtable'), 'tr');
+  for(var i=0; i<trs.length; i++) {
+    var vote = byClass(trs[i], 'td', 'tc_myvote')[0];
+    vote.tgl_vote = getText(vote)*1;
+    tglVoteBar(vote);
+
+    var spoil = byClass(trs[i], 'td', 'tc_myspoil')[0];
+    spoil.tgl_spoil = getText(spoil)*1+1;
+    setText(spoil, tglSpoilers[spoil.tgl_spoil]);
+    ddInit(spoil, 'tagmod', tglSpoilDD);
+    spoil.onclick = tglSpoilNext;
+  }
+  tglSerialize();
+}
+
+function tglSpoilNext() {
+  if(++this.tgl_spoil >= tglSpoilers.length)
+    this.tgl_spoil = 0;
+  setText(this, tglSpoilers[this.tgl_spoil]);
+  tglSerialize();
+  ddRefresh();
+}
+
+function tglSpoilDD(lnk) {
+  var lst = tag('ul', null);
+  for(var i=0; i<tglSpoilers.length; i++)
+    lst.appendChild(tag('li', i == lnk.tgl_spoil
+      ? tag('i', tglSpoilers[i])
+      : tag('a', {href: '#', onclick:tglSpoilSet, tgl_td:lnk, tgl_sp:i}, tglSpoilers[i])
+    ));
+  return lst;
+}
+
+function tglSpoilSet() {
+  this.tgl_td.tgl_spoil = this.tgl_sp;
+  setText(this.tgl_td, tglSpoilers[this.tgl_sp]);
+  ddHide();
+  tglSerialize();
+  return false;
+}
+
+function tglVoteBar(td, vote) {
+  setText(td, '');
+  for(var i=-3; i<=3; i++)
+    td.appendChild(tag('a', {
+      class:'taglvl taglvl'+i, tgl_num: i,
+      onmouseover:tglVoteBarSel, onmouseout:tglVoteBarSel, onclick:tglVoteBarSel
+    }, ' '));
+  tglVoteBarSel(td, td.tgl_vote);
+  return false;
+}
+
+function tglVoteBarSel(td, vote) {
+  // nasty trick to make this function multifunctional
+  if(this && this.tgl_num != null) {
+    var e = td || window.event;
+    td = this.parentNode;
+    vote = this.tgl_num;
+    if(e.type.toLowerCase() == 'click') {
+      td.tgl_vote = vote;
+      tglSerialize();
+    }
+    if(e.type.toLowerCase() == 'mouseout')
+      vote = td.tgl_vote;
+  }
+  var l = byName(td, 'a');
+  var num;
+  for(var i=0; i<l.length; i++) {
+    num = l[i].tgl_num;
+    if(num == 0)
+      setText(l[i], vote || '-');
+    else
+      setClass(l[i], 'taglvlsel', num<0&&vote<=num || num>0&&vote>=num);
+  }
+}
+
+function tglAdd() {
+  var tg = byId('tagmod_tag');
+  var add = byId('tagmod_add');
+  tag.disabled = add.disabled = true;
+  add.value = 'loading...';
+
+  ajax('/xml/tags.xml?q=name:'+encodeURIComponent(tg.value), function(hr) {
+    tg.disabled = add.disabled = false;
+    tg.value = '';
+    add.value = 'Add tag';
+
+    var items = hr.responseXML.getElementsByTagName('item');
+    if(items.length < 1)
+      return alert('Item not found!');
+    if(items[0].getAttribute('meta') == 'yes')
+      return alert('Can\'t use meta tags here!');
+
+    var name = items[0].firstChild.nodeValue;
+    var id = items[0].getAttribute('id');
+    if(byId('tgl_'+id))
+      return alert('Tag is already present!');
+
+    var vote = tag('td', {class:'tc_myvote', tgl_vote: 2}, '');
+    tglVoteBar(vote);
+    var spoil = tag('td', {class:'tc_myspoil', tgl_spoil: 0}, tglSpoilers[0]);
+    ddInit(spoil, 'tagmod', tglSpoilDD);
+
+    byId('tagtable').appendChild(tag('tr', {id:'tgl_'+id},
+      tag('td', {class:'tc_tagname'}, tag('a', {href:'/g'+id}, name)),
+      vote, spoil,
+      tag('td', {class:'tc_allvote'}, '-'),
+      tag('td', {class:'tc_allspoil'}, '-')
+    ));
+    tglStripe();
+    tglSerialize();
+  });
+}
+
+function tglStripe() {
+  var l = byName(byId('tagtable'), 'tr');
+  for(var i=0; i<l.length; i++)
+    setClass(l[i], 'odd', i%2);
+}
+
+function tglSerialize() {
+  var r = [];
+  var l = byName(byId('tagtable'), 'tr');
+  for(var i=0; i<l.length; i++) {
+    var vote = byClass(l[i], 'td', 'tc_myvote')[0].tgl_vote;
+    if(vote != 0)
+      r[r.length] = [
+        l[i].id.substr(4),
+        vote,
+        byClass(l[i], 'td', 'tc_myspoil')[0].tgl_spoil-1
+      ].join(',');
+  }
+  byId('taglinks').value = r.join(' ');
+}
+
+if(byId('taglinks'))
+  tglLoad();
+
+
+
+
 /*  M I S C   S T U F F  */
 
 // search box
-- 
cgit v1.2.3