/src/serenity/Userland/Libraries/LibWeb/HTML/HTMLDetailsElement.cpp
Line | Count | Source |
1 | | /* |
2 | | * Copyright (c) 2020, the SerenityOS developers. |
3 | | * Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org> |
4 | | * |
5 | | * SPDX-License-Identifier: BSD-2-Clause |
6 | | */ |
7 | | |
8 | | #include <LibWeb/Bindings/HTMLDetailsElementPrototype.h> |
9 | | #include <LibWeb/Bindings/Intrinsics.h> |
10 | | #include <LibWeb/DOM/ElementFactory.h> |
11 | | #include <LibWeb/DOM/Event.h> |
12 | | #include <LibWeb/DOM/ShadowRoot.h> |
13 | | #include <LibWeb/DOM/Text.h> |
14 | | #include <LibWeb/HTML/EventLoop/TaskQueue.h> |
15 | | #include <LibWeb/HTML/HTMLDetailsElement.h> |
16 | | #include <LibWeb/HTML/HTMLSlotElement.h> |
17 | | #include <LibWeb/HTML/HTMLSummaryElement.h> |
18 | | #include <LibWeb/HTML/ToggleEvent.h> |
19 | | #include <LibWeb/Namespace.h> |
20 | | |
21 | | namespace Web::HTML { |
22 | | |
23 | | JS_DEFINE_ALLOCATOR(HTMLDetailsElement); |
24 | | |
25 | | HTMLDetailsElement::HTMLDetailsElement(DOM::Document& document, DOM::QualifiedName qualified_name) |
26 | 0 | : HTMLElement(document, move(qualified_name)) |
27 | 0 | { |
28 | 0 | } |
29 | | |
30 | 0 | HTMLDetailsElement::~HTMLDetailsElement() = default; |
31 | | |
32 | | void HTMLDetailsElement::visit_edges(Cell::Visitor& visitor) |
33 | 0 | { |
34 | 0 | Base::visit_edges(visitor); |
35 | 0 | visitor.visit(m_summary_slot); |
36 | 0 | visitor.visit(m_descendants_slot); |
37 | 0 | } |
38 | | |
39 | | void HTMLDetailsElement::initialize(JS::Realm& realm) |
40 | 0 | { |
41 | 0 | Base::initialize(realm); |
42 | 0 | WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLDetailsElement); |
43 | 0 | } |
44 | | |
45 | | void HTMLDetailsElement::inserted() |
46 | 0 | { |
47 | 0 | create_shadow_tree_if_needed().release_value_but_fixme_should_propagate_errors(); |
48 | 0 | update_shadow_tree_slots(); |
49 | 0 | } |
50 | | |
51 | | void HTMLDetailsElement::removed_from(DOM::Node*) |
52 | 0 | { |
53 | 0 | set_shadow_root(nullptr); |
54 | 0 | } |
55 | | |
56 | | void HTMLDetailsElement::attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value) |
57 | 0 | { |
58 | 0 | Base::attribute_changed(name, old_value, value); |
59 | | |
60 | | // https://html.spec.whatwg.org/multipage/interactive-elements.html#details-notification-task-steps |
61 | 0 | if (name == HTML::AttributeNames::open) { |
62 | | // 1. If the open attribute is added, queue a details toggle event task given the details element, "closed", and "open". |
63 | 0 | if (value.has_value()) { |
64 | 0 | queue_a_details_toggle_event_task("closed"_string, "open"_string); |
65 | 0 | } |
66 | | // 2. Otherwise, queue a details toggle event task given the details element, "open", and "closed". |
67 | 0 | else { |
68 | 0 | queue_a_details_toggle_event_task("open"_string, "closed"_string); |
69 | 0 | } |
70 | |
|
71 | 0 | update_shadow_tree_style(); |
72 | 0 | } |
73 | 0 | } |
74 | | |
75 | | void HTMLDetailsElement::children_changed() |
76 | 0 | { |
77 | 0 | Base::children_changed(); |
78 | 0 | update_shadow_tree_slots(); |
79 | 0 | } |
80 | | |
81 | | // https://html.spec.whatwg.org/multipage/interactive-elements.html#queue-a-details-toggle-event-task |
82 | | void HTMLDetailsElement::queue_a_details_toggle_event_task(String old_state, String new_state) |
83 | 0 | { |
84 | | // 1. If element's details toggle task tracker is not null, then: |
85 | 0 | if (m_details_toggle_task_tracker.has_value()) { |
86 | | // 1. Set oldState to element's details toggle task tracker's old state. |
87 | 0 | old_state = move(m_details_toggle_task_tracker->old_state); |
88 | | |
89 | | // 2. Remove element's details toggle task tracker's task from its task queue. |
90 | 0 | HTML::main_thread_event_loop().task_queue().remove_tasks_matching([&](auto const& task) { |
91 | 0 | return task.id() == m_details_toggle_task_tracker->task_id; |
92 | 0 | }); |
93 | | |
94 | | // 3. Set element's details toggle task tracker to null. |
95 | 0 | m_details_toggle_task_tracker->task_id = {}; |
96 | 0 | } |
97 | | |
98 | | // 2. Queue an element task given the DOM manipulation task source and element to run the following steps: |
99 | 0 | auto task_id = queue_an_element_task(HTML::Task::Source::DOMManipulation, [this, old_state, new_state = move(new_state)]() mutable { |
100 | | // 1. Fire an event named toggle at element, using ToggleEvent, with the oldState attribute initialized to |
101 | | // oldState and the newState attribute initialized to newState. |
102 | 0 | ToggleEventInit event_init {}; |
103 | 0 | event_init.old_state = move(old_state); |
104 | 0 | event_init.new_state = move(new_state); |
105 | |
|
106 | 0 | dispatch_event(ToggleEvent::create(realm(), HTML::EventNames::toggle, move(event_init))); |
107 | | |
108 | | // 2. Set element's details toggle task tracker to null. |
109 | 0 | m_details_toggle_task_tracker = {}; |
110 | 0 | }); |
111 | | |
112 | | // 3. Set element's details toggle task tracker to a struct with task set to the just-queued task and old state set to oldState. |
113 | 0 | m_details_toggle_task_tracker = ToggleTaskTracker { |
114 | 0 | .task_id = task_id, |
115 | 0 | .old_state = move(old_state), |
116 | 0 | }; |
117 | 0 | } |
118 | | |
119 | | // https://html.spec.whatwg.org/#the-details-and-summary-elements |
120 | | WebIDL::ExceptionOr<void> HTMLDetailsElement::create_shadow_tree_if_needed() |
121 | 0 | { |
122 | 0 | if (shadow_root()) |
123 | 0 | return {}; |
124 | | |
125 | 0 | auto& realm = this->realm(); |
126 | | |
127 | | // The element is also expected to have an internal shadow tree with two slots. |
128 | 0 | auto shadow_root = heap().allocate<DOM::ShadowRoot>(realm, document(), *this, Bindings::ShadowRootMode::Closed); |
129 | 0 | shadow_root->set_slot_assignment(Bindings::SlotAssignmentMode::Manual); |
130 | | |
131 | | // The first slot is expected to take the details element's first summary element child, if any. |
132 | 0 | auto summary_slot = TRY(DOM::create_element(document(), HTML::TagNames::slot, Namespace::HTML)); |
133 | 0 | MUST(shadow_root->append_child(summary_slot)); |
134 | | |
135 | | // The second slot is expected to take the details element's remaining descendants, if any. |
136 | 0 | auto descendants_slot = TRY(DOM::create_element(document(), HTML::TagNames::slot, Namespace::HTML)); |
137 | 0 | MUST(shadow_root->append_child(descendants_slot)); |
138 | |
|
139 | 0 | m_summary_slot = static_cast<HTML::HTMLSlotElement&>(*summary_slot); |
140 | 0 | m_descendants_slot = static_cast<HTML::HTMLSlotElement&>(*descendants_slot); |
141 | 0 | set_shadow_root(shadow_root); |
142 | |
|
143 | 0 | return {}; |
144 | 0 | } |
145 | | |
146 | | void HTMLDetailsElement::update_shadow_tree_slots() |
147 | 0 | { |
148 | 0 | if (!shadow_root()) |
149 | 0 | return; |
150 | | |
151 | 0 | Vector<HTMLSlotElement::SlottableHandle> summary_assignment; |
152 | 0 | Vector<HTMLSlotElement::SlottableHandle> descendants_assignment; |
153 | |
|
154 | 0 | auto* summary = first_child_of_type<HTMLSummaryElement>(); |
155 | 0 | if (summary != nullptr) |
156 | 0 | summary_assignment.append(JS::make_handle(static_cast<DOM::Element&>(*summary))); |
157 | |
|
158 | 0 | for_each_in_subtree([&](auto& child) { |
159 | 0 | if (&child == summary) |
160 | 0 | return TraversalDecision::Continue; |
161 | 0 | if (!child.is_slottable()) |
162 | 0 | return TraversalDecision::Continue; |
163 | | |
164 | 0 | child.as_slottable().visit([&](auto& node) { |
165 | 0 | descendants_assignment.append(JS::make_handle(node)); |
166 | 0 | }); Unexecuted instantiation: HTMLDetailsElement.cpp:auto Web::HTML::HTMLDetailsElement::update_shadow_tree_slots()::$_0::operator()<Web::DOM::Node>(Web::DOM::Node&) const::{lambda(auto:1&)#1}::operator()<JS::NonnullGCPtr<Web::DOM::Element> >(Web::DOM::Node&) constUnexecuted instantiation: HTMLDetailsElement.cpp:auto Web::HTML::HTMLDetailsElement::update_shadow_tree_slots()::$_0::operator()<Web::DOM::Node>(Web::DOM::Node&) const::{lambda(auto:1&)#1}::operator()<JS::NonnullGCPtr<Web::DOM::Text> >(Web::DOM::Node&) const |
167 | |
|
168 | 0 | return TraversalDecision::Continue; |
169 | 0 | }); |
170 | |
|
171 | 0 | m_summary_slot->assign(move(summary_assignment)); |
172 | 0 | m_descendants_slot->assign(move(descendants_assignment)); |
173 | |
|
174 | 0 | update_shadow_tree_style(); |
175 | 0 | } |
176 | | |
177 | | // https://html.spec.whatwg.org/#the-details-and-summary-elements:the-details-element-6 |
178 | | void HTMLDetailsElement::update_shadow_tree_style() |
179 | 0 | { |
180 | 0 | if (!shadow_root()) |
181 | 0 | return; |
182 | | |
183 | 0 | if (has_attribute(HTML::AttributeNames::open)) { |
184 | 0 | MUST(m_descendants_slot->set_attribute(HTML::AttributeNames::style, R"~~~( |
185 | 0 | display: block; |
186 | 0 | )~~~"_string)); |
187 | 0 | } else { |
188 | 0 | MUST(m_descendants_slot->set_attribute(HTML::AttributeNames::style, R"~~~( |
189 | 0 | display: block; |
190 | 0 | content-visibility: hidden; |
191 | 0 | )~~~"_string)); |
192 | 0 | } |
193 | 0 | } |
194 | | |
195 | | } |