MaketTahta/assets/js/old_main.js

// 2023 Aliberk Sandıkçı

// VARIABLES
var FlagSecond = 0;
var FlagSettings = 0;
var FlagTimers = 1;
var FlagExtras = 1;
var FlagTools = 1;
var FlagFullscreen = 0;
var FlagLargenClock = 0;
var MidItems = ["timers", "stopwatch", "timer", "yemek-listesi", "animations"]

// RUN FUNCTIONS ON START
updateTime();
if (FlagSettings) { toggleSettings() }
if (FlagTimers) { toggleTimers() }

// RUN FUNCTIONS PERIODICALLY
var t = setInterval(updateTime, 1000);


//
// MAIN FUNCTIONS
//

function updateTime() {
  var d = new Date();
  var curHour = getDigits(d.getHours(), 2);
  var curMin = getDigits(d.getMinutes(), 2);
  var curSeconds = getDigits(d.getSeconds(), 2);

  if (FlagSecond) {
    document.getElementById("time").innerHTML = curHour + "." + curMin + "." + curSeconds;
  } else {
    document.getElementById("time").innerHTML = curHour + "." + curMin;
  }

  if (curHour == 12 && (curMin >= 24 && curMin <= 30) && FlagExtras == 1) {
    document.getElementById("time").style.color = "red";
    document.getElementById("rainbow").style.display = "inherit";
  } else {
    document.getElementById("time").style.color = "inherit";
    document.getElementById("rainbow").style.display = "none";
  }
}

function toggleClockSeconds() {
  let chx = document.getElementById("chx-clockSecond");
  if (chx.checked) {
    FlagSecond = 1;
  } else {
    FlagSecond = 0;
  }
  updateTime();
}

function toggleDevVersion() {
  let chx = document.getElementById("chx-devVersion");
  if (chx.checked) {
    window.location.replace("dev.html" + window.location.search);
  } else {
    window.location.replace("index.html" + window.location.search);
  }
}

function toggleSettings() {
  let settings = document.getElementById("settings");
  console.log(settings.style.display);
  if (settings.style.display == "flex") {
    settings.style.display = "none";
  } else {
    settings.style.display = "flex";
  }
}

function toggleTimers(typ = "display") {
  switch (typ) {
    case "stopwatch":
      hideMidAll("stopwatch", "timers");
      toggleItem("id", "stopwatch");
      break;
    case "timer":
      hideMidAll("timer", "timers");
      toggleItem("id", "timer");
      break;
    default: // "display"
      hideMidAll("timers");
      toggleItem("id", "timers");
      break;
  }
}

function toggleYemekListesi() {
  hideMidAll("yemek-listesi");
  toggleItem("id", "yemek-listesi");
}

function toggleAnimations() {
  hideMidAll("animations");
  toggleItem("id", "animations");
}


function toggleExtra() {
  let chx = document.getElementById("chx-closeExtra");
  if (chx.checked) {
    FlagExtras = 0;
  } else {
    FlagExtras = 1;
  }
  updateExtras();

}

function toggleTools() {
  let chx = document.getElementById("chx-closeTools");
  if (chx.checked) {
    FlagTools = 0;
  } else {
    FlagTools = 1;
  }
  updateToolVisibility();
}

function toggleFullscreen() {
  let chx = document.getElementById("chx-fullscreen");
  if (chx.checked) {
    FlagFullscreen = 1;
  } else {
    FlagFullscreen = 0;
  }
  updateFullscreen();
}

function toggleLargenClock() {
  let chx = document.getElementById("chx-largenClock");
  if (chx.checked) {
    FlagLargenClock = 1;
  } else {
    FlagLargenClock = 0;
  }
  updateClockSize();
}

function toggleExamMode() {
  let chx = document.getElementById("chx-examMode");
  if (chx.checked) {
    document.getElementById("chx-largenClock").checked = true;
    document.getElementById("chx-closeExtra").checked = true;
    document.getElementById("chx-clockSecond").checked = true;
    document.getElementById("chx-closeTools").checked = true;
    // document.getElementById("chx-fullscreen").checked = true;
    // toggleFullscreen();
    // FIXME Try, if not works open new tab and make fullscreen automatically, when exiting fullscreen actually close tab !!!
    toggleExtra();
    toggleLargenClock();
    toggleClockSeconds();
    toggleTools();
    document.getElementById("header-note").style.display = "block";
  } else {
    document.getElementById("chx-largenClock").checked = false;
    document.getElementById("chx-closeExtra").checked = false;
    document.getElementById("chx-clockSecond").checked = false;
    document.getElementById("chx-closeTools").checked = false;
    // document.getElementById("chx-fullscreen").checked = false;
    // toggleFullscreen();
    toggleExtra();
    toggleLargenClock();
    toggleClockSeconds();
    toggleTools();
    document.getElementById("header-note").style.display = "none";
  }
}

// ----------------------------------------- 
//  UTILITIES
// 

function getDigits(str, num) {
  return ("0" + str).slice(-num);
}

/**
 * 
 * @param  {...any} except 
 */
function hideMidAll(...except) {
  MidItems.forEach(element => {
    if (!except.includes(element)) {
      document.getElementById(element).style.display = "none";
    }
  });
}

/** 
 * @param type id, class
 * @param name id or class name 
 * @param display display type
 */
function toggleItem(type, name, display = "default") {
  switch (type) {
    case "id":

      // TODO AUTO display type recognizer, do not require to type display type

      var targetDisplay = "flex";
      switch (display) {
        case "absolute":
          targetDisplay = "absolute";
          break;
        case "block":
          targetDisplay = "block";
          break;
        default:
          break;
      }

      var item = document.getElementById(name);
      if (item.style.display == targetDisplay) {
        item.style.display = "none";
      } else {
        item.style.display = targetDisplay;
      }
      break;
    default:
      console.error("no toggle item except ids!");
      break;
  }
}

function updateFullscreen() {
  var elem = document.documentElement;
  if (FlagFullscreen) {
    console.warn("FULLSCREEN");
    /* View in fullscreen */

    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
      elem.msRequestFullscreen();
    }

  } else {
    /* Close fullscreen */

    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) { /* Safari */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE11 */
      document.msExitFullscreen();
    }

  }
}

function updateToolVisibility() {
  var item = document.getElementsByClassName("settings-box")[0];
  if (FlagTools) {
    document.getElementById("toolbox").style.display = "block";
    item.style.marginLeft = "0px";
    item.style.minWidth = "min-content";
  } else {
    hideMidAll();
    document.getElementById("toolbox").style.display = "none";
    item.style.marginLeft = "auto";
    item.style.minWidth = "20vw";
  }
}

function updateExtras() {
  var arr = document.getElementsByClassName("extraItem");
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
    if (FlagExtras) {
      element.style.display = "inherit";
    }
    else {
      element.style.display = "none";
    }
  }
}

function updateClockSize() {
  let clock = document.getElementById("time");
  let top = document.getElementById("top");
  if (FlagLargenClock) {
    document.getElementById("clock-divider").style.display = "none";
    clock.style.fontSize="200px";
    top.style.height="max-content";

  } else {
    document.getElementById("clock-divider").style.display = "block";
    clock.style.fontSize="80px";
    top.style.height="100px";
  }
}