Template:Marburg/javascript

$(document).ready(function() { // mobile var mobile = false; var burger = $(".burger"); var header = $("header"); var menu = $(".menu_wrapper");

const media = window.matchMedia("(max-width: 992px)"); if(media.matches){ burger.show(); mobile = true; }

media.addListener(function(e){ if (e.matches) { burger.show(); mobile = true; ResetParallax(); $(header).removeClass("shrink"); if(menu.is(":visible")) menu.hide(); } else { burger.hide(); mobile = false; if(!menu.is(":visible")) menu.show(); else $('body').css('overflow-y', 'auto'); } });

$(window).resize(function(){ if(!mobile){ Update($(document).scrollTop()); } });

burger.click(function(){ if(menu.is(":visible")){ menu.hide(); $('body').css('overflow-y', 'auto'); } else { $('body').css('overflow-y', 'hidden'); menu.show().css("display", "inline-block"); } });

// scroll dependent stuff var btn_scroll = $(".btn_scroll_top"); var btn_scroll_visible = false; $(btn_scroll).click(function(e){ $('html, body').stop().animate({ scrollTop: 0 }, 500); e.preventDefault(); });

var isScrolling = false; var lastY = $(document).scrollTop();

$(window).scroll(function() { isScrolling = true; });

window.requestAnimationFrame(Render); function Render(){ var y = $(document).scrollTop(); if(lastY != y && isScrolling){ lastY = y; isScrolling = false; Update(lastY); } window.requestAnimationFrame(Render); }

// collapsible elements $(".collapsible").each(function(i){ var parent = $(this); var btn = $(this).find(".btn_expand:first"); var content = $(this).find(".content:first"); $(this).prop('collapsed', true); $(btn).click(function(){ var collapsed = $(parent).prop('collapsed'); if(collapsed){ $(content).addClass("expanded"); $(btn).addClass("btn_expanded"); } else { $(content).removeClass("expanded"); $(btn).removeClass("btn_expanded"); } $(parent).prop('collapsed', !collapsed); }); });

// skippable elements $(".skipButton").each(function(i){ $(this).click(function(){ $('html, body').stop().animate({ scrollTop: $("#"+$(this).attr('skipTo')).offset().top - 100 }, 500); }); }); var skipBar = $(".skipBar"); var skipTargets = []; var skipEnd = $(".skipEnd"); var lastSkipTarget = null; //var skipBarWidth = 0; $(".skipTarget").each(function(i){ var e = $(this); var btn = document.createElement('div'); btn.className = "btnSkip"; var name = document.createElement('div'); $(name).text($(this).attr('skipName')); btn.append(name); skipBar.append(btn); $(btn).click(function(){ var p = e.parent().parent(); while($(p).hasClass("collapsible")){ var p_btn = $(p).find(".btn_expand:first"); var p_content = $(p).find(".content:first"); var p_collapsed = $(p).prop('collapsed'); if(p_collapsed){ $(p_content).addClass("expanded"); $(p_btn).addClass("btn_expanded"); $(p).prop('collapsed', false); } p = $(p).parent().parent(); }

$('html, body').stop().animate({ scrollTop: e.offset().top - 100 }, 500); }); $(btn).attr("id", i); skipTargets.push({element:e,button:$(btn), dist:Number.MAX_VALUE, sType:0}); //var w = $(name).outerWidth(); //if(w > skipBarWidth) skipBarWidth = w; }); // QmVuamFtaW4gTWFyY2hhbA== /*var skipBox = $(document.createElement('div')); skipBox.addClass("skipBox"); skipBox.css({"width":skipBarWidth}); skipBar.prepend(skipBox); console.log(skipBarWidth);*/ if ($(skipEnd).length > 0) skipTargets.push({element: skipEnd, sType:1}); function getNearestSkipIndex(y){ var index = null; var distance = Number.MAX_VALUE; for(var i = 0; i < skipTargets.length; i++){ var e = skipTargets[i]; var v = e.element.position().top - y - (window.innerHeight / 2); var dist = v; if(dist < 0) dist *= -1; if(dist < distance && v < 0){ if(e.sType == 1) return null; index = i; distance = dist; } } return index; }

// scroll fading elements var scrollFader = []; $(".scrollFade").each(function(index){ scrollFader.push({element:$(this), targetClass:$(this).attr('fadeTo'), inside:false}); });

// parallax elements var parallaxElements = []; $(".parallax").each(function(index){ var e = {element:$(this), speed:$(this).attr('speed')}; parallaxElements.push(e); if(!mobile) e.element.css({"transform":"translateY("+ ((lastY - e.element.offset().top + (window.innerHeight - e.element.outerHeight()) / 2) * e.speed) + "px)"}); });

// init cutout elements /*var cutouts = [];

$(".cutout").each(function(index) { var cutout = {element:$(this), inside:false, dir:$(this).attr('dir'), aspect:$(this).attr('aspect'), layers:[], offset:$(this).attr('offset')}; $(this).children('.layer').each(function(i) { $(this).css({'background-image':'url('+'img/layers/'+cutout.dir+'/'+(i)+'.png)'}); cutout.layers.push({element:$(this)}); }); cutout.element.css({"padding-bottom":(cutout.aspect*100)+"%"}); cutouts.push(cutout); });*/

// header state var shrinkHeader = true;

function ResetParallax(){ /*for(var i = 0; i < cutouts.length; i++){ var cutout = cutouts[i]; cutout.element.find('img').removeClass("select"); for(var j = 0; j < cutout.layers.length-1; j++){ var layer = cutout.layers[j]; layer.element.css({"transform":"unset"}); } }*/ for(var i = 0; i < parallaxElements.length; i++) parallaxElements[i].element.css({"transform":"none"}); }

Update(lastY); function Update(y){ var mid = y + window.innerHeight / 2; // scroll up button if(lastY > 400){ if(!btn_scroll_visible){ btn_scroll.removeClass('btn_scroll_disabled').addClass('btn_scroll_enabled'); btn_scroll_visible = true; } } else { if(btn_scroll_visible){ btn_scroll.removeClass('btn_scroll_enabled').addClass('btn_scroll_disabled'); btn_scroll_visible = false; } }

// header shrink if(y > 300 && !mobile){ if(shrinkHeader){ shrinkHeader = false; $(header).addClass("shrink"); } } else { shrinkHeader = true; $(header).removeClass("shrink"); }

// scoll fade elements for(var i = 0; i < scrollFader.length; i++){ var e = scrollFader[i]; var pos = $(e.element).position(); if(isVisibleInner(e.element)){ if(!e.inside){ e.element.addClass(e.targetClass); e.inside = true; } } /*else { if(e.inside){ e.element.removeClass(e.targetClass); e.inside = false; } }*/ }

// select nearest skip point if(skipTargets.length > 0){ var e = getNearestSkipIndex(y); if(e != lastSkipTarget){ if(e == null){ if(lastSkipTarget != null)$("#"+lastSkipTarget).removeClass("btnSkipActive"); } else { $("#"+e).addClass("btnSkipActive"); if(lastSkipTarget != null)$("#"+lastSkipTarget).removeClass("btnSkipActive"); } } lastSkipTarget = e; }

// parallax elements if(!mobile){ for(var i = 0; i < parallaxElements.length; i++){ var e = parallaxElements[i]; if(isVisible(e.element)) e.element.css({"transform":"translateY("+ ((y - e.element.offset().top + (window.innerHeight - e.element.outerHeight()) / 2) * e.speed) + "px)"}); } }

// cutout elements /*for(var i = 0; i < cutouts.length; i++){ var cutout = cutouts[i]; if(isVisible(cutout.element)){ if(!mobile){ for(var j = 0; j < cutout.layers.length-1; j++){ var layer = cutout.layers[j]; var scale = layer.element.outerHeight() / 951.5; var strength = 1-((j-1) / 5.0); var _y = ((y+cutout.offset*scale)*0.2) * strength; layer.element.css({"transform":"translateY("+_y+"px)"}); } } } }*/ }

function isVisible(e){ var etop = e.offset().top; var ebottom = etop + e.outerHeight(); var vbottom = lastY + $(window).height(); return ebottom > lastY && etop < vbottom; }

function isVisibleInner(e){ var etop = e.offset().top; var ebottom = etop + e.innerHeight(); var vbottom = lastY + $(window).height(); return ebottom > lastY && etop < vbottom; } //42656e6a616d696e204d61726368616c });