PronounsPage/routes/faq.vue

<template>
    <Page>
        <LinksNav v-if="$config.links.enabled" />

        <h2 class="mb-4">
            <Icon v="map-marker-question" />
            <T>faq.headerLong</T>
        </h2>

        <section>
            <div class="input-group mb-3 bg-white">
                <span class="input-group-text">
                    <Icon v="filter" />
                </span>
                <input ref="filter" v-model="filter" class="form-control border-primary" :placeholder="$t('crud.filterLong')">
                <button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
                    <Icon v="times" />
                </button>
            </div>
        </section>

        <details v-show="!filter || $t('home.mission.header').toLowerCase().includes(filter.toLowerCase())" class="border mb-3" open>
            <summary class="d-none"></summary>
            <div class="px-3">
                <Mission />
            </div>
        </details>

        <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />

        <section itemscope itemtype="https://schema.org/FAQPage">
            <Answer
                v-for="question in Object.keys($t('faq.questions'))"
                v-show="!filter ||
                    $t(`faq.questions.${question}.question`).toLowerCase().includes(filter.toLowerCase()) ||
                    $t(`faq.questions.${question}.answer`).join('|').toLowerCase().includes(filter.toLowerCase())"
                :id="question"
                :key="question"
                :ref="question.replace(/-/g, '_')"
                :question="question"
                @click="setHash('', question)"
            />
        </section>

        <AdPlaceholder :phkey="['content-1', 'content-mobile-1']" />

        <section>
            <Share :title="$t('faq.headerLong')" />
        </section>
    </Page>
</template>

<script>
import { head } from '../src/helpers.ts';
import hash from '../plugins/hash.ts';

export default hash.extend({
    data() {
        return {
            filter: '',
        };
    },
    head() {
        return head({
            title: this.$t('faq.headerLong'),
        }, this.$translator);
    },
    mounted() {
        this.handleHash('', (hash) => {
            const $component = this.$refs[hash.replace(/-/g, '_')];
            if (!$component) {
                return;
            }
            const $el = $component[0].$el;
            $el.open = true;
            $el.focus();
            $el.scrollIntoView();
            setTimeout((_) => {
                $el.scrollIntoView();
            }, 1000);
        }, false);
    },
});
</script>

<style lang="scss" scoped>
    @import "assets/variables";

    details {
        summary {
            font-weight: bold;
        }
        &[open] {
            box-shadow: $box-shadow;
        }
    }
</style>