kadet/czydojade
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix tooltips on chrome mobile

Browse Source
This commit is contained in:
Kacper Donat 2020-01-29 18:10:34 +01:00
parent 53c43cd431
commit 9b13612c43
1 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
resources/ts/components/tooltip.ts
View File

@ -6,7 +6,7 @@ type Events = {
[evnet: string]: (...any) => void, [evnet: string]: (...any) => void,
} }
type Trigger = "hover" | "focus"; type Trigger = "hover" | "focus" | "long-press";
const longPressTimeout = 1000; const longPressTimeout = 1000;
@ -14,10 +14,10 @@ const longPressTimeout = 1000;
export class TooltipComponent extends Vue { export class TooltipComponent extends Vue {
@Prop({ type: String, default: "top" }) public placement: string; @Prop({ type: String, default: "top" }) public placement: string;
@Prop({ type: Number, default: 400 }) public delay: number; @Prop({ type: Number, default: 400 }) public delay: number;
@Prop({ type: Array, default: () => ["hover", "focus"]}) public triggers: Trigger[]; @Prop({ type: Array, default: () => ["hover", "focus", "long-press"]}) public triggers: Trigger[];
public show: boolean = false; public show: boolean = false;
public root: Element = null; public root: HTMLElement = null;
private _events: Events = {}; private _events: Events = {};
@ -38,7 +38,7 @@ export class TooltipComponent extends Vue {
let blocked: boolean = false; let blocked: boolean = false;
if (this.triggers.includes("hover")) { if (this.triggers.includes("hover") && !this.$isTouch) {
let timeout; let timeout;
this._events['mouseenter'] = () => { this._events['mouseenter'] = () => {
@ -56,7 +56,7 @@ export class TooltipComponent extends Vue {
this._events['touchstart'] = () => { this._events['touchstart'] = () => {
// this is to prevent showing tooltips after tap // this is to prevent showing tooltips after tap
blocked = true; blocked = true;
setTimeout(() => blocked = false, longPressTimeout); setTimeout(() => blocked = false, longPressTimeout - 50);
} }
} }
@ -69,6 +69,31 @@ export class TooltipComponent extends Vue {
}; };
} }
if (this.triggers.includes("long-press") && this.$isTouch) {
let timeout;
this._events['touchstart'] = () => {
timeout = window.setTimeout(() => { this.show = true }, longPressTimeout);
// this is to prevent showing tooltips after tap
blocked = true;
setTimeout(() => blocked = false, longPressTimeout - 50);
};
this._events['touchend'] = ev => {
window.clearTimeout(timeout);
if (this.show) {
ev.preventDefault();
this.root.focus();
}
};
this._events['blur'] = () => {
this.show = false
};
}
this._registerEventListeners(); this._registerEventListeners();
} }