Vorlage für Webapps
view | history | commit | commitdiff
ulrich
2018-03-29 d3a2d98c08753fd0017b33ae1e243cdfaed588f2
commit | author | age
d3a2d9 1 /*
U 2  * die nachfolgenden Funktionen steuern das ein- und
3  * ausblenden des menues
4  */
5 function app_menu_init(url_prefix, mdesc, mtpl, mselector, mbreite) {
6   _app_menu_selector = mselector;
7   _app_menu_mbreite = mbreite;
8   /*document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
9     app_menu_toggle();
10   });*/
11   $(_app_menu_selector).css("flex-basis", "0em");
12   _app_menu_url_prefix = url_prefix;
13   $.get(mtpl, function(template) {
14     _app_menu_template = template;
15     Mustache.parse(_app_menu_template);   // optional, speeds up future uses
16     var menuDiv = $("<div/>");
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);
24   });
25 }
26
27 function app_menu_do_toggle(elem) {
28   /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
29   document.querySelector( "#nav-toggle" ).blur();*/
30   app_menu_toggle();
31 }
32
33 function app_menu_toggle() {
34   /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
35   document.querySelector( "#nav-toggle" ).blur();*/
36   var westDiv = $(_app_menu_selector);
37   if($(westDiv).hasClass('app-menu-open')) {
38     $(westDiv).removeClass('app-menu-open');
39     $(westDiv).css("flex-basis", "0em");
40   } else {
41     $(westDiv).addClass('app-menu-open');
42     $(westDiv).css("flex-basis", _app_menu_mbreite); // z.B. "16em"
43   }
44 }
45
46 /*
47  * ab hier Steuerung des Menueinhalts
48  */
49
50 var _app_menu_url_prefix = "";
51 var _app_menu_template;
52 var _app_menu_selector;
53 var _app_menu_mbreite;
54
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   });
66
67 }
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";
80
81   if(richtung === 'herunter') {
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   }
92
93   var menuDiv = $("<div/>");
94   $(menuDiv).addClass('app-menu-content');
95
96   $(menuDiv).css('position', "relative");
97   $(menuDiv).css('left', linksAnfangNeu);
98   $(menuDiv).css('right', rechtsAnfangNeu);
99   $(menuDiv).html(Mustache.render(_app_menu_template, menuejs));
100
101   $('.app-menu-content').delay(100).animate(
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');
108       $(_app_menu_selector).empty();
109
110       $(_app_menu_selector).append(menuDiv);
111       $('.smenu').on('click', app_menu_klick_herunter);
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");
141 }