summaryrefslogtreecommitdiff
path: root/static/f
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2009-10-04 10:08:52 +0200
committerYorhel <git@yorhel.nl>2009-10-04 10:08:52 +0200
commitbad759e90cae690cc4ccb36aa388d8157f5aeb4a (patch)
treec4382ff621c3f16ee6180f03556b3bb22938bfeb /static/f
parent8569df99347d81a553933bff3a1530e4330b6165 (diff)
JS: Moved and rewrote VN relations editor
+ Some fixes and improvements in the dropdown search + Renamed 'relations' field to 'vnrelations', as other relations are going to be implemented as well New relation editor code is somewhat smaller than the old, mostly thanks to the tag() function. Also tried to make things less error-prone and easier to maintain by referencing things using self-explainable class names instead of the ordering of the HTML tags.
Diffstat (limited to 'static/f')
-rw-r--r--static/f/forms.js166
-rw-r--r--static/f/script.js130
2 files changed, 128 insertions, 168 deletions
diff --git a/static/f/forms.js b/static/f/forms.js
index 57513735..cf03ebc4 100644
--- a/static/f/forms.js
+++ b/static/f/forms.js
@@ -1,170 +1,6 @@
function qq(v) {
return v.replace(/&/g,"&amp;").replace(/</,"&lt;").replace(/>/,"&gt;").replace(/"/g,'&quot;');
}
-function shorten(v, l) {
- return qq(v.length > l ? v.substr(0, l-3)+'...' : v);
-}
-
-
-
-
- /*****************************\
- * V N R E L A T I O N S *
- \*****************************/
-
-
-var relTypes = [];
-function relLoad() {
- var i;var l;var o;
-
- // fetch the relation types from the add new relation selectbox
- l = x('relation_new').getElementsByTagName('select')[0].options;
- for(i=0;i<l.length;i++)
- relTypes[l[i].value] = l[i].text;
-
- // read the current relations
- l = x('relations').value.split('|||');
- if(l[0]) {
- for(i=0;i<l.length;i++) {
- var rel = l[i].split(',', 3);
- relAdd(rel[0], rel[1], rel[2]);
- }
- }
- relEmpty();
-
- // make sure the title is up-to-date
- x('title').onchange = function() {
- l = x('jt_box_vn_rel').getElementsByTagName('td');
- for(i=0;i<l.length;i++)
- if(l[i].className == 'tc3')
- l[i].innerHTML = shorten(this.value, 40);
- };
-
- // bind the add-link
- x('relation_new').getElementsByTagName('a')[0].onclick = relFormAdd;
-
- // dropdown
- dsInit(x('relation_new').getElementsByTagName('input')[0], '/xml/vn.xml?q=', function(item, tr) {
- var td = document.createElement('td');
- td.innerHTML = 'v'+item.getAttribute('id');
- td.style.textAlign = 'right';
- td.style.paddingRight = '5px';
- tr.appendChild(td);
- td = document.createElement('td');
- td.innerHTML = shorten(item.firstChild.nodeValue, 40);
- tr.appendChild(td);
- }, function(item) {
- return 'v'+item.getAttribute('id')+':'+item.firstChild.nodeValue;
- }, relFormAdd);
-}
-
-function relAdd(rel, vid, title) {
- var o = document.createElement('tr');
- o.setAttribute('id', 'relation_tr_'+vid);
-
- var t = document.createElement('td');
- t.className = 'tc1';
- t.innerHTML = 'v'+vid+':<a href="/v'+vid+'">'+shorten(title, 40)+'</a>';
- o.appendChild(t);
-
- var options = '';
- for(var i in relTypes)
- options += '<option value="'+i+'"'+(i == rel ? ' selected="selected"' : '')+'>'+qq(relTypes[i])+'</option>';
- t = document.createElement('td');
- t.className = 'tc2';
- t.innerHTML = 'is a <select onchange="relSerialize()">'+options+'</select> of';
- o.appendChild(t);
-
- t = document.createElement('td');
- t.className = 'tc3';
- t.innerHTML = shorten(x('title').value, 40);
- o.appendChild(t);
-
- t = document.createElement('td');
- t.className = 'tc4';
- t.innerHTML = '<a href="#" onclick="return relDel('+vid+')">del</a>';
- o.appendChild(t);
-
- x('relation_tbl').appendChild(o);
- relEmpty();
-}
-
-function relEmpty() {
- if(x('relation_tbl').getElementsByTagName('tr').length > 0) {
- if(x('relation_tr_none'))
- x('relation_tbl').removeChild(x('relation_tr_none'));
- return;
- }
- var o = document.createElement('tr');
- o.setAttribute('id', 'relation_tr_none');
- var t = document.createElement('td');
- t.colspan = 4;
- t.innerHTML = 'No relations selected.';
- o.appendChild(t);
- x('relation_tbl').appendChild(o);
-}
-
-function relSerialize() {
- var r='';
- var i;
- var l = x('relation_tbl').getElementsByTagName('tr');
- for(i=0;i<l.length;i++) {
- var title = l[i].getElementsByTagName('td')[0];
- var rel = l[i].getElementsByTagName('select')[0];
- title = title.innerText || title.textContent;
- title = title.substr(title.indexOf(':')+1);
- r += (r ? '|||' : '')
- +rel.options[rel.selectedIndex].value
- +','+l[i].id.substr(12)+','+title;
- }
- x('relations').value = r;
-}
-
-function relDel(vid) {
- x('relation_tbl').removeChild(x('relation_tr_'+vid));
- relSerialize();
- relEmpty();
- return false;
-}
-
-function relFormAdd() {
- var txt = x('relation_new').getElementsByTagName('input')[0];
- var sel = x('relation_new').getElementsByTagName('select')[0];
- var lnk = x('relation_new').getElementsByTagName('a')[0];
- var input = txt.value;
-
- if(!input.match(/^v[0-9]+/)) {
- alert('Visual novel textbox must start with an ID (e.g. v17)');
- return false;
- }
-
- txt.disabled = true;
- txt.value = 'loading...';
- sel.disabled = true;
- lnk.innerHTML = 'loading...';
-
- ajax('/xml/vn.xml?q='+encodeURIComponent(input), function(hr) {
- txt.disabled = false;
- txt.value = '';
- sel.disabled = false;
- lnk.innerHTML = 'add';
-
- var items = hr.responseXML.getElementsByTagName('item');
- if(items.length < 1)
- return alert('Visual novel not found!');
-
- var id = items[0].getAttribute('id');
- if(x('relation_tr_'+id))
- return alert('This visual novel has already been selected!');
-
- relAdd(sel.selectedIndex, id, items[0].firstChild.nodeValue);
- sel.selectedIndex = 0;
- relSerialize();
- });
- return false;
-}
-
-
@@ -779,8 +615,6 @@ function tglSerialize() {
// load
-if(x('relations'))
- relLoad();
if(x('jt_box_vn_scr'))
scrLoad();
if(x('media'))
diff --git a/static/f/script.js b/static/f/script.js
index 715e6240..47bce2c1 100644
--- a/static/f/script.js
+++ b/static/f/script.js
@@ -139,7 +139,7 @@ function setClass(obj, c, set) {
}
function shorten(v, l) {
- return qq(v.length > l ? v.substr(0, l-3)+'...' : v);
+ return v.length > l ? v.substr(0, l-3)+'...' : v;
}
@@ -221,7 +221,7 @@ function ivView(what) {
// update document
view.style.display = 'block';
- setContent(x('ivimg'), tag('img', {src:u, onclick:ivClose,
+ setContent(byId('ivimg'), tag('img', {src:u, onclick:ivClose,
onload: function() { byId('ivimgload').style.top='-400px'; },
style: 'width: '+w+'px; height: '+h+'px'
}));
@@ -547,8 +547,14 @@ function dsKeyDown(ev) {
obj.value = obj.ds_serFunc(byId('ds_box_'+obj.ds_selectedId).ds_itemData, obj);
if(obj.ds_returnFunc)
obj.ds_returnFunc();
+
byId('ds_box').style.top = '-500px';
+ setContent(byId('ds_box'), tag('b', 'Loading...'));
obj.ds_selectedId = 0;
+ if(obj.ds_dosearch) {
+ clearTimeout(obj.ds_dosearch);
+ obj.ds_dosearch = null;
+ }
return false;
}
@@ -669,6 +675,126 @@ function dsResults(hr, obj) {
+/* V I S U A L N O V E L R E L A T I O N S (/v+/edit) */
+
+function vnrLoad() {
+ // read the current relations
+ var rels = byId('vnrelations').value.split('|||');
+ for(var i=0; i<rels.length; i++) {
+ var rel = rels[i].split(',', 3);
+ vnrAdd(rel[0], rel[1], rel[2]);
+ }
+ vnrEmpty();
+
+ // make sure the title is up-to-date
+ byId('title').onchange = function() {
+ var l = byClass(byId('jt_box_vn_rel'), 'td', 'tc_title');
+ for(i=0; i<l.length; i++)
+ setText(l[i], shorten(this.value, 40));
+ };
+
+ // bind the add-link
+ byName(byClass(byId('relation_new'), 'td', 'tc_add')[0], 'a')[0].onclick = vnrFormAdd;
+
+ // dropdown
+ dsInit(byName(byClass(byId('relation_new'), 'td', 'tc_vn')[0], 'input')[0], '/xml/vn.xml?q=', function(item, tr) {
+ tr.appendChild(tag('td', { style: 'text-align: right; padding-right: 5px'}, 'v'+item.getAttribute('id')));
+ tr.appendChild(tag('td', shorten(item.firstChild.nodeValue, 40)));
+ }, function(item) {
+ return 'v'+item.getAttribute('id')+':'+item.firstChild.nodeValue;
+ }, vnrFormAdd);
+}
+
+function vnrAdd(rel, vid, title) {
+ var sel = tag('select', {onchange: vnrSerialize});
+ var ops = byName(byClass(byId('relation_new'), 'td', 'tc_rel')[0], 'select')[0].options;
+ for(var i=0; i<ops.length; i++)
+ sel.appendChild(tag('option', {value: ops[i].value, selected: ops[i].value==rel}, getText(ops[i])));
+
+ byId('relation_tbl').appendChild(tag('tr', {id:'relation_tr_'+vid},
+ tag('td', {class:'tc_vn' }, 'v'+vid+':', tag('a', {href:'/v'+vid}, shorten(title, 40))),
+ tag('td', {class:'tc_rel' }, 'is a ', sel, ' of'),
+ tag('td', {class:'tc_title'}, shorten(byId('title').value, 40)),
+ tag('td', {class:'tc_add' }, tag('a', {href:'#', onclick:vnrDel}, 'del'))
+ ));
+
+ vnrEmpty();
+}
+
+function vnrEmpty() {
+ var tbl = byId('relation_tbl');
+ if(byName(tbl, 'tr').length < 1)
+ tbl.appendChild(tag('tr', {id:'relation_tr_none'}, tag('td', {colspan:4}, 'No relations selected.')));
+ else if(byId('relation_tr_none'))
+ tbl.removeChild(byId('relation_tr_none'));
+}
+
+function vnrSerialize() {
+ var r = [];
+ var trs = byName(byId('relation_tbl'), 'tr');
+ for(var i=0; i<trs.length; i++) {
+ var rel = byName(byClass(trs[i], 'td', 'tc_rel')[0], 'select')[0];
+ r[r.length] = [
+ rel.options[rel.selectedIndex].value, // relation
+ trs[i].id.substr(12), // vid
+ getText(byName(byClass(trs[i], 'td', 'tc_vn')[0], 'a')[0]) // title
+ ].join(',');
+ }
+ byId('vnrelations').value = r.join('|||');
+}
+
+function vnrDel() {
+ var tr = this;
+ while(tr.nodeName.toLowerCase() != 'tr')
+ tr = tr.parentNode;
+ byId('relation_tbl').removeChild(tr);
+ vnrSerialize();
+ vnrEmpty();
+ return false;
+}
+
+function vnrFormAdd() {
+ var relnew = byId('relation_new');
+ var txt = byName(byClass(relnew, 'td', 'tc_vn')[0], 'input')[0];
+ var sel = byName(byClass(relnew, 'td', 'tc_rel')[0], 'select')[0];
+ var lnk = byName(byClass(relnew, 'td', 'tc_add')[0], 'a')[0];
+ var input = txt.value;
+
+ if(!input.match(/^v[0-9]+/)) {
+ alert('Visual novel textbox must start with an ID (e.g. v17)');
+ return false;
+ }
+
+ txt.disabled = sel.disabled = true;
+ txt.value = 'loading...';
+ setText(lnk, 'loading...');
+
+ ajax('/xml/vn.xml?q='+encodeURIComponent(input), function(hr) {
+ txt.disabled = sel.disabled = false;
+ txt.value = '';
+ setText(lnk, 'add');
+
+ var items = hr.responseXML.getElementsByTagName('item');
+ if(items.length < 1)
+ return alert('Visual novel not found!');
+
+ var id = items[0].getAttribute('id');
+ if(byId('relation_tr_'+id))
+ return alert('This visual novel has already been selected!');
+
+ vnrAdd(sel.selectedIndex, id, items[0].firstChild.nodeValue);
+ sel.selectedIndex = 0;
+ vnrSerialize();
+ });
+ return false;
+}
+
+if(byId('vnrelations'))
+ vnrLoad();
+
+
+
+
/* M I S C S T U F F */
// search box