From 9a545eb6633b293822771f6ae5c6530780513142 Mon Sep 17 00:00:00 2001 From: Mango0x45 Date: Fri, 14 May 2021 13:39:56 +0200 Subject: Add a settings page and make Jerrin happy --- index.html | 45 +++++++++++++++++++++++++--------- main.js | 17 ------------- settings.html | 61 ++++++++++++++++++++++++++++++++++++++++++++++ settings.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 20 ++++++++++++--- 5 files changed, 190 insertions(+), 31 deletions(-) create mode 100644 settings.html create mode 100644 settings.js diff --git a/index.html b/index.html index 2c7d192..cfaefdc 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,6 @@ - + YouTube Frame Timer @@ -12,19 +12,39 @@ - - - - - - - + + + +

Speedrun Retimer without Ads

- + Source code (GitHub)

Video Framerate

Right click the YouTube video and select “Stats for nerds.” The third line is “Current / Optimal Res” - find the two numbers after the @ and enter them for framerate. @@ -34,7 +54,7 @@

Video Endpoints

Find the starting point (you can use the , and . keys to find the exact frame). Right click the video and select “Copy debug info” and paste it for starting frame. Repeat for ending frame. @@ -56,6 +76,9 @@ + + + diff --git a/main.js b/main.js index ae7f1d3..3cf8d05 100644 --- a/main.js +++ b/main.js @@ -100,20 +100,3 @@ function parse_time(event) if (document.getElementById("startobj").value && document.getElementById("endobj").value) compute(); } - -/* Change the users preferred theme. */ -function change_theme() -{ - const theme_switch = document.getElementById("page_theme"); - const want = theme_switch.checked ? "dark" : "light"; - - document.documentElement.setAttribute("theme", want); - localStorage.setItem("theme", want); -} - -/* Automatically select the users preferred theme */ -const theme = localStorage.getItem("theme"); -if (theme) { - document.documentElement.setAttribute("theme", theme); - document.getElementById("page_theme").checked = (theme == "dark"); -} diff --git a/settings.html b/settings.html new file mode 100644 index 0000000..c4eaced --- /dev/null +++ b/settings.html @@ -0,0 +1,61 @@ + + + + + + YouTube Frame Timer + + + + + + + + + + + + +

Page Settings

Dark Theme

+ + + + +
+
+

Remove Titles

+ + + + +
+
+

Remove Text

+ + + + + + + + + + diff --git a/settings.js b/settings.js new file mode 100644 index 0000000..a82281d --- /dev/null +++ b/settings.js @@ -0,0 +1,78 @@ +/* Set all the settings any time someone loads a page */ +function set_settings() +{ + change_theme(); + remove_titles(); + remove_text(); +} + +/* Initialize the settings page by flipping the switches and such */ +function settings_init() +{ + document.getElementById("page_theme").checked = (localStorage.getItem("theme") === "dark"); + document.getElementById("page_titles").checked = (localStorage.getItem("remove_titles") === "true"); + document.getElementById("page_text").checked = (localStorage.getItem("remove_text") === "true"); +} + +/* Change the users preferred theme. */ +function change_theme() +{ + let theme; + try { + /* Settings page */ + theme = (document.getElementById("page_theme").checked) ? "dark" : "light"; + } catch { + /* Index page */ + theme = (localStorage.getItem("theme") === "dark") ? "dark" : "light"; + } + + document.documentElement.setAttribute("theme", theme); + localStorage.setItem("theme", theme); +} + +/* Remove unnecessary titles */ +function remove_titles() +{ + let checked; + try { + /* Settings page */ + checked = document.getElementById("page_titles").checked; + } catch { + /* Index page */ + if (localStorage.getItem("remove_titles") === "true") + checked = true; + else + checked = false; + } + + if (checked && !window.location.href.endsWith("settings.html")) + for (let element of document.getElementsByTagName("h3")) + element.classList.add("hidden"); + localStorage.setItem("remove_titles", checked.toString()); +} + +/* Remove unnecessary text */ +function remove_text() +{ + let checked; + try { + /* Settings page */ + checked = document.getElementById("page_text").checked; + } catch { + /* Index page */ + if (localStorage.getItem("remove_text") === "true") + checked = true; + else + checked = false; + } + + if (checked) + for (let element of document.getElementsByClassName("toggleable")) + element.classList.add("hidden"); + localStorage.setItem("remove_text", checked.toString()); +} + +/* Conform to the users preferences */ +if (window.location.href.endsWith("settings.html")) + settings_init(); +set_settings(); diff --git a/style.css b/style.css index 48aa4b0..59f1e2a 100644 --- a/style.css +++ b/style.css @@ -78,8 +78,6 @@ a { background-color: transparent; color: var(--url-color); text-decoration: underline; - text-decoration-skip: ink; - -webkit-text-decoration-skip: objects; } a:focus, a:hover { @@ -116,11 +114,27 @@ button, code, input, textarea { margin: 0; } -.switch { +#settings, #back { display: inline-flex; + fill: var(--text-color); float: right; height: 34px; position: relative; + width: 34px; +} + +.options { + margin: 0; +} + +.hidden { + display: none; +} + +.switch { + float: left; + height: 34px; + position: relative; width: 60px; } -- cgit v1.2.3