datalist: improve positioning - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit f9290a2ec21da04fb5e93fcf6c4df10dcd76de0a
(DIR) parent f734112b9eb4d332a44076fff86e9537e6cd3655
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Mon, 29 May 2017 09:52:16 +0200
datalist: improve positioning
- now also position the top position (+input height).
- add datalist popup to document.body instead of next of the input, the
input element can be inside an absolute or fixed div etc.
- (re)position the popup on opening it.
- improve fixed positioning, use document scroll position (this still
has some caveats).
Diffstat:
M datalist/datalist.js | 24 +++++++++++++++---------
1 file changed, 15 insertions(+), 9 deletions(-)
---
(DIR) diff --git a/datalist/datalist.js b/datalist/datalist.js
@@ -7,13 +7,6 @@ function datalist_init(input) {
var cursel = null, items = [], mouse = true, // enable mouse event handling.
dropdown = document.createElement("div");
dropdown.className = "datalist-dropdown";
- var left = 0;
- for (var c = input; c; c = c.offsetParent) {
- if (["absolute", "fixed"].indexOf(c.style.position) == -1)
- left += c.offsetLeft;
- }
- dropdown.style.left = String(left) + "px";
- dropdown.style.minWidth = String(input.clientWidth) + "px";
for (var i = 0, ec = ellist.children; i < ec.length; i++) {
var div = document.createElement("div");
@@ -66,6 +59,20 @@ function datalist_init(input) {
};
var datalist_render = function(m) {
var dd = dropdown.cloneNode(false);
+ var left = 0, top = 0;
+ for (var c = input; c; c = c.offsetParent) {
+ left += c.offsetLeft;
+ top += c.offsetTop;
+ if (c.style.position == "fixed") {
+ left += window.scrollX;
+ top += window.scrollY;
+ break;
+ }
+ }
+ dd.style.left = String(left) + "px";
+ dd.style.top = String(top + input.offsetHeight) + "px";
+ dd.style.minWidth = String(input.clientWidth) + "px";
+
for (var i = 0; i < m.length; i++)
dd.appendChild(m[i].el);
dropdown.parentNode.replaceChild(dd, dropdown)
@@ -187,8 +194,7 @@ function datalist_init(input) {
}, false);
input.addEventListener("focus", focuschange, false);
document.addEventListener("click", focuschange, false);
-
- input.parentNode.insertBefore(dropdown, input.nextSibling);
+ document.body.appendChild(dropdown);
}
var els = document.getElementsByClassName("datalist");