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

<?php

// UI::hAttributes($params);
// UI::hChildrens($childrens);

// - [x] mode = 'static'
// - [ ] mode = 'dynamic'

class UI_SidePanelButton implements UITagInterface {

	/**
	 * @param string $tagName = 'p5:SidePanelButton'
	 * @param array $props
	 * @param array $childrens
	 * 
	 * @return string html code
	 */
	static function h($tagName, $props = [], $childrens = []) {
		$jsFuncName = "p5UI__openSideBar"; // TODO: generate name based on $props['name']
		if (empty($props['label'])) throw new Exception("Missing 'label'");
		$mode = V::get('mode', 'static', $props);
		$name = (!empty($props['name'])) ? $props['name'] : self::generateUniqueName();
		$idHtmlNode = "p5__js-p5-side_panel-{$name}";

		switch ($mode) {
			case 'static': {
				if (empty($props['title'])) throw new Exception("Missing 'title'");
				if (empty($childrens)) throw new Exception("Missing childrens");
			} break;
			case 'dynamic': {
				if (empty($props['url'])) throw new Exception("Missing 'url'");
			} break;
			default: throw new Exception("Not implemented mode '{$mode}'");
		}

		$btnProps = [];
		if (!empty($props['style'])) $btnProps['style'] = $props['style'];
		if (!empty($props['class'])) $btnProps['class'] = $props['class'];
		if (!empty($props['id'])) $btnProps['id'] = $props['id'];
		// TODO: more attributes, custom, etc.

		return UI::h(null, [], [
			UI::h('button', array_merge($btnProps, [
				'onClick' => "return {$jsFuncName}(event, this);",
				'data-name' => $name,
				// 'data-url' => $props['url'], // TODO: if dynamic content
			]), $props['label']),
			UI::hStyle($cssFile = __FILE__ . ".style.css"),
			('static' === $mode)
			?
				UI::h('div', [ 'style' => "display:none" ], [
					UI::h('div', [ 'class' => "p5-side_panel p5-side_panel--from-right", 'id' => $idHtmlNode ], [
						UI::h('header', [ 'class' => "p5-side_panel__header" ], [
							UI::h('h1', [], $props['title']),
							UI::h('button', [ 'class' => "p5-side_panel__close p5-side_panel--js-close" ], "Close"),
						]),
						UI::h('div', [ 'class' => "p5-side_panel__container" ], [
							UI::h('div', [ 'class' => "p5-side_panel__content" ], $childrens),
						]),
					]),
				])
			:	null // created by JS on demand
			,
			('dynamic' === $mode)
			?
				// TODO: create in JS
				// like UI_AjaxContent inside `p5-side_panel__content`
				UI::h('div', [ 'style' => "display:none" ], [
					UI::h('div', [ 'class' => "p5-side_panel p5-side_panel--from-right", 'id' => $idHtmlNode ], [
						UI::h('header', [ 'class' => "p5-side_panel__header" ], [
							UI::h('h1', [], $props['title']),
							UI::h('button', [ 'class' => "p5-side_panel__close p5-side_panel--js-close" ], "Close"),
						]),
						UI::h('div', [ 'class' => "p5-side_panel__container" ], [
							UI::h('div', [ 'class' => "p5-side_panel__content" ], $childrens),
						]),
					]),
				])
			:	null // created by JS on demand
			,
			UI::hScript($jsFile = __FILE__ . '.script.js', $jsonVars = [
				// 'FUNCTION_NAME' => $jsFuncName,
				// 'ID_HTML_NODE' => $idHtmlNode,
			]),
		]);
	}

	static function generateUniqueName() {
		static $_counter = 0;

		$_counter += 1;
		return "p5_side_panel_{$_counter}";
	}

}