From 189fbed06c11aee85c6b27dd4aa61ac6276767e8 Mon Sep 17 00:00:00 2001 From: "Katta, Sahan" Date: Wed, 9 Oct 2024 14:58:20 +0530 Subject: [PATCH] added enhancement in dialog project(HTML/JS) --- apps/css/src/challenges/dialog/index.css | 61 +++++++++++++++----- apps/css/src/challenges/dialog/index.html | 45 +++++++++++---- apps/css/src/challenges/dialog/index.js | 70 ++++++++++++++++++++++- 3 files changed, 148 insertions(+), 28 deletions(-) diff --git a/apps/css/src/challenges/dialog/index.css b/apps/css/src/challenges/dialog/index.css index 8bcf447f1..e3efce009 100644 --- 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 index 35eaaf684..e6c53138a 100644 --- a/apps/css/src/challenges/dialog/index.html +++ b/apps/css/src/challenges/dialog/index.html @@ -8,21 +8,42 @@
- -

Header

- -
+
+ +
+

Modal Heading

+ +
+
- 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! +
+ You can also close this modal by clicking outside of it or pressing the escape key
- -
+
+ +
+ -

- -

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
diff --git a/apps/css/src/challenges/dialog/index.js b/apps/css/src/challenges/dialog/index.js index 6de8d2f18..1c557c1e8 100644 --- 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); + } });