70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<template>
|
|
<section>
|
|
<h1 class="title">{{ title }}</h1>
|
|
<ul class="index">
|
|
<li v-for="topic in sortedTopics" :key="topic.title">
|
|
<router-link
|
|
:to="`#${toValidID(topic.title)}`"
|
|
@click.stop="goTo(`#${toValidID(topic.title)}`)"
|
|
>
|
|
{{ topic.title }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
<!-- <div style="float: none"><div style="page-break-after: always"></div></div> -->
|
|
<Chapter
|
|
v-for="topic in sortedTopics"
|
|
:key="topic.title"
|
|
:id="toValidID(topic.title)"
|
|
:topic="topic"
|
|
:print="print"
|
|
:show_message_data="show_message_data"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapState } from "vuex";
|
|
import Chapter from "./Chapter.vue";
|
|
|
|
export default {
|
|
name: "Content",
|
|
components: {
|
|
Chapter,
|
|
},
|
|
props: ["print", "show_message_data"],
|
|
computed: {
|
|
...mapState(["currentStream", "streams"]),
|
|
...mapGetters(["sortedTopics"]),
|
|
title() {
|
|
return this.streams.find((s) => s.name == this.currentStream)
|
|
? this.currentStream.replace("pub-", "")
|
|
: "Stream does not exist.";
|
|
},
|
|
},
|
|
methods: {
|
|
toValidID(string) {
|
|
return encodeURIComponent("ch-" + string)
|
|
.toLowerCase()
|
|
.replace(/\.|%[0-9a-z]{2}/gi, "");
|
|
},
|
|
goTo(id) {
|
|
document.querySelector(`${id}`).scrollIntoView({
|
|
behavior: "smooth",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@media print {
|
|
.title {
|
|
/* display: none; */
|
|
}
|
|
}
|
|
|
|
.index {
|
|
page-break-after: always;
|
|
}
|
|
</style> |