feat: add ui examples

source/code/app.js

@@ -0,0 +1,192 @@
+//NEW
+
+function Clock(id){
+	this.id = id;
+	
+	var that = this;
+	setInterval(function(){that.updateClock();}, 1000);
+	this.updateClock();
+}
+
+Clock.prototype.updateClock = function(){
+	var date = new Date();
+	var clock = document.getElementById(this.id);
+	//console.log(this);
+	clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
+};
+	
+Clock.prototype.formatDigits = function(val){
+	if(val<10) val = "0" + val;
+
+	return val;
+}
+
+//OLD
+
+var floor = Math.floor;
+
+function ongoing() {
+
+	var now = new Date();
+	
+	var w = Math.floor(now.getDay());
+	var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
+	var DNumb = Math.floor(now.getDate());
+	var MNumb = Math.floor(now.getMonth());
+	var M = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
+	var y = Math.floor(now.getYear());
+	if (y < 999) y += 1900;
+	
+	var ms = Math.floor(now.getMilliseconds());
+	var s = Math.floor(now.getSeconds());
+	var m = Math.floor(now.getMinutes() + s / 60);
+	var h = Math.floor(now.getHours() + m / 60);
+
+	var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
+	j2000.setUTCFullYear(2000,0,1);
+	j2000.setUTCHours(0,0,0,0);
+
+	var utc = new Date();
+	utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
+	utc.setUTCHours(h,m,s,ms);
+
+	var utc0 = new Date();
+	utc0.setUTCFullYear(y,MNumb,DNumb);
+	utc0.setUTCHours(0,0,0,0);
+
+	var jd = 2451544.5 + (utc-j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
+	var jdUTC0 = 2451544.5 + (utc0-j2000) / 86400000;
+	
+	var N = jd - 2451545.0;
+	var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
+	var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
+	var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2*g);
+	var e = 23.439 - 0.0000004 * N;
+	var rektaszension = Math.atan((Math.cos(e)*Math.sin(el)) / Math.cos(el));
+	
+	var T = (jdUTC0 - 2451545.0) / 36525;
+	var stGMT = (((6*3600) + (41*60) + 50.54841) + (8640184.812866*T) + (0.093104*Math.pow(T,2)) - (0.0000062*Math.pow(T,3))) / 3600;
+	
+	var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
+	var hWGMT = stGMT2 * 15;
+	var hW = hWGMT + 11.9566185772;
+	
+	var st = (stGMT + (now.getUTCHours()*1.00273790935)) + (11.9566185772/15); // Sommerzeit muss noch berücksichtigt werden
+	var st24 = Math.abs(st - (Math.round(st / 24) * 24));
+	var stH = Math.floor(st24);
+	var stM = Math.floor((st24 % 1) * 60);
+	var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
+	
+	var travelWidth = document.body.clientWidth;
+	var travelHeight = document.body.clientHeight;
+	var sunPosX = 0;
+	var sunPosY = 0;
+	var moonPosX = 0;
+	var moonPosY = 0;
+	
+	var sun = $("#sun").css({
+		"left": (s / 60) * travelWidth,
+		"top": (m / 60) * travelHeight
+	});
+	
+	$("#day").text(D[w]);
+	$("#dayNumb").text(DNumb);
+	$("#month").text(M[MNumb]);
+	$("#year").text(y);
+	$("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
+	
+	$("#julian").text(jd.toFixed(6));
+	//$("#star").text(stH + ':' + stM + ':' + stS);
+	$("#star").text(stH + ':' + stM);
+	$("#star1").text(stGMT);
+	$("#star2").text(stGMT2);
+	
+}
+
+function zeroFill( number, width ){
+	width -= number.toString().length;
+	if ( width > 0 ){
+		return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
+	}
+	return number + ""; // always return a string
+}
+
+// create emails
+function composeMail(tag, name, prov, suffix, text, topic) {
+	var trigger = tag.indexOf(".");
+	var mailString = name + '@' + prov + '.' + suffix;
+	var textString = mailString.replace(/@/g, "(at)");
+	var descString = "Nachricht an " + mailString;
+	if (trigger == -1) {
+		if (!text) {
+			text = mailString;
+		} else if (text == "at") {
+			text = textString;
+		} else if (text == "to") {
+			text = descString;
+		}
+		if (!topic) {
+			topic = "";
+		} else {
+			topic = "?subject=" + topic;
+		}
+		var old = $('#'+tag).html();
+		$('#'+tag).html(old + text);
+		$('#'+tag).attr("href", "mailto:" + mailString + topic);
+	} else {
+		$(tag).each(function() {
+			if (!text) {
+				text = mailString;
+			} else if (text == "at") {
+				text = textString;
+			} else if (text == "to") {
+				text = descString;
+			}
+			if (!topic) {
+				topic = "";
+			} else {
+				topic = "?subject=" + topic;
+			}
+			var old = $(this).html();
+			$(this).html(old + text);
+			$(this).attr("href", "mailto:" + mailString + topic);
+		});
+	}
+}
+
+//Länge der Balken im Diagram berechnen
+function barwidth(size, G, W) {
+	var s = size;
+	var g = G;
+	var w = W;
+	var p = ( w / g ) * 100;
+	var newW = s * ( p /100 );
+
+	return newW;
+}
+//String Element erweitern
+String.prototype.transform = function() { 
+	return parseFloat(this.replace(',', '.')); 
+}
+//Array Element erweitern
+Array.prototype.arrayAdd = function() {
+	return eval(this.join("+"));
+}
+//Speicherplatz in Prozent berechnen
+function percentage(total, gigs, round) {
+		var totalSpace = total;
+		var singleSpace = gigs;
+		var z = round;
+		var p = singleSpace / ( totalSpace / 100 );
+		
+		return p;
+}
+//Speicherplatz in GB berechnen
+function gigabytes(percent, total, round) {
+		var occupiedPercent = percent;
+		var singleSpace = total;
+		var z = round;
+		var g = (singleSpace / 100 ) * occupiedPercent;
+		
+		return g;
+}

source/data/new.json

@@ -0,0 +1,14 @@
+[
+	{
+		"text": "Index",
+		"href": "/"
+	},
+	{
+		"text": "Basics",
+		"href": "./demo/basics.html"
+	},
+	{
+		"text": "Drag",
+		"href": "./demo/examples/ui/drag.html"
+	}
+]

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

@@ -0,0 +1,109 @@
+---
+title: Drag
+tags:
+  - demoExample
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_drag" %}
+
+{% extends "demo/_app.njk" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block links %}
+  {{ super() }}
+  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+  {{ super() }}
+{% endblock %}
+
+{% block body %}
+    <div id="space"></div>
+{% endblock %}
+
+{%- block script %}
+  <script>
+// Get the space element
+const space = document.getElementById('space');
+
+// Create a new div element
+const newDiv = document.createElement('div');
+newDiv.style.position = 'absolute';
+newDiv.style.width = '100px';
+newDiv.style.height = '100px';
+newDiv.style.background = 'cyan';
+newDiv.style.cursor = 'move';
+
+// Add event listeners for dragging
+let isDown = false;
+let offset = [0, 0];
+
+newDiv.addEventListener('mousedown', (event) => {
+  if (event.button === 0) { // Left mouse button
+    isDown = true;
+    offset = [
+      newDiv.offsetLeft - event.clientX,
+      newDiv.offsetTop - event.clientY
+    ];
+  }
+});
+
+document.addEventListener('mouseup', () => {
+  isDown = false;
+});
+
+document.addEventListener('mousemove', (event) => {
+  if (isDown) {
+    const maxX = window.innerWidth - newDiv.offsetWidth;
+    const maxY = window.innerHeight - newDiv.offsetHeight;
+    let x = event.clientX + offset[0];
+    let y = event.clientY + offset[1];
+
+    // Boundary checks
+    if (x < 0) x = 0;
+    if (y < 0) y = 0;
+    if (x > maxX) x = maxX;
+    if (y > maxY) y = maxY;
+
+    newDiv.style.left = `${x}px`;
+    newDiv.style.top = `${y}px`;
+  }
+});
+
+// Save position and size
+const saveData = () => {
+  const data = {
+    x: newDiv.offsetLeft,
+    y: newDiv.offsetTop,
+    width: newDiv.offsetWidth,
+    height: newDiv.offsetHeight
+  };
+  // Save data to local storage or a database
+  localStorage.setItem('divData', JSON.stringify(data));
+};
+
+// Load saved data
+const loadData = () => {
+  const data = localStorage.getItem('divData');
+  if (data) {
+    const parsedData = JSON.parse(data);
+    newDiv.style.left = `${parsedData.x}px`;
+    newDiv.style.top = `${parsedData.y}px`;
+    newDiv.style.width = `${parsedData.width}px`;
+    newDiv.style.height = `${parsedData.height}px`;
+  }
+};
+
+// Add the new div to the space
+space.appendChild(newDiv);
+
+// Call the save function when the user stops dragging
+document.addEventListener('mouseup', saveData);
+
+// Load saved data on page load
+loadData();
+  </script>
+{% endblock %}

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

@@ -0,0 +1,81 @@
+---
+title: New
+tags:
+  - demoExample
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_new" %}
+
+{% extends "demo/_app.njk" %}
+{% import "demo/macros/_states.njk" as state %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+  {{ super() }}
+  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+  {{ super() }}
+{% endblock %}
+
+{% block body %}
+  <div id="top">
+    <h1 class="brand">
+      <a href="#">{{ hippie.brand | upper }}</a>
+    </h1>
+    <nav>
+      <ul>
+        {% for link in new %}
+          <li>
+            <a href="{{ link.href }}">{{ link.text }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </nav>
+    <div class="state">
+      <p>{{ state.coord("log")}}
+        /
+        {{ state.date("date")}}
+        /
+        {{ state.time("time")}}</p>
+    </div>
+  </div>
+  <div class="container">
+    <div class="area menu">
+      <nav class="nav_horizontal">
+        <ul>
+          <li>
+            <a href="" class="a_button">Func 1</a>
+          </li>
+          <li>
+            <a href="" class="a_button">Func 2</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div class="area grid">
+      <div class="item">1</div>
+      <div class="item">2</div>
+      <div class="item">3</div>
+      <div class="item">4</div>
+    </div>
+  </div>
+{% endblock %}
+
+{%- 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');
+
+    document.addEventListener('mousemove', (event) => {
+      document.getElementById('log')
+      .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+    });
+  </script>
+{% endblock %}

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

@@ -0,0 +1,50 @@
+---
+title: Settings
+tags:
+  - demoExample
+  - ui
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_ui" %}
+
+{% extends "demo/_app.njk" %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+  {{ super() }}
+  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+  {{ super() }}
+{% endblock %}
+
+{% block body %}
+<div id="frame" class="frame-flex">
+  <div class="title-bar">
+    <div>title-bar<button class="io_button">menu</button class="io_button"><button class="io_button">search</button class="io_button"></div>
+    <div><button class="io_button">minimize</button class="io_button"><button class="io_button">maximize</button class="io_button"><button class="io_button">close</button class="io_button"></div>
+  </div>
+  <main>
+    <aside class="left">aside
+    <nav>
+      <ul>
+        <li>setting</li>
+        <li>setting</li>
+      </ul>
+    </nav>
+    </aside>
+    <section class="bside">section</section>
+  </main>
+</div>
+{% endblock %}
+
+{%- block script %}
+  {{ super() }}
+  <script src="{{ pageBase }}js/app.js"></script>
+  <script>
+  </script>
+{% endblock %}

source/style/modules/ui/_new_module.scss

@@ -0,0 +1,121 @@
+$module_top_height: 32px;
+
+.body_new {
+	height: 100vh;
+	padding: $module_top_height + $space_basic $space_basic $space_basic;
+}
+
+.body_drag {
+	height: 100vh;
+	// padding: $space_basic;
+}
+
+.container {
+	display: grid;
+	height: 100%;
+	// margin: $space_basic;
+	// grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: auto 1fr;
+	gap: $space_basic;
+}
+
+.area {
+	width: 100%;
+	height: 100%;
+	transition: $transition_best;
+
+	&:hover {
+		background-color: #999;
+	}
+}
+
+.menu, #top {
+	nav ul {
+		margin: 0;
+	}
+}
+
+.grid {
+	display: grid;
+	// grid-template-rows: repeat(2, 1fr);
+	// grid-template-columns: repeat(2, 1fr);
+	grid-template-areas: "a a";
+	grid-auto-rows: 1fr;
+	grid-auto-columns: 1fr;
+}
+
+.item {
+	// height: unset;
+	border-color: darken($color_back_basic, $color_diff_tiny);
+	border-style: dotted;
+	border-width: $width_border_8;
+	border-radius: $width_border_8;
+	padding: $space_basic;
+	background-color: rgb($color_back_basic, .5);
+	// background-color: lighten($color_back_basic, $color_diff_tiny);
+	// background-color: gold;
+}
+
+.float {
+	min-height: 50%;
+}
+
+#top {
+	position: fixed;
+	top: 0;
+	left: 0;
+	display: flex;
+	width: 100%;
+	height: $module_top_height;
+	background-color: rgb(0, 0, 0, .8);
+	z-index: $z_top;
+
+	div:last-child {
+		flex: 1;
+	}
+
+	p,
+	li {
+		color: #fff;
+	}
+
+	h1 a {
+		color: #000;
+	}
+
+	p,
+	li {
+		margin-top: 8px;
+		margin-bottom: 7px;
+		padding: 0 4px;
+		font-size: 12px;
+		line-height: 17px;
+	}
+
+	nav ul {
+		display: flex;
+		margin-left: 16px;
+	}
+
+	.brand {
+		height: 36px;
+		background-color: #fff;
+		margin: 0 0 0 128px;
+		padding: 7px 24px;
+		font-size: 16px;
+		line-height: 22px;
+		font-weight: bold;
+		text-align: center;
+	}
+
+	.state {
+		margin-right: 16px;
+		text-align: right;
+	}
+}
+
+#space {
+	position: relative;
+	height: 100%;
+	background-color: $color-dark;
+}

source/style/modules/ui/_settings_module.scss

@@ -0,0 +1,44 @@
+$module_top_height: 32px;
+
+.body_ui {
+	height: 100vh;
+}
+
+#frame {
+	position: relative;
+	height: 100%;
+	background-color: $color-dark;
+
+	.title-bar {
+		button {
+			margin: 0 2px;
+		}
+	}
+
+	main {
+		aside {
+			background-color: $color_brighter;
+		}
+	}
+}
+
+.frame-flex {
+	display: flex;
+	flex-direction: column;
+
+	.title-bar {
+		display: flex;
+
+		div:last-child {
+			margin-left: auto;
+		}
+	}
+	
+	main {
+		flex: 1;
+
+		aside, section {
+			height: 100%;
+		}
+	}
+}

source/style/ui.scss

@@ -0,0 +1,5 @@
+@import "demo_config";
+@import "hippie-style/hippie";
+
+@import "modules/ui/new_module";
+@import "modules/ui/settings_module";

source/templates/demo/_app.njk

@@ -0,0 +1,29 @@
+<!-- demo.app.template -->
+<!DOCTYPE html>
+<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
+  <head>
+    <meta charset="utf-8">
+
+    {% block head %}
+      <title>{{ hippie.titlePrefix }}
+        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+
+      {% block meta %}
+        {% include "demo/partials/_meta.njk" %}
+        <base href="/">
+      {% endblock %}
+
+      {% block links %}
+      {% endblock %}
+
+    {% endblock %}
+  </head>
+
+  <body class="{{ bodyClass }}">
+    {% block body %}{% endblock %}
+
+    {% block script %}
+    {% endblock %}
+
+  </body>
+</html>

source/templates/demo/macros/_states.njk

@@ -0,0 +1,15 @@
+<!-- states.macro -->
+{% macro coord(id, text='X: #, Y: ##') %}
+  <span id="{{ id }}">{{ text }}</span>
+{% endmacro %}
+{% macro time(id, text='00:00:00', postfix=' Uhr') %}
+  <span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
+{% endmacro %}
+{% macro date() %}
+  <span id="{{ id }}">
+    <span id="day">Wochentag</span>,
+    <span id="dayNumb">##</span>.
+    <span id="month">Monat</span>
+    <span id="year">####</span>
+  </span>
+{% endmacro %}