1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import * as doms from "../../shared/utils/dom";
interface Point {
x: number;
y: number;
}
const hintPosition = (element: Element): Point => {
const { left, top, right, bottom } = doms.viewportRect(element);
if (element.tagName !== "AREA") {
return { x: left, y: top };
}
return {
x: (left + right) / 2,
y: (top + bottom) / 2,
};
};
export default abstract class Hint {
private hint: HTMLElement;
private tag: string;
constructor(target: HTMLElement, tag: string) {
this.tag = tag;
const doc = target.ownerDocument;
if (doc === null) {
throw new TypeError("ownerDocument is null");
}
const { x, y } = hintPosition(target);
const { scrollX, scrollY } = window;
const hint = doc.createElement("span");
hint.className = "vimvixen-hint";
hint.textContent = tag;
hint.style.left = x + scrollX + "px";
hint.style.top = y + scrollY + "px";
doc.body.append(hint);
this.hint = hint;
this.show();
}
show(): void {
this.hint.style.display = "inline";
}
hide(): void {
this.hint.style.display = "none";
}
remove(): void {
this.hint.remove();
}
getTag(): string {
return this.tag;
}
}
export class LinkHint extends Hint {
private target: HTMLAnchorElement | HTMLAreaElement;
constructor(target: HTMLAnchorElement | HTMLAreaElement, tag: string) {
super(target, tag);
this.target = target;
}
getLink(): string {
return this.target.href;
}
getLinkTarget(): string | null {
return this.target.getAttribute("target");
}
click(): void {
this.target.click();
}
}
export class InputHint extends Hint {
private target: HTMLElement;
constructor(target: HTMLElement, tag: string) {
super(target, tag);
this.target = target;
}
activate(): void {
const target = this.target;
switch (target.tagName.toLowerCase()) {
case "input":
switch ((target as HTMLInputElement).type) {
case "file":
case "checkbox":
case "radio":
case "submit":
case "reset":
case "button":
case "image":
case "color":
return target.click();
default:
return target.focus();
}
case "textarea":
return target.focus();
case "button":
case "summary":
return target.click();
default:
if (doms.isContentEditable(target)) {
return target.focus();
} else if (target.hasAttribute("tabindex")) {
return target.click();
}
}
}
}
|
