From 9f41d1590808016da76b08d7f5295d699ade593a Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Fri, 10 Nov 2023 17:38:04 +0100 Subject: [PATCH] UI - Fixing issue where search box JS interfered with page render when logged out --- changedetectionio/static/js/toggle-theme.js | 80 +++++++++---------- .../static/styles/scss/parts/_love.scss | 8 +- 2 files changed, 44 insertions(+), 44 deletions(-) diff --git a/changedetectionio/static/js/toggle-theme.js b/changedetectionio/static/js/toggle-theme.js index 675aa56f..774729d0 100644 --- a/changedetectionio/static/js/toggle-theme.js +++ b/changedetectionio/static/js/toggle-theme.js @@ -3,50 +3,50 @@ * Toggles theme between light and dark mode. */ $(document).ready(function () { - const button = document.getElementById("toggle-light-mode"); + const button = document.getElementById("toggle-light-mode"); - button.onclick = () => { - const htmlElement = document.getElementsByTagName("html"); - const isDarkMode = htmlElement[0].dataset.darkmode === "true"; - htmlElement[0].dataset.darkmode = !isDarkMode; - setCookieValue(!isDarkMode); - }; + button.onclick = () => { + const htmlElement = document.getElementsByTagName("html"); + const isDarkMode = htmlElement[0].dataset.darkmode === "true"; + htmlElement[0].dataset.darkmode = !isDarkMode; + setCookieValue(!isDarkMode); + }; - const setCookieValue = (value) => { - document.cookie = `css_dark_mode=${value};max-age=31536000;path=/` - } + const setCookieValue = (value) => { + document.cookie = `css_dark_mode=${value};max-age=31536000;path=/` + } - // Search input box behaviour + // Search input box behaviour const toggle_search = document.getElementById("toggle-search"); - const search_q = document.getElementById("search-q"); - window.addEventListener('keydown', function (e) { - - if (e.altKey == true && e.keyCode == 83) - search_q.classList.toggle('expanded'); - search_q.focus(); - }); - - - search_q.onkeydown = (e) => { - var key = e.keyCode || e.which; - if (key === 13) { - document.searchForm.submit(); - } - }; - toggle_search.onclick = () => { - // Could be that they want to search something once text is in there - if (search_q.value.length) { - document.searchForm.submit(); - } else { - // If not.. - search_q.classList.toggle('expanded'); - search_q.focus(); + const search_q = document.getElementById("search-q"); + if(search_q) { + window.addEventListener('keydown', function (e) { + if (e.altKey == true && e.keyCode == 83) { + search_q.classList.toggle('expanded'); + search_q.focus(); + } + }); + + search_q.onkeydown = (e) => { + var key = e.keyCode || e.which; + if (key === 13) { + document.searchForm.submit(); + } + }; + toggle_search.onclick = () => { + // Could be that they want to search something once text is in there + if (search_q.value.length) { + document.searchForm.submit(); + } else { + // If not.. + search_q.classList.toggle('expanded'); + search_q.focus(); + } + }; } - }; - - $('#heart-us').click(function () { - $("#overlay").toggleClass('visible'); - heartpath.style.fill = document.getElementById("overlay").classList.contains("visible") ? '#ff0000' : 'var(--color-background)'; - }); + $('#heart-us').click(function () { + $("#overlay").toggleClass('visible'); + heartpath.style.fill = document.getElementById("overlay").classList.contains("visible") ? '#ff0000' : 'var(--color-background)'; + }); }); diff --git a/changedetectionio/static/styles/scss/parts/_love.scss b/changedetectionio/static/styles/scss/parts/_love.scss index ae693300..d2aad23d 100644 --- a/changedetectionio/static/styles/scss/parts/_love.scss +++ b/changedetectionio/static/styles/scss/parts/_love.scss @@ -31,8 +31,8 @@ #heartpath { &:hover { - fill: #ff0000 !important; - transition: all ease 0.3s !important; - } + fill: #ff0000 !important; transition: all ease 0.3s !important; -} \ No newline at end of file + } + transition: all ease 0.3s !important; +}