common js visibility and on screen extensions

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 0.2.3
 
+* `Common`
+    * `K/JS`
+        * Add several extensions for `Element` objects to detect that object is on screen viewport
+        * Add several extensions for `Element` objects to detect object visibility
+
 ## 0.2.2
 
 * `Repos`

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

@@ -0,0 +1,43 @@
+package dev.inmo.micro_utils.common
+
+import kotlinx.browser.window
+import org.w3c.dom.DOMRect
+import org.w3c.dom.Element
+
+val DOMRect.isOnScreenByLeftEdge: Boolean
+    get() = left >= 0 && left <= window.innerWidth
+inline val Element.isOnScreenByLeftEdge
+    get() = getBoundingClientRect().isOnScreenByLeftEdge
+
+val DOMRect.isOnScreenByRightEdge: Boolean
+    get() = right >= 0 && right <= window.innerWidth
+inline val Element.isOnScreenByRightEdge
+    get() = getBoundingClientRect().isOnScreenByRightEdge
+
+internal val DOMRect.isOnScreenHorizontally: Boolean
+    get() = isOnScreenByLeftEdge || isOnScreenByRightEdge
+
+
+val DOMRect.isOnScreenByTopEdge: Boolean
+    get() = top >= 0 && top <= window.innerHeight
+inline val Element.isOnScreenByTopEdge
+    get() = getBoundingClientRect().isOnScreenByTopEdge
+
+val DOMRect.isOnScreenByBottomEdge: Boolean
+    get() = bottom >= 0 && bottom <= window.innerHeight
+inline val Element.isOnScreenByBottomEdge
+    get() = getBoundingClientRect().isOnScreenByBottomEdge
+
+internal val DOMRect.isOnScreenVertically: Boolean
+    get() = isOnScreenByLeftEdge || isOnScreenByRightEdge
+
+
+val DOMRect.isOnScreenFully: Boolean
+    get() = isOnScreenByLeftEdge && isOnScreenByTopEdge && isOnScreenByRightEdge && isOnScreenByBottomEdge
+val Element.isOnScreenFully: Boolean
+    get() = getBoundingClientRect().isOnScreenFully
+
+val DOMRect.isOnScreen: Boolean
+    get() = isOnScreenFully || (isOnScreenHorizontally && isOnScreenVertically)
+inline val Element.isOnScreen: Boolean
+    get() = getBoundingClientRect().isOnScreen

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

@@ -0,0 +1,48 @@
+package dev.inmo.micro_utils.common
+
+import kotlinx.browser.window
+import org.w3c.dom.Element
+import org.w3c.dom.css.CSSStyleDeclaration
+
+sealed class Visibility
+object Visible : Visibility()
+object Invisible : Visibility()
+object Gone : Visibility()
+
+var CSSStyleDeclaration.visibilityState: Visibility
+    get() = when {
+        display == "none" -> Gone
+        visibility == "hidden" -> Invisible
+        else -> Visible
+    }
+    set(value) {
+        when (value) {
+            Visible -> {
+                if (display == "none") {
+                    display = "initial"
+                }
+                visibility = "visible"
+            }
+            Invisible -> {
+                if (display == "none") {
+                    display = "initial"
+                }
+                visibility = "hidden"
+            }
+            Gone -> {
+                display = "none"
+            }
+        }
+    }
+inline var Element.visibilityState: Visibility
+    get() = window.getComputedStyle(this).visibilityState
+    set(value) {
+        window.getComputedStyle(this).visibilityState = value
+    }
+
+inline val Element.isVisible: Boolean
+    get() = visibilityState == Visible
+inline val Element.isInvisible: Boolean
+    get() = visibilityState == Invisible
+inline val Element.isGone: Boolean
+    get() = visibilityState == Gone