golem/Math
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Cleanup after the removal of the PNG fallback

Browse Source 
- remove the default "display: none" style on the SVG fallback
- remove the IE CSS hacks from ext.math.css
- add a client-side implementation of the PNG fallback

Bug: 71912
Change-Id: I91b11313aae25c4d05f8f2333d2f21537c9b8887
This commit is contained in:
Frédéric Wang 2014-10-10 21:25:42 +02:00 committed by Physikerwelt
parent 82f919b496
commit 0ddd3afaea
3 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
MathMathML.php
View File

@ -382,12 +382,11 @@ class MathMathML extends MathRenderer {
$attribs = array();
if ( $classOverride === false ) { // $class = '' suppresses class attribute
$class = $this->getClassName( true, $png );
$style = $png ? '' : 'display: none;';
} else {
$class = $classOverride;
$style = '';
}
$style = '';
if ( !$png ) {
$this->correctSvgStyle( $this->getSvg(), $style );
}
@ -452,9 +451,6 @@ class MathMathML extends MathRenderer {
}
$output .= Xml::tags( $element, array( 'class' => $this->getClassName(), 'style' => 'display: none;' ), $mml );
$output .= $this->getFallbackImage( $this->getMode() ) . "\n";
// TODO: Implement PNG image fallbacks without loading images in
// browsers that support MathML or SVG!
// $output .= $this->getFallbackImage( MW_MATH_PNG ) . "\n";
$output .= HTML::closeElement( $element );
return $output;
}

17
modules/ext.math.css
View File

@ -33,9 +33,9 @@ m|math {
src: url(./LatinModern/latinmodern-math.woff);
}
/* Default style for SVG. */
img.mwe-math-fallback-svg-inline { display: none; }
img.mwe-math-fallback-svg-display { display: none; margin-left: auto; margin-right: auto; }
/* Default style for the SVG fallback. */
img.mwe-math-fallback-svg-inline { display: inline; }
img.mwe-math-fallback-svg-display { display: block; margin-left: auto; margin-right: auto; }
/* Default style for the PNG fallback. */
img.mwe-math-fallback-png-inline { display: inline; vertical-align: middle; }
@ -49,13 +49,6 @@ img.mwe-math-fallback-png-display { display: block; }
/* Browser-specific hacks are bad but let's use that for now...
See http://browserhacks.com/ */
/* For all browsers but IE < 9, hide the PNG fallback and show the SVG instead.
We override the default style for PNG and SVG above */
:root * > img.mwe-math-fallback-svg-inline { display: inline !important; }
:root * > img.mwe-math-fallback-svg-display { display: block !important; }
:root * > img.mwe-math-fallback-svg-inline + img.mwe-math-fallback-png-inline,
:root * > img.mwe-math-fallback-svg-display + img.mwe-math-fallback-png-display { display: none; }
@-moz-document url-prefix() {
/* For Gecko browsers, hide the SVG fallback and show the MathML instead.
We override the style for SVG and MathML above */
@ -67,6 +60,6 @@ img.mwe-math-fallback-png-display { display: block; }
height: auto;
opacity: 1;
}
:root * > .mwe-math-mathml-inline + img.mwe-math-fallback-svg-inline,
:root * > .mwe-math-mathml-display + img.mwe-math-fallback-svg-display { display: none !important; }
.mwe-math-mathml-inline + img.mwe-math-fallback-svg-inline,
.mwe-math-mathml-display + img.mwe-math-fallback-svg-display { display: none !important; }
}

18
modules/ext.math.js
View File

@ -1,10 +1,22 @@
( function ( $ ) {
'use strict';
// These constants are taken from Math.php
var MW_MATH_PNG = 0, MW_MATH_MATHML = 5;
// If MathPlayer is installed we show the MathML rendering.
if (navigator.userAgent.indexOf('MathPlayer') > -1) {
$( '.mwe-math-mathml-a11y' ).removeClass( 'mwe-math-mathml-a11y' );
$( 'img' ).removeClass( 'mwe-math-fallback-svg-inline mwe-math-fallback-svg-display' );
$( 'img.mwe-math-fallback-svg-inline, img.mwe-math-fallback-svg-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')) {
$( 'img.mwe-math-fallback-svg-inline, img.mwe-math-fallback-svg-display' ).each(function() {
this.setAttribute('src', this.src.replace('mode=' + MW_MATH_MATHML, 'mode=' + MW_MATH_PNG));
});
$( 'img.mwe-math-fallback-svg-inline' ).removeClass( 'mwe-math-fallback-svg-inline' ).addClass( 'mwe-math-fallback-png-inline' );
$( 'img.mwe-math-fallback-svg-display' ).removeClass( 'mwe-math-fallback-svg-display' ).addClass( 'mwe-math-fallback-png-display' );
}
// FIXME: for browsers without SVG support, the <img> fallback should be
// updated to point to PNG images.
}( jQuery ) );