GopherProxy

	datalist: improve positioning - jscancer - Javascript crap (relatively small)
	git clone git://git.codemadness.org/jscancer
	Log
	Files
	Refs
	README
	LICENSE
	---
	commit f9290a2ec21da04fb5e93fcf6c4df10dcd76de0a
	parent f734112b9eb4d332a44076fff86e9537e6cd3655
	Author: Hiltjo Posthuma <[email protected]>
	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(-)
	---
	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 han…
	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");