reset to defaults button

pastagang · Jan 1, 2025 · 6db7642 · 6db7642
1 parent f2d5042
commit 6db7642
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -104,51 +104,67 @@ <h1 style="margin-bottom: 0px">nudelsalat</h1>
       <dialog id="settings-dialog">
         <h1>Settings</h1>
         <p>This is where settings can go!</p>
-        <form method="dialog">
-          <p>
-            <label for="settings-sample-checkbox">
-              <input type="checkbox" id="settings-sample-checkbox" />
-              Sample toggle
-            </label>
-          </p>
+        <p>
+          <label for="settings-sample-checkbox">
+            <input type="checkbox" id="settings-sample-checkbox" />
+            Sample toggle
+          </label>
+        </p>
+        <br />
+        <p>
+          <label for="settings-sample-text">
+            <span>Sample text input:</span>
+            <input type="text" id="settings-sample-text" />
+          </label>
           <br />
-          <p>
-            <label for="settings-sample-text">
-              <span>Sample text input:</span>
-              <input type="text" id="settings-sample-text" />
-            </label>
-            <br />
-          </p>
-          <p></p>
+        </p>
+        <p></p>
 
-          <h3>Sample option input</h3>
-          <!-- radio buttons -->
-          <p>
-            <label>
-              <input type="radio" name="settings-sample-radio" value="1" />
-              Option 1
-            </label>
-          </p>
-          <p>
-            <label>
-              <input type="radio" name="settings-sample-radio" value="2" />
-              Option 2
-            </label>
-          </p>
-          <p>
-            <label>
-              <input type="radio" name="settings-sample-radio" value="3" />
-              Option 3
-            </label>
-          </p>
+        <h3>Sample option input</h3>
+        <!-- radio buttons -->
+        <p>
+          <label>
+            <input type="radio" name="settings-sample-radio" value="1" />
+            Option 1
+          </label>
+        </p>
+        <p>
+          <label>
+            <input type="radio" name="settings-sample-radio" value="2" />
+            Option 2
+          </label>
+        </p>
+        <p>
+          <label>
+            <input type="radio" name="settings-sample-radio" value="3" />
+            Option 3
+          </label>
+        </p>
 
-          <br />
+        <br />
+        <p><button id="settings-reset-button">Reset to defaults</button></p>
+        <form method="dialog">
           <button>Done</button>
         </form>
       </dialog>
     </div>
 
+    <div class="dialog-container">
+      <dialog id="you-sure-dialog">
+        <h1>Are you sure?</h1>
+        <p>
+          Are you sure you want to
+          <span id="you-sure-action-description">do that</span>???
+        </p>
+        <p>
+          <button id="you-sure-yes-button">Yes</button>
+          <button id="you-sure-no-button">Cancel</button>
+        </p>
+      </dialog>
+    </div>
+
     <script type="module" src="./src/main.js"></script>
     <script type="module" src="./src/settings.js"></script>
+    <script type="module" src="./src/confirm.js"></script>
   </body>
 </html>
diff --git a/src/confirm.js b/src/confirm.js
@@ -0,0 +1,18 @@
+const youSureDialog = document.querySelector("#you-sure-dialog");
+const yesButton = document.querySelector("#you-sure-yes-button");
+const noButton = document.querySelector("#you-sure-no-button");
+
+export async function nudelConfirm() {
+  youSureDialog.showModal();
+
+  return new Promise((resolve) => {
+    yesButton.onclick = () => {
+      youSureDialog.close();
+      resolve(true);
+    };
+    noButton.onclick = () => {
+      youSureDialog.close();
+      resolve(false);
+    };
+  });
+}
diff --git a/src/settings.js b/src/settings.js
@@ -1,3 +1,5 @@
+import { nudelConfirm } from "./confirm.js";
+
 const settingsButton = document.querySelector("#settings-button");
 const settingsDialog = document.querySelector("#settings-dialog");
 
@@ -34,6 +36,19 @@ function saveSettingsToLocalStorage(settings) {
   localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(settings));
 }
 
+function setSettings(settings) {
+  saveSettingsToLocalStorage(settings);
+  applySettingsToDom(settings);
+}
+
+const resetButton = document.querySelector("#settings-reset-button");
+resetButton.addEventListener("click", async () => {
+  const response = await nudelConfirm();
+  if (response) {
+    setSettings(defaultSettings);
+  }
+});
+
 const sampleTextInput = document.querySelector("#settings-sample-text");
 const sampleToggleInput = document.querySelector("#settings-sample-checkbox");
 const sampleOptionInputs = document.querySelectorAll(

diff --git a/src/style.css b/src/style.css
@@ -145,6 +145,12 @@ nav {
 dialog {
   pointer-events: all;
   max-width: 400px;
+  border: 3px solid black;
+  outline: 1px solid white;
+}
+
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.25);
 }
 
 dialog button {