Ein universelles Menü für Webanwendungen
view | history | commit | commitdiff
ulrich
2019-12-15 ddb505bbff64a1e1c187b9c9e89e43d24ab3f973
commit | author | age
ddb505 1 function AppMenu() {
U 2   var self = this;
3   var _app_menu_selector;
4   var _app_menu_mbreite;
5   var _app_menu_url_prefix = "";
6   var _app_menu_template;
b7c57a 7
ddb505 8   /*
U 9    * die nachfolgenden Funktionen steuern das ein- und
10    * ausblenden des menues
11    */
12   this.init = function (url_prefix, mdesc, mtpl, mselector, mbreite) {
13     self._app_menu_selector = mselector;
14     self._app_menu_mbreite = mbreite;
15     var menu = document.querySelector(self._app_menu_selector);
16     menu.style.flexBasis = '0em';
17     self._app_menu_url_prefix = url_prefix;
18     /*
19       Die Menue-Vorlage wird einmal zu Beginn geladen und
20       waehrend dem Programmlauf immer wieder neu zum Rendern
21       einer dynamisch gelandenen Menuebeschreibung verwendet
22     */
23     var request = new XMLHttpRequest();
24     request.open("GET", mtpl);
25     request.addEventListener('load', function(event) {
26        if (request.status >= 200 && request.status < 300) {
27           self._app_menu_template = request.responseText;
28           Mustache.parse(self._app_menu_template);   // optional, speeds up future uses
29           self.app_menu_laden(mdesc);
30        } else {
31           console.warn(request.statusText, request.responseText);
32        }
33     });
34     request.send();
35   };
a9b206 36
ddb505 37   this.app_menu_do_toggle = function(elem) {
U 38     self.toggle();
39   };
a9b206 40
ddb505 41   this.toggle = function() {
U 42     var menuDiv = document.querySelector(self._app_menu_selector);
43     if(menuDiv.classList.contains('app-menu-open')) {
44       menuDiv.classList.remove('app-menu-open');
45       menuDiv.style.flexBasis = '0em';
46     } else {
47       menuDiv.classList.add('app-menu-open');
48       menuDiv.style.flexBasis = self._app_menu_mbreite;
a9b206 49     }
ddb505 50   };
a9b206 51
ddb505 52   /*
U 53    * ab hier Steuerung des Menueinhalts
54    */
a9b206 55
U 56
ddb505 57   /*
U 58    * Menuebeschreibung als JSON-Datei laden
59    * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
60    * richtung: z.Zt. unbenutzt: Animationsrichtung
61    */
62   this.app_menu_laden = function(mdesc, richtung) {
63     var xmlhttp = new XMLHttpRequest();
64     var url = self._app_menu_url_prefix + mdesc;
65     xmlhttp.onreadystatechange = function() {
66       if (this.readyState == 4 && this.status == 200) {
67         self.app_menu_bauen(JSON.parse(this.responseText), richtung);
68       }
69     };
70     xmlhttp.open("GET", url, true);
71     xmlhttp.send();
72   };
a9b206 73
ddb505 74   /*
U 75     Aus einer Menuebeschreibung im JSON-Format mit Hilfe
76     von Mustache und der zu Beginn geladenen HTML-Vorlage
77     ein div-Element zusammenbauen, das als Menue eingeblendet
78     werden kann und dem Element _app_menu_selector hinzufuegen
79   */
80   this.app_menu_bauen = function(menuejs, richtung) {
a9b206 81
ddb505 82     // neues Menue als div-Element zusammensetzen
U 83     var menuDiv = document.createElement("div");
84     menuDiv.classList.add('app-menu-content');
85     menuDiv.style.position = 'relative';
86     menuDiv.innerHTML = Mustache.render(self._app_menu_template, menuejs);
87
88     // altes Menue loeschen
89     self.app_menu_remove_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
90     self.app_menu_remove_event_listener_multi('.bitem', 'click', self.app_menu_klick_herauf);
91     self.app_menu_remove_event_listener_multi('.mitem', 'click', self.app_menu_ausfuehren);
92     var menu = document.querySelector(self._app_menu_selector);
93     menu.innerHTML = '';
94
95     // neues Menue hinzufuegen
96     menu.append(menuDiv);
97     self.app_menu_add_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
98     self.app_menu_add_event_listener_multi('.bitem', 'click', self.app_menu_klick_herauf);
99     self.app_menu_add_event_listener_multi('.mitem', 'click', self.app_menu_ausfuehren);
100
101     menuDiv = document.querySelector('.app-menu-content');
102     menuDiv.classList.add('slidein-from-right');
103   };
104
105   this.app_menu_klick_herunter = function() {
106     self.app_menu_laden(this.getAttribute('data-verweis'), 'herunter');
107   };
108
109   this.app_menu_klick_herauf = function() {
110     self.app_menu_laden(this.getAttribute('data-verweis'), 'herauf');
111   };
112
113   this.app_menu_ausfuehren = function() {
114     var functionName = this.getAttribute('data-verweis');
115     eval(functionName + "(this)");
116   };
117
118   /* --- Helferlein ---*/
119   /*
120     sel - '.smenu'
121     evt - 'click' fuer onclick
122     func - der verweis auf die funktion
123   */
124   this.app_menu_remove_event_listener_multi = function(sel, evt, func) {
125     var elem = document.querySelectorAll(sel);
126     for (var index = 0; index < elem.length; index++) {
127       elem[index].removeEventListener(evt, func);
128     }
129   };
130
131   this.app_menu_add_event_listener_multi = function(sel, evt, func) {
132     var elem = document.querySelectorAll(sel);
133     for (var index = 0; index < elem.length; index++) {
134       elem[index].addEventListener(evt, func);
135     }
136   };
b7c57a 137 }