Difference between revisions of "Template:NRP-UEA-Norwich"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<title>NRP-UEA-NORWICH iGEM</title>
+
<title>NRP-UEA-NORWICH iGEM</title>
 +
 
 +
<script>
 +
var web;
 +
$(document).ready(function(){
 +
web = {
 +
defaults: {
 +
"url": "home",
 +
"pagesDir": "pages",
 +
"contentWrapper": $("#contentWrapper"),
 +
"pageLoaded": false
 +
},
 +
 
 +
initialize: function(){
 +
 +
var $this = this;
 +
 
 +
//check if url isnt empty
 +
checkUrl = this.getPath(true);
 +
if(checkUrl.length > 0)
 +
this.defaults.url = checkUrl;
 +
 
 +
// load the page
 +
this.loadPage(this.defaults.url);
 +
 
 +
this.defaults.pageLoaded = true;
 +
 
 +
//timeline close open event
 +
$(document).on("click", ".close_timeline_event", function(){
 +
$this.timelineResetPosition();
 +
$this.timelineCloseEvents(null);
 +
 
 +
sideOpen = "none";
 +
});
 +
 
 +
//select list item from protocols page
 +
$(document).on("click", ".protocols_list li", function(){
 +
$("#protocols_sub_list_main > li").hide();
 +
$("#protocols_sub_list_main > li").eq($(".protocols_list li").index(this)).show();
 +
 
 +
$(".protocols_list li").removeClass("active");
 +
$(this).addClass("active");
 +
 
 +
});
 +
 
 +
//image pop up close
 +
$(document).on("click", "#closeImage, #showImageBG", function(){
 +
$("#showImageBG, #showImage").hide();
 +
});
 +
 
 +
//image pop up show image
 +
$(document).on("click", ".showFullSizeImage", function(){
 +
$("#showImage img").attr("src", this.getAttribute("src"));
 +
$("#showImageBG, #showImage").show();
 +
});
 +
 
 +
//timeline show selected event
 +
var sideOpen = "none";
 +
$(document).on("click", ".timeline_event_header", function(e){
 +
if($(e.target).is(".close_timeline_event"))
 +
return;
 +
 
 +
selected = $(this).attr("data-side");
 +
 
 +
if(sideOpen != selected && sideOpen != "none")
 +
$this.timelineResetPosition();
 +
 
 +
$this.timelineCloseEvents(this);
 +
 
 +
sideOpen = selected;
 +
 
 +
$(this)
 +
.addClass("active")
 +
.animate({
 +
width: 640
 +
}, function(){
 +
height = $(".timeline_event_container", this).css("height", "auto").height();
 +
 
 +
$(".timeline_event_container", this)
 +
.css({
 +
height: 0,
 +
visibility: "visible"
 +
})
 +
.animate({
 +
height: height
 +
});
 +
 +
});
 +
 
 +
$(".timeline_vline")
 +
.addClass("active")
 +
.animate({
 +
margin: 0,
 +
left: sideOpen == "right" ? 300 : 700
 +
});
 +
});
 +
 
 +
$(document).on("click", ".teamShowMore", function(){
 +
offset = !$(this).hasClass("active") ? $("#teamSection").offset().left : "-"+ + $("#teamSection").width()+"px";
 +
 
 +
$("#teamSupervisors")
 +
.show()
 +
.css("margin-top", "-"+($("#teamSupervisors").height() / 2)+"px")
 +
.animate({right: offset}, {duration:800, easing:"easeInOutCubic"});
 +
 
 +
$(this).toggleClass("active");
 +
});
 +
 
 +
$(document).on("click", "a", function(e){
 +
if($(this).hasClass("directFile"))
 +
return true;
 +
 
 +
e.preventDefault();
 +
 
 +
url = this.getAttribute("href");
 +
 
 +
//empty url
 +
if(url == "#" || url.length == 0)
 +
return;
 +
 
 +
web.defaults.url = this.getAttribute("href");
 +
 
 +
window.history.pushState({path: web.defaults.url}, "", web.defaults.url);
 +
 
 +
$this.loadPage(web.defaults.url);
 +
});
 +
 
 +
$(window).bind('popstate', function() {
 +
if(window.history.state == null)
 +
web.defaults.url = "";
 +
else
 +
web.defaults.url = window.history.state.path;
 +
 
 +
$this.loadPage(web.defaults.url);
 +
});
 +
},
 +
 
 +
getPath: function(string){
 +
url = window.location.pathname;
 +
url = url.split("/");
 +
url = url.slice(1, 100);
 +
 
 +
if(string === true)
 +
return url.join("/");
 +
else
 +
return url;
 +
},
 +
 
 +
timelineCloseEvents: function(exclude){
 +
$.each($(".timeline_event_container"), function(){
 +
 
 +
if(exclude == $(this).parents(".timeline_event_header")[0])
 +
return;
 +
 
 +
$(this).animate({
 +
height: 0
 +
}, function(){
 +
$(this).css("visibility", "hidden");
 +
 
 +
$(this).parents(".timeline_event_header").animate({
 +
width: 150
 +
}, function(){
 +
$(this).removeClass("active")
 +
});
 +
});
 +
});
 +
},
 +
 
 +
timelineResetPosition: function(){
 +
console.log("test")
 +
$(".timeline_vline")
 +
.addClass("active")
 +
.animate({
 +
margin: "-2px",
 +
left: "50%"
 +
});
 +
},
 +
 
 +
resetPageTransition: function(el){
 +
$(el)
 +
.removeClass("pageTransitionAnimate")
 +
.css({
 +
top: 0,
 +
left: 0
 +
})
 +
.animate({
 +
height: 0
 +
}, 400, "easeOutQuint");
 +
},
 +
 
 +
animatePageTransition: function(){
 +
var $this = this;
 +
 
 +
$(".pageTransition").addClass("pageTransitionAnimate");
 +
 
 +
$("#block1").animate(
 +
{ height: $(window).width() + "px" },
 +
700, "easeInQuad",
 +
function(){
 +
$this.resetPageTransition(this);
 +
}
 +
);
 +
 
 +
$("#block2").animate(
 +
{ height: $(window).width() + "px" },
 +
1000, "easeInQuad",
 +
function(){
 +
$this.resetPageTransition(this);
 +
}
 +
);
 +
},
 +
 
 +
resize: function(){
 +
width = window.innerWidth;
 +
height = window.innerHeight;
 +
 
 +
//resize only current page elements
 +
/*if(this.defaults.url == "home"){
 +
$(".instagramBlock").css({
 +
width: width / Math.ceil(width / $(".instagramBlock").width())
 +
});
 +
}*/
 +
 
 +
if(this.defaults.url == "team"){
 +
$(".teamShowMore").css("right", $("#teamSection").offset().left / 2);
 +
}
 +
},
 +
 
 +
/*renderHomePage: function(){
 +
var prefix = "media/images/instagram/";
 +
var instagramImages = [];
 +
 +
for(var i=1; i<=20; i++){
 +
// imagePath = prefix + i + ".jpg";
 +
imagePath = prefix+"2.jpg";
 +
 
 +
$("#interactImages").append('\
 +
<div class="instagramBlock">\
 +
<img src="'+imagePath+'" />\
 +
</div>'
 +
);
 +
}
 +
},*/
 +
 
 +
loadPage: function(url){
 +
//dont animate page transition if website was just loaded/reloaded
 +
if(this.defaults.pageLoaded !== false)
 +
this.animatePageTransition();
 +
 
 +
var $this = this;
 +
 
 +
 
 +
if(url.length == 0){
 +
url = this.getPath(false);
 +
url = url.join("/");
 +
}
 +
 
 +
url = url.replace(/\/$/, "");
 +
 +
$.ajax({
 +
"url": "/"+this.defaults.pagesDir+"/"+url+".html",
 +
"dataType": "html",
 +
success: function(response){
 +
setTimeout(function(){
 +
$this.defaults.contentWrapper.html(response);
 +
 
 +
if($this.defaults.url == "project"){
 +
var lastChild = 2;
 +
 +
//global temperature slider
 +
$("#tempSlider").slider({
 +
min: 2,
 +
max: 5,
 +
slide: function(event, ui){
 +
var child = ui.value;
 +
 +
$("#globalTemp .timeSeriesImage:nth-child("+lastChild+")").removeClass("currentSeriesImage");
 +
$("#globalTemp .timeSeriesImage:nth-child("+child+")").addClass("currentSeriesImage");
 +
var year = $("#globalTemp .timeSeriesImage:nth-child("+child+")").attr("title");
 +
 +
//idk why but it goes undefined so we gotta do an extra check
 +
if(child == 2){
 +
year = "1884";
 +
}
 +
 +
$("#tempHeader > #rightCol").text(year);
 +
lastChild = child;
 +
}
 +
});
 +
}
 +
 +
//$this.renderHomePage();
 +
$this.resize();
 +
}, 500);
 +
},
 +
error: function(jqXHR){
 +
alert("Error page could not be loaded!");
 +
console.log(jqXHR);
 +
}
 +
});
 +
}
 +
};
 +
 
 +
web.initialize();
 +
 +
$(document).on("click", "#videoPlayImg", function(){
 +
$("#bannerVideo").css('opacity', 1).animate( { opacity: 0 }, 400).animate( { opacity: 1 }, 500);
 +
$("#videoOverlay").fadeOut("slow");
 +
$("#stopVideoButton").css("visibility","visible").fadeIn("slow");
 +
 +
setTimeout(function(){
 +
document.getElementById("bannerVideo").play();
 +
}, 600);
 +
});
 +
 +
$(document).on("click", "#stopVideoButton", function(){
 +
document.getElementById("bannerVideo").pause();
 +
$("#videoOverlay").fadeIn("slow");
 +
$("#stopVideoButton").fadeOut("slow");
 +
});
 +
 +
$(document).on("click", "#introPlayVideoButton", function(){
 +
$('body, html').animate({ scrollTop: $("#bannerVideo").offset().top }, 600);
 +
$("#videoPlayImg").trigger("click");
 +
});
 +
 +
//play the global temp gallery
 +
var playing = 0;
 +
var timer;
 +
 +
function playGlobalTempGallery(){
 +
var element = $("#globalTemp").find(".currentSeriesImage");
 +
var childNum = $(".timeSeriesImage").index(element)+2;
 +
 +
timer = setTimeout(function(){
 +
 +
if(childNum < 5){
 +
$("#globalTemp .timeSeriesImage:nth-child("+childNum+")").removeClass("currentSeriesImage");
 +
$("#globalTemp .timeSeriesImage:nth-child("+(++childNum)+")").addClass("currentSeriesImage");
 +
$("#tempSlider").slider("value",$("#tempSlider").slider("value")+1);
 +
console.log("hug");
 +
 +
var year = $("#globalTemp .timeSeriesImage:nth-child("+childNum+")").attr("title");
 +
$("#tempHeader > #rightCol").text(year);
 +
 +
playGlobalTempGallery();
 +
}else{
 +
clearTimeout(timer);
 +
 +
setTimeout(function(){
 +
$("#globalTemp .timeSeriesImage:nth-child("+childNum+")").removeClass("currentSeriesImage");
 +
$("#globalTemp .timeSeriesImage:nth-child(2)").addClass("currentSeriesImage");
 +
$("#tempSlider").slider("value",2);
 +
playing = 0;
 +
$("#playTemp").css("background-image","url(media/images/playTemp.png)");
 +
$("#tempHeader > #rightCol").text("1884");
 +
},1000);
 +
}
 +
 +
}, 500)
 +
}
 +
 +
$(document).on("click", "#playTemp", function(){
 +
if(playing == 0){
 +
playing = 1;
 +
$("#playTemp").css("background-image","url(media/images/pauseTemp.png)");
 +
playGlobalTempGallery();
 +
}else{
 +
clearTimeout(timer);
 +
playing = 0;
 +
$("#playTemp").css("background-image","url(media/images/playTemp.png)");
 +
}
 +
});
 +
});
 +
</script>
  
 
<style>
 
<style>

Revision as of 20:48, 17 October 2016

NRP-UEA-NORWICH iGEM