feat: Add close event

- Frame elements now can be closed
- Event is added in template
- Action leads back in history

source/screens/demo/examples/ui/cli.njk

@@ -31,6 +31,4 @@ tags:
 
 {%- block script %}
 	{{ super() }}
-	<script src="{{ pageBase }}js/app.js"></script>
-	<script></script>
 {% endblock %}

source/screens/demo/examples/ui/explorer.njk

@@ -182,6 +182,4 @@ tags:
 
 {%- block script %}
 	{{ super() }}
-	<script src="{{ pageBase }}js/app.js"></script>
-	<script></script>
 {% endblock %}

source/screens/demo/examples/ui/new.njk

@@ -48,8 +48,6 @@ tags:
 
 {%- block script %}
   {{ super() }}
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-  <script src="{{ pageBase }}js/app.js"></script>
   <script>
     let clock = new Clock('time');
 

source/screens/demo/examples/ui/tui.njk

@@ -32,6 +32,4 @@ tags:
 
 {%- block script %}
 	{{ super() }}
-	<script src="{{ pageBase }}js/app.js"></script>
-	<script></script>
 {% endblock %}

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 36919cae478551ac284fa05ebddf3c5b5e040154
+Subproject commit fb1bd808a0eac6b1031d1bf9f68487eb257053ff

source/templates/hippie/_app.njk

@@ -9,7 +9,7 @@
 				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
 			{% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
+				{% include "hippie/partials/_head_meta.njk" %}
 				<base href="/">
 			{% endblock %}
 
@@ -24,6 +24,28 @@
 		{% block script %}
 			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 			<script src="{{ pageBase }}js/variables.js"></script>
+			<script src="{{ pageBase }}js/app.js"></script>
+
+			<script>
+				const frameHeader = document.querySelector('body > header.io');
+				const closeActionElements = document.querySelectorAll('[data-action=close]');
+
+				if (frameHeader) {
+					console.log('frame header found', frameHeader);
+
+					frameHeader.addEventListener('click', (e) => {
+						if (e.target.dataset.action === 'close') {
+							console.debug('close', e.target);
+
+							history.back();
+
+							if (closeActionElements.length > 1) {
+								console.debug('other frames present', closeActionElements.length);
+							}
+						}
+					});
+				}
+			</script>
 		{% endblock %}
 	</body>
 </html>