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 ] = CKEDITOR.env.mac ? coreLang[ 224 ] : 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                 for ( var i = 0; i < modifiers.length; i++ ) {
  89                         modifier = modifiers[ i ];
  90                         quotient = keystroke / modifiers[ i ];
  91                         if ( quotient > 1 && quotient <= 2 ) {
  92                                 keystroke -= modifier;
  93                                 presentation.push( keyMap[ modifier ] );
  94                         }
  95                 }
  96
  97                 presentation.push( keyMap[ keystroke ] || String.fromCharCode( keystroke ) );
  98
  99                 return presentation.join( '+' );
 100         }
 101
 102         var variablesPattern = /\$\{(.*?)\}/g,
 103                 replaceVariables = function( match, name ) {
 104                         var keystrokeCode = editor.getCommandKeystroke( name );
 105
 106                         // Return the keystroke representation or leave match untouched
 107                         // if there's no keystroke for such command.
 108                         return keystrokeCode ? representKeyStroke( keystrokeCode ) : match;
 109                 };
 110
 111         // Create the help list directly from lang file entries.
 112         function buildHelpContents() {
 113                 var pageTpl = '<div class="cke_accessibility_legend" role="document" aria-labelledby="' + id + '_arialbl" tabIndex="-1">%1</div>' +
 114                                 '<span id="' + id + '_arialbl" class="cke_voice_label">' + lang.contents + ' </span>',
 115                         sectionTpl = '<h1>%1</h1><dl>%2</dl>',
 116                         itemTpl = '<dt>%1</dt><dd>%2</dd>';
 117
 118                 var pageHtml = [],
 119                         sections = lang.legend,
 120                         sectionLength = sections.length;
 121
 122                 for ( var i = 0; i < sectionLength; i++ ) {
 123                         var section = sections[ i ],
 124                                 sectionHtml = [],
 125                                 items = section.items,
 126                                 itemsLength = items.length;
 127
 128                         for ( var j = 0; j < itemsLength; j++ ) {
 129                                 var item = items[ j ],
 130                                         // (http://dev.ckeditor.com/ticket/16980) There should be a different hotkey shown in Commands on Edge browser.
 131                                         itemLegend = CKEDITOR.env.edge && item.legendEdge ? item.legendEdge : item.legend;
 132
 133                                 itemLegend = itemLegend.replace( variablesPattern, replaceVariables );
 134
 135                                 // (http://dev.ckeditor.com/ticket/9765) If some commands haven't been replaced in the legend,
 136                                 // most likely their keystrokes are unavailable and we shouldn't include
 137                                 // them in our help list.
 138                                 if ( itemLegend.match( variablesPattern ) ) {
 139                                         continue;
 140                                 }
 141
 142                                 sectionHtml.push( itemTpl.replace( '%1', item.name ).replace( '%2', itemLegend ) );
 143                         }
 144
 145                         pageHtml.push( sectionTpl.replace( '%1', section.name ).replace( '%2', sectionHtml.join( '' ) ) );
 146                 }
 147
 148                 return pageTpl.replace( '%1', pageHtml.join( '' ) );
 149         }
 150
 151         return {
 152                 title: lang.title,
 153                 minWidth: 600,
 154                 minHeight: 400,
 155                 contents: [ {
 156                         id: 'info',
 157                         label: editor.lang.common.generalTab,
 158                         expand: true,
 159                         elements: [
 160                                 {
 161                                         type: 'html',
 162                                         id: 'legends',
 163                                         style: 'white-space:normal;',
 164                                         focus: function() {
 165                                                 this.getElement().focus();
 166                                         },
 167                                         html: buildHelpContents() + '<style type="text/css">' +
 168                                                 '.cke_accessibility_legend' +
 169                                                 '{' +
 170                                                         'width:600px;' +
 171                                                         'height:400px;' +
 172                                                         'padding-right:5px;' +
 173                                                         'overflow-y:auto;' +
 174                                                         'overflow-x:hidden;' +
 175                                                 '}' +
 176                                                 // Some adjustments are to be done for Quirks to work "properly" (http://dev.ckeditor.com/ticket/5757)
 177                                                 '.cke_browser_quirks .cke_accessibility_legend,' +
 178                                                 '{' +
 179                                                         'height:390px' +
 180                                                 '}' +
 181                                                 // Override non-wrapping white-space rule in reset css.
 182                                                 '.cke_accessibility_legend *' +
 183                                                 '{' +
 184                                                         'white-space:normal;' +
 185                                                 '}' +
 186                                                 '.cke_accessibility_legend h1' +
 187                                                 '{' +
 188                                                         'font-size: 20px;' +
 189                                                         'border-bottom: 1px solid #AAA;' +
 190                                                         'margin: 5px 0px 15px;' +
 191                                                 '}' +
 192                                                 '.cke_accessibility_legend dl' +
 193                                                 '{' +
 194                                                         'margin-left: 5px;' +
 195                                                 '}' +
 196                                                 '.cke_accessibility_legend dt' +
 197                                                 '{' +
 198                                                         'font-size: 13px;' +
 199                                                         'font-weight: bold;' +
 200                                                 '}' +
 201                                                 '.cke_accessibility_legend dd' +
 202                                                 '{' +
 203                                                         'margin:10px' +
 204                                                 '}' +
 205                                                 '</style>'
 206                                 }
 207                         ]
 208                 } ],
 209                 buttons: [ CKEDITOR.dialog.cancelButton ]
 210         };
 211 } );