From 3619afe3b06541949655c365d7a7e204bbaae2d1 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Fri, 26 Apr 2024 14:31:36 +0200
Subject: [PATCH] Add scrolling for event form

---
 src/EventForm.ce.vue         | 12 +++++++++++-
 src/composables/useScroll.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/composables/useScroll.js

diff --git a/src/EventForm.ce.vue b/src/EventForm.ce.vue
index f98907f..ecbd44e 100644
--- a/src/EventForm.ce.vue
+++ b/src/EventForm.ce.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <form v-if="loaded" novalidate @submit.prevent="submit">
+        <form ref="eventForm" v-if="loaded" novalidate @submit.prevent="submit">
             <div v-if="finished === false" class="bg-white @container rounded-lg shadow-lg">
                 <div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
                     <template v-for="(section, index) in v.sections">
@@ -156,6 +156,7 @@
 </template>
 
 <script setup>
+import useScroll from './composables/useScroll.js';
 import {computed, ref, watch} from 'vue';
 import {Carousel, Slide} from 'vue3-carousel';
 import Navigation from './components/Navigation.vue';
@@ -166,8 +167,10 @@ import useToastify from './composables/useToastify.js';
 import useFields from './composables/useFields.js';
 import SettingIcon from './components/icons/SettingIcon.vue';
 
+const {scroll} = useScroll();
 const {errorFromResponse} = useToastify();
 const finished = ref(false);
+const eventForm = ref(null);
 
 const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'editField', 'deleteField', 'active']);
 
@@ -215,6 +218,10 @@ const props = defineProps({
         default: () => null,
         reuired: false,
     },
+    scroll: {
+        default: () => false,
+        type: Boolean,
+    },
 });
 
 const active = ref(0);
@@ -224,6 +231,9 @@ const v = ref(null);
 
 watch(active, function (newValue) {
     emits('active', v.value.sections.length ? active.value : null);
+    if (props.scroll) {
+        scroll(eventForm.value, 300, -20);
+    }
 });
 
 const allFields = computed(() => {
diff --git a/src/composables/useScroll.js b/src/composables/useScroll.js
new file mode 100644
index 0000000..237d388
--- /dev/null
+++ b/src/composables/useScroll.js
@@ -0,0 +1,29 @@
+export default function useScroll() {
+    var el = document.scrollingElement;
+
+    function scrollToY(y, duration = 0) {
+        if (el.scrollTop === y) return;
+
+        const cosParameter = (el.scrollTop - y) / 2;
+        let scrollCount = 0;
+        let oldTimestamp = null;
+
+        function step(newTimestamp) {
+            if (oldTimestamp !== null) {
+                scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration;
+                if (scrollCount >= Math.PI) return (el.scrollTop = y);
+                el.scrollTop = cosParameter + y + cosParameter * Math.cos(scrollCount);
+            }
+            oldTimestamp = newTimestamp;
+            window.requestAnimationFrame(step);
+        }
+        window.requestAnimationFrame(step);
+    }
+
+    function scroll(element, duration = 0, addedOffset = 0) {
+        const offset = Math.round(element.getBoundingClientRect().top);
+        scrollToY(el.scrollTop + offset + addedOffset, duration);
+    }
+
+    return {scroll};
+}