/
typer.js
93 lines (80 loc) · 3.21 KB
/
typer.js
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
const getDefaultConfig = (randomizer, window) => {
const document = window.document;
const body = document.body;
const defaultEventTypes = ['keypress', 'keyup', 'keydown'];
const defaultKeyGenerator = () => {
return randomizer.natural({ min: 3, max: 254 });
};
const defaultTargetElement = (x, y) => {
return document.elementFromPoint(x, y);
};
const defaultShowAction = (targetElement, x, y, key) => {
const typeSignal = document.createElement('div');
typeSignal.style.zIndex = 2000;
typeSignal.style.border = '3px solid orange';
typeSignal.style['border-radius'] = '50%'; // Chrome
typeSignal.style.borderRadius = '50%'; // Mozilla
typeSignal.style.width = '40px';
typeSignal.style.height = '40px';
typeSignal.style['box-sizing'] = 'border-box';
typeSignal.style.position = 'absolute';
typeSignal.style.webkitTransition = 'opacity 1s ease-out';
typeSignal.style.mozTransition = 'opacity 1s ease-out';
typeSignal.style.transition = 'opacity 1s ease-out';
typeSignal.style.left = x + 'px';
typeSignal.style.top = y + 'px';
typeSignal.style.textAlign = 'center';
typeSignal.style.paddingTop = '7px';
typeSignal.innerHTML = String.fromCharCode(key);
const element = body.appendChild(typeSignal);
setTimeout(() => {
body.removeChild(element);
}, 1000);
setTimeout(() => {
element.style.opacity = 0;
}, 50);
};
return {
eventTypes: defaultEventTypes,
showAction: defaultShowAction,
keyGenerator: defaultKeyGenerator,
targetElement: defaultTargetElement,
log: false,
};
};
export default (userConfig) => ({ logger, randomizer, window }) => {
const document = window.document;
const documentElement = document.documentElement;
const config = { ...getDefaultConfig(randomizer, window), ...userConfig };
return () => {
const keyboardEvent = document.createEventObject
? document.createEventObject()
: document.createEvent('Events');
const eventType = randomizer.pick(config.eventTypes);
const key = config.keyGenerator();
const posX = randomizer.natural({
max: Math.max(0, documentElement.clientWidth - 1),
});
const posY = randomizer.natural({
max: Math.max(0, documentElement.clientHeight - 1),
});
const targetElement = config.targetElement(posX, posY);
if (keyboardEvent.initEvent) {
keyboardEvent.initEvent(eventType, true, true);
}
keyboardEvent.keyCode = key;
keyboardEvent.which = key;
keyboardEvent.keyCodeVal = key;
if (targetElement.dispatchEvent) {
targetElement.dispatchEvent(keyboardEvent);
} else {
targetElement.fireEvent('on' + eventType, keyboardEvent);
}
if (typeof config.showAction === 'function') {
config.showAction(targetElement, posX, posY, key);
}
if (config.log && logger) {
logger.log('gremlin', 'typer type', String.fromCharCode(key), 'at', posX, posY);
}
};
};