Difference between revisions of "Template:Franconia/Javascript"

Line 3: Line 3:
 
  * COPY TO https://2017.igem.org/Template:Erlangen_Nuremberg/Javascript
 
  * COPY TO https://2017.igem.org/Template:Erlangen_Nuremberg/Javascript
 
  */
 
  */
−
$(document).ready(function() {
+
/*
 +
* VERTICAL NAV
 +
*/
 +
$(document).ready(function ($) {
 +
var contentSections = $('.cd-section'),
 +
navigationItems = $('#cd-vertical-nav').find('a');
  
−
//$("#scroll-content").scrollspy(); //Currently not working
+
updateSideNavPadding()
−
$("#sidenav").find("a").on('click', function(event) {
+
updateNavigation();
 +
$(window).on('scroll', function () {
 +
updateNavigation();
 +
updateSideNavPadding();
 +
});
  
−
// Make sure this.hash has a value before overriding default behavior
+
//smooth scroll to the section
−
if (this.hash !== "") {
+
navigationItems.on('click', function (event) {
 +
event.preventDefault();
 +
smoothScroll($(this.hash));
 +
});
 +
//smooth scroll to second section
 +
$('.cd-scroll-down').on('click', function (event) {
 +
event.preventDefault();
 +
smoothScroll($(this.hash));
 +
});
  
−
// Prevent default anchor click behavior
+
//open-close navigation on touch devices
−
event.preventDefault();
+
$('.touch .cd-nav-trigger').on('click', function () {
−
 
+
$('.touch #cd-vertical-nav').toggleClass('open');
−
// Store hash
+
−
var hash = this.hash;
+
−
 
+
−
// Using jQuery's animate() method to add smooth page scroll
+
−
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+
−
$('html, body').animate({
+
−
scrollTop : $(hash).offset().top
+
−
}, 200, function() {
+
−
 
+
−
// Add hash (#) to URL when done scrolling (default click behavior)
+
−
window.location.hash = hash;
+
−
});
+
−
 
+
−
} // End if
+
  
 +
});
 +
//close navigation on touch devices when selectin an elemnt from the list
 +
$('.touch #cd-vertical-nav a').on('click', function () {
 +
$('.touch #cd-vertical-nav').removeClass('open');
 
});
 
});
  
−
});
+
function updateNavigation() {
 +
contentSections.each(function () {
 +
$this = $(this);
 +
var activeSection = $('#cd-vertical-nav').find('a[href="#' + $this.attr('id') + '"]').data('number') - 1;
 +
if (( $this.offset().top - $(window).height() / 2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop() )) {
 +
navigationItems.eq(activeSection).addClass('is-selected');
 +
} else {
 +
navigationItems.eq(activeSection).removeClass('is-selected');
 +
}
 +
});
  
 +
}
  
−
/* CANVAS */
+
function updateSideNavPadding() {
−
/*
+
var nav = $('.no-touch #cd-vertical-nav');
−
* requestAnimationFrame pollyfill
+
if (nav.length !== 1) return;
−
*
+
var banner = $('.banner');
−
*/
+
var bannerBottom = banner.offset().top + banner.height();
−
$(document).ready(function() {
+
var differenceToTop = $(window).scrollTop() - bannerBottom;
−
if (!window.requestAnimationFrame) {
+
var differenceToBottom = $(document).height() - $(window).scrollTop() - $(window).height() - $('.bottom').height();
−
window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) {
+
if (differenceToTop < 0) {
−
return window.setTimeout(callback, 1000 / 60);
+
nav.css('top', banner.offset().top + banner.height() + nav.height());
−
});
+
nav.css('bottom', 'auto');
 +
nav.css('position', 'absolute');
 +
} else if (differenceToBottom < 0) {
 +
nav.css('top', 'auto');
 +
nav.css('bottom', Math.abs(differenceToBottom));
 +
nav.css('position', 'fixed');
 +
} else {
 +
nav.css('bottom', 'auto');
 +
nav.css('top', '50%');
 +
nav.css('position', 'fixed');
 +
}
 
}
 
}
  
−
/*!
+
function smoothScroll(target) {
−
* Mantis.js / jQuery / Zepto.js plugin for Constellation
+
$('body,html').animate(
−
* @version 1.2.2
+
{'scrollTop': target.offset().top},
−
* @author Acauã Montiel <contato@acauamontiel.com.br>
+
600
−
* @license http://acaua.mit-license.org/
+
);
−
*/
+
}
−
(function($, window) {
+
});
−
/**
+
−
* Makes a nice constellation on canvas
+
−
* @constructor Constellation
+
−
*/
+
−
function Constellation(canvas, options) {
+
−
var $canvas = $(canvas),
+
−
context = canvas.getContext('2d'),
+
−
defaults = {
+
−
star : {
+
−
color : 'rgba(255, 255, 255, .5)',
+
−
width: 1
+
−
},
+
−
line : {
+
−
color : 'rgba(255, 255, 255, .5)',
+
−
width : 0.2
+
−
},
+
−
position : {
+
−
x : 0, // This value will be overwritten at startup
+
−
y : 0 // This value will be overwritten at startup
+
−
},
+
−
width : window.innerWidth,
+
−
height : window.innerHeight,
+
−
velocity : 0.1,
+
−
length : 50,
+
−
distance : 120,
+
−
radius : 150,
+
−
stars : []
+
−
},
+
−
config = $.extend(true, {}, defaults, options);
+
  
−
function Star() {
+
/* SMOOTH SCROLLING ON NAV CLICK */
−
this.x = Math.random() * canvas.width;
+
$(document).ready(function () {
−
this.y = Math.random() * canvas.height;
+
$('a[href*="#"]').on('click', function (e) {
 +
if (!($(this.hash).length)) return true;
  
−
this.vx = (config.velocity - (Math.random() * 0.5));
+
e.preventDefault();
−
this.vy = (config.velocity - (Math.random() * 0.5));
+
  
−
this.radius = Math.random() * config.star.width;
+
var target = this.hash;
−
}
+
var $target = $(target);
  
−
Star.prototype = {
+
$('html, body').stop().animate({
−
create : function() {
+
'scrollTop': $target.offset().top
−
context.beginPath();
+
}, 900, 'swing', function () {
−
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+
window.location.hash = target;
−
context.fill();
+
});
−
},
+
});
 +
});
  
−
animate : function() {
 
−
var i;
 
−
for (i = 0; i < config.length; i++) {
 
  
−
var star = config.stars[i];
+
/* Slide Up/Slide Down Animation for Main Menu */
 +
$(document).ready(function () {
 +
$(".dropdown").hover(
 +
function () {
 +
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown(300);
 +
$(this).toggleClass('open');
 +
},
 +
function () {
 +
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp(300);
 +
$(this).toggleClass('open');
 +
}
 +
);
 +
});
  
−
if (star.y < 0 || star.y > canvas.height) {
 
−
star.vx = star.vx;
 
−
star.vy = -star.vy;
 
−
} else if (star.x < 0 || star.x > canvas.width) {
 
−
star.vx = -star.vx;
 
−
star.vy = star.vy;
 
−
}
 
  
−
star.x += star.vx;
+
/*
−
star.y += star.vy;
+
* BEAM/PATHOMON LOGO SCALING
−
}
+
*/
−
},
+
$(document).ready(function () {
 +
$('#navbar').find('li.beam').hover(function () {
 +
scaleDropdownLogo($(this));
 +
}, function () {
 +
unscaleDropdownLogo($(this));
 +
});
  
−
line : function() {
+
$('#navbar').find('li.pathomon').hover(function () {
−
var length = config.length,
+
scaleDropdownLogo($(this));
−
iStar,
+
}, function () {
−
jStar,
+
unscaleDropdownLogo($(this));
−
i,
+
});
−
j;
+
  
−
for (i = 0; i < length; i++) {
+
function scaleDropdownLogo(element) {
−
for (j = 0; j < length; j++) {
+
element.find('.dropdown-logo').css('transform', 'scale(1.5, 1.5)');
−
iStar = config.stars[i];
+
element.find('a').first().css('opacity', 1);
−
jStar = config.stars[j];
+
}
  
−
if (
+
function unscaleDropdownLogo(element) {
−
(iStar.x - jStar.x) < config.distance &&
+
element.find('.dropdown-logo').css('transform', 'scale(1, 1)');
−
(iStar.y - jStar.y) < config.distance
+
element.find('a').first().css('opacity', 0.8);
−
) {
+
−
if (
+
−
(iStar.x - config.position.x) < config.radius &&
+
−
(iStar.y - config.position.y) < config.radius
+
−
) {
+
−
context.beginPath();
+
−
context.moveTo(iStar.x, iStar.y);
+
−
context.lineTo(jStar.x, jStar.y);
+
−
context.stroke();
+
−
context.closePath();
+
−
}
+
−
}
+
−
}
+
−
}
+
−
}
+
−
};
+
  
−
this.createStars = function() {
+
}
−
var length = config.length,
+
−
star,
+
−
i;
+
−
 
+
−
context.clearRect(0, 0, canvas.width, canvas.height);
+
−
 
+
−
for (i = 0; i < length; i++) {
+
−
config.stars.push(new Star());
+
−
star = config.stars[i];
+
−
 
+
−
star.create();
+
−
}
+
−
 
+
−
star.line();
+
−
star.animate();
+
−
};
+
−
 
+
−
this.setCanvas = function() {
+
−
canvas.width = config.width;
+
−
canvas.height = config.height;
+
−
};
+
−
 
+
−
this.setContext = function() {
+
−
context.fillStyle = config.star.color;
+
−
context.strokeStyle = config.line.color;
+
−
context.lineWidth = config.line.width;
+
−
};
+
−
 
+
−
this.setInitialPosition = function() {
+
−
if (!options || !options.hasOwnProperty('position')) {
+
−
config.position = {
+
−
x : canvas.width * 0.5,
+
−
y : canvas.height * 0.5
+
−
};
+
−
}
+
−
};
+
−
 
+
−
this.loop = function(callback) {
+
−
callback();
+
−
 
+
−
window.requestAnimationFrame(function() {
+
−
this.loop(callback);
+
−
}.bind(this));
+
−
};
+
−
 
+
−
this.bind = function() {
+
−
$canvas.on('mousemove', function(e) {
+
−
config.position.x = e.pageX - $canvas.offset().left;
+
−
config.position.y = e.pageY - $canvas.offset().top;
+
−
});
+
−
};
+
−
 
+
−
this.init = function() {
+
−
this.setCanvas();
+
−
this.setContext();
+
−
this.setInitialPosition();
+
−
this.loop(this.createStars);
+
−
this.bind();
+
−
};
+
−
}
+
−
 
+
−
$.fn.constellation = function(options) {
+
−
return this.each(function() {
+
−
var c = new Constellation(this, options);
+
−
c.init();
+
−
});
+
−
};
+
−
})($, window);
+
−
 
+
−
// Init plugin
+
−
$('canvas').constellation({
+
−
star : {
+
−
width : 3
+
−
},
+
−
line : {
+
−
color : 'rgba(68, 157, 209, .8)'
+
−
},
+
−
radius : 250
+
−
});
+
 
});
 
});

Revision as of 23:44, 30 October 2017

/** 

* OUR JAVASCRIPT MODIFICATION GOES HERE
* COPY TO https://2017.igem.org/Template:Erlangen_Nuremberg/Javascript
*/

/*

  • VERTICAL NAV
*/

$(document).ready(function ($) { var contentSections = $('.cd-section'), navigationItems = $('#cd-vertical-nav').find('a');

updateSideNavPadding() updateNavigation(); $(window).on('scroll', function () { updateNavigation(); updateSideNavPadding(); });

//smooth scroll to the section navigationItems.on('click', function (event) { event.preventDefault(); smoothScroll($(this.hash)); }); //smooth scroll to second section $('.cd-scroll-down').on('click', function (event) { event.preventDefault(); smoothScroll($(this.hash)); });

//open-close navigation on touch devices $('.touch .cd-nav-trigger').on('click', function () { $('.touch #cd-vertical-nav').toggleClass('open');

}); //close navigation on touch devices when selectin an elemnt from the list $('.touch #cd-vertical-nav a').on('click', function () { $('.touch #cd-vertical-nav').removeClass('open'); });

function updateNavigation() { contentSections.each(function () { $this = $(this); var activeSection = $('#cd-vertical-nav').find('a[href="#' + $this.attr('id') + '"]').data('number') - 1; if (( $this.offset().top - $(window).height() / 2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop() )) { navigationItems.eq(activeSection).addClass('is-selected'); } else { navigationItems.eq(activeSection).removeClass('is-selected'); } });

}

function updateSideNavPadding() { var nav = $('.no-touch #cd-vertical-nav'); if (nav.length !== 1) return; var banner = $('.banner'); var bannerBottom = banner.offset().top + banner.height(); var differenceToTop = $(window).scrollTop() - bannerBottom; var differenceToBottom = $(document).height() - $(window).scrollTop() - $(window).height() - $('.bottom').height(); if (differenceToTop < 0) { nav.css('top', banner.offset().top + banner.height() + nav.height()); nav.css('bottom', 'auto'); nav.css('position', 'absolute'); } else if (differenceToBottom < 0) { nav.css('top', 'auto'); nav.css('bottom', Math.abs(differenceToBottom)); nav.css('position', 'fixed'); } else { nav.css('bottom', 'auto'); nav.css('top', '50%'); nav.css('position', 'fixed'); } }

function smoothScroll(target) { $('body,html').animate( {'scrollTop': target.offset().top}, 600 ); } });

/* SMOOTH SCROLLING ON NAV CLICK */ $(document).ready(function () { $('a[href*="#"]').on('click', function (e) { if (!($(this.hash).length)) return true;

e.preventDefault();

var target = this.hash; var $target = $(target);

$('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; }); }); });


/* Slide Up/Slide Down Animation for Main Menu */ $(document).ready(function () { $(".dropdown").hover( function () { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown(300); $(this).toggleClass('open'); }, function () { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp(300); $(this).toggleClass('open'); } ); });


/*

  • BEAM/PATHOMON LOGO SCALING
  • /

$(document).ready(function () { $('#navbar').find('li.beam').hover(function () { scaleDropdownLogo($(this)); }, function () { unscaleDropdownLogo($(this)); });

$('#navbar').find('li.pathomon').hover(function () { scaleDropdownLogo($(this)); }, function () { unscaleDropdownLogo($(this)); });

function scaleDropdownLogo(element) { element.find('.dropdown-logo').css('transform', 'scale(1.5, 1.5)'); element.find('a').first().css('opacity', 1); }

function unscaleDropdownLogo(element) { element.find('.dropdown-logo').css('transform', 'scale(1, 1)'); element.find('a').first().css('opacity', 0.8);

} });