jenkins-bot has submitted this change and it was merged.
Change subject: Make page action overlay pointer position correctly.
......................................................................
Make page action overlay pointer position correctly.
This adds two new events.
The BannerImage fires a loaded event when it loads.
The Skin renders changed whenever something happens to the rendering of
the skin.
Also:
Left align the pointer so it points to the middle of the $target
Bug: T91047
Change-Id: Ifcf3829b4d18748670ffd4de6979e54f1e17ce91
---
M javascripts/Skin.js
M javascripts/modules/bannerImage/BannerImage.js
M javascripts/modules/bannerImage/init.js
M javascripts/modules/tutorials/ContentOverlay.js
M javascripts/modules/uploads/init.js
M javascripts/modules/watchstar/init.js
6 files changed, 22 insertions(+), 9 deletions(-)
Approvals:
Florianschmidtwelzow: Looks good to me, approved
jenkins-bot: Verified
diff --git a/javascripts/Skin.js b/javascripts/Skin.js
index 12b27f0..9a6d6d5 100644
--- a/javascripts/Skin.js
+++ b/javascripts/Skin.js
@@ -136,6 +136,11 @@
$el.addClass( 'touch-events' );
}
$( '<div class="transparent-shield cloaked-element">'
).appendTo( '#mw-mf-page-center' );
+ /**
+ * @event changed
+ * Fired when appearance of skin changes.
+ */
+ this.emit( 'changed' );
},
/**
diff --git a/javascripts/modules/bannerImage/BannerImage.js
b/javascripts/modules/bannerImage/BannerImage.js
index 34e7fa6..82112df 100644
--- a/javascripts/modules/bannerImage/BannerImage.js
+++ b/javascripts/modules/bannerImage/BannerImage.js
@@ -87,7 +87,11 @@
.show();
self.resizeFrame();
-
+ /**
+ * @event loaded
+ * Fired when image has loaded and been rendered in
page.
+ */
+ self.emit( 'loaded' );
if ( !self.hasLoadedOnce ) {
self.hasLoadedOnce = true;
M.on( 'resize', function () {
diff --git a/javascripts/modules/bannerImage/init.js
b/javascripts/modules/bannerImage/init.js
index a481d56..bf7c981 100644
--- a/javascripts/modules/bannerImage/init.js
+++ b/javascripts/modules/bannerImage/init.js
@@ -1,9 +1,10 @@
-( function ( M ) {
+( function ( M, $ ) {
M.require( 'context' ).assertMode( [ 'alpha', 'beta' ] );
var MobileViewBannerImageRepository = M.require(
'modules/bannerImage/MobileViewBannerImageRepository' ),
BannerImage = M.require( 'modules/bannerImage/BannerImage' ),
page = M.getCurrentPage(),
+ skin = M.require( 'skin' ),
repository,
bannerImage;
@@ -16,6 +17,7 @@
bannerImage = new BannerImage( {
repository: repository
} );
+ bannerImage.on( 'loaded', $.proxy( skin, 'emit', 'changed' ) );
bannerImage.insertBefore( '.pre-content' );
}
-}( mw.mobileFrontend ) );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/tutorials/ContentOverlay.js
b/javascripts/modules/tutorials/ContentOverlay.js
index 8f36fb1..0d152a5 100644
--- a/javascripts/modules/tutorials/ContentOverlay.js
+++ b/javascripts/modules/tutorials/ContentOverlay.js
@@ -1,6 +1,7 @@
( function ( M, $ ) {
var ContentOverlay,
+ skin = M.require( 'skin' ),
Overlay = M.require( 'Overlay' );
/**
@@ -34,12 +35,7 @@
$target = $( options.target );
// Ensure we position the overlay correctly but
do not show the arrow
self._position( $target );
- // Ensure that any reflows due to tablet styles
have happened before showing
- // the arrow.
- setTimeout( function () {
- self.addPointerArrow( $target );
- M.on( 'resize', $.proxy( self,
'refreshPointerArrow', options.target ) );
- }, 0 );
+ this.addPointerArrow( $target );
}
},
/**
@@ -82,6 +78,8 @@
// remove the left offset of the overlay as
margin auto may be applied to it
left: paOffset.left + 10 - overlayOffset.left
} ).appendTo( this.$el );
+ skin.on( 'changed', $.proxy( this,
'refreshPointerArrow', this.options.target ) );
+ M.on( 'resize', $.proxy( this, 'refreshPointerArrow',
this.options.target ) );
}
} );
M.define( 'modules/tutorials/ContentOverlay', ContentOverlay );
diff --git a/javascripts/modules/uploads/init.js
b/javascripts/modules/uploads/init.js
index a7e9858..746f04a 100644
--- a/javascripts/modules/uploads/init.js
+++ b/javascripts/modules/uploads/init.js
@@ -4,6 +4,7 @@
funnel = $.cookie( 'mwUploadsFunnel' ) || 'article',
LeadPhotoUploaderButton = M.require(
'modules/uploads/LeadPhotoUploaderButton' ),
user = M.require( 'user' ),
+ skin = M.require( 'skin' ),
isSupported = LeadPhotoUploaderButton.isSupported;
/**
@@ -53,6 +54,7 @@
new LeadPhotoUploaderButton( {
funnel: funnel
} );
+ skin.emit( 'changed' );
}
if ( isSupported ) {
diff --git a/javascripts/modules/watchstar/init.js
b/javascripts/modules/watchstar/init.js
index b947399..3e2cb72 100644
--- a/javascripts/modules/watchstar/init.js
+++ b/javascripts/modules/watchstar/init.js
@@ -1,6 +1,7 @@
( function ( M, $ ) {
var Watchstar = M.require( 'modules/watchstar/Watchstar' ),
+ skin = M.require( 'skin' ),
user = M.require( 'user' );
/**
@@ -18,6 +19,7 @@
page: page,
isAnon: user.isAnon()
} );
+ skin.emit( 'changed' );
}
}
init( M.getCurrentPage() );
--
To view, visit https://gerrit.wikimedia.org/r/199155
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ifcf3829b4d18748670ffd4de6979e54f1e17ce91
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Jhernandez <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: Robmoen <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
