From 2be8effe4bdb2116db58e70cef615f6fccb3ee3a Mon Sep 17 00:00:00 2001 From: paidge <paidge_cs@hotmail.com> Date: Tue, 15 Feb 2022 17:05:05 +0100 Subject: [PATCH] improve tooltips integration --- components/btn/Clipboard.vue | 13 +------------ components/member/Card.vue | 5 +++++ nuxt.config.js | 10 ++++++---- plugins/bootstrap.js | 19 +++++++++++++++++++ plugins/favourites.js | 17 ----------------- 5 files changed, 31 insertions(+), 33 deletions(-) create mode 100644 plugins/bootstrap.js diff --git a/components/btn/Clipboard.vue b/components/btn/Clipboard.vue index 5c4b56a..361bf39 100644 --- a/components/btn/Clipboard.vue +++ b/components/btn/Clipboard.vue @@ -4,6 +4,7 @@ id="btncopy" class="btn btn-info px-4 py-1" type="button" + v-tooltip="$t('copie') + ' !'" @click="copyText"> <outline-clipboard-copy-icon class="icon" /> </button> @@ -16,8 +17,6 @@ </template> <script> -import Tooltip from "~/node_modules/bootstrap/js/dist/tooltip" - export default { props: { textContent: { @@ -28,16 +27,6 @@ export default { methods: { copyText() { navigator.clipboard.writeText(this.textContent) - let btn = document.querySelector("#btncopy") - let tooltip = new Tooltip(btn, { - title: this.$t("copie") + " !", - trigger: "manual" - }) - - tooltip.show() - setTimeout(() => { - tooltip.hide() - }, 1000) } } } diff --git a/components/member/Card.vue b/components/member/Card.vue index a0eee30..fb8b16f 100644 --- a/components/member/Card.vue +++ b/components/member/Card.vue @@ -12,6 +12,11 @@ <button id="favori" class="btn btn-info" + v-tooltip=" + $favourites.list.includes(hash.uid) + ? $t('favoris.supprime') + : $t('favoris.enregistre') + " @click="$favourites.toggleFavourite(hash.uid, $event)"> <outline-user-add-icon class="icon" diff --git a/nuxt.config.js b/nuxt.config.js index 859393e..d7b5715 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -30,7 +30,11 @@ export default { css: ["@/assets/css/style.scss"], // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins - plugins: ["~plugins/favourites.js", "~plugins/filters.js"], + plugins: [ + "~plugins/favourites.js", + "~plugins/filters.js", + "~plugins/bootstrap.js" + ], // Auto import components: https://go.nuxtjs.dev/config-components components: true, @@ -123,7 +127,5 @@ export default { }, // Build Configuration: https://go.nuxtjs.dev/config-build - build: { - plugins: [] - } + build: {} } diff --git a/plugins/bootstrap.js b/plugins/bootstrap.js new file mode 100644 index 0000000..e008bc2 --- /dev/null +++ b/plugins/bootstrap.js @@ -0,0 +1,19 @@ +import Vue from "vue" +import Tooltip from "~/node_modules/bootstrap/js/dist/tooltip" + +Vue.directive("tooltip", function (el, binding) { + let tooltip = {} + + tooltip = new Tooltip(el, { + title: binding.value, + html: true, + trigger: "manual" + }) + + el.onclick = function () { + tooltip.show() + setTimeout(() => { + tooltip.hide() + }, 1000) + } +}) diff --git a/plugins/favourites.js b/plugins/favourites.js index f4c5302..766b4c5 100644 --- a/plugins/favourites.js +++ b/plugins/favourites.js @@ -1,5 +1,4 @@ import Vue from "vue" -import Tooltip from "~/node_modules/bootstrap/js/dist/tooltip" export default (context, inject) => { let liste_favoris = localStorage.favourites @@ -7,22 +6,6 @@ export default (context, inject) => { : [] let toggleFavourite = (uid, e) => { - let btn = e.currentTarget - let tooltip = new Tooltip(btn, { - title: function () { - return context.$favourites.list.includes(uid) - ? context.app.i18n.t("favoris.supprime") - : context.app.i18n.t("favoris.enregistre") - }, - html: true, - trigger: "manual" - }) - - tooltip.show() - setTimeout(() => { - tooltip.hide() - }, 1000) - if (!context.$favourites.list.includes(uid)) { context.$favourites.list.push(uid) } else { -- GitLab