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