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 => {
let { 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;
let doc = target.ownerDocument;
if (doc === null) {
throw new TypeError('ownerDocument is null');
}
let { x, y } = hintPosition(target);
let { scrollX, scrollY } = window;
let 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 {
let 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();
}
}
}
}
|
