|
|
| Line 3: |
Line 3: |
| | <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> |
