jenkins-bot has submitted this change and it was merged.
Change subject: WPB followup - fine tune banner position using js
......................................................................
WPB followup - fine tune banner position using js
This is a followup to Ifd696117d4614389685945ad3853a473179c2c03
It further refines the position of banner using data-pos coordinates set by
parser function when js is enabled.
Adds tests for position coordinates.
Bug: T108785
Change-Id: I856690b82cacd295147f89a1f740ecac56c3176c
---
M extension.json
M includes/WikidataPageBanner.hooks.php
A
resources/ext.WikidataPageBanner.positionBanner/ext.WikidataPageBanner.positionBanner.js
M tests/phpunit/BannerOptionsTest.php
A
tests/qunit/ext.WikidataPageBanner.positionBanner/test_ext.WikidataPageBanner.positionBanner.js
5 files changed, 167 insertions(+), 0 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index cb7d6d3..0fb4b09 100644
--- a/extension.json
+++ b/extension.json
@@ -48,6 +48,17 @@
"mobile"
],
"position": "top"
+ },
+ "ext.WikidataPageBanner.positionBanner": {
+ "scripts": [
+
"ext.WikidataPageBanner.positionBanner/ext.WikidataPageBanner.positionBanner.js"
+ ],
+ "targets": [
+ "desktop",
+ "mobile"
+ ],
+ "dependencies": "jquery.throttle-debounce",
+ "position": "bottom"
}
},
"ResourceFileModulePaths": {
@@ -66,6 +77,9 @@
],
"UnitTestsList": [
"WikidataPageBanner::onUnitTestsList"
+ ],
+ "ResourceLoaderTestModules": [
+ "WikidataPageBanner::onResourceLoaderTestModules"
]
},
"config": {
diff --git a/includes/WikidataPageBanner.hooks.php
b/includes/WikidataPageBanner.hooks.php
index ca892a4..bdc976c 100644
--- a/includes/WikidataPageBanner.hooks.php
+++ b/includes/WikidataPageBanner.hooks.php
@@ -36,6 +36,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' );
}
@@ -68,6 +69,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( '' );
@@ -194,4 +196,26 @@
}
return true;
}
+
+ /**
+ * Register QUnit tests.
+ * @see
https://www.mediawiki.org/wiki/Manual:Hooks/ResourceLoaderTestModules
+ *
+ * @param array $files
+ * @return bool
+ */
+ public static function onResourceLoaderTestModules( &$modules, &$rl ) {
+ $boilerplate = array(
+ 'localBasePath' => __DIR__ . '/../tests/qunit/',
+ 'remoteExtPath' => 'WikidataPageBanner/tests/qunit',
+ 'targets' => array( 'desktop', 'mobile' ),
+ );
+
+ $modules['qunit']['ext.WikidataPageBanner.positionBanner.test']
= $boilerplate + array(
+ 'scripts' => array(
+
'ext.WikidataPageBanner.positionBanner/test_ext.WikidataPageBanner.positionBanner.js',
+ ),
+ 'dependencies' => array(
'ext.WikidataPageBanner.positionBanner' ),
+ );
+ }
}
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..a685f09
--- /dev/null
+++
b/resources/ext.WikidataPageBanner.positionBanner/ext.WikidataPageBanner.positionBanner.js
@@ -0,0 +1,74 @@
+( function( mw, $ ) {
+ var $wpbBannerImageContainer = $( '.wpb-topbanner' );
+ function positionBanner( $container ) {
+ /**
+ * Javascript to fine tune position of banner according to
position coordinates.
+ */
+ // extract position parameters
+ var maxOffsetTop, offsetTop, maxOffsetLeft, offsetLeft,
+ minOffsetTop = 0,
+ minOffsetLeft = 0,
+ $wpbBannerImage = $container.find( '.wpb-banner-image'
),
+ totalOffsetX = 0,
+ totalOffsetY = 0,
+ centerX = $wpbBannerImage.data( 'pos-x' ),
+ centerY = $wpbBannerImage.data( 'pos-y' );
+ // reset translations applied by css
+ $wpbBannerImage.css( {
+ transform: 'translate(0)',
+ MozTransform: 'translate(0)',
+ WebkitTransform: 'translate(0)',
+ msTransform: 'translate(0)'
+ } );
+ // Adjust vertical focus
+ if ( $wpbBannerImage.height() > $container.height() ) {
+ // this is the max shift up that can be achieved
without leaving blank space below
+ maxOffsetTop = $wpbBannerImage.height() -
+ $container.height();
+ // offset beyond center 0
+ offsetTop = centerY * $wpbBannerImage.height() / 2;
+ // offset for default center is maxOffsetTop/2
+ // total offset = offset for center + manual offset
+ totalOffsetY = maxOffsetTop / 2 + offsetTop;
+ // shift the banner no more than maxOffsets on either
side
+ if ( totalOffsetY > maxOffsetTop ) {
+ totalOffsetY = maxOffsetTop;
+ } else if ( totalOffsetY < minOffsetTop ) {
+ totalOffsetY = minOffsetTop;
+ }
+ }
+ // Adjust horizontal focus
+ if ( $wpbBannerImage.width() > $container.width() ) {
+ // this is the max shift that can be achieved without
leaving blank space
+ maxOffsetLeft = $wpbBannerImage.width() -
+ $container.width();
+ // offset beyond center 0
+ offsetLeft = centerX * $wpbBannerImage.width() / 2;
+ // offset for default center is maxOffsetLeft/2
+ // total offset = offset for center + manual offset
+ totalOffsetX = maxOffsetLeft / 2 + offsetLeft;
+ // shift the banner no more than maxOffsets on either
side
+ if ( totalOffsetX > maxOffsetLeft ) {
+ totalOffsetX = maxOffsetLeft;
+ } else if ( totalOffsetX < minOffsetLeft ) {
+ totalOffsetX = minOffsetLeft;
+ }
+ }
+ // shift the banner horizontally and vertically by the offsets
calculated above
+ $wpbBannerImage.css( {
+ 'margin-top': -totalOffsetY,
+ 'margin-left': -totalOffsetX
+ } );
+ }
+ $( window ).on( 'resize', $.debounce(
+ 100,
+ function() {
+ positionBanner( $wpbBannerImageContainer )
+ }
+ ) );
+ positionBanner( $wpbBannerImageContainer );
+ // Expose interface for testing.
+ mw.wpb = {
+ positionBanner: positionBanner
+ };
+} ( mediaWiki, jQuery ) );
diff --git a/tests/phpunit/BannerOptionsTest.php
b/tests/phpunit/BannerOptionsTest.php
index 3daf8c2..f6f6cd4 100644
--- a/tests/phpunit/BannerOptionsTest.php
+++ b/tests/phpunit/BannerOptionsTest.php
@@ -83,6 +83,26 @@
'star icon must be set' );
$this->assertContains( 'Main_Page',
$bannerparams['icons'][1]['iconurl'],
'iconurl must be a valid main page url' );
+
+ $pOut->setProperty( 'wpb-banner-options', null );
+ $output = WikidataPageBanner::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 = WikidataPageBanner::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' );
}
/**
diff --git
a/tests/qunit/ext.WikidataPageBanner.positionBanner/test_ext.WikidataPageBanner.positionBanner.js
b/tests/qunit/ext.WikidataPageBanner.positionBanner/test_ext.WikidataPageBanner.positionBanner.js
new file mode 100644
index 0000000..d946ebd
--- /dev/null
+++
b/tests/qunit/ext.WikidataPageBanner.positionBanner/test_ext.WikidataPageBanner.positionBanner.js
@@ -0,0 +1,35 @@
+( function ( mw, $ ) {
+ QUnit.module( 'ext.WikidataPageBanner.positionBanner',
QUnit.newMwEnvironment() );
+ QUnit.test( 'testFocus', 6, function( assert ) {
+ this.$wpbBannerImageContainer = $( '<div/>', {
+ width: 600,
+ height: 300
+ } );
+ this.$wpbBannerImage = $( '<img/>', {
+ class: 'wpb-banner-image',
+ width: 900,
+ height: 500
+ } );
+ this.$wpbBannerImageContainer.append( this.$wpbBannerImage );
+ // set test focus points
+ this.$wpbBannerImage.data( 'pos-x', 0 );
+ this.$wpbBannerImage.data( 'pos-y', 0 );
+ mw.wpb.positionBanner( this.$wpbBannerImageContainer );
+ assert.equal( this.$wpbBannerImage.css( 'margin-left' ),
'-150px' );
+ assert.equal( this.$wpbBannerImage.css( 'margin-top' ),
'-100px' );
+
+ // set test focus points
+ this.$wpbBannerImage.data( 'pos-x', -1 );
+ this.$wpbBannerImage.data( 'pos-y', -1 );
+ mw.wpb.positionBanner( this.$wpbBannerImageContainer );
+ assert.equal( this.$wpbBannerImage.css( 'margin-left' ), '0px'
);
+ assert.equal( this.$wpbBannerImage.css( 'margin-top' ), '0px' );
+
+ // set test focus points
+ this.$wpbBannerImage.data( 'pos-x', 0.5 );
+ this.$wpbBannerImage.data( 'pos-y', undefined );
+ mw.wpb.positionBanner( this.$wpbBannerImageContainer );
+ assert.equal( this.$wpbBannerImage.css( 'margin-left' ),
'-300px' );
+ assert.equal( this.$wpbBannerImage.css( 'margin-top' ), '0px' );
+ } );
+} )( mediaWiki, jQuery );
--
To view, visit https://gerrit.wikimedia.org/r/230050
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I856690b82cacd295147f89a1f740ecac56c3176c
Gerrit-PatchSet: 13
Gerrit-Project: mediawiki/extensions/WikidataPageBanner
Gerrit-Branch: master
Gerrit-Owner: Sumit <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Sumit <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
