mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-25 14:56:20 +00:00
213 lines
5.1 KiB
HTML
213 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Keyboard Event Logger</title>
|
|
<style>
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 1em;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
#ve-demo-halo {
|
|
width: 100%;
|
|
min-height: 2em;
|
|
}
|
|
|
|
#ve-demo-content {
|
|
border: 1px solid gray;
|
|
width: 100%;
|
|
min-height: 2em;
|
|
max-height: 15%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#ve-demo-log {
|
|
margin-top: 1em;
|
|
border: 1px solid gray;
|
|
width: 100%;
|
|
height: 80%;
|
|
white-space: pre;
|
|
font-family: monospace;
|
|
padding: 0;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form id="ve-demo-halo">
|
|
IME identifier (name and version):
|
|
<input type="text" name="identifier" autofocus>
|
|
<input type="submit" value="Start Logging Keyboard Events">
|
|
</form>
|
|
<div id="ve-demo-content" contenteditable="true" style="display: none;"></div>
|
|
<textarea id="ve-demo-log"></textarea>
|
|
|
|
<script src="../../modules/jquery/jquery.js"></script>
|
|
<script src="../../modules/jquery/jquery.client.js"></script>
|
|
<script src="../../modules/oojs/oojs.js"></script>
|
|
<script src="../../modules/rangy/rangy-core-1.3.js"></script>
|
|
<script src="../../modules/rangy/rangy-position-1.3.js"></script>
|
|
<script src="../../modules/unicodejs/unicodejs.js"></script>
|
|
<script src="../../modules/unicodejs/unicodejs.graphemebreak.js"></script>
|
|
<script src="../../modules/unicodejs/unicodejs.wordbreak.js"></script>
|
|
<script src="../../modules/ve/ve.js"></script>
|
|
<script src="../../modules/ve/ve.EventSequencer.js"></script>
|
|
<script>
|
|
( function () {
|
|
var haloElement, contentElement, logElement, startTime, timeoutId,
|
|
oldHtml = '',
|
|
oldStartOffset = 0,
|
|
oldEndOffset = 0,
|
|
comments,
|
|
log = [];
|
|
|
|
function makeEventHandler( eventName ) {
|
|
return function ( e ) {
|
|
logEvent( 'sendEvent', eventName, e );
|
|
};
|
|
}
|
|
|
|
function makeAfterLoopHandler () {
|
|
return function () {
|
|
logEvent( 'endLoop' );
|
|
};
|
|
}
|
|
|
|
function eventToObject( e ) {
|
|
// TODO: flesh this out more
|
|
if ( !e || e.keyCode === undefined ) {
|
|
return {};
|
|
} else {
|
|
return { 'keyCode': e.keyCode };
|
|
}
|
|
}
|
|
|
|
function logEvent( methodName, eventName, e ) {
|
|
var args = [],
|
|
msUtc = (new Date().getTime() - startTime) / 1000,
|
|
newHtml = contentElement.innerHTML,
|
|
rangyRange = rangy.getSelection( document ).getRangeAt(0),
|
|
newStartOffset = rangyRange.startOffset,
|
|
newEndOffset = rangyRange.endOffset;
|
|
|
|
if ( oldHtml !== newHtml ) {
|
|
logWrite( {
|
|
'seq': log.length,
|
|
'time': msUtc,
|
|
'action': 'changeText',
|
|
'args': [ newHtml ]
|
|
} );
|
|
oldHtml = newHtml;
|
|
}
|
|
if (
|
|
oldStartOffset !== newStartOffset ||
|
|
oldEndOffset !== newEndOffset
|
|
) {
|
|
logWrite( {
|
|
'seq': log.length,
|
|
'time': msUtc,
|
|
'action': 'changeSel',
|
|
'args': [
|
|
newStartOffset,
|
|
newEndOffset
|
|
]
|
|
} );
|
|
oldStartOffset = newStartOffset;
|
|
oldEndOffset = newEndOffset;
|
|
}
|
|
if ( eventName !== undefined ) {
|
|
args.push( eventName );
|
|
args.push( eventToObject( e ) );
|
|
}
|
|
|
|
logWrite( {
|
|
'seq': log.length,
|
|
'time': msUtc,
|
|
'action': methodName,
|
|
'args': args
|
|
} );
|
|
}
|
|
|
|
function logWrite( val ) {
|
|
log.push( val );
|
|
showLog();
|
|
}
|
|
|
|
function showLog() {
|
|
var i, len, jsons = [];
|
|
jsons.push( JSON.stringify( comments ) );
|
|
for ( i = 0, len = log.length; i < len; i++ ) {
|
|
jsons.push( JSON.stringify( log[i] ) );
|
|
}
|
|
logElement.value = '[\n\t'
|
|
+ jsons.join(',\n\t') + '\n]';
|
|
logElement.scrollTop = logElement.scrollHeight;
|
|
}
|
|
|
|
/** @param {jQuery.Event} e Halo form submit event */
|
|
function start( e ) {
|
|
e.preventDefault();
|
|
|
|
comments = {
|
|
'imeIdentifier': haloElement.identifier.value,
|
|
'userAgent': navigator.userAgent,
|
|
'startDom': contentElement.innerHTML
|
|
};
|
|
|
|
haloElement.style.display = 'none';
|
|
contentElement.style.display = 'block';
|
|
contentElement.focus();
|
|
}
|
|
|
|
function init() {
|
|
var i, len, range, sel, eventSequencer, handlers = {},
|
|
eventNames = [
|
|
'compositionstart',
|
|
'compositionend',
|
|
'keydown',
|
|
'keyup',
|
|
'keypress',
|
|
'input'
|
|
];
|
|
|
|
haloElement = document.getElementById( 've-demo-halo' ),
|
|
contentElement = document.getElementById( 've-demo-content' ),
|
|
logElement = document.getElementById( 've-demo-log' );
|
|
logElement.value = '';
|
|
|
|
eventSequencer = new ve.EventSequencer( eventNames );
|
|
eventSequencer.attach( $( contentElement ) );
|
|
|
|
for ( i = 0, len = eventNames.length; i < len; i++ ) {
|
|
handlers[ eventNames[i] ] =
|
|
makeEventHandler( eventNames[i] );
|
|
}
|
|
eventSequencer.on( handlers );
|
|
eventSequencer.afterLoop( [ makeAfterLoopHandler() ] );
|
|
|
|
startTime = new Date().getTime();
|
|
|
|
$( haloElement ).on( 'submit', start );
|
|
|
|
$( logElement ).on( 'click', function () {
|
|
if ( this.select ) {
|
|
this.select();
|
|
}
|
|
} );
|
|
}
|
|
|
|
init();
|
|
}() );
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|