resources/src/jquery/jquery.accessKeyLabel.js

   1 /**
   2  * jQuery plugin to update the tooltip to show the correct access key
   3  *
   4  * @class jQuery.plugin.accessKeyLabel
   5  */
   6 ( function ( $, mw ) {
   7
   8 // Cached access key prefix for used browser
   9 var cachedAccessKeyPrefix,
  10
  11         // Wether to use 'test-' instead of correct prefix (used for testing)
  12         useTestPrefix = false,
  13
  14         // tag names which can have a label tag
  15         // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form-associated_content
  16         labelable = 'button, input, textarea, keygen, meter, output, progress, select';
  17
  18 /**
  19  * Get the prefix for the access key for browsers that don't support accessKeyLabel.
  20  *
  21  * For browsers that support accessKeyLabel, #getAccessKeyLabel never calls here.
  22  *
  23  * @private
  24  * @param {Object} [ua] An object with a 'userAgent' and 'platform' property.
  25  * @return {string} Access key prefix
  26  */
  27 function getAccessKeyPrefix( ua ) {
  28         // use cached prefix if possible
  29         if ( !ua && cachedAccessKeyPrefix ) {
  30                 return cachedAccessKeyPrefix;
  31         }
  32
  33         var profile = $.client.profile( ua ),
  34                 accessKeyPrefix = 'alt-';
  35
  36         // Opera on any platform
  37         if ( profile.name === 'opera' ) {
  38                 accessKeyPrefix = 'shift-esc-';
  39
  40         // Chrome on any platform
  41         } else if ( profile.name === 'chrome' ) {
  42                 accessKeyPrefix = (
  43                         profile.platform === 'mac'
  44                                 // Chrome on Mac
  45                                 ? 'ctrl-option-'
  46                                 // Chrome on Windows or Linux
  47                                 // (both alt- and alt-shift work, but alt with E, D, F etc does not
  48                                 // work since they are browser shortcuts)
  49                                 : 'alt-shift-'
  50                 );
  51
  52         // Non-Windows Safari with webkit_version > 526
  53         } else if ( profile.platform !== 'win'
  54                 && profile.name === 'safari'
  55                 && profile.layoutVersion > 526
  56         ) {
  57                 accessKeyPrefix = 'ctrl-alt-';
  58
  59         // Safari/Konqueror on any platform, or any browser on Mac
  60         // (but not Safari on Windows)
  61         } else if ( !( profile.platform === 'win' && profile.name === 'safari' )
  62                 && ( profile.name === 'safari'
  63                 || profile.platform === 'mac'
  64                 || profile.name === 'konqueror' )
  65         ) {
  66                 accessKeyPrefix = 'ctrl-';
  67
  68         // Firefox/Iceweasel 2.x and later
  69         } else if ( ( profile.name === 'firefox' || profile.name === 'iceweasel' )
  70                 && profile.versionBase > '1'
  71         ) {
  72                 accessKeyPrefix = 'alt-shift-';
  73         }
  74
  75         // cache prefix
  76         if ( !ua ) {
  77                 cachedAccessKeyPrefix = accessKeyPrefix;
  78         }
  79         return accessKeyPrefix;
  80 }
  81
  82 /**
  83  * Get the access key label for an element.
  84  *
  85  * Will use native accessKeyLabel if available (currently only in Firefox 8+),
  86  * falls back to #getAccessKeyPrefix.
  87  *
  88  * @private
  89  * @param {HTMLElement} element Element to get the label for
  90  * @return {string} Access key label
  91  */
  92 function getAccessKeyLabel( element ) {
  93         // abort early if no access key
  94         if ( !element.accessKey ) {
  95                 return '';
  96         }
  97         // use accessKeyLabel if possible
  98         // http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#dom-accesskeylabel
  99         if ( !useTestPrefix && element.accessKeyLabel ) {
 100                 return element.accessKeyLabel;
 101         }
 102         return ( useTestPrefix ? 'test-' : getAccessKeyPrefix() ) + element.accessKey;
 103 }
 104
 105 /**
 106  * Update the title for an element (on the element with the access key or it's label) to show
 107  * the correct access key label.
 108  *
 109  * @private
 110  * @param {HTMLElement} element Element with the accesskey
 111  * @param {HTMLElement} titleElement Element with the title to update (may be the same as `element`)
 112  */
 113 function updateTooltipOnElement( element, titleElement ) {
 114         var array = ( mw.msg( 'word-separator' ) + mw.msg( 'brackets' ) ).split( '$1' ),
 115                 regexp = new RegExp( $.map( array, $.escapeRE ).join( '.*?' ) + '$' ),
 116                 oldTitle = titleElement.title,
 117                 rawTitle = oldTitle.replace( regexp, '' ),
 118                 newTitle = rawTitle,
 119                 accessKeyLabel = getAccessKeyLabel( element );
 120
 121         // don't add a title if the element didn't have one before
 122         if ( !oldTitle ) {
 123                 return;
 124         }
 125
 126         if ( accessKeyLabel ) {
 127                 // Should be build the same as in Linker::titleAttrib
 128                 newTitle += mw.msg( 'word-separator' ) + mw.msg( 'brackets', accessKeyLabel );
 129         }
 130         if ( oldTitle !== newTitle ) {
 131                 titleElement.title = newTitle;
 132         }
 133 }
 134
 135 /**
 136  * Update the title for an element to show the correct access key label.
 137  *
 138  * @private
 139  * @param {HTMLElement} element Element with the accesskey
 140  */
 141 function updateTooltip( element ) {
 142         var id, $element, $label, $labelParent;
 143         updateTooltipOnElement( element, element );
 144
 145         // update associated label if there is one
 146         $element = $( element );
 147         if ( $element.is( labelable ) ) {
 148                 // Search it using 'for' attribute
 149                 id = element.id.replace( /"/g, '\\"' );
 150                 if ( id ) {
 151                         $label = $( 'label[for="' + id + '"]' );
 152                         if ( $label.length === 1 ) {
 153                                 updateTooltipOnElement( element, $label[0] );
 154                         }
 155                 }
 156
 157                 // Search it as parent, because the form control can also be inside the label element itself
 158                 $labelParent = $element.parents( 'label' );
 159                 if ( $labelParent.length === 1 ) {
 160                         updateTooltipOnElement( element, $labelParent[0] );
 161                 }
 162         }
 163 }
 164
 165 /**
 166  * Update the titles for all elements in a jQuery selection.
 167  *
 168  * @return {jQuery}
 169  * @chainable
 170  */
 171 $.fn.updateTooltipAccessKeys = function () {
 172         return this.each( function () {
 173                 updateTooltip( this );
 174         } );
 175 };
 176
 177 /**
 178  * Exposed for testing.
 179  *
 180  * @method updateTooltipAccessKeys_getAccessKeyPrefix
 181  * @inheritdoc #getAccessKeyPrefix
 182  */
 183 $.fn.updateTooltipAccessKeys.getAccessKeyPrefix = getAccessKeyPrefix;
 184
 185 /**
 186  * Switch test mode on and off.
 187  *
 188  * @method updateTooltipAccessKeys_setTestMode
 189  * @param {boolean} mode New mode
 190  */
 191 $.fn.updateTooltipAccessKeys.setTestMode = function ( mode ) {
 192         useTestPrefix = mode;
 193 };
 194
 195 /**
 196  * @class jQuery
 197  * @mixins jQuery.plugin.accessKeyLabel
 198  */
 199
 200 }( jQuery, mediaWiki ) );