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
---
app.js | 60 ++++++++-------
jslib/app-menu/app-menu.js | 144 +++++++++++++++++------------------
app.css | 2
3 files changed, 103 insertions(+), 103 deletions(-)
diff --git a/app.css b/app.css
index 342caad..5827ce8 100644
--- a/app.css
+++ b/app.css
@@ -86,6 +86,8 @@
.dialog {
position: relative;
+ /* height: 0.1em; */
+ transition: all 0.3s ease-in;
}
.dlg-behaelter {
diff --git a/app.js b/app.js
index 4671102..ae373f9 100644
--- a/app.js
+++ b/app.js
@@ -12,7 +12,7 @@
"jslib/app-menu/app-menu.tpl",
".west",
"8em");
-
+
document.querySelector('.hamburger').addEventListener('click', function(e) {
self.menue_umschalten();
});
@@ -20,8 +20,8 @@
};
this.menue_umschalten = function() {
- var ham = document.querySelector(".hamburger");
- ham.classList.toggle("is-active"); // hamburger-icon umschalten
+ var ham = document.querySelector(".hamburger");
+ ham.classList.toggle("is-active"); // hamburger-icon umschalten
self.appMenu.toggle(); // menue oeffnen/schliessen
};
@@ -34,10 +34,10 @@
var ostDiv = document.querySelector('.ost');
if(ostDiv.classList.contains('ost-open')) {
ostDiv.classList.remove('ost-open');
- ostDiv.style.flexBasis = '0em';
+ ostDiv.style.flexBasis = '0em';
} else {
- ostDiv.classList.add('ost-open');
- ostDiv.style.flexBasis = '6em';
+ ostDiv.classList.add('ost-open');
+ ostDiv.style.flexBasis = '6em';
}
self.menue_umschalten();
};
@@ -46,10 +46,10 @@
var suedDiv = document.querySelector('.sued');
if(suedDiv.classList.contains('sued-open')) {
suedDiv.classList.remove('sued-open');
- suedDiv.style.height = '0';
+ suedDiv.style.height = '0';
} else {
suedDiv.classList.add('sued-open');
- suedDiv.style.height = '1.5em';
+ suedDiv.style.height = '1.5em';
}
self.menue_umschalten();
};
@@ -60,7 +60,7 @@
if(suedDiv.classList.contains('sued-open')) {
} else {
suedDiv.classList.add('sued-open');
- suedDiv.style.height = '1.5em';
+ suedDiv.style.height = '1.5em';
}
self.menue_umschalten();
};
@@ -79,14 +79,14 @@
this.meldung_mit_timeout = function(meldung, timeout) {
var s = document.querySelector('.sued');
- s.text(meldung);
+ s.textContent = meldung;
setTimeout(function() {
- s.text('Bereit.');
+ s.textContent = 'Bereit.';
setTimeout(function() {
var suedDiv = document.querySelector('.sued');
if(suedDiv.classList.contains('sued-open')) {
- suedDiv.classList.remove('sued-open');
- suedDiv.style.height = '0';
+ suedDiv.classList.remove('sued-open');
+ suedDiv.style.height = '0';
}
}, 500);
}, timeout);
@@ -102,35 +102,39 @@
*/
this.dialog_laden_und_zeigen = function(vurl, msgTpl) {
if(msgTpl !== '') {
- $.ajax({
- url: msgTpl,
- type: "GET",
- dataType : "json"
- }).done(function( msg ) {
- self.dialog_zeigen(vurl, msg);
- });
+ fetch(msgTpl)
+ .then(data => {
+ // Handle data
+ self.dialog_zeigen(vurl, data);
+ }).catch(error => {
+ // Handle error
+ });
} else {
self.dialog_zeigen(vurl, '');
}
};
this.dialog_zeigen = function(vurl, inhalt) {
- var dlg = $(".dialog");
+ var dlg = document.querySelector(".dialog");
self.vorlagen.html_erzeugen(
vurl,
inhalt,
function(html) {
- dlg.html(html);
- $(".close-btn").on('click', function() {
- self.dialog_schliessen();
- });
- dlg.slideDown(300);
+ //dlg.html(html);
+ dlg.style.height = '5em';
+ dlg.innerHTML = html;
+ document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
+ //dlg.slideDown(300);
});
};
self.dialog_schliessen = function() {
- $('.close-btn').off('click');
- $('.dialog').slideUp(300);
+ document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
+ //$('.dialog').slideUp(300);
+ var dlg = document.querySelector('.dialog');
+ //dlg.style.display = "none";
+ dlg.style.height = '0';
+ dlg.innerHTML = '';
};
diff --git a/jslib/app-menu/app-menu.js b/jslib/app-menu/app-menu.js
index 1d1a0ce..62c4760 100644
--- a/jslib/app-menu/app-menu.js
+++ b/jslib/app-menu/app-menu.js
@@ -15,38 +15,45 @@
/*document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
app_menu_toggle();
});*/
- $(self._app_menu_selector).css("flex-basis", "0em");
+ var menu = document.querySelector(self._app_menu_selector);
+ menu.style.flexBasis = '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);
+ 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) {
- /*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");
+ 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).addClass('app-menu-open');
- $(menuDiv).css("flex-basis", self._app_menu_mbreite); // z.B. "16em"
+ menuDiv.classList.add('app-menu-open');
+ menuDiv.style.flexBasis = self._app_menu_mbreite;
}
};
@@ -59,66 +66,34 @@
* 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);
- });
+ 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();
};
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);
- // 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";
+ 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);
- 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 menu = document.querySelector(self._app_menu_selector);
+ menu.innerHTML = '';
+ menu.append(menuDiv);
- 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 });
+ 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() {
@@ -134,4 +109,23 @@
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