1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 20:37:35 +00:00

LibWeb: Add initial implementation of IntersectionObserver

The main missing features are rootMargin, proper nested browsing
context support and content clip/clip-path support.

This makes images appear on some sites, such as YouTube and
howstuffworks.com.
This commit is contained in:
Luke Wilde 2023-07-06 23:44:07 +01:00 committed by Andreas Kling
parent 6f8afd8cd9
commit 165abafb80
16 changed files with 664 additions and 22 deletions

View file

@ -8,32 +8,79 @@
#include <LibJS/Heap/Handle.h>
#include <LibWeb/Bindings/PlatformObject.h>
#include <LibWeb/IntersectionObserver/IntersectionObserverEntry.h>
#include <LibWeb/PixelUnits.h>
namespace Web::IntersectionObserver {
struct IntersectionObserverInit {
Optional<Variant<JS::Handle<DOM::Element>, JS::Handle<DOM::Document>>> root;
DeprecatedString root_margin { "0px"sv };
String root_margin { "0px"_short_string };
Variant<double, Vector<double>> threshold { 0 };
};
// https://www.w3.org/TR/intersection-observer/#intersectionobserverregistration
struct IntersectionObserverRegistration {
// https://www.w3.org/TR/intersection-observer/#dom-intersectionobserverregistration-observer
// [A]n observer property holding an IntersectionObserver.
JS::Handle<IntersectionObserver> observer;
// https://www.w3.org/TR/intersection-observer/#dom-intersectionobserverregistration-observer
// NOTE: Optional is used in place of the spec using -1 to indicate no previous index.
// [A] previousThresholdIndex property holding a number between -1 and the length of the observers thresholds property (inclusive).
Optional<size_t> previous_threshold_index;
// https://www.w3.org/TR/intersection-observer/#dom-intersectionobserverregistration-previousisintersecting
// [A] previousIsIntersecting property holding a boolean.
bool previous_is_intersecting { false };
};
// https://w3c.github.io/IntersectionObserver/#intersection-observer-interface
class IntersectionObserver : public Bindings::PlatformObject {
class IntersectionObserver final : public Bindings::PlatformObject {
WEB_PLATFORM_OBJECT(IntersectionObserver, Bindings::PlatformObject);
public:
static WebIDL::ExceptionOr<JS::NonnullGCPtr<IntersectionObserver>> construct_impl(JS::Realm&, WebIDL::CallbackType* callback, IntersectionObserverInit const& options = {});
static WebIDL::ExceptionOr<JS::NonnullGCPtr<IntersectionObserver>> construct_impl(JS::Realm&, JS::GCPtr<WebIDL::CallbackType> callback, IntersectionObserverInit const& options = {});
virtual ~IntersectionObserver() override;
void observe(DOM::Element& target);
void unobserve(DOM::Element& target);
void disconnect();
Vector<JS::Handle<IntersectionObserverEntry>> take_records();
Vector<JS::NonnullGCPtr<DOM::Element>> const& observation_targets() const { return m_observation_targets; }
Variant<JS::Handle<DOM::Element>, JS::Handle<DOM::Document>, Empty> root() const;
Vector<double> const& thresholds() const { return m_thresholds; }
Variant<JS::Handle<DOM::Element>, JS::Handle<DOM::Document>> intersection_root() const;
CSSPixelRect root_intersection_rectangle() const;
void queue_entry(Badge<DOM::Document>, JS::NonnullGCPtr<IntersectionObserverEntry>);
WebIDL::CallbackType& callback() { return *m_callback; }
private:
explicit IntersectionObserver(JS::Realm&);
explicit IntersectionObserver(JS::Realm&, JS::GCPtr<WebIDL::CallbackType> callback, Optional<Variant<JS::Handle<DOM::Element>, JS::Handle<DOM::Document>>> const& root, Vector<double>&& thresholds);
virtual JS::ThrowCompletionOr<void> initialize(JS::Realm&) override;
virtual void visit_edges(JS::Cell::Visitor&) override;
// https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-callback-slot
JS::GCPtr<WebIDL::CallbackType> m_callback;
// https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-root
Optional<Variant<JS::Handle<DOM::Element>, JS::Handle<DOM::Document>>> m_root;
// https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-thresholds
Vector<double> m_thresholds;
// https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-queuedentries-slot
Vector<JS::NonnullGCPtr<IntersectionObserverEntry>> m_queued_entries;
// https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-observationtargets-slot
Vector<JS::NonnullGCPtr<DOM::Element>> m_observation_targets;
};
}