Sumit has uploaded a new change for review. https://gerrit.wikimedia.org/r/230050
Change subject: WPB followup - fine tune banner position using js ...................................................................... WPB followup - fine tune banner position using js This is a followup to https://gerrit.wikimedia.org/r/#q,Ifd696117d4614389685945ad3853a473179c2c03,n,z It further refines the position of banner using data-pos coordinates set by parser function when js is enabled. Also moves max-height of banner outside media-query as a general rule. Adds tests for position coordinates. Bug: T108232 Change-Id: I856690b82cacd295147f89a1f740ecac56c3176c --- M extension.json M includes/WikidataPageBanner.hooks.php A resources/ext.WikidataPageBanner.positionBanner/ext.WikidataPageBanner.positionBanner.js M resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less M tests/phpunit/BannerOptionsTest.php 5 files changed, 93 insertions(+), 4 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/WikidataPageBanner refs/changes/50/230050/1 diff --git a/extension.json b/extension.json index cb7d6d3..4ded47d 100644 --- a/extension.json +++ b/extension.json @@ -48,6 +48,16 @@ "mobile" ], "position": "top" + }, + "ext.WikidataPageBanner.positionBanner": { + "scripts": [ + "ext.WikidataPageBanner.positionBanner/ext.WikidataPageBanner.positionBanner.js" + ], + "targets": [ + "desktop", + "mobile" + ], + "position": "bottom" } }, "ResourceFileModulePaths": { diff --git a/includes/WikidataPageBanner.hooks.php b/includes/WikidataPageBanner.hooks.php index 4df78c1..146d3e9 100644 --- a/includes/WikidataPageBanner.hooks.php +++ b/includes/WikidataPageBanner.hooks.php @@ -26,6 +26,7 @@ // only add banner and styling if valid banner generated if ( $banner !== null ) { $out->addModuleStyles( 'ext.WikidataPageBanner' ); + $out->addModules( 'ext.WikidataPageBanner.positionBanner' ); if ( isset( $params['toc'] ) ) { $out->addModuleStyles( 'ext.WikidataPageBanner.toc.styles' ); } @@ -56,6 +57,7 @@ // only add banner and styling if valid banner generated if ( $banner !== null ) { $out->addModuleStyles( 'ext.WikidataPageBanner' ); + $out->addModules( 'ext.WikidataPageBanner.positionBanner' ); $out->prependHtml( $banner ); // hide primary title $out->setPageTitle( '' ); diff --git a/resources/ext.WikidataPageBanner.positionBanner/ext.WikidataPageBanner.positionBanner.js b/resources/ext.WikidataPageBanner.positionBanner/ext.WikidataPageBanner.positionBanner.js new file mode 100644 index 0000000..cbdace0 --- /dev/null +++ b/resources/ext.WikidataPageBanner.positionBanner/ext.WikidataPageBanner.positionBanner.js @@ -0,0 +1,57 @@ +( function( mw, $ ) { + /** + * Javascript to fine tune position of banner according to position coordinates. + */ + // extract position parameters + var centrex = $( '.wpb-banner-image' ).data( 'pos-x' ); + var centrey = $( '.wpb-banner-image' ).data( 'pos-y' ); + // reset translations applied by css + $( '.wpb-banner-image' ).css( { + transform: 'translate(0)', + MozTransform: 'translate(0)', + WebkitTransform: 'translate(0)', + msTransform: 'translate(0)' + } ); + if ( $( '.wpb-banner-image' ).height() > $( '.wpb-topbanner' ).height() ) { + // first reset margin + $( '.wpb-banner-image' ).css( 'margin-top', 0 ); + // do not shift below to leave blank space + var minOffsetTop = 0; + // this is the max shift up that can be achieved without leaving blank space below + var maxOffsetTop = $( '.wpb-banner-image' ).height() - + $( '.wpb-topbanner' ).height(); + // offset beyond centre 0 + var offsetTop = centrey * $( '.wpb-banner-image' ).height() / 2; + // offset for default centre is maxOffsetTop/2 + // total offset = offset for centre + manual offset + var totalOffset = maxOffsetTop / 2 + offsetTop; + // shift the banner no more than maxOffsets on either side + if ( totalOffset > maxOffsetTop ) { + totalOffset = maxOffsetTop; + } else if ( totalOffset < minOffsetTop ) { + totalOffset = minOffsetTop; + } + $( '.wpb-banner-image' ).css( 'margin-top', -totalOffset ); + } + if ( $( '.wpb-banner-image' ).width() > $( '.ext-wpb-pagebanner' ).width() ) { + // first reset margin + $( '.wpb-banner-image' ).css( 'margin-left', 0 ); + // do not shift left to leave blank space + var minOffsetLeft = 0; + // this is the max shift that can be achieved without leaving blank space + var maxOffsetLeft = $( '.wpb-banner-image' ).width() - + $( '.wpb-topbanner' ).width(); + // offset beyond centre 0 + var offsetLeft = centrex * $( '.wpb-banner-image' ).width() / 2; + // offset for default centre is maxOffsetLeft/2 + // total offset = offset for centre + manual offset + var totalOffset = maxOffsetLeft / 2 + offsetLeft; + // shift the banner no more than maxOffsets on either side + if ( totalOffset > maxOffsetLeft ) { + totalOffset = maxOffsetLeft; + } else if ( totalOffset < minOffsetLeft ) { + totalOffset = minOffsetLeft; + } + $( '.wpb-banner-image' ).css( 'margin-left', -totalOffset ); + } +} ( mediaWiki, jQuery ) ); diff --git a/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less b/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less index ed938c9..65b264a 100644 --- a/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less +++ b/resources/ext.WikidataPageBanner.styles/ext.WikidataPageBanner.less @@ -18,6 +18,10 @@ max-width: 1800px; height: auto; margin: 1em 0; + overflow: hidden; + // rule for banners whose height may be much due to a different aspect ratio other than + // Wikivoyage banners + max-height: 300px; } .wpb-topbanner .wpb-name { @@ -67,10 +71,6 @@ // banner enlargement and faking banner cropping for small screens @media screen and ( max-width: 400px ) { .wpb-topbanner { - overflow: hidden; - // rule for banners whose height may be much due to a different aspect ratio other than - // Wikivoyage banners - max-height: 300px; .wpb-banner-image { // this rule overrides the max-width:100% rule for images in Skin Minerva so that banner diff --git a/tests/phpunit/BannerOptionsTest.php b/tests/phpunit/BannerOptionsTest.php index d90e636..54837e3 100644 --- a/tests/phpunit/BannerOptionsTest.php +++ b/tests/phpunit/BannerOptionsTest.php @@ -76,6 +76,26 @@ 'unesco icon must be set' ); $this->assertEquals( $bannerparams['icons'][1]['icon']->getTitle(), 'star', 'star icon must be set' ); + + $pOut->setProperty( 'wpb-banner-options', null ); + $output = MockWikidataPageBannerOptions::addCustomBanner( $parser, 'Banner1', + 'pgname=Banner2', 'origin=0.3,0.2' ); + $bannerparams = $pOut->getProperty( 'wpb-banner-options' ); + $this->assertEquals( $bannerparams['originx'], 'wpb-right', + 'classname for position must be set' ); + $this->assertEquals( $bannerparams['data-pos-x'], 0.3, + 'data-pos-x must be set' ); + $this->assertEquals( $bannerparams['data-pos-y'], 0.2, + 'data-pos-x must be set' ); + + $pOut->setProperty( 'wpb-banner-options', null ); + $output = MockWikidataPageBannerOptions::addCustomBanner( $parser, 'Banner1', + 'pgname=Banner2', 'origin=0.3' ); + $bannerparams = $pOut->getProperty( 'wpb-banner-options' ); + $this->assertEquals( $bannerparams['data-pos-x'], 0, + 'data-pos must default to 0' ); + $this->assertEquals( $bannerparams['data-pos-y'], 0, + 'data-pos-x must default to 0' ); } /** -- To view, visit https://gerrit.wikimedia.org/r/230050 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I856690b82cacd295147f89a1f740ecac56c3176c Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/WikidataPageBanner Gerrit-Branch: master Gerrit-Owner: Sumit <asthana.sumi...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
