wikimedia/mediawiki-extensions-ImageMap
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/ImageMap synced 2024-09-23 10:18:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add back description links when !$wgParserEnableLegacyMediaDOM

Browse source 
The approach taken here is the same as in core for magnify links on
thumbs in Id46d1b2ab1af3baebff13e10f1485f3cfd9a4b37

The gist is that resource attributes are added on the mw-file-element so
that the necessary url is present in the html.  A class is also added to
the wrapper element that designates where the link should be positioned.
Finally, a script adds the link which styles in appropriately.

Bug: T329364
Depends-On: Id46d1b2ab1af3baebff13e10f1485f3cfd9a4b37
Change-Id: I20130fd39135dfd5074590ee9c2b6e01693384e4
This commit is contained in:
Arlo Breault 2023-04-25 20:46:57 -04:00 committed by Arlolra
parent 454cbe9a5c
commit b2113e0154
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": {
"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
}

121
includes/ImageMap.php
View file

@ -42,6 +42,10 @@ class ImageMap implements ParserFirstCallInitHook {
private const TOP_LEFT = 3;
private const NONE = 4;
private const DESC_TYPE_MAP = [
'top-right', 'bottom-right', 'bottom-left', 'top-left'
];
/**
* @param Parser $parser
*/
@ -384,50 +388,75 @@ class ImageMap implements ParserFirstCallInitHook {
$wrapper->removeChild( $anchor );
}
// Determine whether a "magnify" link is present
$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;"
);
$parserOutput = $parser->getOutput();
$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;' );
if ( $enableLegacyMediaDOM ) {
// Determine whether a "magnify" link is present
$magnify = DOMCompat::querySelector( $domFragment, '.magnify' );
if ( !$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' );
$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)
@ -439,14 +468,14 @@ class ImageMap implements ParserFirstCallInitHook {
// Don't register special or interwiki links...
} elseif ( $title->getNamespace() === NS_MEDIA ) {
// Regular Media: links are recorded as image usages
$parser->getOutput()->addImage( $title->getDBkey() );
$parserOutput->addImage( $title->getDBkey() );
} else {
// Plain ol' link
$parser->getOutput()->addLink( $title );
$parserOutput->addLink( $title );
}
}
foreach ( $extLinks as $title ) {
$parser->getOutput()->addExternalLink( $title );
$parserOutput->addExternalLink( $title );
}
// Armour output against broken parser
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
</imagemap>
!! 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
<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
@ -43,7 +43,7 @@ File:Foobar.jpg
poly 10.1 10.9 10 30 -30 15 [[Main Page]]
</imagemap>
!! 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
<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
@ -74,7 +74,7 @@ File:Foobar.jpg|150px|alt=Alt text
default [[Main Page|Go to main page]]
</imagemap>
!! 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
<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
@ -192,7 +192,7 @@ File:Foobar.jpg|150px|alt=Alt text
default [[Main Page|Go to ''main page'']]
</imagemap>
!! 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
<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
@ -222,7 +222,7 @@ wgParserEnableLegacyMediaDOM=false
File:Foobar.jpg|link=|Hi ho
</imagemap>
!! 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
<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