mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/ImageMap
synced 2024-11-27 15:40:03 +00:00
Merge "Add back description links when !$wgParserEnableLegacyMediaDOM"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
7416c17cda
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
21
resources/ext.imagemap.js
Normal 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
30
resources/ext.imagemap.styles.less
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 ''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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue