From 8ca5e8bfa494ec9af80b58b96cbf3e86f7a340ee Mon Sep 17 00:00:00 2001
From: ulrich <undisclosed>
Date: Sun, 15 Dec 2019 14:11:26 +0000
Subject: [PATCH] Diverse Aufraeumarbeiten
---
js/app-menu.js | 36 +++++++++++++++++++++---------------
js/vorlagen.js | 0
index.html | 8 ++++----
app-menu.css | 6 +++++-
readme.md | 4 ++--
js/app.js | 2 +-
data/tpl/app-menu.tpl | 0
7 files changed, 33 insertions(+), 23 deletions(-)
diff --git a/jslib/app-menu/app-menu.css b/app-menu.css
similarity index 80%
rename from jslib/app-menu/app-menu.css
rename to app-menu.css
index 70ee509..aa3e116 100644
--- a/jslib/app-menu/app-menu.css
+++ b/app-menu.css
@@ -27,6 +27,10 @@
cursor: pointer;
}
+/*
+ Das div-Element, das das Menue aufnimmt erhaelt
+ die Klasse app-menu-content
+*/
.app-menu-content {
overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/jslib/app-menu/app-menu.tpl b/data/tpl/app-menu.tpl
similarity index 100%
rename from jslib/app-menu/app-menu.tpl
rename to data/tpl/app-menu.tpl
diff --git a/index.html b/index.html
index 833072c..a75d0e0 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
- <link rel="stylesheet" type="text/css" href="jslib/app-menu/app-menu.css">
+ <link rel="stylesheet" type="text/css" href="app-menu.css">
<link rel="stylesheet" type="text/css" href="hamburger.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
@@ -64,9 +64,9 @@
</div>
<!-- Skripte -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
- <script src="jslib/app-menu/app-menu.js"></script>
- <script src="jslib/vorlagen.js"></script>
- <script src="app.js"></script>
+ <script src="js/app-menu.js"></script>
+ <script src="js/vorlagen.js"></script>
+ <script src="js/app.js"></script>
<script>
var app;
document.addEventListener('DOMContentLoaded', function () {
diff --git a/jslib/app-menu/app-menu.js b/js/app-menu.js
similarity index 83%
rename from jslib/app-menu/app-menu.js
rename to js/app-menu.js
index 49ffa6a..6a3b11e 100644
--- a/jslib/app-menu/app-menu.js
+++ b/js/app-menu.js
@@ -12,34 +12,26 @@
this.init = function (url_prefix, mdesc, mtpl, mselector, mbreite) {
self._app_menu_selector = mselector;
self._app_menu_mbreite = mbreite;
- /*document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
- app_menu_toggle();
- });*/
var menu = document.querySelector(self._app_menu_selector);
menu.style.flexBasis = '0em';
self._app_menu_url_prefix = url_prefix;
-
+ /*
+ Die Menue-Vorlage wird einmal zu Beginn geladen und
+ waehrend dem Programmlauf immer wieder neu zum Rendern
+ einer dynamisch gelandenen Menuebeschreibung verwendet
+ */
var request = new XMLHttpRequest();
request.open("GET", mtpl);
request.addEventListener('load', function(event) {
if (request.status >= 200 && request.status < 300) {
- //console.log(request.responseText);
self._app_menu_template = request.responseText;
Mustache.parse(self._app_menu_template); // optional, speeds up future uses
- var menuDiv = document.createElement("div");
- menuDiv.classList.add('app-menu-content');
- menuDiv.style.position = 'relative';
- menuDiv.style.left = '-300px';
- menuDiv.style.right = '0px';
- menu.appendChild(menuDiv);
-
self.app_menu_laden(mdesc);
} else {
console.warn(request.statusText, request.responseText);
}
});
request.send();
-
};
this.app_menu_do_toggle = function(elem) {
@@ -63,7 +55,9 @@
/*
+ * Menuebeschreibung als JSON-Datei laden
* mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
+ * richtung: z.Zt. unbenutzt: Animationsrichtung
*/
this.app_menu_laden = function(mdesc, richtung) {
var xmlhttp = new XMLHttpRequest();
@@ -77,23 +71,35 @@
xmlhttp.send();
};
+ /*
+ Aus einer Menuebeschreibung im JSON-Format mit Hilfe
+ von Mustache und der zu Beginn geladenen HTML-Vorlage
+ ein div-Element zusammenbauen, das als Menue eingeblendet
+ werden kann und dem Element _app_menu_selector hinzufuegen
+ */
this.app_menu_bauen = function(menuejs, richtung) {
+
+ // neues Menue als div-Element zusammensetzen
var menuDiv = document.createElement("div");
menuDiv.classList.add('app-menu-content');
menuDiv.style.position = 'relative';
menuDiv.innerHTML = Mustache.render(self._app_menu_template, menuejs);
+ // altes Menue loeschen
self.app_menu_remove_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
self.app_menu_remove_event_listener_multi('.bitem', 'click', self.app_menu_klick_herauf);
self.app_menu_remove_event_listener_multi('.mitem', 'click', self.app_menu_ausfuehren);
-
var menu = document.querySelector(self._app_menu_selector);
menu.innerHTML = '';
- menu.append(menuDiv);
+ // neues Menue hinzufuegen
+ menu.append(menuDiv);
self.app_menu_add_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
self.app_menu_add_event_listener_multi('.bitem', 'click', self.app_menu_klick_herauf);
self.app_menu_add_event_listener_multi('.mitem', 'click', self.app_menu_ausfuehren);
+
+ menuDiv = document.querySelector('.app-menu-content');
+ menuDiv.classList.add('slidein-from-right');
};
this.app_menu_klick_herunter = function() {
diff --git a/app.js b/js/app.js
similarity index 98%
rename from app.js
rename to js/app.js
index ae373f9..8280ca7 100644
--- a/app.js
+++ b/js/app.js
@@ -9,7 +9,7 @@
self.appMenu.init(
"data/menu/",
"hauptmenue.json",
- "jslib/app-menu/app-menu.tpl",
+ "data/tpl/app-menu.tpl",
".west",
"8em");
diff --git a/jslib/vorlagen.js b/js/vorlagen.js
similarity index 100%
rename from jslib/vorlagen.js
rename to js/vorlagen.js
diff --git a/readme.md b/readme.md
index 913e2d5..ce3072b 100644
--- a/readme.md
+++ b/readme.md
@@ -4,9 +4,9 @@
## Eigenschaften
-Diese Vorlage etabliert eine Bedienoberfläche für Apps. Sie gruppiert Menü, Kopf- und Fußzeile sowie eine Seitenleiste um einen zentralen Bereich, dessen Inhalt nach unten aus dem sichtbaren Teil der Anzeige herausläuft, wenn der Platz auf der Anzeige nicht ausreicht.
+Die App-Vorlage gruppiert Menü, Kopf- und Fußzeile sowie eine Seitenleiste um einen zentralen Bereich, dessen Inhalt nach unten aus dem sichtbaren Teil der Anzeige herausläuft, wenn der Platz auf der Anzeige nicht ausreicht.
-Beim Rollen des Inhalts bleiben die umliegenden Elemente sichtbar. Damit verschwinden wichtige Bedienelemente wie das Menü nicht beim Rollen.
+Beim Rollen des Inhalts bleiben die umliegenden Elemente und damit die wesentlichen Bedienelemente sichtbar.
Der Inhalt des Menüs kann über Beschreibungsdateien an unterschiedliche Belange angepasst und über eine Schaltfläche ein- und ausgeblendet werden. Die Menübeschreibungen müssen in der Javascript Object Notation (JSON) verfasst sein und können beliebig in eine hierarchische Struktur von Untermenüs verschachtelt werden.
--
Gitblit v1.9.3