From ba4ec35410bd7dc1a64234c606845f99f42106a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jurij=20Podgor=C5=A1ek?= <jurij@kompot.si>
Date: Tue, 5 Mar 2024 22:48:42 +0100
Subject: [PATCH] Popravljeno skrolanje sekcij (urejanje, dodajanje pojma)

---
 nuxt/app.vue                  |  1 +
 nuxt/components/Pojem.vue     | 40 ++++++++++++++++++++++-------------
 nuxt/components/PojemForm.vue |  4 ++++
 nuxt/composables/ui.js        | 12 +++++++++++
 nuxt/pages/manifest/dodaj.vue |  9 +++-----
 nuxt/pages/manifest/index.vue |  7 +++---
 6 files changed, 49 insertions(+), 24 deletions(-)
 create mode 100644 nuxt/composables/ui.js

diff --git a/nuxt/app.vue b/nuxt/app.vue
index 503788a..cfff88b 100644
--- a/nuxt/app.vue
+++ b/nuxt/app.vue
@@ -83,6 +83,7 @@
     background: none;
     text-decoration: underline;
     width: fit-content;
+    z-index: 100;
   }
 
   footer {
diff --git a/nuxt/components/Pojem.vue b/nuxt/components/Pojem.vue
index 84ed8d9..a6068f6 100644
--- a/nuxt/components/Pojem.vue
+++ b/nuxt/components/Pojem.vue
@@ -3,6 +3,8 @@
 import { stripHtml } from 'string-strip-html'
 
 const { etherFetch } = useEtherpadApi()
+const { poskrolaj } = useUi()
+
 const store = usePojmiStore()
 const route = useRoute()
 
@@ -40,16 +42,15 @@ onMounted(() => {
   // Link na editiranje pojma? Poskrolaj nanj + odpri editiranje
   if (route.params.guid === revisionId.value) {
     urejanje.value = true
-    setTimeout(() => obrazec.value.scrollIntoView({ behavior: 'smooth' }), 50)
   } else {
     // Sicer samo poskrolaj na pojem
-    setTimeout(() => {
-      const sekcija = container.value.parentNode
-      console.log('skrolam?', sekcija)
-      if (sekcija) {
-        sekcija.scrollIntoView({ behavior: 'smooth' })
-      }
-    }, 50)
+    poskrolaj(container.value.parentNode)
+  }
+})
+
+onUpdated(() => {
+  if (route.params.guid === revisionId.value) {
+    poskrolaj(obrazec.value)
   }
 })
 
@@ -62,11 +63,13 @@ onMounted(() => {
       <h2>{{ naslov }}</h2>
       <div class="tekst" v-html="pojem.tekst" />
     </div>
-    <PojemForm v-if="urejanje"
-     ref="obrazec"
-     :revisionId="revisionId"
-     :pojem="pojem"
-     :onZapri="() => { urejanje = false; store.naloziPojme() }" />
+    <div class="obrazec" ref="obrazec">
+      <PojemForm v-if="urejanje"
+        ref="obrazec"
+        :revisionId="revisionId"
+        :pojem="pojem"
+        :onZapri="() => { urejanje = false; store.naloziPojme() }" />
+    </div>
   </section>
 </template>
 
@@ -87,9 +90,12 @@ onMounted(() => {
   }
 
   form.pojem {
+    width: 100%;
+  }
+
+  .obrazec {
     width: calc(50% - 32px);
     margin-left: 32px;
-    gap: 1rem;
     float: right;
   }
 
@@ -106,8 +112,12 @@ onMounted(() => {
       width: 100%;
     }
 
-    form.pojem {
+    .obrazec {
+      width: 100%;
       margin-left: 0;
+    }
+
+    form.pojem {
       min-height: 70vh;
       width: 100%;
       margin-left: 0;
diff --git a/nuxt/components/PojemForm.vue b/nuxt/components/PojemForm.vue
index 831e3ce..e99f015 100644
--- a/nuxt/components/PojemForm.vue
+++ b/nuxt/components/PojemForm.vue
@@ -78,6 +78,10 @@ const etherNalozen = ev => {
 </template>
 
 <style>
+form {
+  gap: 1rem;
+}
+
 .etherpad-textarea {
   width: 100%;
   flex-grow: 1;
diff --git a/nuxt/composables/ui.js b/nuxt/composables/ui.js
new file mode 100644
index 0000000..0fca18c
--- /dev/null
+++ b/nuxt/composables/ui.js
@@ -0,0 +1,12 @@
+/* uporabne zadeve za vmesnik */
+
+export const useUi = () => ({
+  poskrolaj: (sekcija, timeout = 50) => {
+    setTimeout(() => {
+      console.log('UI SKROL!', sekcija)
+      if (sekcija && sekcija.scrollIntoView) {
+        sekcija.scrollIntoView({ behavior: 'smooth' })
+      }
+    }, timeout)
+  }
+})
diff --git a/nuxt/pages/manifest/dodaj.vue b/nuxt/pages/manifest/dodaj.vue
index 9db94bf..d28c4bf 100644
--- a/nuxt/pages/manifest/dodaj.vue
+++ b/nuxt/pages/manifest/dodaj.vue
@@ -1,8 +1,9 @@
 <script setup="setup">
 
 const { getRandomUUID } = useCrypto()
-
 const { etherpadApiUrl } = useEtherpadApi()
+const { poskrolaj } = useUi()
+
 const route = useRoute()
 
 const revisionId = ref(null)
@@ -18,11 +19,7 @@ const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
 const onZapri = () => { navigateTo('/manifest#skrol') }
 
 onMounted(() => {
-  setTimeout(() => {
-    console.log('element?', obrazec.value)
-    debugger
-    obrazec.value.scrollIntoView({ behavior: 'smooth' })
-  }, 50)
+  poskrolaj(obrazec.value)
 })
 
 </script>
diff --git a/nuxt/pages/manifest/index.vue b/nuxt/pages/manifest/index.vue
index cb1c3b0..bdcc82f 100644
--- a/nuxt/pages/manifest/index.vue
+++ b/nuxt/pages/manifest/index.vue
@@ -1,15 +1,16 @@
 <script setup="setup">
 
 const store = usePojmiStore()
+
+const { poskrolaj } = useUi()
+
 await store.naloziPojme()
 
 const navodila = ref(null)
 
 onMounted(() => {
   if (location && location.hash == '#skrol') {
-    setTimeout(() => {
-      navodila.value.scrollIntoView({ behavior: 'smooth' })
-    }, 50)
+    poskrolaj(navodila.value)
   }
 })