mediawiki-extensions-Visual.../demos/ve/eventSequencer.html
Timo Tijhof 3e9b227a6a Clean up HTML files, Gruntfile and remove index-phantomjs-tmp hack
Consistently:
* Use <!DOCTYPE html>.
* Use lowercase element tags.
* Indent <head> from <html>.
* Use <meta charset="utf-8">.
* Indent <script> and <style> content from open/close tag.
* Put <link> before <script> when in <head> (in ve/test).
* Use .html instead of .php for indexes where PHP is no
  longer used.
* Use the same license header as we use elsewhere (/*! instead
  of /** and no @file)

Gruntfile:
* Include the new .js files in jshint (demos/**/*.js).
* Order buildloader keys in the same order as the directories
  they go to (alphabetically).
* Add missing jshint patterns:
  - .docs/**/*.js
  - build/**/*.js
  - modules/ve-wmf/**/*.js
* Add missing qunit test:
  - qunit.unicodejs
* Add missing watch patterns:
  - .jscs.json
  - qunit.unicodejs

Also:
* Moved relatively large pieces of script into separate files
  so that they are less repeated (though .template) and also
  able to be linted properly.
* Fixed jshint warnings in newly-created trigger.js and demo.js.
* Moved <script> elements already in <body> to bottom of <body>
  (in ve/test and eg-iframe).
* Moved <script> in eg-iframe from <head> to <body>.
* Fixed buildloader grunt task to use a non-\n whitespace match.
  for the start as well, the newline before the placeholder was
  being stripped.
* Removed the (now obsolete) index-phantomjs-tmp hack.

Change-Id: I7c5a371b82f69f367a8e1c11673d2f37868bc931
2013-12-18 07:00:23 +00:00

76 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#good, #bad {
min-height: 2em;
border: solid red 1px;
}
</style>
<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/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 src="../../modules/ve/ce/ve.ce.js"></script>
<script>
function makeListener( message ) {
return function ( e ) {
console.log( message + showEventCode( e ) +
' ' + JSON.stringify( document.getElementById(
'good' ).innerHTML ) );
};
};
function onbodyload () {
var i, len, eventSequencer, eventName,
onEvents = {},
afterEvents = {},
eventNames = ['compositionstart', 'compositionend',
'keydown', 'keyup', 'keypress'],
badDiv = document.getElementById( 'bad' ),
goodDiv = document.getElementById( 'good' );
for ( i = 0, len = eventNames.length; i < len; i++ ) {
eventName = eventNames[i];
onEvents[eventName] = makeListener( 'on ' + eventName );
afterEvents[eventName] = makeListener(
'after ' + eventName );
addSetTimeoutListeners( badDiv, eventName );
}
eventSequencer = new ve.EventSequencer( eventNames );
eventSequencer.on( onEvents );
eventSequencer.after( afterEvents );
eventSequencer.attach( $( goodDiv ) );
goodDiv.focus();
}
function addSetTimeoutListeners( node, eventName ) {
node.addEventListener( eventName, function ( e ) {
console.log( eventName + showEventCode( e ) + ': ' +
JSON.stringify( node.innerHTML ) );
setTimeout( function () {
console.log( 'setTimeout from ' + eventName +
showEventCode( e ) + ': ' +
JSON.stringify( node.innerHTML ) );
} );
});
}
function showEventCode( e ) {
return ( e && e.keyCode ) ? '(keyCode=' + e.keyCode + ')' : '';
}
</script>
</head>
<body onload="onbodyload()">
Good (ve.EventSequencer):
<div id="good" contenteditable="true"></div>
Bad (setTimeout):
<div id="bad" contenteditable="true"></div>
</body>
</html>