scripts.js

"use strict";

//Make a hamburger menu for small screens
$(document).ready(initBurger);
function initBurger() {
	//Wrap the normal contents of the menu
	$("#menu > *").wrapAll("<div id='fries'></div>");
	//Place a wrapper to load the burger into
	$("#menu").prepend("<div id='placeholder'></div>");
	//Load the burger into there
	$("#placeholder").load("/includes/hamburger.html",
		(responseTxt, statusTxt, xhr) => {
			if(statusTxt == "error") {
				alert("Error: " + xhr.status + ": " + xhr.statusText);
			}
			//And then only once the burger is loaded...
			if(statusTxt == "success") {
				//Unwrap the burger
				$("#hamburger").unwrap();
//				//If there isn't a style element in the head, make an empty one...
//				if ($("head style").length === 0 ) {
//					$("head").append("<style type='text/css'></style>");
//				}
//				//...so we can make the menu auto-hide at sizes where the burger shows
//				$("head style").append("@media (max-width: 40rem) {#menu {display:none;} }");
			}
		}
	);
}

//Toggle submenus on click
$(document).ready(initMenus);
function initMenus() {
	$("#menu ul li a").each(function(){
		if ($(this).closest("li").children("ul").length !== 0){
			$(this).click(function(){
				$(this).closest("li").children("ul").slideToggle();
				$(this).closest("li").toggleClass("current");
				$("body").one("click", function(){
					$("#menu ul li ul").slideUp();
					$("#menu ul li.current").removeClass("current");
				});
				return false;
			});
			$(this).prepend("<span>&#9660;</span> ")
			$(this).append("<span>&#9660;</span> ")
		};
	});
	//Don't try to do it for items in submenus
	$("#menu ul li ul li a").each(function(){
		$(this).off("click");
	});
	
}


// Make external links open in new windows or tabs
$(document).ready(externalLinks);
function externalLinks() {	
	var thisdomain = document.location.hostname ;
	$("a[href^='http']:not([href*=thisdomain])").click(function(){
		window.open(this.href);
		return false ;
	}).attr("title", "Opens in a new window");
}	


// Gallery modal display functionality

//Initialize global variable of slides
var slides  ;

//Sets up the structure of the modal (all hidden by default) and the events listeners to open and close it
window.onload = function() { initDisplayModal(); };
function initDisplayModal() {

	//Gathers all the slides into a collection
	slides = $(".gallery img").filter(function(){
		return $(this).closest("a").attr("href").includes("/display/");
	});

	//Adds onclick event to every slide link to open modal display
	slides.each(function(index,element) {
		$(this).closest("a").click(function(){
			currentSlide(index);
			openModal();
			return false ;
		});
	});

	//Gets the modal from an external file and appends it after the (last) main element
	if (slides.length !== 0) {
		//Place a wrapper to load the modal into
		$("main").last().after("<div id='placeholder'></div>");
		//Load the modal into there
		$("#placeholder").load("/display/modal.html",
			(responseTxt, statusTxt, xhr) => {
				if(statusTxt == "error") {
					alert("Error: " + xhr.status + ": " + xhr.statusText);
				}
				//And then only once the modal is loaded...
				if(statusTxt == "success") {
					//Unwrap the modal
					$("#displayModal").unwrap();
					$("#displayModal").hide();
					//Add onclick to close modal when clicking background
					$("#displayModal").click(function(event){
						if (event.target === this) { closeModal(); }
					});
				}
			}
		);
	}

}

//Initializes the slideshow index
var slideIndex = 0;

//Steps forward through the slideshow (or backward if negative)
function plusSlides(n) {
	$("#modalImage").fadeOut("", function() {
		$("#modalImage").attr("src","");
		showSlides(slideIndex += n);
		$(this).fadeIn();
	})
}

//Sets the slide index as specified
function currentSlide(n) {
	$("#modalImage").attr("src","");
	showSlides(slideIndex = n);
}

//Populates the modal with the data of the specified slide
function showSlides(n) {
	var i;
	var l = slides.length;
	if (n >= l) {slideIndex = 0;}
	if (n < 0) {slideIndex = l - 1;}
	var slide =  $(slides[slideIndex]);
	var caption = $("#caption");
	var captionText = slide.closest("li").find("h3").first().html();
	caption.html(captionText);
	var image = $("#modalImage");
	var srcstr = String(slide.attr("src")).replace("-thumb","");
	image.attr("src", srcstr);
	image.attr("alt", captionText);
}

//Opens the modal image display
function openModal() {
	$("#displayModal").show()
	$("#displayModal").animate({opacity: 1});
	return false;
}

//Closes the modal image display
function closeModal() {
	$("#displayModal").animate({opacity: 0}, function(){
		$("#displayModal").hide();
	});
}


//Toggle sections by clicking their headers
$("section > h2, section > h3, section > h4, section > h5, section > h6").each(function(){
	$(this).css("cursor","pointer");
	$(this).attr("title", "Collapse section");
	$(this).prepend("<span class='toggleArrow left'>&#9660;</span>");
	$(this).prepend("<span class='toggleArrow right'>&#9660;</span>");
	$(this).one("click", function(){collapseSection($(this));});
});

//Auto-collapse subsections
var subsections = $("section > h2, section > h3, section > h4, section > h5, section > h6").not(function(){
	return $(this).parent("section").parent().is("main") ;
});
subsections.each(function(){
	collapseSection($(this));
})

//To expand a section from one of its elements
function expandSection(element) {
	element.closest("section").children().not("h2,h3,h4,h5,h6,.description").fadeIn(500);
	element.children(".toggleArrow").first().removeClass("collapsed");
	element.children(".toggleArrow").last().removeClass("collapsed");
	element.attr("title", "Collapse section");
	element.one("click", function(){collapseSection($(this));});
}

//To collapse a section from one of its elements
function collapseSection(element) {
	element.closest("section").children().not("h2,h3,h4,h5,h6,.description").fadeOut(500);
	element.children(".toggleArrow").first().addClass("collapsed");
	element.children(".toggleArrow").last().addClass("collapsed");
	element.attr("title", "Expand section");
	element.one("click", function(){expandSection($(this));});
}