add HTMLDialogElement

This commit is contained in:
Karl Seguin
2025-11-21 08:55:39 +08:00
parent 302b9f9dd7
commit b9486e8935
6 changed files with 150 additions and 0 deletions

View File

@@ -1110,6 +1110,12 @@ pub fn createElement(self: *Page, ns_: ?[]const u8, name: []const u8, attribute_
attribute_iterator,
.{ ._proto = undefined },
),
asUint("dialog") => return self.createHtmlElementT(
Element.Html.Dialog,
namespace,
attribute_iterator,
.{ ._proto = undefined },
),
asUint("strong") => return self.createHtmlElementT(
Element.Html.Generic,
namespace,

View File

@@ -515,6 +515,7 @@ pub const JsApis = flattenTypes(&.{
@import("../webapi/element/html/BR.zig"),
@import("../webapi/element/html/Button.zig"),
@import("../webapi/element/html/Custom.zig"),
@import("../webapi/element/html/Dialog.zig"),
@import("../webapi/element/html/Div.zig"),
@import("../webapi/element/html/Form.zig"),
@import("../webapi/element/html/Generic.zig"),

View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<script src="../../testing.js"></script>
<!-- Dialog elements -->
<dialog id="dialog1">Dialog content</dialog>
<dialog id="dialog2" open>Open dialog</dialog>
<script id="open_initial">
testing.expectEqual(false, $('#dialog1').open)
testing.expectEqual(true, $('#dialog2').open)
</script>
<script id="open_set">
{
$('#dialog1').open = true
testing.expectEqual(true, $('#dialog1').open)
$('#dialog2').open = false
testing.expectEqual(false, $('#dialog2').open)
}
</script>
<script id="open_reflects_to_attribute">
{
const dialog = document.createElement('dialog')
testing.expectEqual(null, dialog.getAttribute('open'))
testing.expectFalse(dialog.outerHTML.includes('open'))
dialog.open = true
testing.expectEqual('', dialog.getAttribute('open'))
testing.expectTrue(dialog.outerHTML.includes('open'))
dialog.open = false
testing.expectEqual(null, dialog.getAttribute('open'))
testing.expectFalse(dialog.outerHTML.includes('open'))
}
</script>
<script id="returnValue_initial">
{
const dialog = document.createElement('dialog')
testing.expectEqual('', dialog.returnValue)
}
</script>
<script id="returnValue_set">
{
const dialog = document.createElement('dialog')
testing.expectEqual('', dialog.returnValue)
dialog.returnValue = 'success'
testing.expectEqual('success', dialog.returnValue)
testing.expectEqual('success', dialog.getAttribute('returnvalue'))
dialog.returnValue = 'cancel'
testing.expectEqual('cancel', dialog.returnValue)
testing.expectEqual('cancel', dialog.getAttribute('returnvalue'))
}
</script>
<script id="returnValue_reflects_to_attribute">
{
const dialog = document.createElement('dialog')
testing.expectEqual(null, dialog.getAttribute('returnvalue'))
dialog.returnValue = 'confirmed'
testing.expectEqual('confirmed', dialog.getAttribute('returnvalue'))
testing.expectTrue(dialog.outerHTML.includes('returnvalue="confirmed"'))
}
</script>
<script id="element_type">
{
const dialog = document.createElement('dialog')
testing.expectEqual('DIALOG', dialog.tagName)
testing.expectTrue(dialog instanceof HTMLDialogElement)
}
</script>

View File

@@ -129,6 +129,7 @@ pub fn getTagNameLower(self: *const Element) []const u8 {
.br => "br",
.button => "button",
.custom => |e| e._tag_name.str(),
.dialog => "dialog",
.div => "div",
.form => "form",
.generic => |e| e._tag_name.str(),
@@ -172,6 +173,7 @@ pub fn getTagNameSpec(self: *const Element, buf: []u8) []const u8 {
.br => "BR",
.button => "BUTTON",
.custom => |e| upperTagName(&e._tag_name, buf),
.dialog => "DIALOG",
.div => "DIV",
.form => "FORM",
.generic => |e| upperTagName(&e._tag_name, buf),
@@ -760,6 +762,7 @@ pub fn getTag(self: *const Element) Tag {
.form => .form,
.p => .p,
.custom => .custom,
.dialog => .dialog,
.iframe => .iframe,
.img => .img,
.br => .br,
@@ -800,6 +803,7 @@ pub const Tag = enum {
button,
circle,
custom,
dialog,
div,
ellipse,
em,

View File

@@ -42,6 +42,7 @@ pub const Custom = @import("html/Custom.zig");
pub const Script = @import("html/Script.zig");
pub const Anchor = @import("html/Anchor.zig");
pub const Button = @import("html/Button.zig");
pub const Dialog = @import("html/Dialog.zig");
pub const Form = @import("html/Form.zig");
pub const Heading = @import("html/Heading.zig");
pub const Unknown = @import("html/Unknown.zig");
@@ -70,6 +71,7 @@ pub const Type = union(enum) {
br: BR,
button: Button,
custom: *Custom,
dialog: Dialog,
div: Div,
form: Form,
generic: *Generic,
@@ -117,6 +119,7 @@ pub fn className(self: *const HtmlElement) []const u8 {
.form => "[object HTMLFormElement]",
.p => "[object HtmlParagraphElement]",
.custom => "[object CUSTOM-TODO]",
.dialog => "[object HTMLDialogElement]",
.img => "[object HTMLImageElement]",
.iframe => "[object HTMLIFrameElement]",
.br => "[object HTMLBRElement]",

View File

@@ -0,0 +1,58 @@
const js = @import("../../../js/js.zig");
const Page = @import("../../../Page.zig");
const Node = @import("../../Node.zig");
const Element = @import("../../Element.zig");
const HtmlElement = @import("../Html.zig");
const Dialog = @This();
_proto: *HtmlElement,
pub fn asElement(self: *Dialog) *Element {
return self._proto._proto;
}
pub fn asConstElement(self: *const Dialog) *const Element {
return self._proto._proto;
}
pub fn asNode(self: *Dialog) *Node {
return self.asElement().asNode();
}
pub fn getOpen(self: *const Dialog) bool {
return self.asConstElement().getAttributeSafe("open") != null;
}
pub fn setOpen(self: *Dialog, open: bool, page: *Page) !void {
if (open) {
try self.asElement().setAttributeSafe("open", "", page);
} else {
try self.asElement().removeAttribute("open", page);
}
}
pub fn getReturnValue(self: *const Dialog) []const u8 {
return self.asConstElement().getAttributeSafe("returnvalue") orelse "";
}
pub fn setReturnValue(self: *Dialog, value: []const u8, page: *Page) !void {
try self.asElement().setAttributeSafe("returnvalue", value, page);
}
pub const JsApi = struct {
pub const bridge = js.Bridge(Dialog);
pub const Meta = struct {
pub const name = "HTMLDialogElement";
pub const prototype_chain = bridge.prototypeChain();
pub var class_id: bridge.ClassId = undefined;
};
pub const open = bridge.accessor(Dialog.getOpen, Dialog.setOpen, .{});
pub const returnValue = bridge.accessor(Dialog.getReturnValue, Dialog.setReturnValue, .{});
};
const testing = @import("../../../../testing.zig");
test "WebApi: HTML.Dialog" {
try testing.htmlRunner("element/html/dialog.html", .{});
}