299 lines
7.4 KiB
JavaScript
299 lines
7.4 KiB
JavaScript
|
// 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";
|
|||
|
}
|
|||
|
}
|