sources/plugins/a11yhelp/dialogs/a11yhelp.js

   1 /**
   2  * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 CKEDITOR.dialog.add( 'a11yHelp', function( editor ) {
   7         var lang = editor.lang.a11yhelp,
   8                 coreLang = editor.lang.common.keyboard,
   9                 id = CKEDITOR.tools.getNextId();
  10
  11         // CharCode <-> KeyChar.
  12         var keyMap = {
  13                 8: coreLang[ 8 ],
  14                 9: lang.tab,
  15                 13: coreLang[ 13 ],
  16                 16: coreLang[ 16 ],
  17                 17: coreLang[ 17 ],
  18                 18: coreLang[ 18 ],
  19                 19: lang.pause,
  20                 20: lang.capslock,
  21                 27: lang.escape,
  22                 33: lang.pageUp,
  23                 34: lang.pageDown,
  24                 35: coreLang[ 35 ],
  25                 36: coreLang[ 36 ],
  26                 37: lang.leftArrow,
  27                 38: lang.upArrow,
  28                 39: lang.rightArrow,
  29                 40: lang.downArrow,
  30                 45: lang.insert,
  31                 46: coreLang[ 46 ],
  32                 91: lang.leftWindowKey,
  33                 92: lang.rightWindowKey,
  34                 93: lang.selectKey,
  35                 96: lang.numpad0,
  36                 97: lang.numpad1,
  37                 98: lang.numpad2,
  38                 99: lang.numpad3,
  39                 100: lang.numpad4,
  40                 101: lang.numpad5,
  41                 102: lang.numpad6,
  42                 103: lang.numpad7,
  43                 104: lang.numpad8,
  44                 105: lang.numpad9,
  45                 106: lang.multiply,
  46                 107: lang.add,
  47                 109: lang.subtract,
  48                 110: lang.decimalPoint,
  49                 111: lang.divide,
  50                 112: lang.f1,
  51                 113: lang.f2,
  52                 114: lang.f3,
  53                 115: lang.f4,
  54                 116: lang.f5,
  55                 117: lang.f6,
  56                 118: lang.f7,
  57                 119: lang.f8,
  58                 120: lang.f9,
  59                 121: lang.f10,
  60                 122: lang.f11,
  61                 123: lang.f12,
  62                 144: lang.numLock,
  63                 145: lang.scrollLock,
  64                 186: lang.semiColon,
  65                 187: lang.equalSign,
  66                 188: lang.comma,
  67                 189: lang.dash,
  68                 190: lang.period,
  69                 191: lang.forwardSlash,
  70                 192: lang.graveAccent,
  71                 219: lang.openBracket,
  72                 220: lang.backSlash,
  73                 221: lang.closeBracket,
  74                 222: lang.singleQuote
  75         };
  76
  77         // Modifier keys override.
  78         keyMap[ CKEDITOR.ALT ] = coreLang[ 18 ];
  79         keyMap[ CKEDITOR.SHIFT ] = coreLang[ 16 ];
  80         keyMap[ CKEDITOR.CTRL ] = coreLang[ 17 ];
  81
  82         // Sort in desc.
  83         var modifiers = [ CKEDITOR.ALT, CKEDITOR.SHIFT, CKEDITOR.CTRL ];
  84
  85         function representKeyStroke( keystroke ) {
  86                 var quotient, modifier,
  87                         presentation = [];
  88
  89                 for ( var i = 0; i < modifiers.length; i++ ) {
  90                         modifier = modifiers[ i ];
  91                         quotient = keystroke / modifiers[ i ];
  92                         if ( quotient > 1 && quotient <= 2 ) {
  93                                 keystroke -= modifier;
  94                                 presentation.push( keyMap[ modifier ] );
  95                         }
  96                 }
  97
  98                 presentation.push( keyMap[ keystroke ] || String.fromCharCode( keystroke ) );
  99
 100                 return presentation.join( '+' );
 101         }
 102
 103         var variablesPattern = /\$\{(.*?)\}/g;
 104
 105         var replaceVariables = ( function() {
 106                 // Swaps keystrokes with their commands in object literal.
 107                 // This makes searching keystrokes by command much easier.
 108                 var keystrokesByCode = editor.keystrokeHandler.keystrokes,
 109                         keystrokesByName = {};
 110
 111                 for ( var i in keystrokesByCode )
 112                         keystrokesByName[ keystrokesByCode[ i ] ] = i;
 113
 114                 return function( match, name ) {
 115                         // Return the keystroke representation or leave match untouched
 116                         // if there's no keystroke for such command.
 117                         return keystrokesByName[ name ] ? representKeyStroke( keystrokesByName[ name ] ) : match;
 118                 };
 119         } )();
 120
 121         // Create the help list directly from lang file entries.
 122         function buildHelpContents() {
 123                 var pageTpl = '<div class="cke_accessibility_legend" role="document" aria-labelledby="' + id + '_arialbl" tabIndex="-1">%1</div>' +
 124                                 '<span id="' + id + '_arialbl" class="cke_voice_label">' + lang.contents + ' </span>',
 125                         sectionTpl = '<h1>%1</h1><dl>%2</dl>',
 126                         itemTpl = '<dt>%1</dt><dd>%2</dd>';
 127
 128                 var pageHtml = [],
 129                         sections = lang.legend,
 130                         sectionLength = sections.length;
 131
 132                 for ( var i = 0; i < sectionLength; i++ ) {
 133                         var section = sections[ i ],
 134                                 sectionHtml = [],
 135                                 items = section.items,
 136                                 itemsLength = items.length;
 137
 138                         for ( var j = 0; j < itemsLength; j++ ) {
 139                                 var item = items[ j ],
 140                                         itemLegend = item.legend.replace( variablesPattern, replaceVariables );
 141
 142                                 // (#9765) If some commands haven't been replaced in the legend,
 143                                 // most likely their keystrokes are unavailable and we shouldn't include
 144                                 // them in our help list.
 145                                 if ( itemLegend.match( variablesPattern ) )
 146                                         continue;
 147
 148                                 sectionHtml.push( itemTpl.replace( '%1', item.name ).replace( '%2', itemLegend ) );
 149                         }
 150
 151                         pageHtml.push( sectionTpl.replace( '%1', section.name ).replace( '%2', sectionHtml.join( '' ) ) );
 152                 }
 153
 154                 return pageTpl.replace( '%1', pageHtml.join( '' ) );
 155         }
 156
 157         return {
 158                 title: lang.title,
 159                 minWidth: 600,
 160                 minHeight: 400,
 161                 contents: [ {
 162                         id: 'info',
 163                         label: editor.lang.common.generalTab,
 164                         expand: true,
 165                         elements: [
 166                                 {
 167                                         type: 'html',
 168                                         id: 'legends',
 169                                         style: 'white-space:normal;',
 170                                         focus: function() {
 171                                                 this.getElement().focus();
 172                                         },
 173                                         html: buildHelpContents() + '<style type="text/css">' +
 174                                                 '.cke_accessibility_legend' +
 175                                                 '{' +
 176                                                         'width:600px;' +
 177                                                         'height:400px;' +
 178                                                         'padding-right:5px;' +
 179                                                         'overflow-y:auto;' +
 180                                                         'overflow-x:hidden;' +
 181                                                 '}' +
 182                                                 // Some adjustments are to be done for Quirks to work "properly" (#5757)
 183                                                 '.cke_browser_quirks .cke_accessibility_legend,' +
 184                                                 '{' +
 185                                                         'height:390px' +
 186                                                 '}' +
 187                                                 // Override non-wrapping white-space rule in reset css.
 188                                                 '.cke_accessibility_legend *' +
 189                                                 '{' +
 190                                                         'white-space:normal;' +
 191                                                 '}' +
 192                                                 '.cke_accessibility_legend h1' +
 193                                                 '{' +
 194                                                         'font-size: 20px;' +
 195                                                         'border-bottom: 1px solid #AAA;' +
 196                                                         'margin: 5px 0px 15px;' +
 197                                                 '}' +
 198                                                 '.cke_accessibility_legend dl' +
 199                                                 '{' +
 200                                                         'margin-left: 5px;' +
 201                                                 '}' +
 202                                                 '.cke_accessibility_legend dt' +
 203                                                 '{' +
 204                                                         'font-size: 13px;' +
 205                                                         'font-weight: bold;' +
 206                                                 '}' +
 207                                                 '.cke_accessibility_legend dd' +
 208                                                 '{' +
 209                                                         'margin:10px' +
 210                                                 '}' +
 211                                                 '</style>'
 212                                 }
 213                         ]
 214                 } ],
 215                 buttons: [ CKEDITOR.dialog.cancelButton ]
 216         };
 217 } );