From 5636088690b4712122ad0f22d36324f962f4d85d Mon Sep 17 00:00:00 2001 From: asandikci Date: Mon, 25 Dec 2023 19:08:30 +0300 Subject: [PATCH] feat: UI enhancements, exam mode - fullscreen toggle - Largen Clock toggle - Hide Tools toggle - Exam Mode --- iflpanel/tahta/assets/css/main.css | 16 ++- iflpanel/tahta/assets/css/main.css.map | 2 +- iflpanel/tahta/assets/js/old_main.js | 153 +++++++++++++++++++++++-- iflpanel/tahta/assets/scss/main.scss | 18 ++- iflpanel/tahta/index.html | 36 +++++- 5 files changed, 205 insertions(+), 20 deletions(-) diff --git a/iflpanel/tahta/assets/css/main.css b/iflpanel/tahta/assets/css/main.css index 3041724..0898364 100644 --- a/iflpanel/tahta/assets/css/main.css +++ b/iflpanel/tahta/assets/css/main.css @@ -67,10 +67,21 @@ section#top .clock #time { justify-content: center; font-size: 80px; } -section#top .settings-box { +section#top .toolbox { min-width: 20vw; margin-left: auto; text-align: right; + display: block; +} +section#top .toolbox button { + height: 30px; + width: 30px; + line-height: 20px; +} +section#top .settings-box { + min-width: min-content; + margin-left: 0; + text-align: right; } section#top .settings-box button { height: 30px; @@ -87,7 +98,8 @@ section#top .settings-box #settings { section#top .settings-box #settings form { display: flex; flex-direction: column; - position: relative; + position: absolute; + min-width: 10vw; background-color: grey; } section#top .settings-box #settings form .cell { diff --git a/iflpanel/tahta/assets/css/main.css.map b/iflpanel/tahta/assets/css/main.css.map index b8aac72..54b2ece 100644 --- a/iflpanel/tahta/assets/css/main.css.map +++ b/iflpanel/tahta/assets/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/_animation.scss","../scss/_button.scss"],"names":[],"mappings":";AAAA;ACAA;AAEA;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;ADZJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAMA;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAWZ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGE;EACE;EACA;EACA;;AAEA;EAEE;EACA;;AEtKV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,YACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EAEA;;AAOF;EACE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA,YACE;;AAGJ;EACE;;AAGF;EACE;EACA,YACE;;AAGJ;EACE;EACA;;AAGF;EACE;EACA,YACE;;AAGJ;EACE;EACA;;AAGF;EACE;;AAKA;AAAA;AAAA;EAGE;EACA;;AAGF;EACE;;AAUF;AAAA;AAAA;EAIE;EACA;;AAGF;EACE;;AF2DM;EACE;EACA;;AAOR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;;AAKN;EACE;EACA;;AAEA;EACE;;AAMN;EACE;EACA;;AAGF;EACE;EACA;;AAMJ;EACE;;AAEA;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/_animation.scss","../scss/_button.scss"],"names":[],"mappings":";AAAA;ACAA;AAEA;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;ADZJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAMA;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAWZ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGE;EACE;EACA;EACA;;AAEA;EAEE;EACA;;AEpLV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,YACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EAEA;;AAOF;EACE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA,YACE;;AAGJ;EACE;;AAGF;EACE;EACA,YACE;;AAGJ;EACE;EACA;;AAGF;EACE;EACA,YACE;;AAGJ;EACE;EACA;;AAGF;EACE;;AAKA;AAAA;AAAA;EAGE;EACA;;AAGF;EACE;;AAUF;AAAA;AAAA;EAIE;EACA;;AAGF;EACE;;AFyEM;EACE;EACA;;AAOR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;;AAKN;EACE;EACA;;AAEA;EACE;;AAMN;EACE;EACA;;AAGF;EACE;EACA;;AAMJ;EACE;;AAEA;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/iflpanel/tahta/assets/js/old_main.js b/iflpanel/tahta/assets/js/old_main.js index 7ca519b..061da58 100644 --- a/iflpanel/tahta/assets/js/old_main.js +++ b/iflpanel/tahta/assets/js/old_main.js @@ -5,6 +5,9 @@ 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 @@ -32,7 +35,7 @@ function updateTime() { document.getElementById("time").innerHTML = curHour + "." + curMin; } - if (curHour == 12 && (curMin >= 24 && curMin <= 30)) { + if (curHour == 12 && (curMin >= 24 && curMin <= 30) && FlagExtras == 1) { document.getElementById("time").style.color = "red"; document.getElementById("rainbow").style.display = "inherit"; } else { @@ -109,6 +112,66 @@ function toggleExtra() { } +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 // @@ -129,27 +192,84 @@ function hideMidAll(...except) { }); } -/** type: id, class - * - * name: id or class name +/** + * @param type id, class + * @param name id or class name + * @param display display type */ -function toggleItem(type, name) { +function toggleItem(type, name, display = "default") { switch (type) { case "id": - let item = document.getElementById(name); - if (item.style.display == "flex") { + + // 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 = "flex"; + 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++) { @@ -161,4 +281,19 @@ function updateExtras() { 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"; + } } \ No newline at end of file diff --git a/iflpanel/tahta/assets/scss/main.scss b/iflpanel/tahta/assets/scss/main.scss index 87c4cb8..4df982e 100644 --- a/iflpanel/tahta/assets/scss/main.scss +++ b/iflpanel/tahta/assets/scss/main.scss @@ -65,10 +65,23 @@ section { } } - .settings-box { + .toolbox { min-width: 20vw; margin-left: auto; text-align: right; + display: block; + + button { + height: 30px; + width: 30px; + line-height: 20px; + } + } + + .settings-box { + min-width: min-content; + margin-left: 0; + text-align: right; button { height: 30px; @@ -87,7 +100,8 @@ section { form { display: flex; flex-direction: column; - position: relative; + position: absolute; + min-width: 10vw; background-color: grey; .cell { diff --git a/iflpanel/tahta/index.html b/iflpanel/tahta/index.html index d85f838..1c5ef8a 100644 --- a/iflpanel/tahta/index.html +++ b/iflpanel/tahta/index.html @@ -31,15 +31,23 @@

  👈 - Geliştirme sürecine destek verin
      (Sıradaki: )

+ Geliştirme sürecine destek verin
      (Sıradaki: )

+
+

12.00

-
+
+
+
+
+
@@ -58,14 +66,30 @@
- + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
-
+
@@ -185,8 +209,8 @@ } } let aka = publicjson[i][goalAmount][0]; - document.getElementById("sirada-yapilacaklar").innerHTML = aka.split("- ")[1]; - + document.getElementById("sirada-yapilacaklar").innerHTML = aka.split("- ")[1]; + }) .catch(err => { throw err