From ee378724076ae6917f9c75c329d7ff7c390b8f03 Mon Sep 17 00:00:00 2001
From: ulrich <undisclosed>
Date: Fri, 13 Dec 2019 17:26:19 +0000
Subject: [PATCH] jQuery entfernen weiter in Arbeit
---
jslib/app-menu/app-menu.js | 246 +++++++++++++++++++++++-------------------------
1 files changed, 118 insertions(+), 128 deletions(-)
diff --git a/jslib/app-menu/app-menu.js b/jslib/app-menu/app-menu.js
index 1a0723f..62c4760 100644
--- a/jslib/app-menu/app-menu.js
+++ b/jslib/app-menu/app-menu.js
@@ -1,141 +1,131 @@
-/*
- * die nachfolgenden Funktionen steuern das ein- und
- * ausblenden des menues
- */
-function app_menu_init(url_prefix, mdesc, mtpl, mselector, mbreite) {
- _app_menu_selector = mselector;
- _app_menu_mbreite = mbreite;
- /*document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
- app_menu_toggle();
- });*/
- $(_app_menu_selector).css("flex-basis", "0em");
- _app_menu_url_prefix = url_prefix;
- $.get(mtpl, function(template) {
- _app_menu_template = template;
- Mustache.parse(_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');
- $(_app_menu_selector).append(menuDiv);
+function AppMenu() {
+ var self = this;
+ var _app_menu_selector;
+ var _app_menu_mbreite;
+ var _app_menu_url_prefix = "";
+ var _app_menu_template;
- app_menu_laden(mdesc);
- });
-}
+ /*
+ * 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();
+ });*/
+ var menu = document.querySelector(self._app_menu_selector);
+ menu.style.flexBasis = '0em';
+ self._app_menu_url_prefix = url_prefix;
-function app_menu_do_toggle(elem) {
- /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
- document.querySelector( "#nav-toggle" ).blur();*/
- app_menu_toggle();
-}
+ 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);
-function app_menu_toggle() {
- /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
- document.querySelector( "#nav-toggle" ).blur();*/
- var westDiv = $(_app_menu_selector);
- if($(westDiv).hasClass('app-menu-open')) {
- $(westDiv).removeClass('app-menu-open');
- $(westDiv).css("flex-basis", "0em");
- } else {
- $(westDiv).addClass('app-menu-open');
- $(westDiv).css("flex-basis", _app_menu_mbreite); // z.B. "16em"
- }
-}
+ self.app_menu_laden(mdesc);
+ } else {
+ console.warn(request.statusText, request.responseText);
+ }
+ });
+ request.send();
-/*
- * ab hier Steuerung des Menueinhalts
- */
+ };
-var _app_menu_url_prefix = "";
-var _app_menu_template;
-var _app_menu_selector;
-var _app_menu_mbreite;
+ this.app_menu_do_toggle = function(elem) {
+ self.toggle();
+ };
-/*
- * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
- */
-function app_menu_laden(mdesc, richtung) {
- $.ajax({
- url: _app_menu_url_prefix + mdesc,
- type: "GET",
- dataType : "json"
- }).done(function( json ) {
- app_menu_bauen(json, richtung);
- });
-
-}
-
-function app_menu_bauen(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(_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');
- $(_app_menu_selector).empty();
-
- $(_app_menu_selector).append(menuDiv);
- $('.smenu').on('click', app_menu_klick_herunter);
- $('.bitem').on('click', app_menu_klick_herauf);
- $('.mitem').on('click', app_menu_ausfuehren);
-
- $('.app-menu-content').delay(100).animate({left: linksEndeNeu });
- $('.app-menu-content').animate({right: rechtsEndeNeu });
+ 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;
}
- );
- $('.app-menu-content').animate({right: rechtsEndeAlt });
-}
+ };
-function app_menu_klick_herunter() {
- app_menu_laden($(this).attr('data-verweis'), 'herunter');
-}
+ /*
+ * ab hier Steuerung des Menueinhalts
+ */
-function app_menu_klick_herauf() {
- app_menu_laden($(this).attr('data-verweis'), 'herauf');
-}
-function app_menu_ausfuehren() {
- var functionName = $(this).attr('data-verweis');
- eval(functionName + "(this)");
-}
+ /*
+ * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung
+ */
+ 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();
+ };
-function app_menu_test() {
- alert("Test");
-}
+ this.app_menu_bauen = function(menuejs, richtung) {
+ var menuDiv = document.createElement("div");
+ menuDiv.classList.add('app-menu-content');
+ menuDiv.style.position = 'relative';
+ menuDiv.innerHTML = Mustache.render(self._app_menu_template, menuejs);
-function app_menu_test_2() {
- alert("Test 2");
+ 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);
+
+ 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);
+ };
+
+ 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)");
+ };
+
+ /* --- 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);
+ }
+ };
}
--
Gitblit v1.9.3