From 3a867c169a09a334473ddfbdf02ee089d422fc08 Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 15 Aug 2024 22:41:12 +0200 Subject: [PATCH 1/4] feat: add ui examples --- source/code/app.js | 192 ++++++++++++++++++ source/data/new.json | 14 ++ source/screens/demo/examples/ui/drag.njk | 109 ++++++++++ source/screens/demo/examples/ui/new.njk | 81 ++++++++ source/screens/demo/examples/ui/settings.njk | 50 +++++ source/style/modules/ui/_new_module.scss | 121 +++++++++++ source/style/modules/ui/_settings_module.scss | 44 ++++ source/style/ui.scss | 5 + source/templates/demo/_app.njk | 29 +++ source/templates/demo/macros/_states.njk | 15 ++ 10 files changed, 660 insertions(+) create mode 100644 source/code/app.js create mode 100644 source/data/new.json create mode 100755 source/screens/demo/examples/ui/drag.njk create mode 100755 source/screens/demo/examples/ui/new.njk create mode 100755 source/screens/demo/examples/ui/settings.njk create mode 100755 source/style/modules/ui/_new_module.scss create mode 100755 source/style/modules/ui/_settings_module.scss create mode 100644 source/style/ui.scss create mode 100755 source/templates/demo/_app.njk create mode 100644 source/templates/demo/macros/_states.njk diff --git a/source/code/app.js b/source/code/app.js new file mode 100644 index 0000000..5ce57d0 --- /dev/null +++ b/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ä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; +} diff --git a/source/data/new.json b/source/data/new.json new file mode 100644 index 0000000..9d4a0a8 --- /dev/null +++ b/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" + } +] \ No newline at end of file diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk new file mode 100755 index 0000000..fbf7234 --- /dev/null +++ b/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() }} + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} +
+{% endblock %} + +{%- block script %} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk new file mode 100755 index 0000000..edc4d47 --- /dev/null +++ b/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() }} + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} +
+

+ {{ hippie.brand | upper }} +

+ +
+

{{ state.coord("log")}} + / + {{ state.date("date")}} + / + {{ state.time("time")}}

+
+
+
+
+ +
+
+
1
+
2
+
3
+
4
+
+
+{% endblock %} + +{%- block script %} + {{ super() }} + + + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk new file mode 100755 index 0000000..da61f8a --- /dev/null +++ b/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() }} + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} +
+
+
title-bar
+
+
+
+ +
section
+
+
+{% endblock %} + +{%- block script %} + {{ super() }} + + +{% endblock %} \ No newline at end of file diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss new file mode 100755 index 0000000..1456663 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss new file mode 100755 index 0000000..9b9dc1b --- /dev/null +++ b/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%; + } + } +} \ No newline at end of file diff --git a/source/style/ui.scss b/source/style/ui.scss new file mode 100644 index 0000000..0a36d0d --- /dev/null +++ b/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"; diff --git a/source/templates/demo/_app.njk b/source/templates/demo/_app.njk new file mode 100755 index 0000000..0939550 --- /dev/null +++ b/source/templates/demo/_app.njk @@ -0,0 +1,29 @@ + + + + + + + {% block head %} + {{ hippie.titlePrefix }} + {%- block title %}{% endblock %}{{ hippie.titlePostfix }} + + {% block meta %} + {% include "demo/partials/_meta.njk" %} + + {% endblock %} + + {% block links %} + {% endblock %} + + {% endblock %} + + + + {% block body %}{% endblock %} + + {% block script %} + {% endblock %} + + + \ No newline at end of file diff --git a/source/templates/demo/macros/_states.njk b/source/templates/demo/macros/_states.njk new file mode 100644 index 0000000..3b3a333 --- /dev/null +++ b/source/templates/demo/macros/_states.njk @@ -0,0 +1,15 @@ + +{% macro coord(id, text='X: #, Y: ##') %} + {{ text }} +{% endmacro %} +{% macro time(id, text='00:00:00', postfix=' Uhr') %} + {{ text }}{{ postfix }} +{% endmacro %} +{% macro date() %} + + Wochentag, + ##. + Monat + #### + +{% endmacro %} \ No newline at end of file From 22ad9eb6ccbc0ebebab6ae83506cf24bca670e04 Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 15 Aug 2024 22:49:11 +0200 Subject: [PATCH 2/4] feat: add new draggable elements --- source/screens/demo/examples/ui/drag.njk | 141 ++++++++++++----------- 1 file changed, 76 insertions(+), 65 deletions(-) diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index fbf7234..13b48d7 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -21,89 +21,100 @@ tags: {% endblock %} {% block body %} -
+ +
{% endblock %} {%- block script %} {% endblock %} \ No newline at end of file From 8e06f8feb880439afba7f82a1a6215abb5fd1aa4 Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 15 Aug 2024 22:59:52 +0200 Subject: [PATCH 3/4] feat: add color to draggables --- source/screens/demo/examples/ui/drag.njk | 21 +++++++++++++++++---- source/style/modules/ui/_new_module.scss | 8 ++++++++ 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index 13b48d7..a76f5bb 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -21,12 +21,12 @@ tags: {% endblock %} {% block body %} -
+ {% endblock %} {%- block script %} - + {% endblock %} \ No newline at end of file diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss index 1456663..100284b 100755 --- a/source/style/modules/ui/_new_module.scss +++ b/source/style/modules/ui/_new_module.scss @@ -118,4 +118,12 @@ $module_top_height: 32px; position: relative; height: 100%; background-color: $color-dark; +} + +#addFrame { + @extend .io_button; + position: fixed; + top: 8px; + right: 8px; + margin: 0; } \ No newline at end of file From 4cf279bee5595cf8efd2e8e2ce44e4d834c96b37 Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 15 Aug 2024 23:06:21 +0200 Subject: [PATCH 4/4] feat: draggable is now a class --- source/screens/demo/examples/ui/drag.njk | 207 +++++++++++++---------- 1 file changed, 113 insertions(+), 94 deletions(-) diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index a76f5bb..61ab554 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -26,108 +26,127 @@ tags: {% endblock %} {%- block script %} - + // Create a new NewDiv instance + const newDiv = new NewDiv(100, 100, 800, 600, '#000'); + newDiv.createDiv(); + newDiv.appendToFrame(document.getElementById('space')); + {% endblock %} \ No newline at end of file