Merge remote-tracking branch 'origin/version-3' into version-3

lightningkite · Dec 4, 2024 · e98f21b · e98f21b
2 parents 5fbcdb7 + 7228b46
commit e98f21b
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 3 deletions.
diff --git a/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/internal/RootScreen.kt b/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/internal/RootScreen.kt
@@ -54,6 +54,7 @@ object RootScreen : Screen {
                     }
                 } in card
 
+                linkScreen { ScrollIntoViewTest }
                 linkScreen { FormattedInputTests() }
                 linkScreen { TestingGroundScreen }
                 linkScreen { ListEditScreen }

diff --git a/...-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/internal/ScrollIntoViewTest.kt b/...-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/internal/ScrollIntoViewTest.kt
@@ -0,0 +1,50 @@
+package com.lightningkite.mppexampleapp.internal
+
+import com.lightningkite.kiteui.Routable
+import com.lightningkite.kiteui.models.Align
+import com.lightningkite.kiteui.models.rem
+import com.lightningkite.kiteui.navigation.Screen
+import com.lightningkite.kiteui.reactive.Property
+import com.lightningkite.kiteui.reactive.reactive
+import com.lightningkite.kiteui.views.ViewWriter
+import com.lightningkite.kiteui.views.centered
+import com.lightningkite.kiteui.views.direct.*
+import com.lightningkite.kiteui.views.expanding
+import com.lightningkite.kiteui.views.important
+
+@Routable("internal/scroll-into-view-test")
+object ScrollIntoViewTest : Screen {
+
+    enum class Location { Top, Bottom }
+    val jumpTo = Property<Location?>(null)
+
+    override fun ViewWriter.render() {
+        scrolls - stack {
+            sizeConstraints(height = 500.rem) - col {
+                centered - important - button {
+                    reactive {
+                        if (jumpTo() == Location.Top) {
+                            this@button.scrollIntoView(horizontal = null, vertical = Align.Start, animate = true)
+                            jumpTo.value = null
+                        }
+                        println("Finished Check")
+                    }
+                    text("Scroll To Bottom")
+                    onClick { jumpTo.value = Location.Bottom }
+                }
+                expanding - space()
+                centered - important - button {
+                    reactive {
+                        if (jumpTo() == Location.Bottom) {
+                            this@button.scrollIntoView(horizontal = null, vertical = Align.Start, animate = true)
+                            jumpTo.value = null
+                        }
+                        println("Finished Check")
+                    }
+                    text("Scroll To Top")
+                    onClick { jumpTo.value = Location.Top }
+                }
+            }
+        }
+    }
+}
diff --git a/library/src/jsMain/kotlin/com/lightningkite/kiteui/views/RView.commonHtml.js.kt b/library/src/jsMain/kotlin/com/lightningkite/kiteui/views/RView.commonHtml.js.kt
@@ -9,9 +9,7 @@ import kotlinx.dom.addClass
 import kotlinx.dom.createElement
 import kotlinx.dom.hasClass
 import kotlinx.dom.removeClass
-import org.w3c.dom.Element
-import org.w3c.dom.HTMLElement
-import org.w3c.dom.get
+import org.w3c.dom.*
 import org.w3c.dom.svg.SVGElement
 import kotlin.js.Json
 import kotlin.js.json
@@ -264,11 +262,26 @@ actual class FutureElement actual constructor() {
 actual class FutureElementStyle(var native: dynamic)
 actual class FutureElementAttributes(var native: dynamic)
 
+fun Align?.logicalPosition(): ScrollLogicalPosition = when (this) {
+    Align.Start -> ScrollLogicalPosition.START
+    Align.Center -> ScrollLogicalPosition.CENTER
+    Align.End -> ScrollLogicalPosition.END
+
+    Align.Stretch -> ScrollLogicalPosition.START
+    null -> ScrollLogicalPosition.START
+}
 actual fun RView.nativeScrollIntoView(
     horizontal: Align?,
     vertical: Align?,
     animate: Boolean
 ) {
+    native.element?.scrollIntoView(
+        ScrollIntoViewOptions(
+            block = vertical.logicalPosition(),
+            inline = horizontal.logicalPosition(),
+            behavior = if (animate) ScrollBehavior.SMOOTH else ScrollBehavior.INSTANT
+        )
+    )
 }
 
 @Suppress("NOTHING_TO_INLINE")

diff --git a/library/src/jvmMain/kotlin/com/lightningkite/kiteui/views/RView.commonHtml.jvm.kt b/library/src/jvmMain/kotlin/com/lightningkite/kiteui/views/RView.commonHtml.jvm.kt
@@ -128,4 +128,5 @@ actual fun RView.nativeScrollIntoView(
     vertical: Align?,
     animate: Boolean
 ) {
+
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -128,4 +128,5 @@ actual fun RView.nativeScrollIntoView( @@
         vertical: Align?,
         animate: Boolean
     ) {
     }