Popravljeno skrolanje sekcij (urejanje, dodajanje pojma)

pull/54/head
Jurij Podgoršek 2024-03-05 22:48:42 +01:00
parent ce05befebe
commit ba4ec35410
6 changed files with 49 additions and 24 deletions

View File

@ -83,6 +83,7 @@
background: none;
text-decoration: underline;
width: fit-content;
z-index: 100;
}
footer {

View File

@ -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' })
poskrolaj(container.value.parentNode)
}
}, 50)
})
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>
<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;

View File

@ -78,6 +78,10 @@ const etherNalozen = ev => {
</template>
<style>
form {
gap: 1rem;
}
.etherpad-textarea {
width: 100%;
flex-grow: 1;

View File

@ -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)
}
})

View File

@ -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>

View File

@ -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)
}
})