Diverse Aufraeumarbeiten

ulrich

2019-12-15 8ca5e8bfa494ec9af80b58b96cbf3e86f7a340ee

Diverse Aufraeumarbeiten

 app-menu.css

File was renamed from jslib/app-menu/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;
}

 data/tpl/app-menu.tpl

 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 () {

 js/app-menu.js

File was renamed from jslib/app-menu/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() {

 js/app.js

File was renamed from 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");


 js/vorlagen.js

 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.