manifest/nuxt/components/Pojem.vue

<script setup="setup">

import { stripHtml } from 'string-strip-html'

const { etherFetch } = useEtherpadApi()
const store = usePojmiStore()
const route = useRoute()

const props = defineProps({
  naslov: String
})

const pojem = computed(() => store.pojmi[props.naslov])
const revisionId = computed(() => pojem.value.id)

await store.naloziPojme()

const urejanje = ref(false)

const container = ref(null)

const urediPojem = async () => {
  // Ustvari pad s tekstom pojma, ce se ne obstaja
  const tekstPojma = stripHtml(pojem.value.tekst).result
  const resp = await etherFetch('/createPad', {
    padID: revisionId.value,
    text: tekstPojma
  })
  urejanje.value = true
}

onMounted(() => {
  // Link na pojem direktno? Poskrolaj nanj + odpri editiranje
  if (route.params.guid === revisionId.value) {
    urejanje.value = true
    //const element = document.getElementById("pojem-obrazec")
    //if (document.offsetWidth > 768) {
    setTimeout(() => container.value.scrollIntoView({
      behavior: 'smooth'
    }), 50)
    //}
  }
})

</script>

<template>
  <section class="pojem" ref="container">
    <div>
      <h2>{{ pojem.naslov }}</h2>
      <div class="tekst" v-html="pojem.tekst" />
    </div>
    <PojemForm v-if="urejanje"
     :revisionId="revisionId"
     :pojem="pojem"
     :urejanje="urejanje"
     :onZapri="() => { urejanje = false; store.naloziPojme()}"
     />
    <div>
      <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
    </div>
  </section>
</template>

<style scoped>
  form.pojem {
    width: calc(50% - 32px);
    margin-left: 32px;
    gap: 1rem;
  }

  .pojem > div {
    position: relative;
    width: 50%;
  }
  .gumb {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  @media screen and (max-width: 768px) {
    PojemForm {
      width: 50%;
      float: right;
    }
    .pojem > div {
      min-height: 4rem;
      width: 100%;
    }
  }

    @media screen and (max-width: 768px) {
      form.pojem {
        width: 100%;
        margin-left: 0;
        min-height: 70vh;
    }
  }
</style>