js/script.js

   1 window.addEventListener('load', function() {
   2     var links = document.getElementById("links").children[0].children;
   3     var home = document.getElementsByClassName("home");
   4     var menu = document.getElementById("menu");
   5     var content = document.getElementById("content");
   6     var body = document.getElementsByTagName("body")[0];
   7
   8     function menuOperator(node, position, token="") {
   9         menu.setAttribute("class", position);
  10         for(var i = 0; i < links.length; i++) {
  11             links[i].children[0].removeAttribute("class");
  12         }
  13         node.setAttribute("class", "selected " + token);
  14         for(var i = 0; i < content.children.length; i++) {
  15             content.children[i].setAttribute("class", "hidden")
  16         }
  17         var name = node.getAttribute("data-name");
  18         if(name) {
  19             var article = document.getElementById(name);
  20             article.setAttribute("class", "selected");
  21         }
  22         var color = node.getAttribute("data-color");
  23         if(color) {
  24             body.setAttribute("class", color);
  25         }
  26         window.history.pushState("object or string", "Title", node.href);
  27     }
  28
  29     for(var i = 0; i < links.length - 1; i++) {
  30         links[i].children[0].onclick = function(event) {
  31             event.preventDefault();
  32             var node = event.currentTarget;
  33             menuOperator(node, "top");
  34         };
  35     }
  36     for(var i = 0; i < home.length; i++) {
  37         home[i].onclick = function(event) {
  38             event.preventDefault();
  39             var node = event.currentTarget;
  40             menuOperator(node, "middle", "home");
  41         }
  42     }
  43 }, false);