Element: added build-in isVisible value

PageAmp · Oct 25, 2021 · 9dfac13 · 9dfac13
1 parent 804c1f3
commit 9dfac13
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/notes.md b/notes.md
@@ -11,6 +11,11 @@
 
 haxe version: 4.1.x
 
+## MISC
+* [jQueryExtern](https://lib.haxe.org/p/jQueryExtern/)
+* [IntersectionObserver Polyfill](https://github.com/que-etc/intersection-observer-polyfill)
+	* needed for built-in value `isVisible`
+
 ## TODO
 * //reactivity
 * //elements

diff --git a/src/pageamp/core/Element.hx b/src/pageamp/core/Element.hx
@@ -126,10 +126,30 @@ class Element extends ReScope {
 	// ===================================================================================
 	// value handlers
 	// ===================================================================================
+	// build-in pseudo values you can listen to:
+	static inline var IS_VISIBLE = 'isVisible';
 
 	function addValueHandler(k:String, v:Dynamic) {
 		var name = k.substr(HANDLERATTR_PREFIXLEN);
 		new ReValue(this, null, '[[$name]]', v);
+		var ref = name;
+		switch (name) {
+			case IS_VISIBLE:
+				ref = IS_VISIBLE;
+				if (!values.exists(ref)) {
+					var value = new ReValue(this, ref, false);
+#if client
+					new js.html.IntersectionObserver((ee, _) -> {
+						for (e in ee) {
+							if (e.target == dom) {
+								value.set((e.intersectionRatio > 0));
+							}
+						}
+					}).observe(dom);
+#end
+				}
+		}
+		new ReValue(this, null, '[[$ref]]', v);
 	}
 
 	// ===================================================================================