From b7c57a7ebcd735f5c37f574bed62f271fdc4fbf5 Mon Sep 17 00:00:00 2001
From: ulrich <not disclosed>
Date: Sat, 30 Dec 2017 08:44:42 +0000
Subject: [PATCH] Selector hinzugenommen
---
README.md | 93 +++++++++++++++++++++++++++++++
app-menu.js | 76 ++++++++++---------------
2 files changed, 123 insertions(+), 46 deletions(-)
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1c50fed
--- /dev/null
+++ b/README.md
@@ -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.
diff --git a/app-menu.js b/app-menu.js
index 14a974e..f0cfad4 100644
--- a/app-menu.js
+++ b/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");
-}
\ No newline at end of file
+}
--
Gitblit v1.9.3