se/SE/se-lib/UI/SidePanelButton.php.script.js

var DBG = 0;
var DBG1 = 1;


function p5UI__openSideBar(event, targetNode) {
	event.stopPropagation()
	event.preventDefault()

	if (!targetNode) targetNode = event.target;
	var name = targetNode.getAttribute('data-name');
	if (!name) throw "Missing 'name' in sidebar panel button";

	var idHtmlNode = 'p5__js-p5-side_panel-' + name;

	var panelNode = document.getElementById(idHtmlNode)
	if (!panelNode) throw "Missing content node";

	// if (panelNode.parentNode !== document.body)

	DBG1 && console.log("DBG:p5UI__openSideBar", {
		targetNode,
		name,
		parent: panelNode.parentNode,
		parentDiffBody: (panelNode.parentNode !== document.body),
	});

	if (panelNode.parentNode !== document.body) { // mv at the end of body if not
		document.body.appendChild(panelNode)
	}
	if (!panelNode._p5_onClick) panelNode._p5_onClick = function (event) {
		// DBG1 && console.log("DBG:_p5_onClick", { self: this })
		if (hasClass(event.target, 'p5-side_panel--js-close') || hasId(event.target, idHtmlNode)) {
			event.preventDefault();
			// removeClass(panelNode, 'p5-side_panel--is-visible');
			_closeSidePanel(panelNode); // TODO: check use this, not panelNode
		}
	}
	if (!panelNode._p5_onEsc) panelNode._p5_onEsc = function (event) {
		// DBG1 && console.log("DBG:_p5_onEsc", { self: this })
		if (event.keyCode == 27) {
			_closeSidePanel(panelNode); // TODO: check use this, not panelNode
		}
	}

	// p5-side_panel p5-side_panel--from-right js-p5-side_panel-main p5-side_panel--is-visible
	addClass(panelNode, 'p5-side_panel--from-right'); // TODO: from props: left | right
	if (hasClass(panelNode, 'p5-side_panel--is-visible')) {
		// removeClass(panelNode, 'p5-side_panel--is-visible');
		_closeSidePanel(panelNode);
	} else {
		setTimeout(function () {
			// addClass(panelNode, 'p5-side_panel--is-visible')
			_openSidePanel(panelNode)
		}, 10)
	}
}

function _openSidePanel(panelNode) {
	addClass(panelNode, 'p5-side_panel--is-visible');
	document.addEventListener('keyup', panelNode._p5_onEsc);
	panelNode.addEventListener('click', panelNode._p5_onClick);
	// fix content scrollTop
	var contentNode = panelNode.getElementsByClassName('p5-side_panel__content')
	if (contentNode && contentNode[0]) {
		contentNode[0].scrollTop = 0;
	}
}
function _closeSidePanel(panelNode) {
	removeClass(panelNode, 'p5-side_panel--is-visible');
	document.removeEventListener('keyup', panelNode._p5_onEsc)
	panelNode.removeEventListener('click', panelNode._p5_onClick);
}

function hasId(el, id) {
	return (id === el.getAttribute('id'));
}
//class manipulations - needed if classList is not supported
//https://jaketrent.com/post/addremove-classes-raw-javascript/
function hasClass(el, className) {
	if (el.classList) return el.classList.contains(className);
	else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className) {
	if (el.classList) el.classList.add(className);
	else if (!hasClass(el, className)) el.className += " " + className;
}

function removeClass(el, className) {
	if (el.classList) el.classList.remove(className);
	else if (hasClass(el, className)) {
		var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
		el.className = el.className.replace(reg, ' ');
	}
}


module.exports['p5UI__openSideBar'] = p5UI__openSideBar;