lexique.vue

<template>
	<main class="container">
		<div class="rech-lexique row pb-3">
			<div class="col-md-6 mx-auto">
				<h2 class="text-center font-weight-light">
					<solid-question-mark-circle-icon
						style="width: 2rem"
						aria-hidden="true" />&nbsp;{{ $t("lexique") }}
				</h2>
				<BtnSearch
					@erase="search = ''"
					v-model="search"
					:help="$t('recherche.desc.lexicon')" />
			</div>
		</div>
		<div class="table-responsive mt-1">
			<table class="table table-striped table-bordered">
				<thead>
					<tr class="d-none d-sm-table-row">
						<th>{{ $t("mot") }}</th>
						<th>{{ $t("description") }}</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="mot in listeMotsTrad" :key="mot.title">
						<th scope="row" v-html="mot.title"></th>
						<td v-html="mot.desc"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</main>
</template>

<script>
export default {
	data() {
		return {
			breadcrumb: [
				{
					text: this.$t("accueil"),
					to: "/"
				},
				{
					text: this.$t("lexique"),
					active: true
				}
			],
			search: "",
			listeMots: [
				"dossier",
				"adhesion",
				"certification",
				"membre",
				"membre.referent",
				"membre.calculant",
				"membre.qualite",
				"membre.distance",
				"noeud",
				"revocation",
				"piscine",
				"wot",
				"dividende",
				"bloc",
				"blockchain",
				"pow",
				"centralite",
				"duniter",
				"trm",
				"cle.privee",
				"cle.publique",
				"compte.membre",
				"compte.portefeuille"
			]
		}
	},
	nuxtI18n: {
		paths: {
			fr: "/lexique",
			en: "/lexicon",
			es: "/lexico",
			de: "/lexikon",
			it: "/lessico"
		}
	},
	methods: {
		wrapSearch(str, txt) {
			if (str == "") {
				return txt
			}

			return txt.replace(new RegExp(str, "gi"), "<mark>$&</mark>")
		}
	},
	computed: {
		listeMotsTrad() {
			let retour = []
			this.listeMots.forEach((el) => {
				let isFound = false
				let desc = this.$t(el + ".desc")
				let title = this.$t(el + ".title")

				if (desc.toLowerCase().includes(this.search.toLowerCase())) {
					desc = this.wrapSearch(this.search, desc)
					isFound = true
				}

				if (title.toLowerCase().includes(this.search.toLowerCase())) {
					title = this.wrapSearch(this.search, title)
					isFound = true
				}

				if (isFound) {
					retour.push({
						desc: desc,
						title: title
					})
				}
			})
			retour.sort((a, b) => {
				if (a.title < b.title) {
					return -1
				}
				if (a.title > b.title) {
					return 1
				}
				return 0
			})
			return retour
		}
	},
	beforeMount() {
		window.addEventListener("scroll", function (e) {
			let scrollClassList = document.querySelector(".rech-lexique").classList
			let reduced = scrollClassList.contains("reduced")
			if (!reduced && window.scrollY > 20) {
				scrollClassList.add("reduced")
			} else if (reduced && window.scrollY <= 20) {
				scrollClassList.remove("reduced")
			}
		})
	},
	mounted() {
		$nuxt.$emit("changeRoute", this.breadcrumb)
	}
}
</script>

<style lang="scss" scoped>
.rech-lexique {
	position: sticky;
	top: var(--paddingTop);
	background: var(--bg-primary-color);

	h2 {
		margin: 3rem 0;
		transition: margin 0.3s ease-in-out;
	}

	&.reduced h2 {
		margin: 0.5rem 0;
	}
}

th {
	min-width: 200px;
}

tr {
	display: flex;
	flex-direction: column;
}

@media (min-width: 576px) {
	tr {
		display: table-row;
	}
}
</style>