Selector hinzugenommen

ulrich

2017-12-30 b7c57a7ebcd735f5c37f574bed62f271fdc4fbf5

Selector hinzugenommen

 README.md

New file
@@ -0,0 +1,93 @@
# app-menu

Ein universelles Menü für Webanwendungen.

## Beschreibung

Das app-menu ist eine Sammlung aus JavaScript-Funktionen, die eine Liste von Auswahlpunkten aus einer Beschreibung in der JavaScript Object Notation (JSON) formen. Die Gestaltung des Menüs wird über ein Cascading Stylesheet (CSS) bestimmt.

## Anwendung

Das app-menu wird wie folgt in eigene Webanwendungen eingebaut.

1. Einbinden der Abhängigkeiten (jQuery und Mustache)
2. Einbinden der Stylesheets
3. Weitere Schritte

Weiterer Text




## Einbinden von jQuery und Mustache



```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
```
Das obige Beispiel bindet jQuery und Mustache aus dem Content Delivery Network [cdnjs](https://cdnjs.com/) ein. Stattdessen können die beiden JavaScript-Komponenten auch lokal ausgeliefert werden.

## Einbinden des Stylesheets



```
<link rel="stylesheet" type="text/css" href="applib/app-menu/nav-toggle.css">
<link rel="stylesheet" type="text/css" href="applib/app-menu/app-menu.css">
```


#### Einbinden des Skripts
```
<script src="applib/app-menu/app-menu.js"></script>
```

#### Aufruf des Menüs
```
app_menu_init("menu/", "hauptmenue.json", "applib/app-menu/app-menu.tpl", ".west");
```

Parameter 1: Name des Unterverzeichnisses mit Menübeschreibungen
Parameter 2: Name der Menübeschreibung, die zuerst angezeigt werden soll
Parameter 3: Unterverzeichnis und Name der Menüvorlage für Mustache
Parameter 4: Name des Selektors, der das Menü aufnehmen soll

### Menüvorlage

Im Verzeichnis `applib/app-menu` befindet sich eine Vorlage für ein dynamisches Menü, das ein- und ausgeblendet werden kann und seine Inhalte von Beschreibungen in JSON erhält. Menüs werden dynamisch aus JSON-Strukturen erstellt, die ein Menü beschreiben. In dieser Form sind die Menübeschreibungen gut mit einem Serverdienst zu ersetzen. Eine Beschreibung sieht wie folgt aus

```
{
  "menue": {
    "menuetitel": "Hauptmenü",
    "wurzel": true,
    "vorgaenger": {
      "vtitel": "",
      "vverweis": ""
    },
    "inhalt":  [
      {
        "titel": "H Menüeintrag 1",
        "umenue": false,
        "funktion": "app_menu_test"
      },
      {
        "titel": "H Menüeintrag 2",
        "umenue": true,
        "verweis": "untermenue-1.json"
      },
      {
        "titel": "H Menüeintrag 3",
        "umenue": false,
        "funktion": "app_menu_test_2"
      }
    ]
  }
}
```

Der Schalter `wurzel` legt fest, ob noch ein übergeordnetes Menü dargestellt wird. Wenn ja (`wurzel=false`) wird in `vorgaenger.vverweis` der Name der Menübeschreibung und in `vorgaenger.vtitel` der Name, unter dem der Eintrag im Menü erscheinen soll angegeben. Ebenso legt der Schalter `umenue` fest, ob ein Untermenue dargestellt wird. Dann muss in `verweis` der Name der Menübeschreibung angegeben sein.

Im Element `funktion` eines Menüeintrages wird ein Funktionsname notiert. Die so benannte Funktion wird aufgerufen, wenn das Menü gewählt wird. Eine solche Funktion darf keine Parameter erwarten.

 app-menu.js

@@ -1,42 +1,25 @@

/*
 * die nachfolgenden Funktionen steuern das ein- und 
 * die nachfolgenden Funktionen steuern das ein- und
 * ausblenden des menues
 */
function app_menu_init(url_prefix, mdesc, mtpl) {
function app_menu_init(url_prefix, mdesc, mtpl, mselector) {
  _app_menu_selector = mselector;
  document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
    /*
    this.classList.toggle( "active" );
    this.blur();
    app_menu_toggle();
    */
    //app_menu_do_toggle(this);
    app_menu_toggle();
  });   
  document.getElementsByClassName('west')[0].style.flexBasis = "0em";
  $('.ost').hide();
  });
  $(_app_menu_selector).css("flex-basis", "0em");
  _app_menu_url_prefix = url_prefix;
  app_menu_template_laden(mtpl);
  
  var menuDiv = $("<div/>");
  $(menuDiv).addClass('app-menu-content');  
  $(menuDiv).css('position', "relative");
  $(menuDiv).css('left', '-300px');
  $(menuDiv).css('right', '0px');
  $('.west').append(menuDiv);
  
  app_menu_laden(mdesc);
}

function app_menu_template_laden(tpl) {
  $.ajax({
    // url: _app_menu_url_prefix + "app-menu.tpl",
    url: tpl,
    type: "GET",
    dataType : "text"
  }).done(function( template ) {
    _app_menu_template = template;  
  $.get(mtpl, function(template) {
    _app_menu_template = template;
    Mustache.parse(_app_menu_template);   // optional, speeds up future uses
    var menuDiv = $("<div/>");
    $(menuDiv).addClass('app-menu-content');
    $(menuDiv).css('position', "relative");
    $(menuDiv).css('left', '-300px');
    $(menuDiv).css('right', '0px');
    $(_app_menu_selector).append(menuDiv);

    app_menu_laden(mdesc);
  });
}

@@ -49,13 +32,13 @@
function app_menu_toggle() {
  document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
  document.querySelector( "#nav-toggle" ).blur();
  var westDiv = document.getElementsByClassName('west')[0];
  if(westDiv.classList.contains('app-menu-open')) {
    westDiv.classList.remove('app-menu-open');
    westDiv.style.flexBasis = "0em";
  var westDiv = $(_app_menu_selector);
  if($(westDiv).hasClass('app-menu-open')) {
    $(westDiv).removeClass('app-menu-open');
    $(westDiv).css("flex-basis", "0em");
  } else {
    westDiv.classList.add('app-menu-open');
    westDiv.style.flexBasis = "16em";
    $(westDiv).addClass('app-menu-open');
    $(westDiv).css("flex-basis", "16em");
  }
}

@@ -65,6 +48,7 @@

var _app_menu_url_prefix = "";
var _app_menu_template;
var _app_menu_selector;

/*
 * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
@@ -77,7 +61,7 @@
  }).done(function( json ) {
    app_menu_bauen(json, richtung);
  });
  

}

function app_menu_bauen(menuejs, richtung) {
@@ -91,7 +75,7 @@
  // Endposition des neuen Menues beim Wechsel herauf
  var linksEndeNeu = "0px";
  var rechtsEndeNeu = "300px";
  

  if(richtung === 'herunter') {
    // Endposition des bestehenden Menues beim Wechsel herunter
    linksEndeAlt = "-300px";
@@ -103,15 +87,15 @@
    linksEndeNeu = "0px";
    rechtsEndeNeu = "300px";
  }
  

  var menuDiv = $("<div/>");
  $(menuDiv).addClass('app-menu-content');

  $(menuDiv).css('position', "relative");
  $(menuDiv).css('left', linksAnfangNeu);
  $(menuDiv).css('right', rechtsAnfangNeu);
  $(menuDiv).html(Mustache.render(_app_menu_template, menuejs));  
  
  $(menuDiv).html(Mustache.render(_app_menu_template, menuejs));

  $('.app-menu-content').delay(100).animate(
    {left: linksEndeAlt },
    100,
@@ -119,9 +103,9 @@
      $('.smenu').attr('onclick','').unbind('click');
      $('.bitem').attr('onclick','').unbind('click');
      $('.mitem').attr('onclick','').unbind('click');
      $('.west').empty();
      $(_app_menu_selector).empty();

      $('.west').append(menuDiv);
      $(_app_menu_selector).append(menuDiv);
      $('.smenu').on('click', app_menu_klick_herunter);
      $('.bitem').on('click', app_menu_klick_herauf);
      $('.mitem').on('click', app_menu_ausfuehren);
@@ -152,4 +136,4 @@

function app_menu_test_2() {
  alert("Test 2");
}
}