summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2009-10-03 16:02:28 +0200
committerYorhel <git@yorhel.nl>2009-10-03 16:02:28 +0200
commit8569df99347d81a553933bff3a1530e4330b6165 (patch)
treec156fd3c5867d6cf86fd4b0c9d0f72ca956f0962 /static
parentc6267dcb9c5e1a444f722cd3ac35300644945912 (diff)
JS: Converted and improved dropdown search and moved to script.js
Also converted the last onload function in script.js. I think I'll merge forms.js into script.js when converting that functionality. The total file probably wouldn't larger than 15kB gzipped, which is still smaller than the jquery core, and that doesn't even do anything by itself.
Diffstat (limited to 'static')
-rw-r--r--static/f/forms.js176
-rw-r--r--static/f/script.js212
2 files changed, 186 insertions, 202 deletions
diff --git a/static/f/forms.js b/static/f/forms.js
index 6eaa5cb7..57513735 100644
--- a/static/f/forms.js
+++ b/static/f/forms.js
@@ -8,182 +8,6 @@ function shorten(v, l) {
-
-
- /***********************************\
- * D R O P D O W N S E A R C H *
- \***********************************/
-
-
-function dsInit(obj, url, trfunc, serfunc, retfunc, parfunc) {
- obj.setAttribute('autocomplete', 'off');
- obj.onkeydown = dsKeyDown;
- obj.onblur = function() {
- // timeout to make sure the tr.onclick event is called before we've hidden the object
- setTimeout(function () {
- if(x('ds_box'))
- x('ds_box').style.top = '-500px';
- }, 500)
- };
- // all local data is stored in the DOM input object
- obj.returnFunc = retfunc;
- obj.trFunc = trfunc;
- obj.serFunc = serfunc;
- obj.parFunc = parfunc;
- obj.searchURL = url;
- obj.selectedId = 0;
-}
-
-function dsKeyDown(ev) {
- var c = document.layers ? ev.which : document.all ? event.keyCode : ev.keyCode;
- var obj = this;
-
- if(c == 9) // tab
- return true;
-
- // do some processing when the enter key has been pressed
- if(c == 13) {
- var o = obj;
- while(o && o.nodeName.toLowerCase() != 'form')
- o = o.parentNode;
- if(o) {
- var oldsubmit = o.onsubmit;
- o.onsubmit = function() { return false };
- setTimeout(function() { o.onsubmit = oldsubmit }, 100);
- }
-
- if(obj.selectedId != 0)
- obj.value = obj.serFunc(x('ds_box_'+obj.selectedId).itemData, obj);
- if(obj.returnFunc)
- obj.returnFunc();
- if(x('ds_box'))
- x('ds_box').style.top = '-500px';
- obj.selectedId = 0;
-
- return false;
- }
-
- // process up/down keys
- if(x('ds_box') && (c == 38 || c == 40)) {
- var l = x('ds_box').getElementsByTagName('tr');
- if(l.length < 1)
- return true;
-
- if(obj.selectedId == 0) {
- if(c == 38) // up
- obj.selectedId = l[l.length-1].id.substr(7);
- else
- obj.selectedId = l[0].id.substr(7);
- } else {
- var sel = null;
- for(var i=0;i<l.length;i++)
- if(l[i].id == 'ds_box_'+obj.selectedId) {
- if(c == 38) // up
- sel = i>0 ? l[i-1] : l[l.length-1];
- else
- sel = l[i+1] ? l[i+1] : l[0];
- }
- obj.selectedId = sel.id.substr(7);
- }
-
- for(var i=0;i<l.length;i++)
- l[i].className = l[i].id == 'ds_box_'+obj.selectedId ? 'selected' : '';
- return true;
- }
-
- // this.value isn't available in a keydown event
- setTimeout(function() {
- dsSearch(obj);
- }, 10);
-
- return true;
-}
-
-function dsSearch(obj) {
- var b = x('ds_box');
- var v = obj.parFunc ? obj.parFunc(obj.value) : obj.value;
-
- // show/hide the ds_box div
- if(v.length < 2) {
- if(b) {
- b.style.top = '-500px';
- b.innerHTML = '<b>Loading...</b>';
- }
- obj.selectedId = 0;
- return;
- }
- if(!b) {
- b = document.createElement('div');
- b.setAttribute('id', 'ds_box');
- b.innerHTML = '<b>Loading...</b>';
- document.body.appendChild(b);
- }
-
- // position the div
- var ddx=0;
- var ddy=obj.offsetHeight;
- var o = obj;
- do {
- ddx += o.offsetLeft;
- ddy += o.offsetTop;
- } while(o = o.offsetParent);
-
- b.style.position = 'absolute';
- b.style.left = ddx+'px';
- b.style.top = ddy+'px';
- b.style.width = obj.offsetWidth+'px';
-
- // perform search
- ajax(obj.searchURL + encodeURIComponent(v), function(hr) {
- dsResults(hr, obj);
- });
-}
-
-function dsResults(hr, obj) {
- var l = hr.responseXML.getElementsByTagName('item');
- var b = x('ds_box');
- if(l.length < 1) {
- b.innerHTML = '<b>No results...</b>';
- obj.selectedId = 0;
- return;
- }
-
- b.innerHTML = '<table><tbody></tbody></table>';
- tb = b.getElementsByTagName('tbody')[0];
- for(var i=0;i<l.length;i++) {
- var id = l[i].getAttribute('id');
- var tr = document.createElement('tr');
- tr.setAttribute('id', 'ds_box_'+id);
- tr.itemData = l[i];
- if(obj.selectedId == id)
- tr.setAttribute('class', 'selected');
- tr.onmouseover = function() {
- obj.selectedId = this.id.substr(7);
- var l = x('ds_box').getElementsByTagName('tr');
- for(var i=0;i<l.length;i++)
- l[i].className = l[i].id == 'ds_box_'+obj.selectedId ? 'selected' : '';
- };
- tr.onclick = function() {
- obj.value = obj.serFunc(this.itemData, obj);
- if(obj.returnFunc)
- obj.returnFunc();
- if(x('ds_box'))
- x('ds_box').style.top = '-500px';
- obj.selectedId = 0;
- };
- obj.trFunc(l[i], tr);
- tb.appendChild(tr);
- }
-
- if(obj.selectedId != 0 && !x('ds_box_'+obj.selectedId))
- obj.selectedId = 0;
-}
-
-
-
-
-
-
/*****************************\
* V N R E L A T I O N S *
\*****************************/
diff --git a/static/f/script.js b/static/f/script.js
index ccfaceba..715e6240 100644
--- a/static/f/script.js
+++ b/static/f/script.js
@@ -138,6 +138,10 @@ function setClass(obj, c, set) {
obj.className = n.join(' ');
}
+function shorten(v, l) {
+ return qq(v.length > l ? v.substr(0, l-3)+'...' : v);
+}
+
@@ -504,6 +508,167 @@ function dateSerialize() {
+/* D R O P D O W N S E A R C H */
+
+function dsInit(obj, url, trfunc, serfunc, retfunc, parfunc) {
+ obj.setAttribute('autocomplete', 'off');
+ obj.onkeydown = dsKeyDown;
+ obj.onblur = function() { setTimeout(function () { byId('ds_box').style.top = '-500px'; }, 500) };
+ obj.ds_returnFunc = retfunc;
+ obj.ds_trFunc = trfunc;
+ obj.ds_serFunc = serfunc;
+ obj.ds_parFunc = parfunc;
+ obj.ds_searchURL = url;
+ obj.ds_selectedId = 0;
+ obj.ds_dosearch = null;
+ if(!byId('ds_box'))
+ addBody(tag('div', {id: 'ds_box', style: 'position: absolute; top: -500px'}, tag('b', 'Loading...')));
+}
+
+function dsKeyDown(ev) {
+ var c = document.layers ? ev.which : document.all ? event.keyCode : ev.keyCode;
+ var obj = this;
+
+ if(c == 9) // tab
+ return true;
+
+ // do some processing when the enter key has been pressed
+ if(c == 13) {
+ var frm = obj;
+ while(frm && frm.nodeName.toLowerCase() != 'form')
+ frm = frm.parentNode;
+ if(frm) {
+ var oldsubmit = frm.onsubmit;
+ frm.onsubmit = function() { return false };
+ setTimeout(function() { frm.onsubmit = oldsubmit }, 100);
+ }
+
+ if(obj.ds_selectedId != 0)
+ 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';
+ obj.ds_selectedId = 0;
+
+ return false;
+ }
+
+ // process up/down keys
+ if(c == 38 || c == 40) {
+ var l = byName(byId('ds_box'), 'tr');
+ if(l.length < 1)
+ return true;
+
+ // get new selected id
+ if(obj.ds_selectedId == 0) {
+ if(c == 38) // up
+ obj.ds_selectedId = l[l.length-1].id.substr(7);
+ else
+ obj.ds_selectedId = l[0].id.substr(7);
+ } else {
+ var sel = null;
+ for(var i=0; i<l.length; i++)
+ if(l[i].id == 'ds_box_'+obj.ds_selectedId) {
+ if(c == 38) // up
+ sel = i>0 ? l[i-1] : l[l.length-1];
+ else
+ sel = l[i+1] ? l[i+1] : l[0];
+ }
+ obj.ds_selectedId = sel.id.substr(7);
+ }
+
+ // set selected class
+ for(var i=0; i<l.length; i++)
+ setClass(l[i], 'selected', l[i].id == 'ds_box_'+obj.ds_selectedId);
+ return true;
+ }
+
+ // perform search after a timeout
+ if(obj.ds_dosearch)
+ clearTimeout(obj.ds_dosearch);
+ obj.ds_dosearch = setTimeout(function() {
+ dsSearch(obj);
+ }, 500);
+
+ return true;
+}
+
+function dsSearch(obj) {
+ var box = byId('ds_box');
+ var val = obj.ds_parFunc ? obj.ds_parFunc(obj.value) : obj.value;
+
+ clearTimeout(obj.ds_dosearch);
+ obj.ds_dosearch = null;
+
+ // hide the ds_box div
+ if(val.length < 2) {
+ box.style.top = '-500px';
+ setContent(box, tag('b', 'Loading...'));
+ obj.ds_selectedId = 0;
+ return;
+ }
+
+ // position the div
+ var ddx=0;
+ var ddy=obj.offsetHeight;
+ var o = obj;
+ do {
+ ddx += o.offsetLeft;
+ ddy += o.offsetTop;
+ } while(o = o.offsetParent);
+
+ box.style.position = 'absolute';
+ box.style.left = ddx+'px';
+ box.style.top = ddy+'px';
+ box.style.width = obj.offsetWidth+'px';
+
+ // perform search
+ ajax(obj.ds_searchURL + encodeURIComponent(val), function(hr) {
+ dsResults(hr, obj);
+ });
+}
+
+function dsResults(hr, obj) {
+ var lst = hr.responseXML.getElementsByTagName('item');
+ var box = byId('ds_box');
+ if(lst.length < 1) {
+ setContent(box, tag('b', 'No results...'));
+ obj.selectedId = 0;
+ return;
+ }
+
+ var tb = tag('tbody', null);
+ for(var i=0; i<lst.length; i++) {
+ var id = lst[i].getAttribute('id');
+ var tr = tag('tr', {id: 'ds_box_'+id, ds_itemData: lst[i]} );
+ setClass(tr, 'selected', obj.selectedId == id);
+
+ tr.onmouseover = function() {
+ obj.ds_selectedId = this.id.substr(7);
+ var l = byName(box, 'tr');
+ for(var j=0; j<l.length; j++)
+ setClass(l[j], 'selected', l[j].id == 'ds_box_'+obj.ds_selectedId);
+ };
+ tr.onmousedown = function() {
+ obj.value = obj.ds_serFunc(this.ds_itemData, obj);
+ if(obj.ds_returnFunc)
+ obj.ds_returnFunc();
+ box.style.top = '-500px';
+ obj.ds_selectedId = 0;
+ };
+
+ obj.ds_trFunc(lst[i], tr);
+ tb.appendChild(tr);
+ }
+ setContent(box, tag('table', tb));
+
+ if(obj.ds_selectedId != 0 && !byId('ds_box_'+obj.ds_selectedId))
+ obj.ds_selectedId = 0;
+}
+
+
+
+
/* M I S C S T U F F */
// search box
@@ -716,6 +881,27 @@ if(byId('expandall')) {
heads[i].onclick = singletoggle;
}
+// auto-complete tag search (/v/*)
+if(byId('advselect') && byId('ti')) {
+ var trfunc = function(item, tr) {
+ tr.appendChild(tag('td', shorten(item.firstChild.nodeValue, 40),
+ item.getAttribute('meta') == 'yes' ? tag('b', {class: 'grayedout'}, ' meta') : null,
+ item.getAttribute('state') == 0 ? tag('b', {class: 'grayedout'}, ' awaiting moderation') : null
+ ));
+ };
+ var serfunc = function(item, obj) {
+ var tags = obj.value.split(/ *, */);
+ tags[tags.length-1] = item.firstChild.nodeValue;
+ return tags.join(', ');
+ };
+ var retfunc = function() { false; };
+ var parfunc = function(val) {
+ return (val.split(/, */))[val.split(/, */).length-1];
+ };
+ dsInit(byId('ti'), '/xml/tags.xml?q=', trfunc, serfunc, retfunc, parfunc);
+ dsInit(byId('te'), '/xml/tags.xml?q=', trfunc, serfunc, retfunc, parfunc);
+}
+
// spam protection on all forms
setTimeout(function() {
@@ -724,29 +910,3 @@ setTimeout(function() {
}, 500);
-
- // auto-complete tag search
- if(x('advselect') && x('ti')) {
- var fields=['ti','te'];
- for(var field=0;field<fields.length;field++)
- dsInit(x(fields[field]), '/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, obj) {
- var tags = obj.value.split(/ *, */);
- tags[tags.length-1] = item.firstChild.nodeValue;
- return tags.join(', ');
- },
- function() { false; },
- function(val) { return (val.split(/, */))[val.split(/, */).length-1]; }
- );
- }
-
-