se/SE/static/p5UI/dropdown.js

function p5UI__dropdown(e, n, position, render) {// @position = ('right top', 'left top', 'left bottom', 'right bottom')
	// e.stopPropagation()
	// e.preventDefault()
	var btnNode = n
	var node = n.nextSibling
	node.classList.toggle('p5UI__dropdown-show')
	// console.log('>>> p5UI__dropdown...', {btnNode: btnNode, node: node, 'has show class': node.classList.contains('p5UI__dropdown-show')})
	var position = position
	if (node.classList.contains('p5UI__dropdown-show')) {
		switch (position) {
			case 'right top': node.style.bottom = '50px'; node.style.right = '100px'; break; // TODO ...
			case 'left top': node.style.top = 0; node.style.left = '100px'; break; // TODO ...
			case 'right bottom': node.style.left = '' + btnNode.offsetWidth + 'px'; node.style.top = 0; break; // TODO ...
			case 'left bottom': node.style.right = '' + btnNode.offsetWidth + 'px'; node.style.top = 0; break;
		}
		node.p5UI__onClickOutsideCallback = p5UI__dropdown__onClickOutsideCallback(node, btnNode)
		node.p5UI__unbindClickOutsideCallback = p5UI__dropdown__unbindClickOutsideCallback(node)
		if (!document.addEventListener && document.attachEvent) {
			document.attachEvent('onclick', node.p5UI__onClickOutsideCallback);
			// document.attachEvent('keydown', this._closeModalKorespInfoIfHitEscape);
		} else {
			document.addEventListener('click', node.p5UI__onClickOutsideCallback);
			// document.addEventListener('keydown', this._closeModalKorespInfoIfHitEscape);
		}
		if ('function' === typeof render) render(n, node)
		// node.firstChild.focus() // TODO: find input
	} else {
		if ('function' === typeof node.p5UI__unbindClickOutsideCallback) {
			node.p5UI__unbindClickOutsideCallback()
			delete node.p5UI__onClickOutsideCallback
			delete node.p5UI__unbindClickOutsideCallback
		}
	}
}
function p5UI__dropdown__unbindClickOutsideCallback(n) {
	var node = n
	return function __p5UI__dropdown__unbindClickOutsideCallback(e) {
		// console.log('p5UI__dropdown__unbindClickOutsideCallback', {
		// 	'opened': node.classList.contains('p5UI__dropdown-show'),
		// 	'node': node,
		// 	'typeof node.p5UI__onClickOutsideCallback': typeof node.p5UI__onClickOutsideCallback
		// })
		// console.trace()
		if (!document.removeEventListener && document.detachEvent) {
			document.detachEvent('onclick', node.p5UI__onClickOutsideCallback)
			// document.detachEvent('keydown', this._closeModalKorespInfoIfHitEscape)
		} else {
			document.removeEventListener('click', node.p5UI__onClickOutsideCallback)
			// document.removeEventListener('keydown', this._closeModalKorespInfoIfHitEscape)
		}
	}
}
function p5UI__dropdown__onClickOutsideCallback(n, btn) {
	var node = n
	var btnNode = btn
	// console.log('define p5UI__dropdown__onClickOutsideCallback...')
	return function __p5UI__dropdown__onClickOutsideCallback(e) {
		// console.log('p5UI__dropdown__onClickOutsideCallback', {
		// 	'opened': node.classList.contains('p5UI__dropdown-show'),
		// 	'clickedOutside(node)': p5UI__clickedOutsideElement(node, e),
		// 	'clickedOutside(btnNode)': p5UI__clickedOutsideElement(btnNode, e),
		// 	'typeof node.p5UI__onClickOutsideCallback': typeof node.p5UI__onClickOutsideCallback,
		// 	'typeof node.p5UI__unbindClickOutsideCallback': typeof node.p5UI__unbindClickOutsideCallback,
		// })
		if (!node.classList.contains('p5UI__dropdown-show')) return
		if (node.p5UI__unbindClickOutsideCallback && 'function' == typeof node.p5UI__unbindClickOutsideCallback) {
			if (p5UI__clickedOutsideElement(node, e) && p5UI__clickedOutsideElement(btnNode, e)) {
				node.classList.remove('p5UI__dropdown-show')
				node.p5UI__unbindClickOutsideCallback()
			}
		}
	}
}

global.p5UI__dropdown = p5UI__dropdown
global.p5UI__dropdown__unbindClickOutsideCallback = p5UI__dropdown__unbindClickOutsideCallback
global.p5UI__dropdown__onClickOutsideCallback = p5UI__dropdown__onClickOutsideCallback