added enhancement in dialog project(HTML/JS)

sadanandpai · Oct 9, 2024 · 189fbed · 189fbed
1 parent 0f4da98
commit 189fbed
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 28 deletions.
diff --git a/apps/css/src/challenges/dialog/index.css b/apps/css/src/challenges/dialog/index.css
@@ -1,30 +1,65 @@
+:root {
+  --backdrop-opacity: 0.5;
+}
+
 button {
-  background-color: white;
   border: 1px solid black;
   border-radius: 2px;
-  padding: 3px 7px;
+  padding: 0.5rem;
   text-align: center;
+  cursor: pointer;
+  margin-top: 1rem;
 }
 
-button:hover {
-  cursor: pointer;
-  background-color: aqua;
+header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+header > button {
+  background-color: transparent;
+  border: 1px solid lightgray;
+  margin-top: 0;
+}
+
+footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2rem;
 }
 
 dialog {
-  border: 1px solid black;
-  border-radius: 3px;
-  padding: 10px;
-  max-width: 325px;
-  width: 80%;
+  border: none;
+  order: 1px solid gray;
+  box-shadow: 0 0 10px #00000080;
+  max-width: 80%;
+  padding: 0;
+}
+
+dialog::backdrop {
+  background-color: #000;
+  opacity: var(--backdrop-opacity);
 }
 
-h4 {
+#dialogContainer {
+  padding: 1rem;
+}
+
+h2 {
   padding: 0px;
   margin: 0px;
-  border-bottom: 1px solid black;
 }
 
 .dialogContent {
-  padding: 10px;
+  padding: 1rem 0;
+}
+
+.option {
+  display: flex;
+  gap: 1rem;
+  font-size: larger;
+  align-items: center;
+  justify-content: center;
+  margin: 1rem 0px;
 }
diff --git a/apps/css/src/challenges/dialog/index.html b/apps/css/src/challenges/dialog/index.html
@@ -8,21 +8,42 @@
   <body>
     <div class="container text-center">
       <dialog id="dialogPopup">
-        <!-- Dialog Head -->
-        <div><h4>Header</h4></div>
-        <!-- Dialog Body -->
-        <div>
+        <section id="dialogContainer">
+          <!-- Dialog Header -->
+          <header>
+            <h2>Modal Heading</h2>
+            <button class="closeDialog" id="closeIcon">&#x2715;</button>
+          </header>
+          <!-- Dialog Body -->
           <div class="dialogContent">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus reprehenderit tempora
-            exercitationem, hic vel iure deserunt? Tempore corporis eveniet architecto qui aliquid
-            quam quis, voluptate
+            This is modal content. You can put any content here. This has a groovy backdrop!
+            <br />
+            You can also close this modal by clicking outside of it or pressing the escape key
           </div>
-          <button id="closeDialog">Close Dialog</button>
-        </div>
+          <footer>
+            <button class="closeDialog">Close</button>
+          </footer>
+        </section>
       </dialog>
-      <p>
-        <button id="showDialog">Show Dialog</button>
-      </p>
+      <div>
+        <div class="option">
+          <label for="closeOnOutsideClick">Close dialog on outside click</label>
+          <input type="checkbox" class="optionCheckbox" checked id="closeOnOutsideClick" />
+        </div>
+        <div class="option">
+          <label for="closeOnEscape">Close dialog on escape</label>
+          <input type="checkbox" class="optionCheckbox" checked id="closeOnEscape" />
+        </div>
+        <div class="option">
+          <label for="hasCloseButton">Show close icon</label>
+          <input type="checkbox" class="optionCheckbox" checked id="hasCloseButton" />
+        </div>
+        <div class="option">
+          <label for="hasBackdrop">Show backdrop</label>
+          <input type="checkbox" class="optionCheckbox" checked id="hasBackdrop" />
+        </div>
+      </div>
+      <button id="showDialog">Show Dialog</button>
     </div>
   </body>
 </html>
diff --git a/apps/css/src/challenges/dialog/index.js b/apps/css/src/challenges/dialog/index.js
@@ -1,11 +1,75 @@
 const showButton = document.getElementById('showDialog');
 const dialogPopup = document.getElementById('dialogPopup');
-const closeButton = document.getElementById('closeDialog');
+const closeButtons = document.querySelectorAll('.closeDialog');
+
+// checkbox elements
+const closeOnOutsideClick = document.getElementById('closeOnOutsideClick');
+const closeOnEscape = document.getElementById('closeOnEscape');
+const hasCloseButton = document.getElementById('hasCloseButton');
+const hasBackdrop = document.getElementById('hasBackdrop');
+
+const closeIcon = document.getElementById('closeIcon');
 
 showButton.addEventListener('click', () => {
   dialogPopup.showModal();
 });
 
-closeButton.addEventListener('click', () => {
-  dialogPopup.close('');
+closeButtons.forEach((event) =>
+  event.addEventListener('click', () => {
+    dialogPopup.close();
+  })
+);
+
+// closeOnOutsideClick
+checkCloseOnOutside();
+function checkCloseOnOutside() {
+  dialogPopup.addEventListener('click', closeOnOutsideClickListener);
+}
+function closeOnOutsideClickListener(event) {
+  if (event.target.nodeName === 'DIALOG') {
+    dialogPopup.close();
+  }
+}
+closeOnOutsideClick.addEventListener('click', () => {
+  if (closeOnOutsideClick.checked) {
+    checkCloseOnOutside();
+  } else {
+    dialogPopup.removeEventListener('click', closeOnOutsideClickListener);
+  }
+});
+
+// closeOnEscape
+checkCloseOnEscape();
+function checkCloseOnEscape(event) {
+  dialogPopup.removeEventListener('keydown', closeOnEscapeListener);
+}
+function closeOnEscapeListener(event) {
+  if (event.key === 'Escape') {
+    event.preventDefault();
+  }
+}
+closeOnEscape.addEventListener('click', () => {
+  if (closeOnEscape.checked) {
+    checkCloseOnEscape();
+  } else {
+    dialogPopup.addEventListener('keydown', closeOnEscapeListener);
+  }
+});
+
+// hasCloseButton
+hasCloseButton.addEventListener('click', () => {
+  if (hasCloseButton.checked) {
+    closeIcon.style.display = 'block';
+  } else {
+    closeIcon.style.display = 'none';
+  }
+});
+
+// hasBackdrop
+hasBackdrop.addEventListener('click', () => {
+  if (hasBackdrop.checked) {
+    dialogPopup.style.setProperty('--backdrop-opacity', 0.5);
+  } else {
+    dialogPopup.style.setProperty('--backdrop-opacity', 0);
+  }
 });