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 = $("<div/>");
|
$(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 = $("<div/>");
|
$(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)");
|
};
|
|
}
|
