RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 19:38:12 +00:00
Code Issues Activity Actions

LibWeb: Add internal use_pseudo_element to DOM Element

Browse source
This commit is contained in:
Bastiaan van der Plaat 2023-12-10 12:42:13 +01:00 • committed by Andreas Kling
parent cfe9577b48
commit f621dc464b
12 changed files with 61 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
View file

@ -524,20 +524,6 @@ Optional<DeprecatedString> HTMLInputElement::placeholder_value() const
return placeholder;
}
class PlaceholderElement final : public HTMLDivElement {
JS_CELL(PlaceholderElement, HTMLDivElement);
JS_DECLARE_ALLOCATOR(PlaceholderElement);
public:
PlaceholderElement(DOM::Document& document)
: HTMLDivElement(document, DOM::QualifiedName { HTML::TagNames::div, ""_fly_string, Namespace::HTML })
{
}
virtual Optional<CSS::Selector::PseudoElement> pseudo_element() const override { return CSS::Selector::PseudoElement::Placeholder; }
};
JS_DEFINE_ALLOCATOR(PlaceholderElement);
void HTMLInputElement::create_shadow_tree_if_needed()
{
if (shadow_root_internal())
@ -579,7 +565,8 @@ void HTMLInputElement::create_text_input_shadow_tree()
)~~~"_string));
MUST(shadow_root->append_child(element));
m_placeholder_element = heap().allocate<PlaceholderElement>(realm(), document());
m_placeholder_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
m_placeholder_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Placeholder);
MUST(m_placeholder_element->set_attribute(HTML::AttributeNames::style, R"~~~(
flex: 1;
height: 1lh;

21
Userland/Libraries/LibWeb/HTML/HTMLMeterElement.cpp
View file

@ -6,9 +6,11 @@
*/
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/ElementFactory.h>
#include <LibWeb/DOM/ShadowRoot.h>
#include <LibWeb/HTML/HTMLMeterElement.h>
#include <LibWeb/HTML/Numbers.h>
#include <LibWeb/Namespace.h>
namespace Web::HTML {
@ -188,10 +190,11 @@ void HTMLMeterElement::create_shadow_tree_if_needed()
auto shadow_root = heap().allocate<DOM::ShadowRoot>(realm(), document(), *this, Bindings::ShadowRootMode::Closed);
set_shadow_root(shadow_root);
auto meter_bar_element = heap().allocate<MeterBarElement>(realm(), document());
auto meter_bar_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
meter_bar_element->set_use_pseudo_element(CSS::Selector::PseudoElement::MeterBar);
MUST(shadow_root->append_child(*meter_bar_element));
m_meter_value_element = heap().allocate<MeterValueElement>(realm(), document());
m_meter_value_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
MUST(meter_bar_element->append_child(*m_meter_value_element));
update_meter_value_element();
}
@ -212,26 +215,26 @@ void HTMLMeterElement::update_meter_value_element()
// If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal.
if (optimum >= low && optimum <= high) {
if (value >= low && value <= high)
m_meter_value_element->set_pseudo_element(CSS::Selector::PseudoElement::MeterOptimumValue);
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::MeterOptimumValue);
else
m_meter_value_element->set_pseudo_element(CSS::Selector::PseudoElement::MeterSuboptimumValue);
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::MeterSuboptimumValue);
}
// Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region from the low boundary up to the high boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.
else if (optimum < low) {
if (value >= low && value <= high)
m_meter_value_element->set_pseudo_element(CSS::Selector::PseudoElement::MeterSuboptimumValue);
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::MeterSuboptimumValue);
else
m_meter_value_element->set_pseudo_element(CSS::Selector::PseudoElement::MeterEvenLessGoodValue);
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::MeterEvenLessGoodValue);
}
// Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region from the high boundary down to the low boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.
else {
if (value >= low && value <= high)
m_meter_value_element->set_pseudo_element(CSS::Selector::PseudoElement::MeterSuboptimumValue);
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::MeterSuboptimumValue);
else
m_meter_value_element->set_pseudo_element(CSS::Selector::PseudoElement::MeterEvenLessGoodValue);
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::MeterEvenLessGoodValue);
}
double position = (value - min) / (max - min) * 100;
MUST(m_meter_value_element->set_attribute(HTML::AttributeNames::style, MUST(String::formatted("width: {}%;", position))));
MUST(m_meter_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position))));
}
}

31
Userland/Libraries/LibWeb/HTML/HTMLMeterElement.h
View file

@ -9,39 +9,10 @@
#pragma once
#include <LibWeb/ARIA/Roles.h>
#include <LibWeb/HTML/HTMLDivElement.h>
#include <LibWeb/HTML/HTMLElement.h>
#include <LibWeb/Namespace.h>
namespace Web::HTML {
class MeterBarElement final : public HTMLDivElement {
JS_CELL(MeterBarElement, HTMLDivElement);
public:
MeterBarElement(DOM::Document& document)
: HTMLDivElement(document, DOM::QualifiedName { HTML::TagNames::div, ""_fly_string, Namespace::HTML })
{
}
virtual Optional<CSS::Selector::PseudoElement> pseudo_element() const override { return CSS::Selector::PseudoElement::MeterBar; }
};
class MeterValueElement final : public HTMLDivElement {
JS_CELL(MeterValueElement, HTMLDivElement);
public:
MeterValueElement(DOM::Document& document)
: HTMLDivElement(document, DOM::QualifiedName { HTML::TagNames::div, ""_fly_string, Namespace::HTML })
{
}
virtual Optional<CSS::Selector::PseudoElement> pseudo_element() const override { return m_pseudo_element; }
void set_pseudo_element(CSS::Selector::PseudoElement pseudo_element) { m_pseudo_element = pseudo_element; }
private:
CSS::Selector::PseudoElement m_pseudo_element;
};
class HTMLMeterElement final : public HTMLElement {
WEB_PLATFORM_OBJECT(HTMLMeterElement, HTMLElement);
JS_DECLARE_ALLOCATOR(HTMLMeterElement);
@ -82,7 +53,7 @@ private:
void update_meter_value_element();
JS::GCPtr<MeterValueElement> m_meter_value_element;
JS::GCPtr<DOM::Element> m_meter_value_element;
};
}

10
Userland/Libraries/LibWeb/HTML/HTMLProgressElement.cpp
View file

@ -7,9 +7,11 @@
*/
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/ElementFactory.h>
#include <LibWeb/DOM/ShadowRoot.h>
#include <LibWeb/HTML/HTMLProgressElement.h>
#include <LibWeb/HTML/Numbers.h>
#include <LibWeb/Namespace.h>
namespace Web::HTML {
@ -102,17 +104,19 @@ void HTMLProgressElement::create_shadow_tree_if_needed()
auto shadow_root = heap().allocate<DOM::ShadowRoot>(realm(), document(), *this, Bindings::ShadowRootMode::Closed);
set_shadow_root(shadow_root);
auto progress_bar_element = heap().allocate<ProgressBarElement>(realm(), document());
auto progress_bar_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
progress_bar_element->set_use_pseudo_element(CSS::Selector::PseudoElement::ProgressBar);
MUST(shadow_root->append_child(*progress_bar_element));
m_progress_value_element = heap().allocate<ProgressValueElement>(realm(), document());
m_progress_value_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
m_progress_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::ProgressValue);
MUST(progress_bar_element->append_child(*m_progress_value_element));
update_progress_value_element();
}
void HTMLProgressElement::update_progress_value_element()
{
MUST(m_progress_value_element->set_attribute(HTML::AttributeNames::style, MUST(String::formatted("width: {}%;", position() * 100))));
MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position() * 100))));
}
}

26
Userland/Libraries/LibWeb/HTML/HTMLProgressElement.h
View file

@ -8,34 +8,10 @@
#pragma once
#include <LibWeb/ARIA/Roles.h>
#include <LibWeb/HTML/HTMLDivElement.h>
#include <LibWeb/HTML/HTMLElement.h>
#include <LibWeb/Namespace.h>
namespace Web::HTML {
class ProgressBarElement final : public HTMLDivElement {
JS_CELL(ProgressBarElement, HTMLDivElement);
public:
ProgressBarElement(DOM::Document& document)
: HTMLDivElement(document, DOM::QualifiedName { HTML::TagNames::div, ""_fly_string, Namespace::HTML })
{
}
virtual Optional<CSS::Selector::PseudoElement> pseudo_element() const override { return CSS::Selector::PseudoElement::ProgressBar; }
};
class ProgressValueElement final : public HTMLDivElement {
JS_CELL(ProgressValueElement, HTMLDivElement);
public:
ProgressValueElement(DOM::Document& document)
: HTMLDivElement(document, DOM::QualifiedName { HTML::TagNames::div, ""_fly_string, Namespace::HTML })
{
}
virtual Optional<CSS::Selector::PseudoElement> pseudo_element() const override { return CSS::Selector::PseudoElement::ProgressValue; }
};
class HTMLProgressElement final : public HTMLElement {
WEB_PLATFORM_OBJECT(HTMLProgressElement, HTMLElement);
JS_DECLARE_ALLOCATOR(HTMLProgressElement);
@ -76,7 +52,7 @@ private:
bool is_determinate() const { return has_attribute(HTML::AttributeNames::value); }
JS::GCPtr<ProgressValueElement> m_progress_value_element;
JS::GCPtr<DOM::Element> m_progress_value_element;
};
}