/**
 * @file splitter.js
 * @version 20240304 sn
 * @type JS
 * GUI-Komponente zur dynamischen Anpassung von GUI-Bereichen wie z.B. DIV-Containern
 */

class KSplitter {
	constructor(splitter, mode, move) {
		this._host = splitter;
		var resizing = false;
		mode(false);
		splitter.addEventListener("mouseover", function(e){ mode(true); });
		splitter.addEventListener("mouseleave", function(e){ if(!resizing) mode(false); });
		splitter.addEventListener("mousedown", function(e){
			resizing = true;
			KSplitter.start(move, function() { resizing = false; mode(false); });
		});
	}
	
	remove() { this._host = null; }
	
	// overlaying transparent div that receives all mouse events
	static start(move, stop) {
		this._move = move; // function args cannot be used directly in below handlers, because they would bind to the
		this._stop = stop; // scope of the 1st call, when this._overlay is created!
		if (!this._overlay) {
			this._overlay = document.createElement("div");
			this._overlay.style.cssText="position: absolute; background-color: transparent; z-index: 9999; width: 100vw; height: 100vh; left: 0px; top: 0px; cursor: ew-resize";
			this._overlay.addEventListener("mousemove", (function(e){ this._move(e); }).bind(this));
			// this._overlay.addEventListener("mouseenter", ()=>{console.log("mouseenter");});
			var stopHandler = (function(e){
				this._stop();
				document.body.removeChild(this._overlay);
			}).bind(this)
			this._overlay.addEventListener("mouseout", stopHandler);
			this._overlay.addEventListener("mouseup", stopHandler);
		}
		document.body.appendChild(this._overlay);
	}
}