se/SE/se-lib/Route/Test/BuildDom.php

<?php

Lib::loadClass('RouteBase');

class Route_Test_BuildDom extends RouteBase {

	function defaultAction() {
		UI::gora();
		try {
			echo UI::h('script', ['src'=>"static/vendor.js"]);
			echo UI::h('script', [ 'src' => "static/p5UI/buildDom.js" ]);
			$listExampleProp = [];
			$listExampleProp['main'] = '
				[ "div", { "class": "container" }, [
					[ "h1", [], "Test H1"],
					[ "h2", [], "Test H2"],
					[ "div", { "class": "alert alert-info" }, "Test alert info" ],
					[ "button", { "class": "btn btn-primary" }, "button" ]
				] ]
			';
			$listExampleProp['alerts'] = '
				[ "div", { "class": "container" }, [
					[ "div", { "class": "alert alert-info" }, "Test alert info" ],
					[ "div", { "class": "alert alert-warning" }, "Test alert warning" ],
					[ "div", { "class": "alert alert-danger" }, "Test alert danger" ],
					[ "div", { "class": "alert alert-success" }, "Test alert success" ]
				] ]
			';
			$examplePreload = $listExampleProp['main'];

			echo '<div class="container-fluid">';

			echo UI::h('details', [ 'style' => "padding:6px; background-color:#333; color:#fff", 'open' => "open" ], [
				UI::h('summary', [ 'style' => "padding:0 3px; outline:none; cursor:pointer" ], "buildDom input"),
				UI::h('textarea', [ 'id' => 'exampleBuildDomInput', 'style' => "width:100%; height:300px; margin:0; font-size:small; font-family:monospace; border-radius:0; color:#000" ], $examplePreload),
			]);
			echo UI::h('button', [ 'class' => "btn btn-primary", 'onClick' => "return runBuildDomExample()" ], "Uruchom (Ctrl + Enter)");
			echo UI::h('div', [ 'style' => "display:inline", 'id' => "example-btns" ]);
			echo UI::h('details', [ 'style' => "padding:6px; background-color:#333; color:#fff", 'open' => "open" ], [
				UI::h('summary', [ 'style' => "padding:0 3px; outline:none; cursor:pointer" ], "buildDom output"),
				UI::h('pre', [ 'id' => 'exampleBuildDomOutput', 'style' => "margin:0; font-size:x-small; border-radius:0" ], 'loading...'),
			]);
			UI::endContainer();
			$jsExamples = json_encode($listExampleProp);
			echo UI::h('script', [], "
				var examples = {$jsExamples};
				console.log('examples', examples)
				function setBuildDomExample(i) {
					document.getElementById('exampleBuildDomInput').value = examples[i]
					runBuildDomExample()
				}
				for (var i in examples) {
					jQuery(document.getElementById('example-btns')).append('<button class=\"btn btn-default\" style=\"margin-left:12px\" onClick=\"setBuildDomExample(\''+i+'\')\">'+i+'</button>')
				}
			");
			echo UI::h('script', [], "
				function runBuildDomExample() {
					document.getElementById('exampleBuildDomOutput').innerHTML = 'loading...'
					var exampleBody = document.getElementById('exampleBuildDomInput').value.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
					console.log('exampleBuildDomInput:', exampleBody)
					try {
						exampleBody = JSON.parse(exampleBody)
					} catch (e) {
						p5UI__buildDom(['div', {'class': 'alert alert-danger'}, '' + e], document.getElementById('exampleBuildDomOutput'))
						return false
					}
					p5UI__buildDom(exampleBody, document.getElementById('exampleBuildDomOutput'))
					return false
				}

				(function () {
					runBuildDomExample()
				})()
			");
			echo UI::h('script', [], "
			    document.getElementById('exampleBuildDomInput').onkeydown = function(e) {
			        if ( e.keyCode == 9 || e.which == 9 ) {
			            e.preventDefault();
			            var s = this.selectionStart;
			            this.value = this.value.substring(0, this.selectionStart) + '\t' + this.value.substring(this.selectionEnd);
			            this.selectionEnd = s + 1;
			        }
			    }

				window.onkeyup = function(e) {
					if (!e.ctrlKey) return;
					if (13 !== e.keyCode) return; // 13: Enter
					runBuildDomExample()
				}
				// window.onkeyup = function(e) {
				//     var pressed = '';
				//     if (e.shiftKey) {
				//         pressed += ' + Shift';
				//     } else if (e.ctrlKey) {
				//         pressed += ' + Ctrl';
				//     } else if (e.cmdKey) {
				//         pressed += ' + Command';
				//     }
				//     pressed = e.keyCode + pressed;
				//     console.log(pressed, 'metaKey', e.metaKey);
				// }
			");
		} catch (Exception $e) {
			DBG::log($e);
			UI::alert('danger', $e->getMessage());
		}
		UI::dol();
	}

}