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;
|
var menu = document.querySelector(self._app_menu_selector);
|
menu.style.flexBasis = '0em';
|
self._app_menu_url_prefix = url_prefix;
|
/*
|
Die Menue-Vorlage wird einmal zu Beginn geladen und
|
waehrend dem Programmlauf immer wieder neu zum Rendern
|
einer dynamisch gelandenen Menuebeschreibung verwendet
|
*/
|
var request = new XMLHttpRequest();
|
request.open("GET", mtpl);
|
request.addEventListener('load', function(event) {
|
if (request.status >= 200 && request.status < 300) {
|
self._app_menu_template = request.responseText;
|
Mustache.parse(self._app_menu_template); // optional, speeds up future uses
|
self.app_menu_laden(mdesc);
|
} else {
|
console.warn(request.statusText, request.responseText);
|
}
|
});
|
request.send();
|
};
|
|
this.app_menu_do_toggle = function(elem) {
|
self.toggle();
|
};
|
|
this.toggle = function() {
|
var menuDiv = document.querySelector(self._app_menu_selector);
|
if(menuDiv.classList.contains('app-menu-open')) {
|
menuDiv.classList.remove('app-menu-open');
|
menuDiv.style.flexBasis = '0em';
|
} else {
|
menuDiv.classList.add('app-menu-open');
|
menuDiv.style.flexBasis = self._app_menu_mbreite;
|
}
|
};
|
|
/*
|
* ab hier Steuerung des Menueinhalts
|
*/
|
|
|
/*
|
* Menuebeschreibung als JSON-Datei laden
|
* mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
|
* richtung: z.Zt. unbenutzt: Animationsrichtung
|
*/
|
this.app_menu_laden = function(mdesc, richtung) {
|
var xmlhttp = new XMLHttpRequest();
|
var url = self._app_menu_url_prefix + mdesc;
|
xmlhttp.onreadystatechange = function() {
|
if (this.readyState == 4 && this.status == 200) {
|
self.app_menu_bauen(JSON.parse(this.responseText), richtung);
|
}
|
};
|
xmlhttp.open("GET", url, true);
|
xmlhttp.send();
|
};
|
|
/*
|
Aus einer Menuebeschreibung im JSON-Format mit Hilfe
|
von Mustache und der zu Beginn geladenen HTML-Vorlage
|
ein div-Element zusammenbauen, das als Menue eingeblendet
|
werden kann und dem Element _app_menu_selector hinzufuegen
|
*/
|
this.app_menu_bauen = function(menuejs, richtung) {
|
|
// neues Menue als div-Element zusammensetzen
|
var menuDiv = document.createElement("div");
|
menuDiv.classList.add('app-menu-content');
|
menuDiv.style.position = 'relative';
|
menuDiv.innerHTML = Mustache.render(self._app_menu_template, menuejs);
|
|
// altes Menue loeschen
|
self.app_menu_remove_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
|
self.app_menu_remove_event_listener_multi('.bitem', 'click', self.app_menu_klick_herauf);
|
self.app_menu_remove_event_listener_multi('.mitem', 'click', self.app_menu_ausfuehren);
|
var menu = document.querySelector(self._app_menu_selector);
|
menu.innerHTML = '';
|
|
// neues Menue hinzufuegen
|
menu.append(menuDiv);
|
self.app_menu_add_event_listener_multi('.smenu', 'click', self.app_menu_klick_herunter);
|
self.app_menu_add_event_listener_multi('.bitem', 'click', self.app_menu_klick_herauf);
|
self.app_menu_add_event_listener_multi('.mitem', 'click', self.app_menu_ausfuehren);
|
|
menuDiv = document.querySelector('.app-menu-content');
|
menuDiv.classList.add('slidein-from-right');
|
};
|
|
this.app_menu_klick_herunter = function() {
|
self.app_menu_laden(this.getAttribute('data-verweis'), 'herunter');
|
};
|
|
this.app_menu_klick_herauf = function() {
|
self.app_menu_laden(this.getAttribute('data-verweis'), 'herauf');
|
};
|
|
this.app_menu_ausfuehren = function() {
|
var functionName = this.getAttribute('data-verweis');
|
eval(functionName + "(this)");
|
};
|
|
/* --- Helferlein ---*/
|
/*
|
sel - '.smenu'
|
evt - 'click' fuer onclick
|
func - der verweis auf die funktion
|
*/
|
this.app_menu_remove_event_listener_multi = function(sel, evt, func) {
|
var elem = document.querySelectorAll(sel);
|
for (var index = 0; index < elem.length; index++) {
|
elem[index].removeEventListener(evt, func);
|
}
|
};
|
|
this.app_menu_add_event_listener_multi = function(sel, evt, func) {
|
var elem = document.querySelectorAll(sel);
|
for (var index = 0; index < elem.length; index++) {
|
elem[index].addEventListener(evt, func);
|
}
|
};
|
}
|
