mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-15 10:35:48 +00:00
ab57bed7da
The port of mousetrap wasn't really what we needed. This is much simpler, matches the rest of our code, and does exactly what we need. Change-Id: I67f413e097fc2d4078336edb14dd9440e771f196
193 lines
4.3 KiB
HTML
193 lines
4.3 KiB
HTML
<!--
|
|
/**
|
|
* VisualEditor command demo
|
|
*
|
|
* @file
|
|
* @ingroup Extensions
|
|
* @copyright 2011-2012 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>VisualEditor Command Demo</title>
|
|
<style>
|
|
body {
|
|
font-size: 1em;
|
|
font-family: sans-serif;
|
|
cursor: default;
|
|
}
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.flow li {
|
|
display: inline-block;
|
|
}
|
|
.stack li {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
padding: 0.75em;
|
|
margin: 0.125em;
|
|
border: solid 1px #ccc;
|
|
background-color: #eee;
|
|
border-radius: 0.5em;
|
|
}
|
|
.key {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
background-color: #555;
|
|
margin: 0.125em;
|
|
padding: 0.75em;
|
|
border-radius: 0.25em;
|
|
border: outset 2px #555;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.alias {
|
|
color: #bbb;
|
|
}
|
|
.active {
|
|
border: inset 2px #444;
|
|
background-color: #333;
|
|
text-shadow: 0 0 0.5em #fff
|
|
}
|
|
table {
|
|
width: 100%;
|
|
}
|
|
td {
|
|
padding: 3em;
|
|
vertical-align: top;
|
|
}
|
|
h1 {
|
|
padding: 1.5em;
|
|
padding-bottom: 0;
|
|
margin: 0;
|
|
}
|
|
h2 {
|
|
font-weight: normal;
|
|
}
|
|
.title {
|
|
color: #777;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1><span class="title">Key command: </span><span id="command"></span></h1>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<h2 class="title">Modifiers</h2>
|
|
<ul id="modifiers" class="flow"></ul>
|
|
</td>
|
|
<td>
|
|
<h2 class="title">Primary</h2>
|
|
<ul id="primary" class="flow"></ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<h2 class="title">Aliases</h2>
|
|
<ul id="aliases" class="stack"></ul>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<script src="../../modules/jquery/jquery.js"></script>
|
|
<script src="../../modules/ve/ve.js"></script>
|
|
<script src="../../modules/ve/ve.Command.js"></script>
|
|
<script>
|
|
function setCommand( command ) {
|
|
var i, len, key,
|
|
trigger = command.toString(),
|
|
parts = trigger.split( '+' );
|
|
$( '#command' ).text( trigger );
|
|
for ( i = 0, len = parts.length; i < len; i++ ) {
|
|
key = parts[i].replace( '\\', '\\\\' ).replace( '"', '\\"' );
|
|
$( '.key[rel="' + key + '"]' ).addClass( 'active' );
|
|
}
|
|
}
|
|
|
|
// Initialiation
|
|
|
|
var i, len, key,
|
|
$primary = $( '#primary' ),
|
|
$modifiers = $( '#modifiers' ),
|
|
$aliases = $( '#aliases' ),
|
|
primaryKeys = ve.Command.static.primaryKeys,
|
|
modifierKeys = ve.Command.static.modifierKeys,
|
|
keyAliases = ve.Command.static.keyAliases;
|
|
|
|
for ( i = 0, len = modifierKeys.length; i < len; i++ ) {
|
|
$modifiers.append(
|
|
$( '<li>' ).append(
|
|
$( '<span class="key"></span>' )
|
|
.text( modifierKeys[i] )
|
|
.attr( 'rel', modifierKeys[i] )
|
|
)
|
|
);
|
|
}
|
|
for ( i = 0, len = primaryKeys.length; i < len; i++ ) {
|
|
$primary.append(
|
|
$( '<li>' ).append(
|
|
$( '<span class="key"></span>' )
|
|
.text( primaryKeys[i] )
|
|
.attr( 'rel', primaryKeys[i] )
|
|
)
|
|
);
|
|
}
|
|
for ( key in keyAliases ) {
|
|
$aliases.append(
|
|
$( '<li>' )
|
|
.append( $( '<span class="key alias"></span>' ).text( key ) )
|
|
.append( '⇢' )
|
|
.append( $( '<span class="key"></span>' ).text( keyAliases[key] ) )
|
|
);
|
|
}
|
|
|
|
// Events
|
|
|
|
$( 'body' ).on( {
|
|
'keydown': function ( e ) {
|
|
$( '.active' ).removeClass( 'active' );
|
|
setCommand( new ve.Command( e ) );
|
|
e.preventDefault();
|
|
}
|
|
} );
|
|
$( '#primary .key, #modifiers .key' ).on( {
|
|
'mousedown': function( e ) {
|
|
var $target = $( e.target );
|
|
if ( e.which === 1 ) {
|
|
if ( $target.closest( '#primary' ).length ) {
|
|
$primary.find( '.active' ).removeClass( 'active' );
|
|
}
|
|
if ( !$target.hasClass( 'active' ) ) {
|
|
$target.addClass( 'active activating' );
|
|
}
|
|
}
|
|
},
|
|
'mouseup': function( e ) {
|
|
var parts = [],
|
|
$target = $( e.target );
|
|
if ( e.which === 1 ) {
|
|
if ( $target.hasClass( 'active' ) && !$target.hasClass( 'activating' ) ) {
|
|
$target.removeClass( 'active' );
|
|
}
|
|
$target.removeClass( 'activating' );
|
|
$( '.active' ).each( function () {
|
|
parts.push( $(this).attr( 'rel' ) );
|
|
} );
|
|
setCommand( new ve.Command( parts.join( '+' ) ) );
|
|
}
|
|
}
|
|
} );
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|