From 24fe6a13e1b79f324df53660796d95b7de5b9766 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Thu, 21 Oct 2021 23:41:03 +0200 Subject: [PATCH 1/3] Allow setting rootMargin and thresholds Fixes #428. --- index.bs | 56 ++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 40 insertions(+), 16 deletions(-) diff --git a/index.bs b/index.bs index 9018d65..11a397f 100644 --- a/index.bs +++ b/index.bs @@ -218,8 +218,8 @@ use-cases. Per-{{observe()}} options could be provided in the future if the need interface IntersectionObserver { constructor(IntersectionObserverCallback callback, optional IntersectionObserverInit options = {}); readonly attribute (Element or Document)? root; - readonly attribute DOMString rootMargin; - readonly attribute FrozenArray<double> thresholds; + attribute DOMString rootMargin; + attribute FrozenArray<double> thresholds; undefined observe(Element target); undefined unobserve(Element target); undefined disconnect(); @@ -279,15 +279,31 @@ interface IntersectionObserver { this is not guaranteed to be identical to the |options|.{{IntersectionObserverInit/rootMargin}} passed to the {{IntersectionObserver}} constructor. If no {{IntersectionObserverInit/rootMargin}} was passed to the {{IntersectionObserver}} - constructor, the value of this attribute is "0px 0px 0px 0px". + constructor, and the {{IntersectionObserver/rootMargin}} setter has not been invoked, + the value of this attribute is "0px 0px 0px 0px". + + On setting, attempt to parse a root margin + from the given value. + If a list is returned, + set |this|'s internal {{[[rootMargin]]}} slot to that. + Otherwise, throw a {{SyntaxError}} exception. : thresholds :: - A list of thresholds, sorted in increasing numeric order, + On getting, returns {{[[thresholds]]}}, which is a list of thresholds, + sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no |options|.{{IntersectionObserverInit/threshold}} was provided to the - {{IntersectionObserver}} constructor, the value of this attribute will be [0]. + {{IntersectionObserver}} constructor, + and the {{IntersectionObserver/thresholds}} setter has not been invoked, + the value of this attribute will be [0]. + + On setting, let |sortedThresholds| be the result of + validate and sort a thresholds list for + |options|.{{IntersectionObserverInit/threshold}}. + If |sortedThresholds| is failure, then throw a {{RangeError}} exception. + Otherwise, set |this|'s internal {{[[thresholds]]}} slot to |sortedThresholds|. The root intersection rectangle @@ -351,6 +367,15 @@ or failure: append a duplicate of the second element to |tokens|. 7. Return |tokens|. +To validate and sort a thresholds list from a list |thresholds|, +returning either a list or failure: + +1. If any value in |thresholds| is less than 0.0 or greater than + 1.0, then return failure. +2. Let |sortedThresholds| be the result of sorting |thresholds| in ascending order. +3. If |sortedThresholds| is empty, then append 0 to |sortedThresholds|. +4. Return |sortedThresholds|. +

The IntersectionObserverEntry interface

@@ -495,7 +520,7 @@ which is initialized to an empty list. This list holds IntersectionObserverRegistration records, which have an observer property holding an {{IntersectionObserver}}, a previousThresholdIndex property -holding a number between -1 and the length of the observer's {{IntersectionObserver/thresholds}} property (inclusive), and +holding a number between -1 and the length of the observer's internal {{[[thresholds]]}} slot (inclusive), and a previousIsIntersecting property holding a boolean.

@@ -508,7 +533,9 @@ which are initialized to empty lists and an internal \[[callback]] slot which is initialized by {{IntersectionObserver(callback, options)}}. They also have an internal \[[rootMargin]] slot -which is a list of four pixel lengths or percentages. +which is a list of four pixel lengths or percentages, and +an internal \[[thresholds]] slot +which is a sorted list of thresholds.

Algorithms

@@ -525,15 +552,12 @@ and an {{IntersectionObserverInit}} dictionary |options|, run these steps: If a list is returned, set |this|'s internal {{[[rootMargin]]}} slot to that. Otherwise, throw a {{SyntaxError}} exception. -4. Let |thresholds| be a list equal to +4. Let |sortedThresholds| be the result of + validate and sort a thresholds list for |options|.{{IntersectionObserverInit/threshold}}. -5. If any value in |thresholds| is less than 0.0 or greater than - 1.0, throw a {{RangeError}} exception. -6. Sort |thresholds| in ascending order. -7. If |thresholds| is empty, append 0 to |thresholds|. -8. The {{IntersectionObserver/thresholds}} attribute getter will return - this sorted |thresholds| list. -9. Return |this|. +5. If |sortedThresholds| is failure, then throw a {{RangeError}} exception. +6. Set |this|'s internal {{[[thresholds]]}} slot to |sortedThresholds|. +7. Return |this|.

Observe a target Element

@@ -672,7 +696,7 @@ To run the update intersection observations steps for a zero area). 9. If |targetArea| is non-zero, let |intersectionRatio| be |intersectionArea| divided by |targetArea|.
Otherwise, let |intersectionRatio| be 1 if |isIntersecting| is true, or 0 if |isIntersecting| is false. - 10. Set |thresholdIndex| to the index of the first entry in |observer|.{{thresholds}} whose value is greater than |intersectionRatio|, or the length of |observer|.{{thresholds}} if |intersectionRatio| is greater than or equal to the last entry in |observer|.{{thresholds}}. + 10. Set |thresholdIndex| to the index of the first entry in |observer|'s internal {{[[thresholds]]}} slot whose value is greater than |intersectionRatio|, or the length of |observer|'s internal {{[[thresholds]]}} slot if |intersectionRatio| is greater than or equal to the last entry in |observer|'s internal {{[[thresholds]]}} slot. 11. Let |intersectionObserverRegistration| be the {{IntersectionObserverRegistration}} record in |target|'s internal {{[[RegisteredIntersectionObservers]]}} slot whose {{IntersectionObserverRegistration/observer}} property is equal to |observer|. From 4c9e71ec17346bef9ba63f899982707c31bcb5e5 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Wed, 27 Oct 2021 00:06:14 +0200 Subject: [PATCH 2/3] Revert change to rootMargin, split out to PR #486 --- index.bs | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/index.bs b/index.bs index 11a397f..0e5020f 100644 --- a/index.bs +++ b/index.bs @@ -218,7 +218,7 @@ use-cases. Per-{{observe()}} options could be provided in the future if the need interface IntersectionObserver { constructor(IntersectionObserverCallback callback, optional IntersectionObserverInit options = {}); readonly attribute (Element or Document)? root; - attribute DOMString rootMargin; + readonly attribute DOMString rootMargin; attribute FrozenArray<double> thresholds; undefined observe(Element target); undefined unobserve(Element target); @@ -279,14 +279,7 @@ interface IntersectionObserver { this is not guaranteed to be identical to the |options|.{{IntersectionObserverInit/rootMargin}} passed to the {{IntersectionObserver}} constructor. If no {{IntersectionObserverInit/rootMargin}} was passed to the {{IntersectionObserver}} - constructor, and the {{IntersectionObserver/rootMargin}} setter has not been invoked, - the value of this attribute is "0px 0px 0px 0px". - - On setting, attempt to parse a root margin - from the given value. - If a list is returned, - set |this|'s internal {{[[rootMargin]]}} slot to that. - Otherwise, throw a {{SyntaxError}} exception. + constructor, the value of this attribute is "0px 0px 0px 0px". : thresholds :: On getting, returns {{[[thresholds]]}}, which is a list of thresholds, From 983f8011f214a7c4e8fe733c9e4205dda4bfd578 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Wed, 27 Oct 2021 16:20:07 +0200 Subject: [PATCH 3/3] Change from FrozenArray to ObservableArray MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Emilio Cobos Álvarez --- index.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.bs b/index.bs index 0e5020f..dc2a591 100644 --- a/index.bs +++ b/index.bs @@ -219,7 +219,7 @@ interface IntersectionObserver { constructor(IntersectionObserverCallback callback, optional IntersectionObserverInit options = {}); readonly attribute (Element or Document)? root; readonly attribute DOMString rootMargin; - attribute FrozenArray<double> thresholds; + attribute ObservableArray<double> thresholds; undefined observe(Element target); undefined unobserve(Element target); undefined disconnect();