マルチラインechoの拡張

補完リストの拡張echo版です。

拙作 キーボードレイアウトでヒント の マッピング表示です。

基本的に変らないので、
変更・追加分だけ記載します。

useForceHeightResize

デフォルト1
なぜか1度目は上手くリサイズしてくれないので起動時に一度 表示・非表示を実行します。
(私の環境では表示が見えなかったので、特に透明化等やっておりません)
0 にしても そんなに支障はないです。

liberator.globalVariables.multiLineMinHeiht

デフォルト 1em
最低高さを指定
補完リストが縮まなかったのは、この子がそこそこ大きな数字だったことが原因のようです。

変更点

• panel の クラス に 「liberator-overlay-container」 を 付与(外部スタイルシート利用に役に立たつかな？)
• useResize の リサイズを width が 変更されたときのみに変更

なお作ってみて気付いたのですが、マルチラインのechoをあまり利用していないようです。
そのため、いつもに増してテストが甘いと思います。

// vim: set fdm=marker :
(function(self){
	//{{{ debug
	const usePanel       = 1;
	const useDummyAction = 1;
	const useResize      = 1;
	const useWinGlass    = 0;
	const useOpacity     = 1;
  const useForceHeightResize = 1;

	const delayResize = 100;
	//}}}

	//{{{ config
  const className = "liberator-overlay-container";
  const minHeight = liberator.globalVariables.multiLineMinHeiht || "1em";
	const tipStyle = liberator.globalVariables.multiLineTipStyle
		|| <>
		{useWinGlass ? <>
			background: transparent;
			-moz-appearance: -moz-win-glass;
		</>:<>
			-moz-appearance:none;
			background:rgba(0,0,0,0.2);
		</>}
		{usePanel ? "" : <>max-width:65535em;</>}
		-moz-border-radius: 8px;
		padding:0.5em;
		border:none;
	</>;
	const iframeStyle = liberator.globalVariables.multiLineIframeStyle
		|| <>
      {useOpacity ? <>opacity:0.85;</>:<></>}
			border:none;
			min-height:{minHeight};
		</>;
	//}}}

	const oid = "liberator-multiline-output";
	const sid = "liberator-statusline";

	var iframe = document.getElementById(oid);
	var vbox = iframe.parentNode;

	var fbox = document.createElement(usePanel ? "panel" : "tooltip");

	fbox.setAttribute("style",tipStyle);
  fbox.classList.add(className);
	if(usePanel){
		fbox.setAttribute("noautohide", true);
		if(dummyAction){
			var dummy = document.createElement("popup");
			dummy.setAttribute("style",<>
				-moz-appearance:none;
				background-color:red;
				opacity: 0;
			</>);
			dummy.addEventListener("popupshown",function(){
				this.hidePopup();
			},false);
			document.documentElement.appendChild(dummy);
		}
	}

	function dummyAction(){
		if(usePanel&&useDummyAction){
			let textbox = document.getElementById("liberator-commandline-command").parentNode;
			dummy.openPopup(textbox,"overlap",0,0,false, false);
			dummy.sizeTo(window.innerWidth, textbox.getBoundingClientRect().height);
		}
	}

	vbox.parentNode.insertBefore(fbox, vbox);
	vbox.removeChild(iframe);

	const url = iframe.getAttribute("src");
	iframe = document.createElementNS(XHTML,"iframe");
	iframe.setAttribute("id", oid);
	iframe.setAttribute("style", iframeStyle);
	iframe.setAttribute("flex",1);

	vbox.appendChild(iframe);
	fbox.appendChild(vbox);

	function oneEventListenr(obj, event, usecapture, func){
		let args = [event, function(){
			this.removeEventListener.apply(this, args);
			func.apply(this, arguments);
		},usecapture];
		obj.addEventListener.apply(obj,args);	
	}

	var show_id = 0;
	function _show_ext(){
		if(fbox.state === "open") return;
		show_id && window.clearTimeout(show_id);
		show_id = window.setTimeout(function(){
			show_id = 0;
			fbox.sizeTo(window.innerWidth, -1);
			fbox.openPopup(document.getElementById(sid), "before_start", 0, 0, false, false);
			dummyAction();
		},0);
	}

	vbox.watch("collapsed",function(id,oldValue,newValue){
		if(newValue){
			fbox.hidePopup();
		}else{
			_show_ext();
		}
		return newValue;
	});

	oneEventListenr(iframe, "load", true, function(){
		commandline._multilineOutputWidget = document.getElementById("liberator-multiline-output");
		commandline._outputContainer = commandline._multilineOutputWidget.parentNode;
		commandline._multilineOutputWidget.contentDocument.body.setAttribute("id", "liberator-multiline-output-content");

		//force height resize
		(function(){
			if(!useForceHeightResize) return;
			oneEventListenr(fbox,"popupshown",false,function(){
				commandline._outputContainer.collapsed = true;
			});
      fbox.openPopupAtScreen(0,0,false);
		})();

		if(useResize){
			let tid=0;
			window.addEventListener("resize",function resize(event){
				let vbox = commandline._outputContainer;
				let width = parseFloat(fbox.width);
				if(!vbox.collapsed){
					tid&&window.clearTimeout(tid);
					tid = window.setTimeout(function(){
						try{
							tid = 0;
							if(fbox.width == window.innerWidth) return;
							fbox.hidePopup();
							_show_ext();
						}catch(ex){liberator.echoerr(ex);}
					},delayResize);
				}
			},false);
		}
	});
	iframe.setAttribute("src", url);
})(this);