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