From f9c289aacd39b479c2566730448eedfa41a677c6 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Mon, 27 Jan 2020 22:53:22 +0100 Subject: [PATCH] Tooltip component now not responsible (but mobile friendly) & tooltips --- package.json | 1 + resources/components/departures/departure.html | 3 ++- resources/components/favourites.html | 1 + resources/components/tooltip.html | 8 +++++--- resources/styles/_animations.scss | 2 +- resources/ts/components/tooltip.ts | 13 +++++++++++-- resources/ts/components/utils.ts | 16 ++++++++++++---- templates/app.html.twig | 3 +++ yarn.lock | 5 +++++ 9 files changed, 41 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 4a2e80a..2351da6 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "mini-css-extract-plugin": "^0.4.2", "portal-vue": "^2.1.7", "vue-dragscroll": "^1.10.2", + "vue-removed-hook-mixin": "^0.1.1", "vue2-leaflet": "^1.0.2", "vuex": "^3.0.1", "vuex-class": "^0.3.1", diff --git a/resources/components/departures/departure.html b/resources/components/departures/departure.html index 8e2b97e..91040f0 100644 --- a/resources/components/departures/departure.html +++ b/resources/components/departures/departure.html @@ -29,7 +29,8 @@
diff --git a/resources/components/favourites.html b/resources/components/favourites.html index 75cc125..1c37382 100644 --- a/resources/components/favourites.html +++ b/resources/components/favourites.html @@ -13,6 +13,7 @@ diff --git a/resources/components/tooltip.html b/resources/components/tooltip.html index 4e64c6c..e5ebf55 100644 --- a/resources/components/tooltip.html +++ b/resources/components/tooltip.html @@ -1,5 +1,7 @@ - - - + + + + + diff --git a/resources/styles/_animations.scss b/resources/styles/_animations.scss index 8fa563a..8dbe350 100644 --- a/resources/styles/_animations.scss +++ b/resources/styles/_animations.scss @@ -14,7 +14,7 @@ } } -@include vue-animation(fade, 250ms ease-in-out) { +@include vue-animation(fade, 150ms ease-in-out) { 0% { opacity: 0 } diff --git a/resources/ts/components/tooltip.ts b/resources/ts/components/tooltip.ts index e78fd62..49755be 100644 --- a/resources/ts/components/tooltip.ts +++ b/resources/ts/components/tooltip.ts @@ -5,14 +5,23 @@ import { Prop } from "vue-property-decorator"; @Component({ template: require('../../components/tooltip.html') }) export class TooltipComponent extends Vue { @Prop({ type: String, default: "auto" }) public placement: string; + @Prop({ type: Number, default: 100 }) public delay: number; + public show: boolean = false; public element: Element = null; private _events: { [event: string]: any }; + private _timeout: number; mounted() { - this.$el.parentElement.addEventListener('mouseenter', this._events['mouseenter'] = () => this.show = true); - this.$el.parentElement.addEventListener('mouseleave', this._events['mouseleave'] = () => this.show = false); + this.$el.parentElement.addEventListener('mouseenter', this._events['mouseenter'] = () => { + this._timeout = window.setTimeout(() => { this.show = true }, this.delay); + }); + + this.$el.parentElement.addEventListener('mouseleave', this._events['mouseleave'] = () => { + window.clearTimeout(this._timeout); + this.show = false + }); this.element = this.$el.parentElement; } diff --git a/resources/ts/components/utils.ts b/resources/ts/components/utils.ts index 0dd293f..c81743e 100644 --- a/resources/ts/components/utils.ts +++ b/resources/ts/components/utils.ts @@ -2,9 +2,11 @@ import Vue from 'vue'; import { Component, Prop, Watch } from "vue-property-decorator"; import Popper, { Placement } from "popper.js"; import { Portal } from "portal-vue"; +import vueRemovedHookMixin from "vue-removed-hook-mixin"; @Component({ - template: require("../../components/popper.html") + template: require("../../components/popper.html"), + mixins: [ vueRemovedHookMixin ] }) export class PopperComponent extends Vue { @Prop([ String, HTMLElement ]) @@ -19,6 +21,9 @@ export class PopperComponent extends Vue { @Prop(Boolean) public arrow: boolean; + @Prop({ type: Boolean, default: true }) + public responsive: boolean; + private _event; private _popper; @@ -60,11 +65,11 @@ export class PopperComponent extends Vue { modifiers: { arrow: { enabled: this.arrow, element: this.$refs['arrow'] as Element }, responsive: { - enabled: true, + enabled: this.responsive, order: 890, fn(data) { if (window.innerWidth < 560) { - data.instance.options.placement = 'bottom'; + data.instance.options.placement = 'top'; data.styles.transform = `translate3d(0, ${data.offsets.popper.top}px, 0)`; data.styles.right = '0'; data.styles.left = '0'; @@ -95,9 +100,12 @@ export class PopperComponent extends Vue { } beforeDestroy() { - this._popper.destroy(); this._event && document.removeEventListener('click', this._event, { capture: true }); } + + removed() { + this._popper.destroy(); + } } @Component({ template: require('../../components/fold.html') }) diff --git a/templates/app.html.twig b/templates/app.html.twig index 738114e..3bbd9c3 100644 --- a/templates/app.html.twig +++ b/templates/app.html.twig @@ -86,6 +86,7 @@ Przystanki @@ -118,6 +119,7 @@ Wybierz przystanki @@ -127,6 +129,7 @@ Zapisane diff --git a/yarn.lock b/yarn.lock index 79c4d8d..2f3da73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6460,6 +6460,11 @@ vue-property-decorator@^7.0.0: dependencies: vue-class-component "^6.2.0" +vue-removed-hook-mixin@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/vue-removed-hook-mixin/-/vue-removed-hook-mixin-0.1.1.tgz#df2e939c87d8ecf1707f0b3b3a21def81dedbaf5" + integrity sha512-ElO0fn1QT25S7WVHUS7rSug7qBHwR/OPxBTdaH2+DdMz0A/lyw3H40c/Q08k2xvndmx7tAglsevcTk2DgKPsvw== + vue2-leaflet@^1.0.2: version "1.2.3" resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.2.3.tgz#00ddeb9db4fb9a5e3b8f9c09cd97a4734366415e"