jQuery entfernen weiter in Arbeit

ulrich

2019-12-13 ee378724076ae6917f9c75c329d7ff7c390b8f03

jQuery entfernen weiter in Arbeit

 app.css

@@ -86,6 +86,8 @@

.dialog {
  position: relative;
  /* height: 0.1em; */
  transition: all 0.3s ease-in;
}

.dlg-behaelter {

 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 = '';
  };



 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);
    }
  };
}