diff options
author | Yorhel <git@yorhel.nl> | 2015-08-11 18:57:36 +0200 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2015-08-11 18:58:21 +0200 |
commit | 5bc902f633287675f039150588a590842ac3cf4d (patch) | |
tree | 6325d9696924c641e1518ad4d670ab7f2c271239 /data | |
parent | 00a9cafe8ae0c0f45d5e4441712cadc9355c2aca (diff) |
js: Cleanup dropdown.js + remove http_request global
dropdown.js has also been improved a bit to only add the dd_box node to
the DOM when it's actually going to be used, and it now only captures
document.onmousemove when a box is shown.
Diffstat (limited to 'data')
-rw-r--r-- | data/js/dateselector.js | 2 | ||||
-rw-r--r-- | data/js/dropdown.js | 146 | ||||
-rw-r--r-- | data/js/lib.js | 15 |
3 files changed, 90 insertions, 73 deletions
diff --git a/data/js/dateselector.js b/data/js/dateselector.js index 07506804..c746ea50 100644 --- a/data/js/dateselector.js +++ b/data/js/dateselector.js @@ -84,4 +84,4 @@ load(l[i]); window.dateLoad = load; -})() +})(); diff --git a/data/js/dropdown.js b/data/js/dropdown.js index e9fbae14..222a7110 100644 --- a/data/js/dropdown.js +++ b/data/js/dropdown.js @@ -1,73 +1,93 @@ -function ddInit(obj, align, contents) { - 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', 'class':'hidden', dd_used: false})); -} +/* Dropdown widget, used as follows: + * + * ddInit(obj, align, func); + * + * Show a dropdown box on mouse-over on 'obj'. 'func' should generate and + * return the contents of the box as a DOM node, or null to not show a dropdown + * box at all. The 'align' argument indicates where the box should be shown, + * relative to the obj: + * + * left: To the left of obj + * bottom: To the bottom of obj + * tagmod: Special alignment for tagmod page + * + * Other functions: + * + * ddHide(); Hides the box + * ddRefresh(); Refreshes the box contents + */ +(function(){ + var box; -function ddHide() { - var box = byId('dd_box'); - setText(box, ''); - setClass(box, 'hidden', true); - box.dd_used = false; - box.dd_lnk = null; -} + function init(obj, align, contents) { + obj.dd_align = align; + obj.dd_contents = contents; + obj.onmouseover = show; + } -function ddMouseMove(e) { - e = e || window.event; - var lnk = e.target || e.srcElement; - while(lnk && (lnk.nodeType == 3 || !lnk.dd_align)) - lnk = lnk.parentNode; - var box = byId('dd_box'); - if(!box.dd_used && !lnk) - return; + function show() { + if(!box) { + box = tag('div', {id:'dd_box', 'class':'hidden'}); + addBody(box); + } + box.dd_lnk = this; + document.onmousemove = mouse; + document.onscroll = hide; + refresh(); + } - if(box.dd_used) { - 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 < box.dd_x-10 || mouseX > box.dd_x+box.offsetWidth+10 || mouseY < box.dd_y-10 || mouseY > box.dd_y+box.offsetHeight+10) - || (lnk && lnk == box.dd_lnk)) - ddHide(); + function hide() { + if(box) { + setText(box, ''); + setClass(box, 'hidden', true); + box.dd_lnk = document.onmousemove = document.onscroll = null; + } } - if(!box.dd_used && lnk || box.dd_used && lnk && box.dd_lnk != lnk) { - box.dd_lnk = lnk; - box.dd_used = true; - if(!ddRefresh()) - ddHide(); + function mouse(e) { + e = e || window.event; + // Don't hide if the cursor is on the link + for(var lnk = e.target || e.srcElement; lnk; lnk=lnk.parentNode) + if(lnk == box.dd_lnk) + return; + + // Hide if it's 10px outside of the box + 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 < box.dd_x-10 || mouseX > box.dd_x+box.offsetWidth+10 || mouseY < box.dd_y-10 || mouseY > box.dd_y+box.offsetHeight+10) + hide(); } -} -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); - setClass(box, 'hidden', false); + function refresh() { + if(!box || !box.dd_lnk) + return hide(); + var lnk = box.dd_lnk; + var content = lnk.dd_contents(lnk, box); + if(content == null) + return hide(); + setContent(box, content); + setClass(box, 'hidden', false); - var o = lnk; - ddx = ddy = 0; - do { - ddx += o.offsetLeft; - ddy += o.offsetTop; - } while(o = o.offsetParent); + 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; - if(lnk.dd_align == 'bottom') - ddy += lnk.offsetHeight; - box.dd_x = ddx; - box.dd_y = ddy; - box.style.left = ddx+'px'; - box.style.top = ddy+'px'; - return true; -} + if(lnk.dd_align == 'left') + ddx -= box.offsetWidth; + if(lnk.dd_align == 'tagmod') + ddx += lnk.offsetWidth-35; + if(lnk.dd_align == 'bottom') + ddy += lnk.offsetHeight; + box.dd_x = ddx; + box.dd_y = ddy; + box.style.left = ddx+'px'; + box.style.top = ddy+'px'; + } + window.ddInit = init; + window.ddHide = hide; + window.ddRefresh = refresh; +})(); diff --git a/data/js/lib.js b/data/js/lib.js index 650f4713..c13d7b43 100644 --- a/data/js/lib.js +++ b/data/js/lib.js @@ -1,16 +1,13 @@ -var expanded_icon = '▾'; -var collapsed_icon = '▸'; +var expanded_icon = '▾', + collapsed_icon = '▸'; -var http_request = false; function ajax(url, func, async) { - if(!async && http_request) - http_request.abort(); - var req = (window.ActiveXObject) ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest(); - if(req == null) - return alert("Your browser does not support the functionality this website requires."); + if(!async && ajax.req) + ajax.req.abort(); + var req = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest(); if(!async) - http_request = req; + ajax.req = req; req.onreadystatechange = function() { if(!req || req.readyState != 4 || !req.responseText) return; |