From 8ca5e8bfa494ec9af80b58b96cbf3e86f7a340ee Mon Sep 17 00:00:00 2001 From: ulrich <undisclosed> Date: Sun, 15 Dec 2019 14:11:26 +0000 Subject: [PATCH] Diverse Aufraeumarbeiten --- js/app-menu.js | 36 +++++++++++++++++++++--------------- 1 files changed, 21 insertions(+), 15 deletions(-) diff --git a/jslib/app-menu/app-menu.js b/js/app-menu.js similarity index 83% rename from jslib/app-menu/app-menu.js rename to js/app-menu.js index 49ffa6a..6a3b11e 100644 --- a/jslib/app-menu/app-menu.js +++ b/js/app-menu.js @@ -12,34 +12,26 @@ 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(); - });*/ 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) { - //console.log(request.responseText); self._app_menu_template = request.responseText; Mustache.parse(self._app_menu_template); // optional, speeds up future uses - var menuDiv = document.createElement("div"); - menuDiv.classList.add('app-menu-content'); - menuDiv.style.position = 'relative'; - menuDiv.style.left = '-300px'; - menuDiv.style.right = '0px'; - menu.appendChild(menuDiv); - self.app_menu_laden(mdesc); } else { console.warn(request.statusText, request.responseText); } }); request.send(); - }; this.app_menu_do_toggle = function(elem) { @@ -63,7 +55,9 @@ /* + * 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(); @@ -77,23 +71,35 @@ 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 = ''; - menu.append(menuDiv); + // 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() { -- Gitblit v1.9.3