history.js

/***************************************************************
 *  Copyright (C) 2016 punkt.de GmbH
 *  Authors: Christoph Heidenreich
 *
 *  This script is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU Lesser General Public License as published
 *  by the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This script is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Lesser General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 *  This copyright notice MUST APPEAR in all copies of the script!
 ***************************************************************/
// window.addEventListener("load", function(event) {
    var stateObj = {info: "start01"};
	 history.replaceState(stateObj, "neuerChronikEintrag", "http://localhost:8083/");
	 console.log("start01")
	//  document.body.style.backgroundColor = "yellow";
//   });
function historyP2(){
	var stateObj = {info: "start02"};
	 history.pushState(stateObj, "neuerChronikEintrag", "http://localhost:8083/");
	 console.log("start02")
}
function historyMap(){
	var stateObj = {info: "map01"};
	history.pushState(stateObj, "neuerChronikEintrag", "http://localhost:8083/");
	console.log("map01")
}
// function menu3(){
// 	var stateObj = {info: "menu03"};
// 	history.pushState(stateObj, "neuerChronikEintrag", "http://localhost:8089/");
// }








// function SaveHistory(){
// 	var page = 0;
// 	if (!$('#einlP01').is(':visible') && !$("#einlPO2").is(':hidden')){
// 		var dataObject = {
// 			pageOne: "1",
// 			one: "one"
// 		};
// 		history.pushState(dataObject, null, window.location);
// 	} else if ($("#einlPO2").css('display') == 'block' && $("#einlPO1").css('display') == 'none') {
// 		var dataObject = {
// 			pageTwo: "2",
// 			two: "two"
// 		};
// 		history.pushState(dataObject, null, window.location);
// 	}else if($("#balloon-startscreen").css('display') == 'none') {
// 		var dataObject = {
// 			pageThree: "3",
// 			three: "three"
// 		};
// 		history.pushState(dataObject, null, window.location);
// 	}

	

//  }

jQuery(document).ready(function() {
	
var $ = jQuery;
	// function replaceContentWith(html) {
	// 	$('#replace-container').replaceWith(html);
	// }

	// function setMenuActiveStateForId(id) {
	// 	$('#menu li').removeClass('active');
	// 	$('#' + id).parent().addClass('active');
	// }

	// function setCurrentPage(replacementHtml, activeLinkId) {
	// 	replaceContentWith(replacementHtml);
	// 	setMenuActiveStateForId(activeLinkId);
	// }



	//--------------------------------------------------------------------------
	// handle history.back functionality in event
	// replace html and set active menu to restore dynamic made changes on page
	//--------------------------------------------------------------------------
	window.addEventListener('popstate', function(event) {
		if (event.state !== null && event.state !== undefined) {
			// alert(event.state.info)
			if (event.state.info == "start01"){
				activateStoryFrame("1")
			} else if (event.state.info == "start02"){
				activateStoryFrame("2")
			} else if (event.state.info == "map01"){
				activateStoryFrame("3")
			} else {
				activateStoryFrame("1")
			}
		}
	});



	//--------------------------------------------------------------------------
	// replace content on click and remember the changes in browser history
	//--------------------------------------------------------------------------
	// $('#menu a').each(function() {
	// 	$(this).click(function() {
	// 		var activeLinkId = $(this).attr('id');

	// 		var dataObject = {
	// 		};

	// 		$.ajax({
	// 			method: "GET",
	// 			url: $(this).data('url'),
	// 			dataType: "HTML"
	// 		})
	// 		.done(function(html) {
	// 			if (!$('#einlP01').is(':visible') && !$("#einlPO2").is(':hidden')){
	// 				dataObject = {
	// 					pageOne: "1",
	// 					one: "one"
	// 				};
	// 				history.pushState(dataObject, null, window.location);
	// 			} else if ($("#einlPO2").css('display') == 'block' && $("#einlPO1").css('display') == 'none') {
	// 				dataObject = {
	// 					pageTwo: "2",
	// 					two: "two"
	// 				};
	// 				history.pushState(dataObject, null, window.location);
	// 			}else if($("#balloon-startscreen").css('display') == 'none') {
	// 				dataObject = {
	// 					pageThree: "3",
	// 					three: "three"
	// 				};
	// 				history.pushState(dataObject, null, window.location);
	// 			}


	// 			// this will add a new entry for the browser history like it would happen if you
	// 			// click on a hyperlink on the page with additional information we can use for our likes
	// 			history.pushState(dataObject, null, window.location);

	// 			// setCurrentPage(html, activeLinkId);
	// 		});
	// 	});
	// });



	//--------------------------------------------------------------------------
	// handling of first load of the page and
	// jumping back from some other url for example with the impress link
	//--------------------------------------------------------------------------
	// if (history.state === null || history.state === undefined) {
		
	// 	// store current page state in the current history

	// 	var dataObject = {
	// 		html: jQuery('#replace-container').wrap('<pseudo/>').parent().html(),
	// 		activeLinkId: ''
	// 	};

	// 	// this replaces the current browser history entry with information (html and current active menu id)
	// 	// we use in your popstate event to handle the state of the page on history navigation
	// 	history.replaceState(dataObject, null, window.location);
	// } else {
	// 	// set the page state by given information from the history state
	// 	activateStoryFrame("pageN")
	// 	// setCurrentPage(history.state.html, history.state.activeLinkId);
	// }

});

function activateStoryFrame(pageN){
	if (pageN == "1"){
	stopStory();
	$("#story-frame").removeClass("tour-inactive");
	$("#story-frame").removeClass("tour");
	$("#story-frame").addClass("startscreen");
	$("#balloon-startscreen").attr('style',"display:'block'!important");
	$("#navi").attr('style',"display:'none'!important");
	// $("#einlPO1").css('display') = 'block'
	document.getElementById("einlP01").style.display = "block";
	document.getElementById("einlP02").style.display = "none";
	document.getElementById("tourstart-btn").style.display = "none";
	document.getElementById("iconlist").style.display = "none";
	document.getElementById("detAnleitung").style.display = "none";
	document.getElementById("einlP01").scrollIntoView();
	document.getElementById("back-btn").style.display = "none";
	} else if(pageN == "2"){
	 	stopStory();
	 $("#story-frame").removeClass("tour-inactive");
	 $("#story-frame").removeClass("tour");
	 $("#story-frame").addClass("startscreen");
	 $("#balloon-startscreen").attr('style',"display:'block'!important");
	 $("#navi").attr('style',"display:'none'!important");
	 document.getElementById("einlP01").style.display = "none";
	 document.getElementById("einlP02").style.display = "block";
	 document.getElementById("tourstart-btn").style.display = "block";
	 document.getElementById("iconlist").style.display = "block";
	 document.getElementById("detAnleitung").style.display = "block";
	 document.getElementById("einlP02").scrollIntoView();
	 document.getElementById("back-btn").style.display = "block";
	} else if(pageN == "3"){
	 	showMap();
	}
}