2 * jQuery plugin to update the tooltip to show the correct access key
4 * @class jQuery.plugin.accessKeyLabel
8 // Cached access key prefix for used browser
9 var cachedAccessKeyPrefix
,
11 // Whether to use 'test-' instead of correct prefix (used for testing)
12 useTestPrefix
= false,
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';
19 * Get the prefix for the access key for browsers that don't support accessKeyLabel.
21 * For browsers that support accessKeyLabel, #getAccessKeyLabel never calls here.
24 * @param {Object} [ua] An object with a 'userAgent' and 'platform' property.
25 * @return {string} Access key prefix
27 function getAccessKeyPrefix( ua
) {
28 // use cached prefix if possible
29 if ( !ua
&& cachedAccessKeyPrefix
) {
30 return cachedAccessKeyPrefix
;
33 var profile
= $.client
.profile( ua
),
34 accessKeyPrefix
= 'alt-';
36 // Classic Opera on any platform
37 if ( profile
.name
=== 'opera' && profile
.versionNumber
< 15 ) {
38 accessKeyPrefix
= 'shift-esc-';
40 // Chrome and modern Opera on any platform
41 } else if ( profile
.name
=== 'chrome' || profile
.name
=== 'opera' ) {
43 profile
.platform
=== 'mac'
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)
52 // Non-Windows Safari with webkit_version > 526
53 } else if ( profile
.platform
!== 'win'
54 && profile
.name
=== 'safari'
55 && profile
.layoutVersion
> 526
57 accessKeyPrefix
= 'ctrl-alt-';
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' )
66 accessKeyPrefix
= 'ctrl-';
68 // Firefox/Iceweasel 2.x and later
69 } else if ( ( profile
.name
=== 'firefox' || profile
.name
=== 'iceweasel' )
70 && profile
.versionBase
> '1'
72 accessKeyPrefix
= 'alt-shift-';
77 cachedAccessKeyPrefix
= accessKeyPrefix
;
79 return accessKeyPrefix
;
83 * Get the access key label for an element.
85 * Will use native accessKeyLabel if available (currently only in Firefox 8+),
86 * falls back to #getAccessKeyPrefix.
89 * @param {HTMLElement} element Element to get the label for
90 * @return {string} Access key label
92 function getAccessKeyLabel( element
) {
93 // abort early if no access key
94 if ( !element
.accessKey
) {
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
;
102 return ( useTestPrefix
? 'test-' : getAccessKeyPrefix() ) + element
.accessKey
;
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.
110 * @param {HTMLElement} element Element with the accesskey
111 * @param {HTMLElement} titleElement Element with the title to update (may be the same as `element`)
113 function updateTooltipOnElement( element
, titleElement
) {
114 var array
= ( mw
.msg( 'word-separator' ) + mw
.msg( 'brackets' ) ).split( '$1' ),
115 regexp
= new RegExp( $.map( array
, mw
.RegExp
.escape
).join( '.*?' ) + '$' ),
116 oldTitle
= titleElement
.title
,
117 rawTitle
= oldTitle
.replace( regexp
, '' ),
119 accessKeyLabel
= getAccessKeyLabel( element
);
121 // don't add a title if the element didn't have one before
126 if ( accessKeyLabel
) {
127 // Should be build the same as in Linker::titleAttrib
128 newTitle
+= mw
.msg( 'word-separator' ) + mw
.msg( 'brackets', accessKeyLabel
);
130 if ( oldTitle
!== newTitle
) {
131 titleElement
.title
= newTitle
;
136 * Update the title for an element to show the correct access key label.
139 * @param {HTMLElement} element Element with the accesskey
141 function updateTooltip( element
) {
142 var id
, $element
, $label
, $labelParent
;
143 updateTooltipOnElement( element
, element
);
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, '\\"' );
151 $label = $( 'label
[for="' + id + '"]' );
152 if ( $label.length === 1 ) {
153 updateTooltipOnElement( element, $label[ 0 ] );
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 ] );
166 * Update the titles for all elements in a jQuery selection.
171 $.fn.updateTooltipAccessKeys = function () {
172 return this.each( function () {
173 updateTooltip( this );
178 * Exposed for testing.
180 * @method updateTooltipAccessKeys_getAccessKeyPrefix
181 * @inheritdoc #getAccessKeyPrefix
183 $.fn.updateTooltipAccessKeys.getAccessKeyPrefix = getAccessKeyPrefix;
186 * Switch test mode on and off.
188 * @method updateTooltipAccessKeys_setTestMode
189 * @param {boolean} mode New mode
191 $.fn.updateTooltipAccessKeys.setTestMode = function ( mode ) {
192 useTestPrefix = mode;
197 * @mixins jQuery.plugin.accessKeyLabel
200 }( jQuery, mediaWiki ) );