Ein universelles Menü für Webanwendungen
view | history | commit | commitdiff
ulrich
2018-01-07 98828d069b8d80415670bec6ead6f8820c80fabe
commit | author | age
a9b206 1 /*
b7c57a 2  * die nachfolgenden Funktionen steuern das ein- und
a9b206 3  * ausblenden des menues
U 4  */
f64986 5 function app_menu_init(url_prefix, mdesc, mtpl, mselector, mbreite) {
b7c57a 6   _app_menu_selector = mselector;
f64986 7   _app_menu_mbreite = mbreite;
98828d 8   /*document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
a9b206 9     app_menu_toggle();
98828d 10   });*/
b7c57a 11   $(_app_menu_selector).css("flex-basis", "0em");
a9b206 12   _app_menu_url_prefix = url_prefix;
b7c57a 13   $.get(mtpl, function(template) {
U 14     _app_menu_template = template;
a9b206 15     Mustache.parse(_app_menu_template);   // optional, speeds up future uses
b7c57a 16     var menuDiv = $("<div/>");
U 17     $(menuDiv).addClass('app-menu-content');
18     $(menuDiv).css('position', "relative");
19     $(menuDiv).css('left', '-300px');
20     $(menuDiv).css('right', '0px');
21     $(_app_menu_selector).append(menuDiv);
22
23     app_menu_laden(mdesc);
a9b206 24   });
U 25 }
26
27 function app_menu_do_toggle(elem) {
98828d 28   /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
U 29   document.querySelector( "#nav-toggle" ).blur();*/
a9b206 30   app_menu_toggle();
U 31 }
32
33 function app_menu_toggle() {
98828d 34   /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
U 35   document.querySelector( "#nav-toggle" ).blur();*/
b7c57a 36   var westDiv = $(_app_menu_selector);
U 37   if($(westDiv).hasClass('app-menu-open')) {
38     $(westDiv).removeClass('app-menu-open');
39     $(westDiv).css("flex-basis", "0em");
a9b206 40   } else {
b7c57a 41     $(westDiv).addClass('app-menu-open');
f64986 42     $(westDiv).css("flex-basis", _app_menu_mbreite); // z.B. "16em"
a9b206 43   }
U 44 }
45
46 /*
47  * ab hier Steuerung des Menueinhalts
48  */
49
50 var _app_menu_url_prefix = "";
51 var _app_menu_template;
b7c57a 52 var _app_menu_selector;
f64986 53 var _app_menu_mbreite;
a9b206 54
U 55 /*
56  * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
57  */
58 function app_menu_laden(mdesc, richtung) {
59   $.ajax({
60     url: _app_menu_url_prefix + mdesc,
61     type: "GET",
62     dataType : "json"
63   }).done(function( json ) {
64     app_menu_bauen(json, richtung);
65   });
b7c57a 66
a9b206 67 }
U 68
69 function app_menu_bauen(menuejs, richtung) {
70
71   // Endposition des bestehenden Menues beim Wechsel herauf
72   var linksEndeAlt = "500px";
73   var rechtsEndeAlt = "600px";
74   // Anfangsposition des neuen Menues beim Wechsel herauf
75   var linksAnfangNeu = "-300px";
76   var rechtsAnfangNeu = "-1px";
77   // Endposition des neuen Menues beim Wechsel herauf
78   var linksEndeNeu = "0px";
79   var rechtsEndeNeu = "300px";
b7c57a 80
a9b206 81   if(richtung === 'herunter') {
U 82     // Endposition des bestehenden Menues beim Wechsel herunter
83     linksEndeAlt = "-300px";
84     rechtsEndeAlt = "-1px";
85     // Anfangsposition des neuen Menues beim Wechsel herunter
86     linksAnfangNeu = "500px";
87     rechtsAnfangNeu = "600px";
88     // Endposition des neuen Menues beim Wechsel herunter
89     linksEndeNeu = "0px";
90     rechtsEndeNeu = "300px";
91   }
b7c57a 92
a9b206 93   var menuDiv = $("<div/>");
U 94   $(menuDiv).addClass('app-menu-content');
95
96   $(menuDiv).css('position', "relative");
97   $(menuDiv).css('left', linksAnfangNeu);
98   $(menuDiv).css('right', rechtsAnfangNeu);
b7c57a 99   $(menuDiv).html(Mustache.render(_app_menu_template, menuejs));
U 100
a9b206 101   $('.app-menu-content').delay(100).animate(
U 102     {left: linksEndeAlt },
103     100,
104     function() {
105       $('.smenu').attr('onclick','').unbind('click');
106       $('.bitem').attr('onclick','').unbind('click');
107       $('.mitem').attr('onclick','').unbind('click');
b7c57a 108       $(_app_menu_selector).empty();
a9b206 109
b7c57a 110       $(_app_menu_selector).append(menuDiv);
a9b206 111       $('.smenu').on('click', app_menu_klick_herunter);
U 112       $('.bitem').on('click', app_menu_klick_herauf);
113       $('.mitem').on('click', app_menu_ausfuehren);
114
115       $('.app-menu-content').delay(100).animate({left: linksEndeNeu });
116       $('.app-menu-content').animate({right: rechtsEndeNeu });
117     }
118   );
119   $('.app-menu-content').animate({right: rechtsEndeAlt });
120 }
121
122 function app_menu_klick_herunter() {
123   app_menu_laden($(this).attr('data-verweis'), 'herunter');
124 }
125
126 function app_menu_klick_herauf() {
127   app_menu_laden($(this).attr('data-verweis'), 'herauf');
128 }
129
130 function app_menu_ausfuehren() {
131   var functionName = $(this).attr('data-verweis');
132   eval(functionName + "(this)");
133 }
134
135 function app_menu_test() {
136   alert("Test");
137 }
138
139 function app_menu_test_2() {
140   alert("Test 2");
b7c57a 141 }