Progress Bar Options Display Toggle

- If user has progress bar is enabled checked it will display more options else it will be hidden

Author: programmingKyle

src/optionsHandler.js

@@ -16,18 +16,25 @@ async function optionsListeners(){
     const progressBarMinute_el = document.getElementById('progressBarMinute');
     const saveOptionsButton_el = document.getElementById('saveOptionsButton');
     const progressbarIsEnabled_el = document.getElementById('progressbarIsEnabled');
-
+    const progressBarInputsDiv_el = document.getElementById('progressBarInputsDiv');
+    
     progressbarIsEnabled_el.checked = optionsValues.progressBarSettings.isEnabled;
     progressBarSelect_el.value = optionsValues.progressBarSettings.interval;
     progressBarHour_el.value = optionsValues.progressBarSettings.hour;
     progressBarMinute_el.value = optionsValues.progressBarSettings.minute;
 
+    toggleProgressBarOptions(progressbarIsEnabled_el, progressBarInputsDiv_el)
+
     const required = [progressBarHour_el, progressBarMinute_el];
 
     optionsCloseButton_el.addEventListener('click', () => {
         overlayContainer_el.style.display = 'none';
     });
 
+    progressbarIsEnabled_el.addEventListener('click', () => {
+        toggleProgressBarOptions(progressbarIsEnabled_el, progressBarInputsDiv_el)
+    });
+
     for (const input of required){
         input.addEventListener('input', () => {
             if (input.value < 0){
@@ -65,6 +72,14 @@ async function optionsListeners(){
     });
 }
 
+function toggleProgressBarOptions(checkbox, div){
+    if (checkbox.checked){
+        div.style.display = 'grid';
+    } else {
+        div.style.display = 'none';
+    }
+}
+
 document.addEventListener('DOMContentLoaded', async () => {
     optionsValues = await api.optionsHandler({request: 'View'});
     await progressBar();

src/overlays.html

@@ -57,7 +57,7 @@ <h4>Progress Bar</h4>
       <input id="progressbarIsEnabled" type="checkbox">
       <h5>Is Enabled</h5>
     </div>
-    <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5px;">
+    <div id="progressBarInputsDiv" style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5px;">
       <h5>Interval</h5>
       <h5>Hours</h5>
       <h5>Minutes</h5>