history.js

function activateStoryFrame(pageN) {
  if (pageN == "1") {
    // window.location.reload();

    stopStory();

    $("#story-frame").removeClass("tour-inactive");
    $("#story-frame").removeClass("tour");
    $("#story-frame").addClass("startscreen");
    $("#balloon-startscreen").attr("style", "display:'block'!important");
  } else if (pageN == "2") {
    startStory();
    Introshow();
    setpositionVAR(false);
    zoomtop("IntroProj");
  } else if (pageN == "3") {
    zoomtop("ProjektePage");
    Projektshow();
  } else if (pageN == "4") {
    removebuildings();
    addcont("main_bock");
    addcont("main_heatdem");
    addcont("main_nordbstuff");
    Expert();
    setpositionVAR(false);
    zoomtop("Expertenmodus");
  } else if (pageN == "5") {
    removebuildings();
    addcont("main_nordbstuff2");
    NordbahnhofText();
    setpositionVAR(false);
    zoomtop("NordbahnhofInfo");
  } else if (pageN == "6") {
    addcont("main_bock2");
    showtourSpecific("main");
    setpositionVAR(false);
    zoomtop("projektOne");
  } else if (pageN == "7"){
    removebuildings();
    addcont("main_nordbstuff3");
    RosensteinText();
    setpositionVAR(false);
    zoomtop("RosensteinPage");
  }
}

//-------------------------------------
// TEST 02

function historyInfo() {
  history.pushState({ id: 2 }, "Info page", "./");
}

function historyProjekt() {
  history.pushState({ id: 3 }, "Project page", "./");
}

function historyToolbox() {
  history.pushState({ id: 4 }, "Info page", "./");
}

function historyNordb() {
  history.pushState({ id: 5 }, "Info page", "./");
}

function historyRosen() {
  history.pushState({ id: 7 }, "Info page", "./");
}

function historyBock() {
  history.pushState({ id: 6 }, "Info page", "./");
}

history.replaceState({ id: 1 }, "Default page", "./");

window.addEventListener("popstate", (e) => {
  if (e.state != null && e.state !== undefined) {
    if (typeof e.state.id !== "undefined") {
      console.log(e.state.id);
      activateStoryFrame(e.state.id);
    } else if (typeof e.state.key !== "undefined") {
      console.log(e.state.key);
      activateStoryFrame(1);
    } else {
      console.log(e.state);
    }
  }
});