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

LibWeb: Add initial implementation of IntersectionObserver

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

55
Userland/Libraries/LibWeb/IntersectionObserver/IntersectionObserver.h
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 observer’s 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;
};
}