js visibility of objects extensions

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## 0.9.17
 
+* `Common`:
+    * New extensions `Element#onVisibilityChanged`, `Element#onVisible` and `Element#onInvisible`
+* `Coroutines`:
+    * New extension `Element.visibilityFlow()` 
+
+
 ## 0.9.16
 
 * `Common`:

common/src/jsMain/kotlin/dev/inmo/micro_utils/common/HTMLElementDomChanged.kt

@@ -3,7 +3,7 @@ package dev.inmo.micro_utils.common
 import kotlinx.browser.document
 import org.w3c.dom.*
 
-fun Node.onRemoved(block: () -> Unit) {
+fun Node.onRemoved(block: () -> Unit): MutationObserver {
     lateinit var observer: MutationObserver
 
     observer = MutationObserver { _, _ ->
@@ -18,4 +18,44 @@ fun Node.onRemoved(block: () -> Unit) {
     }
 
     observer.observe(document, MutationObserverInit(childList = true, subtree = true))
+    return observer
+}
+
+fun Element.onVisibilityChanged(block: IntersectionObserverEntry.(Float, IntersectionObserver) -> Unit): IntersectionObserver {
+    var previousIntersectionRatio = -1f
+    val observer = IntersectionObserver { entries, observer ->
+        entries.forEach {
+            if (previousIntersectionRatio != it.intersectionRatio) {
+                previousIntersectionRatio = it.intersectionRatio.toFloat()
+                it.block(previousIntersectionRatio, observer)
+            }
+        }
+    }
+
+    observer.observe(this)
+    return observer
+}
+
+fun Element.onVisible(block: Element.(IntersectionObserver) -> Unit) {
+    var previous = -1f
+    onVisibilityChanged { intersectionRatio, observer ->
+        if (previous != intersectionRatio) {
+            if (intersectionRatio > 0 && previous == 0f) {
+                block(observer)
+            }
+            previous = intersectionRatio
+        }
+    }
+}
+
+fun Element.onInvisible(block: Element.(IntersectionObserver) -> Unit): IntersectionObserver {
+    var previous = -1f
+    return onVisibilityChanged { intersectionRatio, observer ->
+        if (previous != intersectionRatio) {
+            if (intersectionRatio == 0f && previous != 0f) {
+                block(observer)
+            }
+            previous = intersectionRatio
+        }
+    }
 }

coroutines/src/jsMain/kotlin/dev.inmo.micro_utils.coroutines/ElementVisibilityFlow.kt

@@ -0,0 +1,28 @@
+package dev.inmo.micro_utils.coroutines
+
+import dev.inmo.micro_utils.common.onRemoved
+import dev.inmo.micro_utils.common.onVisibilityChanged
+import kotlinx.coroutines.flow.*
+import org.w3c.dom.Element
+
+fun Element.visibilityFlow(): Flow<Boolean> = channelFlow {
+    var previousData: Boolean? = null
+
+    val observer = onVisibilityChanged { intersectionRatio, _ ->
+        val currentData = intersectionRatio > 0
+        if (currentData != previousData) {
+            trySend(currentData)
+        }
+        previousData = currentData
+    }
+
+    val removeObserver = onRemoved {
+        observer.disconnect()
+        close()
+    }
+
+    invokeOnClose {
+        observer.disconnect()
+        removeObserver.disconnect()
+    }
+}