Vorlage für Webapps
view | history | commit | commitdiff
ulrich
2021-03-08 f278ba971e8a814cd0d9ceb1e4ebf77117f48565
commit | author | age
403f2f 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;
7
8   /*
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;
ee3787 15     var menu = document.querySelector(self._app_menu_selector);
U 16     menu.style.flexBasis = '0em';
403f2f 17     self._app_menu_url_prefix = url_prefix;
8ca5e8 18     /*
U 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     */
ee3787 23     var request = new XMLHttpRequest();
U 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        }
403f2f 33     });
ee3787 34     request.send();
403f2f 35   };
U 36
37   this.app_menu_do_toggle = function(elem) {
38     self.toggle();
39   };
40
41   this.toggle = function() {
ee3787 42     var menuDiv = document.querySelector(self._app_menu_selector);
U 43     if(menuDiv.classList.contains('app-menu-open')) {
44       menuDiv.classList.remove('app-menu-open');
45       menuDiv.style.flexBasis = '0em';
403f2f 46     } else {
ee3787 47       menuDiv.classList.add('app-menu-open');
U 48       menuDiv.style.flexBasis = self._app_menu_mbreite;
403f2f 49     }
U 50   };
51
52   /*
53    * ab hier Steuerung des Menueinhalts
54    */
55
56
57   /*
8ca5e8 58    * Menuebeschreibung als JSON-Datei laden
403f2f 59    * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
8ca5e8 60    * richtung: z.Zt. unbenutzt: Animationsrichtung
403f2f 61    */
U 62   this.app_menu_laden = function(mdesc, richtung) {
ee3787 63     var xmlhttp = new XMLHttpRequest();
U 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();
403f2f 72   };
U 73
8ca5e8 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   */
403f2f 80   this.app_menu_bauen = function(menuejs, richtung) {
8ca5e8 81
U 82     // neues Menue als div-Element zusammensetzen
ee3787 83     var menuDiv = document.createElement("div");
U 84     menuDiv.classList.add('app-menu-content');
85     menuDiv.style.position = 'relative';
86     menuDiv.innerHTML = Mustache.render(self._app_menu_template, menuejs);
403f2f 87
8ca5e8 88     // altes Menue loeschen
ee3787 89     self.app_menu_remove_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
U 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 = '';
403f2f 94
8ca5e8 95     // neues Menue hinzufuegen
U 96     menu.append(menuDiv);
ee3787 97     self.app_menu_add_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
U 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);
8ca5e8 100
U 101     menuDiv = document.querySelector('.app-menu-content');
102     menuDiv.classList.add('slidein-from-right');
403f2f 103   };
d3a2d9 104
403f2f 105   this.app_menu_klick_herunter = function() {
5ebc23 106     self.app_menu_laden(this.getAttribute('data-verweis'), 'herunter');
403f2f 107   };
d3a2d9 108
403f2f 109   this.app_menu_klick_herauf = function() {
5ebc23 110     self.app_menu_laden(this.getAttribute('data-verweis'), 'herauf');
403f2f 111   };
d3a2d9 112
403f2f 113   this.app_menu_ausfuehren = function() {
5ebc23 114     var functionName = this.getAttribute('data-verweis');
403f2f 115     eval(functionName + "(this)");
U 116   };
d3a2d9 117
ee3787 118   /* --- Helferlein ---*/
U 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   };
d3a2d9 137 }