cmp-go-snippet/static/default.js

//	import { modTrm } from "/go-prefix/static/modTrm.js";
//	import { modYdl } from "/go-prefix/static/modYdl.js";
//	import { modNeverc } from "/go-prefix/static/modNeverc.js";

	class cmpPage extends cmpSwoPage {
		constructor() {
			super();

//			Object.assign(this, modTrm);
//			Object.assign(this, modYdl);
//			Object.assign(this, modNeverc);

			{
				this.tblheadroot = document.getElementById("tblheadroot");
				this.tblbodyroot = document.getElementById("tblbodyroot");

				this.tblbody     = document.getElementById("tblbody");
			}

	//		this.trmInitOnce();
	//		this.ydlInitOnce();

			this.cmpSwoOnConnect.push( this.timeReStyle.bind(this, "connect") );
			this.cmpSwoOnConnect.push( this.leftMenuReq.bind(this) );
	//		this.cmpSwoOnConnect.push( this.trmConnect.bind(this) );
	//		this.cmpSwoOnConnect.push( this.ydlConnect.bind(this) );
			this.cmpSwoOnDisconnect.push( this.timeReStyle.bind(this, "disconnect") );

			this.cmpSwoPageInit();

			this.offLineInit();

			;
		}


		setHeadHeight(ii) {
			this.tblheadroot.style.bottom = ii + "px";
			this.tblbodyroot.style.top = (ii+1) + "px";
		}

		setHead(node) {
			if(this.tblheadview)
				this.tblheadview.style.display = "none";

			this.tblheadview = node;
			this.tblheadroot.appendChild(node);
			this.tblheadview.style.display = "";
		}

		setBody(node) {
			if(this.tblbodyview)
				this.tblbodyview.style.display = "none";

			this.tblbodyview = node;
			this.tblbodyroot.appendChild(node);
			this.tblbodyview.style.display = "";
		}

		// Util

		setNode(nn, obj, idx) {
			var n = document.getElementById(nn);

			if(!n)
				return console.log("No node '" + nn + "'");

			n.innerHTML = obj[idx];

			return;
		}

		// Logic

		contentReq(page, parm) {
			console.log("contentReq", page);

			if(page == "trmShow") {
				this.trmShow();
			}
		}




		rndTabHead(parn, hdr) {
			var hdrTb = document.getElementById("tblhtr");

			if(!hdrTb)
				return;

			hdrTb.innerHTML = "";

			for(var n = parn?.firstChild?.firstChild, i = 0; n; n = n.nextSibling, i++) {
				var sta = "border-right:1px solid grey; border-bottom:1px solid grey; ";

				if(hdr[i].child) {
					sta = "";
				}

				var th = dcrt({
					tag  : "th",
					parn : hdrTb,
					style: sta + "width:" + (n.offsetWidth) + "px;",
					child: hdr[i].child ? hdr[i].child : null
				});

				if(hdr[i].html) {
					th.innerHTML = hdr[i].html;
				}
			}

			var n = document.getElementById("tblbodyroot");

			if(n) {
				n.style.top = (hdrTb.offsetHeight + 6) + "px";
			}

			return;
		}


		//


		//

		getSpeeddialElemReq() {
			return this.reqSnip("getSpeeddialElem", null);
		}

		getSpeeddialElemRcv(obj) {
			var i = 0;

			for(i = 0; i < obj.length; i++) {
				this.rndSpeeddialElem(obj[i]);
			}
		}

		//

		offLineInit() {
			if(1)
				return;

			this.spdNodeLeftMenu = dcrt({
				tag  : "div",
				parn : "mainRoot",
				style: "width:320px; position:relative; height:calc(100% - 10px); top:5px; left:5px; border:1px solid grey;"
			});

			this.spdNodeLeftMenuScrTop = dcrt({
				tag  : "div",
				parn : this.spdNodeLeftMenu,
				style: "width:100%; margin:0px; height:40px; border-bottom:1px solid grey;"
			});

			this.spdNodeLeftMenuBody = dcrt({
				tag  : "div",
				parn : this.spdNodeLeftMenu,
				style: "width:100%; margin:0px; height:calc(100% - 80px); overflow-x:hidden; scroll-x:auto;"
			})

			this.spdNodeLeftMenuScrBottom = dcrt({
				tag  : "div",
				parn : this.spdNodeLeftMenu,
				style: "width:100%; margin:0px; height:40px; border-top:1px solid grey;"
			});

			return;
		}

		rndSpeeddialElem(obj) {
			if(obj.type != "local")
				return;

			var lab = dcrt({
				tag  : "div",
				style: "padding:16px;",
				html : obj.label ? obj.label : obj.ip4v
			});

			var com = dcrt({
				tag  : "div",
				style: "color:#888; padding-left:32px; margin-right:32px;",
				html : (obj.label ? obj.ip4v : "") + (obj.xport ? (" / " + obj.xport) : "")
			});

			var zzz = null;

			if(obj.xport == "A0") {
				zzz = this.rndECtl();
			}

			dcrt({
				tag  : "div",
				parn : this.spdNodeLeftMenuBody,
				style: "position:relative; width:calc(100%-10px); margin:5px; height:100px; border:1px solid grey;",
				child: [
					lab,
					com,
					zzz
				]
			});
		}

		rndECtl() {
			if(!this.listECtl)
				this.listECtl = [];

			var id = this.listECtl.legth;

			this.listECtl[id] = {};

			this.listECtl[id].nodePoint = dcrt({
				tag  : "div",
				style: "position:absolute; top:2px; width:0px; height:0px; border-radius:17px; border:16px solid;"
			});

			this.listECtl[id].nodePoint.style.left = "2px";
			this.listECtl[id].nodePoint.style.borderColor = "#a33";

			this.listECtl[id].nodeLabel = dcrt({
				tag  : "div"
			});

			this.listECtl[id].nodeRoot = dcrt({
				tag  : "div",
				style: "position:absolute; top:32px; right:32px; width:84px; height:36px; border:1px solid grey; border-radius:18px;",
				click: this.clickECtl.bind(this, id),
				child: [
					this.listECtl[id].nodePoint,
					this.listECtl[id].nodeLabel
				]
			});

			return this.listECtl[id].nodeRoot;
		}

		clickECtl(id) {
			var style = this.listECtl[id].nodePoint.style;

			if(style.left) {
				style.left = "";
				style.right = "2px";
				style.borderColor = "#3a3";
			}
			else {
				style.left = "2px";
				style.right = "";
				style.borderColor = "#a33";
			}


			return;
		}

		//==========================

		urlMod(parm) {
			if(!parm?.urlMod.url)
				return console.log("No .url");

			if(!parm?.urlMod.title)
				return console.log("No .title");

			// const nextState = parm?.urlMod.nextState; // { additionalInformation: 'Updated the URL with JS' };

			// This will create a new entry in the browser's history, without reloading
			window.history.pushState(parm?.urlMod.nextState, parm?.urlMod.title, parm.urlMod.url);

			// This will replace the current entry in the browser's history, without reloading
			window.history.replaceState(parm?.urlMod.nextState, parm?.urlMod.title, parm.urlMod.url);

			// console.log(window.location)
		}

		// END class
	}


	window.diag = null;
	function diagMove(e) {
		window.diag.diagMove(e);
	}
	function diagMouseUp(e) {
		window.diag.diagRoot.style.zIndex = 50;
		window.removeEventListener('mousemove', diagMove, false);
	}

	var page = null;

	document.addEventListener("DOMContentLoaded", function(event) {
		page = new cmpPage();
		window.page = page;
	});

// END