Vorlage für Webapps
view | history | commit | commitdiff
ulrich
2019-12-13 5ebc23a2e77b30c4c812b4961cdaf07e3af368fe
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;
15     /*document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
16       app_menu_toggle();
17     });*/
ee3787 18     var menu = document.querySelector(self._app_menu_selector);
U 19     menu.style.flexBasis = '0em';
403f2f 20     self._app_menu_url_prefix = url_prefix;
U 21
ee3787 22     var request = new XMLHttpRequest();
U 23     request.open("GET", mtpl);
24     request.addEventListener('load', function(event) {
25        if (request.status >= 200 && request.status < 300) {
26           //console.log(request.responseText);
27           self._app_menu_template = request.responseText;
28           Mustache.parse(self._app_menu_template);   // optional, speeds up future uses
29           var menuDiv = document.createElement("div");
30           menuDiv.classList.add('app-menu-content');
31           menuDiv.style.position = 'relative';
32           menuDiv.style.left = '-300px';
33           menuDiv.style.right = '0px';
34           menu.appendChild(menuDiv);
35
36           self.app_menu_laden(mdesc);
37        } else {
38           console.warn(request.statusText, request.responseText);
39        }
403f2f 40     });
ee3787 41     request.send();
U 42
403f2f 43   };
U 44
45   this.app_menu_do_toggle = function(elem) {
46     self.toggle();
47   };
48
49   this.toggle = function() {
ee3787 50     var menuDiv = document.querySelector(self._app_menu_selector);
U 51     if(menuDiv.classList.contains('app-menu-open')) {
52       menuDiv.classList.remove('app-menu-open');
53       menuDiv.style.flexBasis = '0em';
403f2f 54     } else {
ee3787 55       menuDiv.classList.add('app-menu-open');
U 56       menuDiv.style.flexBasis = self._app_menu_mbreite;
403f2f 57     }
U 58   };
59
60   /*
61    * ab hier Steuerung des Menueinhalts
62    */
63
64
65   /*
66    * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
67    */
68   this.app_menu_laden = function(mdesc, richtung) {
ee3787 69     var xmlhttp = new XMLHttpRequest();
U 70     var url = self._app_menu_url_prefix + mdesc;
71     xmlhttp.onreadystatechange = function() {
72       if (this.readyState == 4 && this.status == 200) {
73         self.app_menu_bauen(JSON.parse(this.responseText), richtung);
74       }
75     };
76     xmlhttp.open("GET", url, true);
77     xmlhttp.send();
403f2f 78   };
U 79
80   this.app_menu_bauen = function(menuejs, richtung) {
ee3787 81     var menuDiv = document.createElement("div");
U 82     menuDiv.classList.add('app-menu-content');
83     menuDiv.style.position = 'relative';
84     menuDiv.innerHTML = Mustache.render(self._app_menu_template, menuejs);
403f2f 85
ee3787 86     self.app_menu_remove_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
U 87     self.app_menu_remove_event_listener_multi('.bitem', 'click', self.app_menu_klick_herauf);
88     self.app_menu_remove_event_listener_multi('.mitem', 'click', self.app_menu_ausfuehren);
403f2f 89
ee3787 90     var menu = document.querySelector(self._app_menu_selector);
U 91     menu.innerHTML = '';
92     menu.append(menuDiv);
403f2f 93
ee3787 94     self.app_menu_add_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
U 95     self.app_menu_add_event_listener_multi('.bitem', 'click', self.app_menu_klick_herauf);
96     self.app_menu_add_event_listener_multi('.mitem', 'click', self.app_menu_ausfuehren);
403f2f 97   };
d3a2d9 98
403f2f 99   this.app_menu_klick_herunter = function() {
5ebc23 100     self.app_menu_laden(this.getAttribute('data-verweis'), 'herunter');
403f2f 101   };
d3a2d9 102
403f2f 103   this.app_menu_klick_herauf = function() {
5ebc23 104     self.app_menu_laden(this.getAttribute('data-verweis'), 'herauf');
403f2f 105   };
d3a2d9 106
403f2f 107   this.app_menu_ausfuehren = function() {
5ebc23 108     var functionName = this.getAttribute('data-verweis');
403f2f 109     eval(functionName + "(this)");
U 110   };
d3a2d9 111
ee3787 112   /* --- Helferlein ---*/
U 113   /*
114     sel - '.smenu'
115     evt - 'click' fuer onclick
116     func - der verweis auf die funktion
117   */
118   this.app_menu_remove_event_listener_multi = function(sel, evt, func) {
119     var elem = document.querySelectorAll(sel);
120     for (var index = 0; index < elem.length; index++) {
121       elem[index].removeEventListener(evt, func);
122     }
123   };
124
125   this.app_menu_add_event_listener_multi = function(sel, evt, func) {
126     var elem = document.querySelectorAll(sel);
127     for (var index = 0; index < elem.length; index++) {
128       elem[index].addEventListener(evt, func);
129     }
130   };
d3a2d9 131 }