diff options
author | Yorhel <git@yorhel.nl> | 2008-11-23 13:19:09 +0100 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2008-11-23 13:19:09 +0100 |
commit | 03b6fc709593c611a319d348469acfef35a1231f (patch) | |
tree | 0e96257d98037902b12fc33e72c789223b5c9cd2 /static | |
parent | 77016fa1c606209f59230de29aa0600e80b11059 (diff) |
Started on user interface for the relations
Viewing, changing and deleting relations already works, adding not yet.
Diffstat (limited to 'static')
-rw-r--r-- | static/f/forms.js | 115 | ||||
-rw-r--r-- | static/f/script.js | 2 | ||||
-rw-r--r-- | static/f/style.css | 10 |
3 files changed, 127 insertions, 0 deletions
diff --git a/static/f/forms.js b/static/f/forms.js index 8b3c29d0..bbbccb2d 100644 --- a/static/f/forms.js +++ b/static/f/forms.js @@ -1,6 +1,14 @@ // various form functions // called by script.js +function qq(v) { + return v.replace(/&/g,"&").replace(/</,"<").replace(/>/,">").replace(/'/g,/*'*/ "\\'").replace(/"/g,/*"*/'"'); +} +function shorten(v, l) { + return qq(v.length > l ? v.substr(0, l-3)+'...' : v); +} + + /************************\ * C A T E G O R I E S * @@ -56,3 +64,110 @@ function catSet(id, rnk) { } + + + + + /*****************************\ + * 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_sel_new').options; + for(i=0;i<l.length;i++) + relTypes[Math.floor(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_relations').getElementsByTagName('td'); + for(i=0;i<l.length;i++) + if(l[i].className == 'tc3') + l[i].innerHTML = shorten(this.value, 40); + }; +} + +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=0;i<relTypes.length;i++) + 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]; + title = title.innerText || title.textContent; + title = title.substr(title.indexOf(':')+1); + r += (r ? '|||' : '') + +l[i].getElementsByTagName('select')[0].selectedIndex + +','+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; +} + + + diff --git a/static/f/script.js b/static/f/script.js index 52a0a60a..7fbeb5a0 100644 --- a/static/f/script.js +++ b/static/f/script.js @@ -205,6 +205,8 @@ DOMLoad(function() { // forms.js if(x('categories')) catLoad(); + if(x('relations')) + relLoad(); // spam protection on all forms if(document.forms.length >= 1) diff --git a/static/f/style.css b/static/f/style.css index f2152aee..2135a887 100644 --- a/static/f/style.css +++ b/static/f/style.css @@ -581,6 +581,16 @@ form #jt_box_categories li li b { width: 13px; font-weight: bold; } #jt_box_categories li li.inc { background-position: 0px -16px; color: #090; } #jt_box_categories li li.exc { background-position: 0px -33px; color: #900; } +#jt_box_relations table { margin-bottom: 10px; } +#jt_box_relations h2 { margin: 0 0 3px -10px; } +#jt_box_relations td { padding: 1px 2px; vertical-align: middle; } +#jt_box_relations td.tc1 { width: 300px; text-align: right } +#jt_box_relations td.tc2 { width: 10px; white-space: nowrap } +#jt_box_relations td.tc3 { width: 200px; } +#jt_box_relations td.tc4 { width: 40px; text-align: right } +#jt_box_relations td.tc1 input { width: 280px; } +#jt_box_relations td.tc2 select { width: 130px; } + |