added Test BuildDom

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

@@ -0,0 +1,110 @@
+<?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();
+	}
+
+}