Title: [289126] trunk/Websites/webkit.org
- Revision
- 289126
- Author
- n...@apple.com
- Date
- 2022-02-04 10:23:10 -0800 (Fri, 04 Feb 2022)
Log Message
Add <dialog> element demos for blog post
https://bugs.webkit.org/show_bug.cgi?id=236143
Reviewed by Simon Fraser.
* demos/dialog-element/confirmation-dialog-basic.html: Added.
* demos/dialog-element/confirmation-dialog-form.html: Added.
* demos/dialog-element/dark-theme.css: Added.
(body):
(@media (prefers-color-scheme: dark) dialog):
* demos/dialog-element/styled-dialog.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/Websites/webkit.org/ChangeLog (289125 => 289126)
--- trunk/Websites/webkit.org/ChangeLog 2022-02-04 18:21:16 UTC (rev 289125)
+++ trunk/Websites/webkit.org/ChangeLog 2022-02-04 18:23:10 UTC (rev 289126)
@@ -1,3 +1,17 @@
+2022-02-04 Tim Nguyen <n...@apple.com>
+
+ Add <dialog> element demos for blog post
+ https://bugs.webkit.org/show_bug.cgi?id=236143
+
+ Reviewed by Simon Fraser.
+
+ * demos/dialog-element/confirmation-dialog-basic.html: Added.
+ * demos/dialog-element/confirmation-dialog-form.html: Added.
+ * demos/dialog-element/dark-theme.css: Added.
+ (body):
+ (@media (prefers-color-scheme: dark) dialog):
+ * demos/dialog-element/styled-dialog.html: Added.
+
2022-02-02 Jon Davis <j...@apple.com>
Improve color contrast of dark mode syntax highlighting
Added: trunk/Websites/webkit.org/demos/dialog-element/confirmation-dialog-basic.html (0 => 289126)
--- trunk/Websites/webkit.org/demos/dialog-element/confirmation-dialog-basic.html (rev 0)
+++ trunk/Websites/webkit.org/demos/dialog-element/confirmation-dialog-basic.html 2022-02-04 18:23:10 UTC (rev 289126)
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href=""
+
+<dialog id="confirmation-dialog">
+ <h1>Do you want to delete everything?</h1>
+ <p>You will lose all your data.</p>
+ <button id="cancel-delete">Cancel</button>
+ <button id="confirm-delete">Delete!</button>
+</dialog>
+<button id="delete">Delete everything</button>
+<p id="result"></p>
+<script>
+let dialog = document.getElementById("confirmation-dialog");
+let result = document.getElementById("result");
+
+document.getElementById("delete").addEventListener("click", function() {
+ dialog.showModal();
+});
+
+document.getElementById("cancel-delete").addEventListener("click", function() {
+ dialog.close();
+ result.textContent = "Canceled!";
+});
+document.getElementById("confirm-delete").addEventListener("click", function() {
+ dialog.close();
+ result.textContent = "Deleted!";
+});
+</script>
Added: trunk/Websites/webkit.org/demos/dialog-element/confirmation-dialog-form.html (0 => 289126)
--- trunk/Websites/webkit.org/demos/dialog-element/confirmation-dialog-form.html (rev 0)
+++ trunk/Websites/webkit.org/demos/dialog-element/confirmation-dialog-form.html 2022-02-04 18:23:10 UTC (rev 289126)
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href=""
+
+<dialog id="confirmation-dialog">
+ <form method="dialog">
+ <h1>Do you want to delete everything?</h1>
+ <p>You will lose all your data.</p>
+ <button type="submit" value="Canceled!">Cancel</button>
+ <button type="submit" value="Deleted!">Delete!</button>
+ </form>
+</dialog>
+
+<button id="delete">Delete everything</button>
+<p id="result"></p>
+
+<script>
+let dialog = document.getElementById("confirmation-dialog");
+
+document.getElementById("delete").addEventListener("click", function() {
+ dialog.showModal();
+});
+
+dialog.addEventListener("close", function() {
+ document.getElementById("result").textContent = dialog.returnValue;
+});
+</script>
Added: trunk/Websites/webkit.org/demos/dialog-element/dark-theme.css (0 => 289126)
--- trunk/Websites/webkit.org/demos/dialog-element/dark-theme.css (rev 0)
+++ trunk/Websites/webkit.org/demos/dialog-element/dark-theme.css 2022-02-04 18:23:10 UTC (rev 289126)
@@ -0,0 +1,10 @@
+body {
+ color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+ dialog {
+ background-color: #313231;
+ color: #d7d7d8;
+ }
+}
Added: trunk/Websites/webkit.org/demos/dialog-element/styled-dialog.html (0 => 289126)
--- trunk/Websites/webkit.org/demos/dialog-element/styled-dialog.html (rev 0)
+++ trunk/Websites/webkit.org/demos/dialog-element/styled-dialog.html 2022-02-04 18:23:10 UTC (rev 289126)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href=""
+
+<dialog>
+ <h1>This is a pretty dialog</h1>
+ <p>The backdrop animates!</p>
+</dialog>
+
+<button _onclick_="document.querySelector('dialog').showModal()">Show the dialog</button>
+
+<style>
+dialog {
+ box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+ border: none;
+ border-radius: 10px;
+}
+
+dialog::backdrop {
+ background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4));
+ animation: fade-in 1s;
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+</style>
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
