| | |
| | | |
| | | /* |
| | | * die nachfolgenden Funktionen steuern das ein- und |
| | | * die nachfolgenden Funktionen steuern das ein- und |
| | | * ausblenden des menues |
| | | */ |
| | | function app_menu_init(url_prefix, mdesc, mtpl) { |
| | | document.querySelector( "#nav-toggle" ).addEventListener("click", function() { |
| | | /* |
| | | this.classList.toggle( "active" ); |
| | | this.blur(); |
| | | 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_do_toggle(this); |
| | | app_menu_toggle(); |
| | | }); |
| | | document.getElementsByClassName('west')[0].style.flexBasis = "0em"; |
| | | $('.ost').hide(); |
| | | });*/ |
| | | $(_app_menu_selector).css("flex-basis", "0em"); |
| | | _app_menu_url_prefix = url_prefix; |
| | | app_menu_template_laden(mtpl); |
| | | |
| | | var menuDiv = $("<div/>"); |
| | | $(menuDiv).addClass('app-menu-content'); |
| | | $(menuDiv).css('position', "relative"); |
| | | $(menuDiv).css('left', '-300px'); |
| | | $(menuDiv).css('right', '0px'); |
| | | $('.west').append(menuDiv); |
| | | |
| | | app_menu_laden(mdesc); |
| | | } |
| | | |
| | | function app_menu_template_laden(tpl) { |
| | | $.ajax({ |
| | | // url: _app_menu_url_prefix + "app-menu.tpl", |
| | | url: tpl, |
| | | type: "GET", |
| | | dataType : "text" |
| | | }).done(function( template ) { |
| | | _app_menu_template = template; |
| | | $.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); |
| | | |
| | | app_menu_laden(mdesc); |
| | | }); |
| | | } |
| | | |
| | | function app_menu_do_toggle(elem) { |
| | | document.querySelector( "#nav-toggle" ).classList.toggle( "active" ); |
| | | document.querySelector( "#nav-toggle" ).blur(); |
| | | /*document.querySelector( "#nav-toggle" ).classList.toggle( "active" ); |
| | | document.querySelector( "#nav-toggle" ).blur();*/ |
| | | app_menu_toggle(); |
| | | } |
| | | |
| | | function app_menu_toggle() { |
| | | document.querySelector( "#nav-toggle" ).classList.toggle( "active" ); |
| | | document.querySelector( "#nav-toggle" ).blur(); |
| | | var westDiv = document.getElementsByClassName('west')[0]; |
| | | if(westDiv.classList.contains('app-menu-open')) { |
| | | westDiv.classList.remove('app-menu-open'); |
| | | westDiv.style.flexBasis = "0em"; |
| | | /*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.classList.add('app-menu-open'); |
| | | westDiv.style.flexBasis = "16em"; |
| | | $(westDiv).addClass('app-menu-open'); |
| | | $(westDiv).css("flex-basis", _app_menu_mbreite); // z.B. "16em" |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | var _app_menu_url_prefix = ""; |
| | | var _app_menu_template; |
| | | var _app_menu_selector; |
| | | var _app_menu_mbreite; |
| | | |
| | | /* |
| | | * mdesc: der URL einer JSON-Datei mit einer Menuebeschreibung |
| | |
| | | }).done(function( json ) { |
| | | app_menu_bauen(json, richtung); |
| | | }); |
| | | |
| | | |
| | | } |
| | | |
| | | function app_menu_bauen(menuejs, richtung) { |
| | |
| | | // 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"; |
| | |
| | | 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)); |
| | | |
| | | $(menuDiv).html(Mustache.render(_app_menu_template, menuejs)); |
| | | |
| | | $('.app-menu-content').delay(100).animate( |
| | | {left: linksEndeAlt }, |
| | | 100, |
| | |
| | | $('.smenu').attr('onclick','').unbind('click'); |
| | | $('.bitem').attr('onclick','').unbind('click'); |
| | | $('.mitem').attr('onclick','').unbind('click'); |
| | | $('.west').empty(); |
| | | $(_app_menu_selector).empty(); |
| | | |
| | | $('.west').append(menuDiv); |
| | | $(_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); |
| | |
| | | |
| | | function app_menu_test_2() { |
| | | alert("Test 2"); |
| | | } |
| | | } |