function AppMenu() { var self = this; var _app_menu_selector; var _app_menu_mbreite; var _app_menu_url_prefix = ""; var _app_menu_template; /* * die nachfolgenden Funktionen steuern das ein- und * ausblenden des menues */ this.init = function (url_prefix, mdesc, mtpl, mselector, mbreite) { self._app_menu_selector = mselector; self._app_menu_mbreite = mbreite; /*document.querySelector( "#nav-toggle" ).addEventListener("click", function() { app_menu_toggle(); });*/ $(self._app_menu_selector).css("flex-basis", "0em"); self._app_menu_url_prefix = url_prefix; $.get(mtpl, function(template) { self._app_menu_template = template; Mustache.parse(self._app_menu_template); // optional, speeds up future uses var menuDiv = $("
"); $(menuDiv).addClass('app-menu-content'); $(menuDiv).css('position', "relative"); $(menuDiv).css('left', '-300px'); $(menuDiv).css('right', '0px'); $(self._app_menu_selector).append(menuDiv); self.app_menu_laden(mdesc); }); }; this.app_menu_do_toggle = function(elem) { /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" ); document.querySelector( "#nav-toggle" ).blur();*/ self.toggle(); }; this.toggle = function() { /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" ); document.querySelector( "#nav-toggle" ).blur();*/ var menuDiv = $(self._app_menu_selector); if($(menuDiv).hasClass('app-menu-open')) { $(menuDiv).removeClass('app-menu-open'); $(menuDiv).css("flex-basis", "0em"); } else { $(menuDiv).addClass('app-menu-open'); $(menuDiv).css("flex-basis", self._app_menu_mbreite); // z.B. "16em" } }; /* * ab hier Steuerung des Menueinhalts */ /* * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung */ this.app_menu_laden = function(mdesc, richtung) { $.ajax({ url: self._app_menu_url_prefix + mdesc, type: "GET", dataType : "json" }).done(function( json ) { self.app_menu_bauen(json, richtung); }); }; this.app_menu_bauen = function(menuejs, richtung) { // Endposition des bestehenden Menues beim Wechsel herauf var linksEndeAlt = "500px"; var rechtsEndeAlt = "600px"; // Anfangsposition des neuen Menues beim Wechsel herauf var linksAnfangNeu = "-300px"; var rechtsAnfangNeu = "-1px"; // Endposition des neuen Menues beim Wechsel herauf var linksEndeNeu = "0px"; var rechtsEndeNeu = "300px"; if(richtung === 'herunter') { // Endposition des bestehenden Menues beim Wechsel herunter linksEndeAlt = "-300px"; rechtsEndeAlt = "-1px"; // Anfangsposition des neuen Menues beim Wechsel herunter linksAnfangNeu = "500px"; rechtsAnfangNeu = "600px"; // Endposition des neuen Menues beim Wechsel herunter linksEndeNeu = "0px"; rechtsEndeNeu = "300px"; } var menuDiv = $("
"); $(menuDiv).addClass('app-menu-content'); $(menuDiv).css('position', "relative"); $(menuDiv).css('left', linksAnfangNeu); $(menuDiv).css('right', rechtsAnfangNeu); $(menuDiv).html(Mustache.render(self._app_menu_template, menuejs)); $('.app-menu-content').delay(100).animate( {left: linksEndeAlt }, 100, function() { $('.smenu').attr('onclick','').unbind('click'); $('.bitem').attr('onclick','').unbind('click'); $('.mitem').attr('onclick','').unbind('click'); $(self._app_menu_selector).empty(); $(self._app_menu_selector).append(menuDiv); $('.smenu').on('click', self.app_menu_klick_herunter); $('.bitem').on('click', self.app_menu_klick_herauf); $('.mitem').on('click', self.app_menu_ausfuehren); $('.app-menu-content').delay(100).animate({left: linksEndeNeu }); $('.app-menu-content').animate({right: rechtsEndeNeu }); } ); $('.app-menu-content').animate({right: rechtsEndeAlt }); }; this.app_menu_klick_herunter = function() { self.app_menu_laden($(this).attr('data-verweis'), 'herunter'); }; this.app_menu_klick_herauf = function() { self.app_menu_laden($(this).attr('data-verweis'), 'herauf'); }; this.app_menu_ausfuehren = function() { var functionName = $(this).attr('data-verweis'); eval(functionName + "(this)"); }; }