Vorlage fertig und dokumentiert

ulrich

2018-03-30 403f2ffa55f68f4b6c4dfa6cb168227b24cb501c

 jslib/app-menu/app-menu.js

@@ -1,141 +1,137 @@
/*
 * 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
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;
    /*document.querySelector( "#nav-toggle" ).addEventListener("click", function() {
      app_menu_toggle();
    });*/
    $(self._app_menu_selector).css("flex-basis", "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);
    });
  };

  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");
    } else {
      $(menuDiv).addClass('app-menu-open');
      $(menuDiv).css("flex-basis", self._app_menu_mbreite); // z.B. "16em"
    }
  };

  /*
   * ab hier Steuerung des Menueinhalts
   */


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

  this.app_menu_bauen = function(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', '-300px');
    $(menuDiv).css('right', '0px');
    $(_app_menu_selector).append(menuDiv);
    $(menuDiv).css('left', linksAnfangNeu);
    $(menuDiv).css('right', rechtsAnfangNeu);
    $(menuDiv).html(Mustache.render(self._app_menu_template, menuejs));

    app_menu_laden(mdesc);
  });
}
    $('.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();

function app_menu_do_toggle(elem) {
  /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" );
  document.querySelector( "#nav-toggle" ).blur();*/
  app_menu_toggle();
}
        $(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);

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"
  }
}
        $('.app-menu-content').delay(100).animate({left: linksEndeNeu });
        $('.app-menu-content').animate({right: rechtsEndeNeu });
      }
    );
    $('.app-menu-content').animate({right: rechtsEndeAlt });
  };

/*
 * ab hier Steuerung des Menueinhalts
 */
  this.app_menu_klick_herunter = function() {
    self.app_menu_laden($(this).attr('data-verweis'), 'herunter');
  };

var _app_menu_url_prefix = "";
var _app_menu_template;
var _app_menu_selector;
var _app_menu_mbreite;
  this.app_menu_klick_herauf = function() {
    self.app_menu_laden($(this).attr('data-verweis'), 'herauf');
  };

/*
 * 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);
  });
  this.app_menu_ausfuehren = function() {
    var functionName = $(this).attr('data-verweis');
    eval(functionName + "(this)");
  };

}

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 });
    }
  );
  $('.app-menu-content').animate({right: rechtsEndeAlt });
}

function app_menu_klick_herunter() {
  app_menu_laden($(this).attr('data-verweis'), 'herunter');
}

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

function app_menu_test() {
  alert("Test");
}

function app_menu_test_2() {
  alert("Test 2");
}