Team:Heidelberg/js/teampage

From 2014.igem.org

Revision as of 15:06, 27 September 2014

var memberData = { "Ludwig": { "Name" : "Ludwig XIV", "Subject" : "Lasagne", "Age" : "7", "Alias" : "The King", "img" : "/wiki/images/7/71/Heidelberg_Placeholder.jpg", "Description" : "Ludwig XIV. gilt als klassischer Vertreter des höfischen Absolutismus. Der Leitsatz des Absolutismus, L’État, c’est moi! (Der Staat bin ich!) wird ihm jedoch fälschlicherweise zugeschrieben.[1] Er festigte die Macht der Krone durch den Ausbau der Verwaltung, die Bekämpfung der Opposition in Kreisen des Adels sowie durch die Förderung der französischen Wirtschaft. Die Hofkultur wurde ganz auf die Person des Herrschers zugeschnitten. Zum Symbol für dessen herausragende Stellung wurde sein prunkvolles Auftreten. Der König förderte Künste und Wissenschaften, was eine Blütezeit der französischen Kultur zur Folge hatte. Ludwig XIV. vertrat eine expansive und kriegerische Außenpolitik, durch die Frankreich unter seiner Regentschaft eine dominierende Stellung in Europa gewann und seine Großmachtstellung in der Neuzeit etablierte." }, "KarlHeinz": { "Name" : "Karl Heinz wie auch immer", "Subject" : "Lasagne2", "Age" : "17", "Alias" : "blablabla", "img" : "/wiki/images/c/ca/Placeholder2.jpg", "Description" : "Ludwig XIV. gilt als klassischer Vertreter des höfischen Absolutismus. Der Leitsatz des Absolutismus, L’État, c’est moi! (Der Staat bin ich!) wird ihm jedoch fälschlicherweise zugeschrieben.[1] Er festigte die Macht der Krone durch den Ausbau der Verwaltung, die Bekämpfung der Opposition in Kreisen des Adels sowie durch die Förderung der französischen Wirtschaft. Die Hofkultur wurde ganz auf die Person des Herrschers zugeschnitten. Zum Symbol für dessen herausragende Stellung wurde sein prunkvolles Auftreten. Der König förderte Künste und Wissenschaften, was eine Blütezeit der französischen Kultur zur Folge hatte. Ludwig XIV. vertrat eine expansive und kriegerische Außenpolitik, durch die Frankreich unter seiner Regentschaft eine dominierende Stellung in Europa gewann und seine Großmachtstellung in der Neuzeit etablierte." } };

var teamView = true; var callAfterResize;

function updateHeights(){ $('#Buttonwrap').stop(true); var height = 0; if(teamView){ height = $('.team-overlay').height(); } else { height = $('#memberImage').height(); } $('#Buttonwrap').animate({height: height}, 300, "swing", function(){ updateSlick($('#memberSelector').innerHeight()); });

}

function updateSlick(height){ elementHeight = $('#memberSelector .row:first').outerHeight(); numElements = Math.floor(height/elementHeight); slick = $('#memberSelector').getSlick(); slick.options.slidesToShow = numElements; slick.options.slidesToScroll = numElements; slick.refresh(); if(callAfterResize != null) callAfterResize(); }

function smoothLoadImage(src){ $('.imageBorder').height($('#memberImage').height()); $('#memberImageOverlay').attr("src", src); $('#memberImageOverlay').load(function(){ $(this).fadeIn(400, "swing", function(){ $('#memberImage').attr("src", src); $('#memberImage').load(function(){ $('#memberImageOverlay').hide(); $('.imageBorder').css("height", ""); }); });

}); }

function hideTeamOverlay(callback){ $('.team-overlay').animate({ opacity: 0}, 200, "swing", function(){$('.team-overlay').css("display","none");}); $('.memberview').animate({ opacity: 1}, 200, "swing", function(){ teamView = false; updateHeights(); }); }

$(document).ready(function(){ $('#memberImage').load(function(){ updateHeights(); });

$('#memberSelector a').click(function(){ if(teamView){ hideTeamOverlay();

$('#FilterButtons label').removeClass("active"); if($(this).parent().parent().hasClass("Team")) $('#Teammembers-btn').addClass("active"); else $('#Supervisors-btn').addClass("active"); } $('#memberSelector a').removeClass("active"); $(this).addClass("active"); var memberKey = this.id.split("-")[1]; member = memberData[memberKey]; console.log(member); $("#Name").text(member.Name); $("#Subject").text(member.Subject); $("#Age").text(member.Age); $('#Alias').text(member.Alias); smoothLoadImage(member.img); $('#Description').text(member.Description); });

$('#Teamfoto-btn').click(function(){ $('.team-overlay').css("display", "block"); $('.team-overlay').animate({ opacity: 1}, 200); $('.memberview').animate({ opacity: 0}, 200); teamView = true; updateHeights(); });

memberselector = $('#memberSelector');

$('#Teammembers-btn').click(function(){ if(teamView) callAfterResize = function(){ memberselector.slickFilter('.Team'); callAfterResize = null; }; hideTeamOverlay(); else memberselector.slickFilter('.Team'); });

$('#Supervisors-btn').click(function(){ if(teamView){ callAfterResize = function(){ memberselector.slickFilter('.Supervisor'); callAfterResize = null; }; hideTeamOverlay(); } else memberselector.slickFilter('.Supervisor'); });

$('#memberSelector').slick({ prevArrow: '<img src="/wiki/images/3/3f/Heidelberg_prev-arrow.png" alt="prev-arrow" class="arrow arrow-prev"/>', nextArrow: '<img src="/wiki/images/e/e0/Heidelberg_next-arrow.png" alt="next-arrow" class="arrow arrow-next"/>', vertical: true, infinite: false, slidesToShow: 5, slidesToScroll: 5 }); //$('#memberSelector').slickFilter('.Team'); });

$(window).resize(function(){ updateHeights(); });