wikimedia/mediawiki-extensions-ImageMap
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/ImageMap synced 2024-11-27 15:40:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Add back description links when !$wgParserEnableLegacyMediaDOM"

Browse source
This commit is contained in:
jenkins-bot 2023-05-25 16:28:37 +00:00 committed by Gerrit Code Review
parent 2d9633abc6 b2113e0154
commit 7416c17cda
5 changed files with 148 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
extension.json
View file

@ -24,5 +24,22 @@
"AutoloadNamespaces": { "AutoloadNamespaces": {
"MediaWiki\\Extension\\ImageMap\\": "includes/" "MediaWiki\\Extension\\ImageMap\\": "includes/"
}, },
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteExtPath": "ImageMap"
},
"ResourceModules": {
"ext.imagemap": {
"packageFiles": [
"resources/ext.imagemap.js"
],
"dependencies": [
"ext.imagemap.styles"
]
},
"ext.imagemap.styles": {
"styles": "resources/ext.imagemap.styles.less"
}
},
"manifest_version": 2 "manifest_version": 2
} }

121
includes/ImageMap.php
View file

@ -42,6 +42,10 @@ class ImageMap implements ParserFirstCallInitHook {
private const TOP_LEFT = 3; private const TOP_LEFT = 3;
private const NONE = 4; private const NONE = 4;
private const DESC_TYPE_MAP = [
'top-right', 'bottom-right', 'bottom-left', 'top-left'
];
/** /**
* @param Parser $parser * @param Parser $parser
*/ */
@ -384,50 +388,75 @@ class ImageMap implements ParserFirstCallInitHook {
$wrapper->removeChild( $anchor ); $wrapper->removeChild( $anchor );
} }
// Determine whether a "magnify" link is present $parserOutput = $parser->getOutput();
$magnify = DOMCompat::querySelector( $domFragment, '.magnify' );
if ( $enableLegacyMediaDOM && !$magnify && $descType !== self::NONE ) {
// Add image description link
if ( $descType === self::TOP_LEFT || $descType === self::BOTTOM_LEFT ) {
$marginLeft = 0;
} else {
$marginLeft = $thumbWidth - 20;
}
if ( $descType === self::TOP_LEFT || $descType === self::TOP_RIGHT ) {
$marginTop = -$thumbHeight;
// 1px hack for IE, to stop it poking out the top
$marginTop++;
} else {
$marginTop = -20;
}
$div->setAttribute( 'style', "height: {$thumbHeight}px; width: {$thumbWidth}px; " );
$descWrapper = $domDoc->createElement( 'div' );
$div->appendChild( $descWrapper );
$descWrapper->setAttribute( 'style',
"margin-left: {$marginLeft}px; " .
"margin-top: {$marginTop}px; " .
"text-align: left;"
);
$descAnchor = $domDoc->createElement( 'a' ); if ( $enableLegacyMediaDOM ) {
$descWrapper->appendChild( $descAnchor ); // Determine whether a "magnify" link is present
$descAnchor->setAttribute( 'href', $imageTitle->getLocalURL() ); $magnify = DOMCompat::querySelector( $domFragment, '.magnify' );
$descAnchor->setAttribute( if ( !$magnify && $descType !== self::NONE ) {
'title', // Add image description link
wfMessage( 'imagemap_description' )->inContentLanguage()->text() if ( $descType === self::TOP_LEFT || $descType === self::BOTTOM_LEFT ) {
); $marginLeft = 0;
$descImg = $domDoc->createElement( 'img' ); } else {
$descAnchor->appendChild( $descImg ); $marginLeft = $thumbWidth - 20;
$descImg->setAttribute( }
'alt', if ( $descType === self::TOP_LEFT || $descType === self::TOP_RIGHT ) {
wfMessage( 'imagemap_description' )->inContentLanguage()->text() $marginTop = -$thumbHeight;
); // 1px hack for IE, to stop it poking out the top
$url = $config->get( 'ExtensionAssetsPath' ) . '/ImageMap/resources/desc-20.png'; $marginTop++;
$descImg->setAttribute( } else {
'src', $marginTop = -20;
OutputPage::transformResourcePath( $config, $url ) }
); $div->setAttribute( 'style', "height: {$thumbHeight}px; width: {$thumbWidth}px; " );
$descImg->setAttribute( 'style', 'border: none;' ); $descWrapper = $domDoc->createElement( 'div' );
$div->appendChild( $descWrapper );
$descWrapper->setAttribute( 'style',
"margin-left: {$marginLeft}px; " .
"margin-top: {$marginTop}px; " .
"text-align: left;"
);
$descAnchor = $domDoc->createElement( 'a' );
$descWrapper->appendChild( $descAnchor );
$descAnchor->setAttribute( 'href', $imageTitle->getLocalURL() );
$descAnchor->setAttribute(
'title',
wfMessage( 'imagemap_description' )->inContentLanguage()->text()
);
$descImg = $domDoc->createElement( 'img' );
$descAnchor->appendChild( $descImg );
$descImg->setAttribute(
'alt',
wfMessage( 'imagemap_description' )->inContentLanguage()->text()
);
$url = $config->get( 'ExtensionAssetsPath' ) . '/ImageMap/resources/desc-20.png';
$descImg->setAttribute(
'src',
OutputPage::transformResourcePath( $config, $url )
);
$descImg->setAttribute( 'style', 'border: none;' );
}
} else {
'@phan-var DOMElement $wrapper';
$typeOf = $wrapper->getAttribute( 'typeof' ) ?? '';
if ( !preg_match( '#\bmw:File/Thumb\b#', $typeOf ) && $descType !== self::NONE ) {
// The following classes are used here:
// * mw-ext-imagemap-desc-top-right
// * mw-ext-imagemap-desc-bottom-right
// * mw-ext-imagemap-desc-bottom-left
// * mw-ext-imagemap-desc-top-left
DOMCompat::getClassList( $wrapper )->add(
'mw-ext-imagemap-desc-' . self::DESC_TYPE_MAP[$descType]
);
// $imageNode was cloned above
$img = $imageParent->firstChild;
'@phan-var DOMElement $img';
if ( !$img->hasAttribute( 'resource' ) ) {
$img->setAttribute( 'resource', $imageTitle->getLocalURL() );
}
$parserOutput->addModules( [ 'ext.imagemap' ] );
$parserOutput->addModuleStyles( [ 'ext.imagemap.styles' ] );
}
} }
// Output the result (XHTML-compliant) // Output the result (XHTML-compliant)
@ -439,14 +468,14 @@ class ImageMap implements ParserFirstCallInitHook {
// Don't register special or interwiki links... // Don't register special or interwiki links...
} elseif ( $title->getNamespace() === NS_MEDIA ) { } elseif ( $title->getNamespace() === NS_MEDIA ) {
// Regular Media: links are recorded as image usages // Regular Media: links are recorded as image usages
$parser->getOutput()->addImage( $title->getDBkey() ); $parserOutput->addImage( $title->getDBkey() );
} else { } else {
// Plain ol' link // Plain ol' link
$parser->getOutput()->addLink( $title ); $parserOutput->addLink( $title );
} }
} }
foreach ( $extLinks as $title ) { foreach ( $extLinks as $title ) {
$parser->getOutput()->addExternalLink( $title ); $parserOutput->addExternalLink( $title );
} }
// Armour output against broken parser // Armour output against broken parser
return str_replace( "\n", '', $output ); return str_replace( "\n", '', $output );

21
resources/ext.imagemap.js Normal file
View file

@ -0,0 +1,21 @@
/*!
* Add file description links to ImageMap images.
*/
( function () {
mw.hook( 'wikipage.content' ).add( function ( $content ) {
$content.find(
'figure[class*="mw-ext-imagemap-desc-"] > :not(figcaption) .mw-file-element'
).each( function () {
var resource = this.getAttribute( 'resource' );
if ( !resource ) {
return;
}
var inner = this.parentNode;
inner.classList.add( 'mw-ext-imagemap-inner' );
var desc = this.ownerDocument.createElement( 'a' );
desc.setAttribute( 'href', resource );
desc.classList.add( 'mw-ext-imagemap-desc-link' );
inner.appendChild( desc );
} );
} );
}() );

30
resources/ext.imagemap.styles.less Normal file
View file

@ -0,0 +1,30 @@
.mw-ext-imagemap-inner {
display: block;
position: relative;
}
.mw-ext-imagemap-desc-link {
position: absolute;
width: 20px;
height: 20px;
background-image: url( './desc-20.png' );
}
:not( figcaption ) .mw-ext-imagemap-desc-link {
.mw-ext-imagemap-desc-top-right > & {
top: 5px;
right: 5px;
}
.mw-ext-imagemap-desc-bottom-right > & {
bottom: 5px;
right: 5px;
}
.mw-ext-imagemap-desc-bottom-left > & {
bottom: 5px;
left: 5px;
}
.mw-ext-imagemap-desc-top-left > & {
top: 5px;
left: 5px;
}
}

10
tests/parser/imageMapParserTests.txt
View file

@ -13,7 +13,7 @@ wgParserEnableLegacyMediaDOM=false
Image:Foobar.jpg Image:Foobar.jpg
</imagemap> </imagemap>
!! html/php !! html/php
<figure class="mw-default-size noresize" typeof="mw:File"><span><img src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" width="1941" height="220" class="mw-file-element" /></span><figcaption></figcaption></figure> <figure class="mw-default-size noresize mw-ext-imagemap-desc-bottom-right" typeof="mw:File"><span><img src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" width="1941" height="220" class="mw-file-element" resource="/wiki/File:Foobar.jpg" /></span><figcaption></figcaption></figure>
!! html/parsoid !! html/parsoid
<figure class="mw-default-size noresize" typeof="mw:File mw:Extension/imagemap" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nImage:Foobar.jpg\n"}}'><span><img resource="./File:Foobar.jpg" src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="220" width="1941"/></span><figcaption></figcaption></figure> <figure class="mw-default-size noresize" typeof="mw:File mw:Extension/imagemap" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nImage:Foobar.jpg\n"}}'><span><img resource="./File:Foobar.jpg" src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="220" width="1941"/></span><figcaption></figcaption></figure>
!! end !! end
@ -43,7 +43,7 @@ File:Foobar.jpg
poly 10.1 10.9 10 30 -30 15 [[Main Page]] poly 10.1 10.9 10 30 -30 15 [[Main Page]]
</imagemap> </imagemap>
!! html/php !! html/php
<figure class="mw-default-size noresize" typeof="mw:File"><span><img src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" width="1941" height="220" class="mw-file-element" usemap="#ImageMap_79ccc6c89d422b0c" /></span><map name="ImageMap_79ccc6c89d422b0c"><area href="/wiki/Main_Page" shape="poly" coords="10,11,10,30,-30,15" alt="Main Page" title="Main Page" /></map><figcaption></figcaption></figure> <figure class="mw-default-size noresize mw-ext-imagemap-desc-bottom-right" typeof="mw:File"><span><img src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" width="1941" height="220" class="mw-file-element" usemap="#ImageMap_79ccc6c89d422b0c" resource="/wiki/File:Foobar.jpg" /></span><map name="ImageMap_79ccc6c89d422b0c"><area href="/wiki/Main_Page" shape="poly" coords="10,11,10,30,-30,15" alt="Main Page" title="Main Page" /></map><figcaption></figcaption></figure>
!! html/parsoid !! html/parsoid
<figure class="mw-default-size noresize" typeof="mw:File mw:Extension/imagemap" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg\n\npoly 10.1 10.9 10 30 -30 15 [[Main Page]]\n"}}'><span><img resource="./File:Foobar.jpg" src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="220" width="1941" usemap="#ImageMap_02c94d3ca4bfc187"/></span><map name="ImageMap_02c94d3ca4bfc187"><area href="./Main_Page" shape="poly" coords="10,11,10,30,-30,15"/></map><figcaption></figcaption></figure> <figure class="mw-default-size noresize" typeof="mw:File mw:Extension/imagemap" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg\n\npoly 10.1 10.9 10 30 -30 15 [[Main Page]]\n"}}'><span><img resource="./File:Foobar.jpg" src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="220" width="1941" usemap="#ImageMap_02c94d3ca4bfc187"/></span><map name="ImageMap_02c94d3ca4bfc187"><area href="./Main_Page" shape="poly" coords="10,11,10,30,-30,15"/></map><figcaption></figcaption></figure>
!! end !! end
@ -74,7 +74,7 @@ File:Foobar.jpg|150px|alt=Alt text
default [[Main Page|Go to main page]] default [[Main Page|Go to main page]]
</imagemap> </imagemap>
!! html/php !! html/php
<figure class="noresize" typeof="mw:File"><a href="/wiki/Main_Page" title="Go to main page"><img alt="Alt text" src="http://example.com/images/thumb/3/3a/Foobar.jpg/150px-Foobar.jpg" decoding="async" width="150" height="17" class="mw-file-element" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/225px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/300px-Foobar.jpg 2x" /></a><figcaption></figcaption></figure> <figure class="noresize mw-ext-imagemap-desc-bottom-right" typeof="mw:File"><a href="/wiki/Main_Page" title="Go to main page"><img alt="Alt text" src="http://example.com/images/thumb/3/3a/Foobar.jpg/150px-Foobar.jpg" decoding="async" width="150" height="17" class="mw-file-element" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/225px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/300px-Foobar.jpg 2x" resource="/wiki/File:Foobar.jpg" /></a><figcaption></figcaption></figure>
!! html/parsoid !! html/parsoid
<figure typeof="mw:File mw:Extension/imagemap" class="noresize" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg|150px|alt=Alt text\ndefault [[Main Page|Go to main page]]\n"}}'><a href="./Main_Page" title="Go to main page"><img alt="Alt text" resource="./File:Foobar.jpg" src="http://example.com/images/thumb/3/3a/Foobar.jpg/150px-Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="17" width="150" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/225px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/300px-Foobar.jpg 2x"/></a><figcaption></figcaption></figure> <figure typeof="mw:File mw:Extension/imagemap" class="noresize" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg|150px|alt=Alt text\ndefault [[Main Page|Go to main page]]\n"}}'><a href="./Main_Page" title="Go to main page"><img alt="Alt text" resource="./File:Foobar.jpg" src="http://example.com/images/thumb/3/3a/Foobar.jpg/150px-Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="17" width="150" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/225px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/300px-Foobar.jpg 2x"/></a><figcaption></figcaption></figure>
!! end !! end
@ -192,7 +192,7 @@ File:Foobar.jpg|150px|alt=Alt text
default [[Main Page|Go to ''main page'']] default [[Main Page|Go to ''main page'']]
</imagemap> </imagemap>
!! html/php !! html/php
<figure class="noresize" typeof="mw:File"><a href="/wiki/Main_Page" title="Go to ''main page''"><img alt="Alt text" src="http://example.com/images/thumb/3/3a/Foobar.jpg/150px-Foobar.jpg" decoding="async" width="150" height="17" class="mw-file-element" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/225px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/300px-Foobar.jpg 2x" /></a><figcaption></figcaption></figure> <figure class="noresize mw-ext-imagemap-desc-bottom-right" typeof="mw:File"><a href="/wiki/Main_Page" title="Go to ''main page''"><img alt="Alt text" src="http://example.com/images/thumb/3/3a/Foobar.jpg/150px-Foobar.jpg" decoding="async" width="150" height="17" class="mw-file-element" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/225px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/300px-Foobar.jpg 2x" resource="/wiki/File:Foobar.jpg" /></a><figcaption></figcaption></figure>
!! html/parsoid !! html/parsoid
<figure typeof="mw:File mw:Extension/imagemap" class="noresize" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg|150px|alt=Alt text\ndefault [[Main Page|Go to &apos;&apos;main page&apos;&apos;]]\n"}}'><a href="./Main_Page" title="Go to main page"><img alt="Alt text" resource="./File:Foobar.jpg" src="http://example.com/images/thumb/3/3a/Foobar.jpg/150px-Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="17" width="150" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/225px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/300px-Foobar.jpg 2x"/></a><figcaption></figcaption></figure> <figure typeof="mw:File mw:Extension/imagemap" class="noresize" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg|150px|alt=Alt text\ndefault [[Main Page|Go to &apos;&apos;main page&apos;&apos;]]\n"}}'><a href="./Main_Page" title="Go to main page"><img alt="Alt text" resource="./File:Foobar.jpg" src="http://example.com/images/thumb/3/3a/Foobar.jpg/150px-Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="17" width="150" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/225px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/300px-Foobar.jpg 2x"/></a><figcaption></figcaption></figure>
!! end !! end
@ -222,7 +222,7 @@ wgParserEnableLegacyMediaDOM=false
File:Foobar.jpg|link=|Hi ho File:Foobar.jpg|link=|Hi ho
</imagemap> </imagemap>
!! html/php !! html/php
<figure class="mw-default-size noresize" typeof="mw:File"><span title="Hi ho"><img alt="Hi ho" src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" width="1941" height="220" class="mw-file-element" /></span><figcaption>Hi ho</figcaption></figure> <figure class="mw-default-size noresize mw-ext-imagemap-desc-bottom-right" typeof="mw:File"><span title="Hi ho"><img alt="Hi ho" src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" width="1941" height="220" class="mw-file-element" resource="/wiki/File:Foobar.jpg" /></span><figcaption>Hi ho</figcaption></figure>
!! html/parsoid !! html/parsoid
<figure class="mw-default-size noresize" typeof="mw:File mw:Extension/imagemap" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg|link=|Hi ho\n"}}'><span title="Hi ho"><img alt="Hi ho" resource="./File:Foobar.jpg" src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="220" width="1941"/></span><figcaption>Hi ho</figcaption></figure> <figure class="mw-default-size noresize" typeof="mw:File mw:Extension/imagemap" about="#mwt2" data-mw='{"name":"imagemap","attrs":{},"body":{"extsrc":"\nFile:Foobar.jpg|link=|Hi ho\n"}}'><span title="Hi ho"><img alt="Hi ho" resource="./File:Foobar.jpg" src="http://example.com/images/3/3a/Foobar.jpg" decoding="async" data-file-width="1941" data-file-height="220" data-file-type="bitmap" height="220" width="1941"/></span><figcaption>Hi ho</figcaption></figure>
!! end !! end