Mercurial Hosting > chat
changeset 20:dade6a560494
add dialogs
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Mon, 04 Nov 2024 21:37:58 -0700 |
| parents | 435f474f07c7 |
| children | 5a56297713a3 |
| files | src/account.html.luan src/chat.html.luan src/chat.js src/site.css src/site.js |
| diffstat | 5 files changed, 56 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/src/account.html.luan Mon Nov 04 19:23:38 2024 -0700 +++ b/src/account.html.luan Mon Nov 04 21:37:58 2024 -0700 @@ -20,6 +20,19 @@ <html> <head> <% head() %> + <script> + 'use strict'; + + function deleteUser() { + let dialog = document.querySelector('dialog[delete_user]'); + openModal(dialog); + } + + function doDeleteUser(el) { + closeModal(el); + ajax('delete_user.js'); + } + </script> </head> <body> <% header() %> @@ -27,9 +40,17 @@ <h1>Your Account</h1> <p><a href="chat.html">Your Chats</a></p> <p>Your URL: <%= base_url() %>/chat.html?with=<%=user.email%></p> - <p><a href="javascript:ajax('delete_user.js')">Delete account</a></p> + <p><a href="javascript:deleteUser()">Delete account</a></p> <p><a href="javascript:logout()">Logout</a></p> </div> + <dialog delete_user> + <h2>Delete Account</h2> + <p>Are you sure that you want to delete your account?</p> + <div buttons> + <button cancel onclick="closeModal(this)">Cancel</button> + <button go onclick="doDeleteUser(this)">Delete</button> + </div> + </dialog> </body> </html> <%
--- a/src/chat.html.luan Mon Nov 04 19:23:38 2024 -0700 +++ b/src/chat.html.luan Mon Nov 04 21:37:58 2024 -0700 @@ -104,6 +104,14 @@ </div> <div posts></div> </div> + <dialog delete_chat> + <h2>Delete Chat</h2> + <p>Are you sure that you want to delete this chat?</p> + <div buttons> + <button cancel onclick="closeModal(this)">Cancel</button> + <button go onclick="doDeleteChat(this)">Delete</button> + </div> + </dialog> <script> <% if selected ~= nil then
--- a/src/chat.js Mon Nov 04 19:23:38 2024 -0700 +++ b/src/chat.js Mon Nov 04 21:37:58 2024 -0700 @@ -75,6 +75,12 @@ } function deleteChat() { + let dialog = document.querySelector('dialog[delete_chat]'); + openModal(dialog); +} + +function doDeleteChat(el) { + closeModal(el); ajax(`delete_chat.js?chat=${currentChatId}`); }
--- a/src/site.css Mon Nov 04 19:23:38 2024 -0700 +++ b/src/site.css Mon Nov 04 21:37:58 2024 -0700 @@ -39,3 +39,7 @@ margin-top: 2px; margin-bottom: 4px; } + +dialog div[buttons] { + text-align: right; +}
--- a/src/site.js Mon Nov 04 19:23:38 2024 -0700 +++ b/src/site.js Mon Nov 04 21:37:58 2024 -0700 @@ -74,3 +74,19 @@ document.cookie = 'password=; Max-Age=0; path=/;'; location = '/'; } + +function openModal(dialog) { + //dialog.close(); + dialog.showModal(); + //dialog.scrollTop = 0; +} + +function getEnclosingDialog(el) { + while( el.nodeName !== 'DIALOG' ) + el = el.parentNode; + return el; +} + +function closeModal(el) { + getEnclosingDialog(el).close(); +}