summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2008-11-23 13:19:09 +0100
committerYorhel <git@yorhel.nl>2008-11-23 13:19:09 +0100
commit03b6fc709593c611a319d348469acfef35a1231f (patch)
tree0e96257d98037902b12fc33e72c789223b5c9cd2 /static
parent77016fa1c606209f59230de29aa0600e80b11059 (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.js115
-rw-r--r--static/f/script.js2
-rw-r--r--static/f/style.css10
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,"&amp;").replace(/</,"&lt;").replace(/>/,"&gt;").replace(/'/g,/*'*/ "\\'").replace(/"/g,/*"*/'&quot;');
+}
+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; }
+