mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Math
synced 2024-12-19 19:10:40 +00:00
d4e928a486
- Use span with a background-image instead of <img> for the fallback SVG so that they don't load in Gecko. - Make the image fallback a span inline-block so that it can have a dimension. Bug: 71929 Change-Id: I7f820cd5766db1fece452ebfc72915a55e42c82e
30 lines
1.4 KiB
JavaScript
30 lines
1.4 KiB
JavaScript
( function ( $ ) {
|
|
'use strict';
|
|
// The MW_MATH_PNG and MW_MATH_MATHML constants are taken from Math.php
|
|
var MW_MATH_PNG = 0, MW_MATH_MATHML = 5, img, url;
|
|
|
|
// If MathPlayer is installed we show the MathML rendering.
|
|
if (navigator.userAgent.indexOf('MathPlayer') > -1) {
|
|
$( '.mwe-math-mathml-a11y' ).removeClass( 'mwe-math-mathml-a11y' );
|
|
$( '.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display' ).css( 'display', 'none' );
|
|
return;
|
|
}
|
|
|
|
// We verify whether SVG as <img> is supported and otherwise use the
|
|
// PNG fallback. See https://github.com/Modernizr/Modernizr/blob/master/feature-detects/svg/asimg.js
|
|
if (!document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1')) {
|
|
$( '.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display' ).each(function() {
|
|
// Create a new PNG image to use as the fallback.
|
|
img = document.createElement('img');
|
|
url = this.style.backgroundImage.match(/url\('?([^']*)'?\)/)[1];
|
|
img.setAttribute( 'src', url.replace('mode=' + MW_MATH_MATHML, 'mode=' + MW_MATH_PNG) );
|
|
img.setAttribute( 'class', 'tex mwe-math-fallback-image-' + ($( this ).hasClass('mwe-math-fallback-image-inline') ? 'inline' : 'display') );
|
|
img.setAttribute( 'aria-hidden', 'true' );
|
|
this.parentNode.insertBefore( img, this );
|
|
|
|
// Hide the SVG fallback.
|
|
$( this ).css( 'display', 'none' );
|
|
});
|
|
}
|
|
}( jQuery ) );
|