From 7228b461d49e4bbeb33f6867a8331a2aad9a950c Mon Sep 17 00:00:00 2001
From: iHoonter <huntdawghero@gmail.com>
Date: Tue, 3 Dec 2024 12:00:46 -0700
Subject: [PATCH] scrollIntoView fixed (implemented)

---
 .../mppexampleapp/internal/RootScreen.kt      |  1 +
 .../internal/ScrollIntoViewTest.kt            | 50 +++++++++++++++++++
 .../kiteui/views/RView.commonHtml.js.kt       | 19 +++++--
 .../kiteui/views/RView.commonHtml.jvm.kt      |  1 +
 4 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/internal/ScrollIntoViewTest.kt

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
index 8e2f8ca94..3ac80a874 100644
--- 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/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/internal/ScrollIntoViewTest.kt b/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/internal/ScrollIntoViewTest.kt
new file mode 100644
index 000000000..110c33f1b
--- /dev/null
+++ b/example-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 }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
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
index cc6bc61f3..5d7cd2802 100644
--- 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
index 821c3bda4..243974304 100644
--- 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
 ) {
+
 }
\ No newline at end of file