Added Feature Hide Whole Weather Section to give more customization (#…

…535) * Added Feature hideWholeWeatherSection to give more customization * Added Feature and api call as per req only * fix * Update weather.js * inactive --------- Co-authored-by: Viral Sachde <[email protected]> Co-authored-by: Prem Kumar <[email protected]>
XengShi · Feb 18, 2025 · f181c76 · f181c76
1 parent 8750318
commit f181c76
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -604,7 +604,7 @@ <h3 id="bookmarkViewAs">View as</h3>
 
         <div class="rightDiv">
             <!-- ---weather stuff--------- -->
-            <div class="topDiv">
+            <div class="topDiv" id="hideWeather">
                 <div class="lrectangle bgLightTint">
                     <div id="conditionText">Hello! How are you today?</div>
                     <div class="cconnt">
@@ -641,7 +641,6 @@ <h3 id="bookmarkViewAs">View as</h3>
 
                 <!-- -----rAndakar-------- -->
                 <div class="rAndakar">
-                    <!-- <img src="./svgs/andakar.svg" alt=""> this is below svg -->
                     <svg fill="none" height="100%" viewBox="0 0 288 288" width="100%"
                         xmlns="http://www.w3.org/2000/svg">
                         <rect class="bgLightTint" fill="#E2EEFF" height="304.742" rx="123.401"
@@ -1144,6 +1143,32 @@ <h1>Material You NewTab</h1>
                         </div>
                         <!-- ---🟡--- -->
                         <div class="ttcont">
+                            <div class="texts">
+                                <div class="bigText" id="hideWeatherTitle">Hide Weather</div>
+                                <div class="infoText" id="hideWeatherInfo">Disable the weather widgets
+                                </div>
+                            </div>
+
+                            <label class="switch">
+                                <input id="hideWeatherCheckbox" type="checkbox">
+                                <span class="toggle"></span>
+                            </label>
+                        </div>
+
+                        <div class="ttcont weather">
+                            <div class="texts">
+                                <div class="bigText" id="hideWeatherBox">Hide Weather Card</div>
+                                <div class="infoText" id="hideWeatherBoxInfo">
+                                    Only show temperature on mobile
+                                </div>
+                            </div>
+                            <label class="switch">
+                                <input id="hideWeatherCard" type="checkbox">
+                                <span class="toggle"></span>
+                            </label>
+                        </div>
+
+                        <div class="ttcont weather">
                             <div class="texts">
                                 <div class="bigText" id="fahrenheitCelsiusCheckbox">Switch to Fahrenheit</div>
                                 <div class="infoText" id="fahrenheitCelsiusText">Refresh the page to apply changes
@@ -1193,19 +1218,6 @@ <h1>Material You NewTab</h1>
                             </label>
                         </div>
 
-                        <div class="ttcont">
-                            <div class="texts">
-                                <div class="bigText" id="hideWeatherBox">Hide Weather Card</div>
-                                <div class="infoText" id="hideWeatherBoxInfo">
-                                    Only show temperature on mobile
-                                </div>
-                            </div>
-                            <label class="switch">
-                                <input id="hideWeatherCheckbox" type="checkbox">
-                                <span class="toggle"></span>
-                            </label>
-                        </div>
-
                         <!-- ---🟡--- -->
                         <div class="ttcont">
                             <div class="texts">
@@ -1245,7 +1257,7 @@ <h1>Material You NewTab</h1>
                             </div>
                         </div>
 
-                        <div class="ttcont unflex" style="margin-top: 95px;">
+                        <div class="ttcont unflex weather" style="margin-top: 95px;">
                             <div class="texts">
                                 <div class="bigText" id="UserLocText">Enter your Location</div>
                                 <div class="infoText" id="UserLocSubtext">If the weather location isn't correct
@@ -1259,7 +1271,7 @@ <h1>Material You NewTab</h1>
                             </div>
                         </div>
 
-                        <div class="ttcont unflex" style="margin-top: 110px;">
+                        <div class="ttcont unflex weather" style="margin-top: 110px;">
                             <div class="texts">
                                 <div class="bigText" id="WeatherApiText">Enter your WeatherAPI key</div>
                                 <div class="infoText" id="WeatherApiSubtext">If the weather functionality isn't working

diff --git a/locales/en.js b/locales/en.js
@@ -42,6 +42,12 @@ const en = {
     "userTextInfo": "Show custom text below the clock",
     "fahrenheitCelsiusCheckbox": "Switch to Fahrenheit",
     "fahrenheitCelsiusText": "Refresh the page to apply changes",
+    "hideWeatherTitle": "Hide Weather",
+    "hideWeatherInfo": "Disable the weather widgets",
+    "hideWeatherBox": "Hide Weather Card",    // Toggle for mobile devices only
+    "hideWeatherBoxInfo": "Show only temperature pill",
+
+    // Search
     "micIconTitle": "Hide Microphone Icon",
     "micIconInfo": "If voice typing is not working",
     "hideSearchWith": "Hide Search Engines",
@@ -70,8 +76,6 @@ const en = {
     "userAPI": "Your weatherAPI key",
     "LearnMoreButton": "Learn more",
     "saveAPI": "Save",
-    "hideWeatherBox": "Hide Weather Card",    // Toggle for mobile devices only
-    "hideWeatherBoxInfo": "Show only temperature pill",
 
     // Body Items
     // Calendar

diff --git a/scripts/languages.js b/scripts/languages.js
@@ -101,6 +101,10 @@ function applyLanguage(lang) {
         'todoListInfo',
         'fahrenheitCelsiusCheckbox',
         'fahrenheitCelsiusText',
+        'hideWeatherTitle',
+        'hideWeatherInfo',
+        'hideWeatherBox',
+        'hideWeatherBoxInfo',
         'micIconTitle',
         'micIconInfo',
         'hideSearchWith',
@@ -127,8 +131,6 @@ function applyLanguage(lang) {
         'saveLoc',
         'WeatherApiText',
         'WeatherApiSubtext',
-        'hideWeatherBox',
-        'hideWeatherBoxInfo',
         'LearnMoreButton',
         'saveAPI',
         'conditionText',

diff --git a/scripts/weather.js b/scripts/weather.js
@@ -6,7 +6,48 @@
  * If not, see <https://www.gnu.org/licenses/>.
  */
 
-document.addEventListener("DOMContentLoaded", async () => {
+document.addEventListener("DOMContentLoaded", function () {
+    const hideWeather = document.getElementById("hideWeather");
+    const hideWeatherCheckbox = document.getElementById("hideWeatherCheckbox");
+
+    // Select all elements that need to be disabled
+    const elementsToDisable = document.querySelectorAll(".weather");
+
+    // Retrieve saved state from localStorage (default: false if null)
+    const savedState = localStorage.getItem("hideWeatherVisible") === "true";
+    hideWeatherCheckbox.checked = savedState;
+    hideWeather.style.opacity = savedState ? "0" : "1";
+
+    // Function to toggle the 'inactive' class
+    function toggleInactiveState(isInactive) {
+        elementsToDisable.forEach(element => {
+            element.classList.toggle("inactive", isInactive);
+        });
+    }
+
+    // Apply initial state
+    toggleInactiveState(savedState);
+
+    // Show weather widgets only if toggle is unchecked
+    if (!savedState) {
+        getWeatherData();
+    }
+
+    hideWeatherCheckbox.addEventListener("change", () => {
+        const isChecked = hideWeatherCheckbox.checked;
+        hideWeather.style.opacity = isChecked ? "0" : "1";
+        localStorage.setItem("hideWeatherVisible", isChecked);
+
+        // Apply inactive class to disable elements visually
+        toggleInactiveState(isChecked);
+
+        if (!isChecked) {
+            getWeatherData();
+        }
+    });
+});
+
+async function getWeatherData() {
     // Cache DOM elements
     const userAPIInput = document.getElementById("userAPI");
     const userLocInput = document.getElementById("userLoc");
@@ -272,22 +313,22 @@ document.addEventListener("DOMContentLoaded", async () => {
         fetchWeather(userLocation);
         location.reload();
     });
-});
+}
 
 
 // Save and load toggle state
 document.addEventListener("DOMContentLoaded", function () {
-    const hideWeatherCheckbox = document.getElementById("hideWeatherCheckbox");
+    const hideWeatherCard = document.getElementById("hideWeatherCard");
     const fahrenheitCheckbox = document.getElementById("fahrenheitCheckbox");
 
-    hideWeatherCheckbox.addEventListener("change", function () {
-        saveCheckboxState("hideWeatherCheckboxState", hideWeatherCheckbox);
+    hideWeatherCard.addEventListener("change", function () {
+        saveCheckboxState("hideWeatherCardState", hideWeatherCard);
     });
 
     fahrenheitCheckbox.addEventListener("change", function () {
         saveCheckboxState("fahrenheitCheckboxState", fahrenheitCheckbox);
     });
 
-    loadCheckboxState("hideWeatherCheckboxState", hideWeatherCheckbox);
+    loadCheckboxState("hideWeatherCardState", hideWeatherCard);
     loadCheckboxState("fahrenheitCheckboxState", fahrenheitCheckbox);
 });
diff --git a/style.css b/style.css
@@ -3280,7 +3280,7 @@ input:checked + .toggle:before {
 			scale: 0.8;
 		}
 	}
-	.centerDiv:has(~ .menuBar #hideWeatherCheckbox:checked) .topDiv .lrectangle {
+	.centerDiv:has(~ .menuBar #hideWeatherCard:checked) .topDiv .lrectangle {
 		display: none;
 	}
 	.centerDiv {