Merge "CtaDrawers no longer stay behind in DOM"

resources/skins.minerva.scripts/ctaDrawers.js

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-properties
 var mobile = mw.mobileFrontend.require( 'mobile.startup' ),
+	drawers = require( './drawers.js' ),
 	CtaDrawer = mobile.CtaDrawer,
 	Button = mobile.Button,
 	Anchor = mobile.Anchor;
@@ -36,6 +37,10 @@ function initRedlinksCta( $redLinks ) {
 					label: mw.msg( 'mobile-frontend-editor-redlink-leave' ),
 					additionalClassNames: 'cancel'
 				} ).options,
+				onShow: function () {
+					drawers.onShow();
+				},
+				onBeforeHide: drawers.discardDrawer,
 				content: mw.msg( 'mobile-frontend-editor-redlink-explain' )
 			},
 			drawer = CtaDrawer( drawerOptions );
@@ -43,7 +48,8 @@ function initRedlinksCta( $redLinks ) {
 		// use preventDefault() and not return false to close other open
 		// drawers or anything else.
 		ev.preventDefault();
-		drawer.show();
+		ev.stopPropagation();
+		drawers.displayDrawer( drawer, { hideOnScroll: true } );
 	} );
 }
 
@@ -63,15 +69,21 @@ function initWatchstarCta( $watchstar ) {
 					campaign: 'mobile_watchPageActionCta',
 					returntoquery: 'article_action=watch'
 				},
+				onShow: function () {
+					drawers.onShow();
+				},
+				onBeforeHide: drawers.discardDrawer,
 				signupQueryParams: {
 					warning: 'mobile-frontend-watchlist-signup-action'
 				}
 			} );
 		}
 		watchCtaDrawer.show();
+		drawers.displayDrawer( watchCtaDrawer, { hideOnScroll: true } );
 		// prevent default to stop the user
 		// being navigated to Special:UserLogin
 		ev.preventDefault();
+		ev.stopPropagation();
 	} );
 }
 

resources/skins.minerva.scripts/drawers.js

@@ -0,0 +1,60 @@
+var $drawerContainer = $( document.body ),
+	BODY_CLASS_SCROLL_LOCKED = 'has-drawer--with-scroll-locked',
+	BODY_CLASSES_DRAWER_OPEN = 'navigation-enabled';
+
+/**
+ * Discard a drawer from display on the page.
+ * @ignore
+ * @param {Drawer} drawer
+ */
+function discardDrawer( drawer ) {
+	// remove the class
+	$drawerContainer.removeClass( [ BODY_CLASSES_DRAWER_OPEN, BODY_CLASS_SCROLL_LOCKED ] );
+	// FIXME: queue removal from DOM (using setTimeout so that any animations have time to run)
+	// This works around an issue in MobileFrontend that the Drawer onBeforeHide method is
+	// called /before/ the animation for closing has completed. This needs to be accounted
+	// for in Drawer so this function can be synchronous.
+	setTimeout( function () {
+		// remove the node from the DOM.
+		drawer.$el.remove();
+	}, 1000 );
+}
+
+/**
+ * Reveal a drawer.
+ */
+function onShow() {
+	$drawerContainer.addClass( BODY_CLASSES_DRAWER_OPEN );
+}
+
+/**
+ * Lock scroll of viewport.
+ */
+function lockScroll() {
+	$drawerContainer.addClass( BODY_CLASS_SCROLL_LOCKED );
+}
+
+/**
+ * @param {Drawer} drawer to display
+ * @param {Object} options for display
+ * @param {boolean} options.hideOnScroll whether a scroll closes the drawer
+ */
+function displayDrawer( drawer, options ) {
+	$drawerContainer.append( drawer.$el );
+	drawer.show();
+	// A click outside the drawer should close it.
+	$( window ).one( 'click', function () {
+		drawer.hide();
+	} );
+	if ( options.hideOnScroll ) {
+		$( window ).one( 'scroll.drawer', function () {
+			drawer.hide();
+		} );
+	}
+}
+module.exports = {
+	displayDrawer: displayDrawer,
+	onShow: onShow,
+	lockScroll: lockScroll,
+	discardDrawer: discardDrawer
+};

resources/skins.minerva.scripts/references.js

@@ -1,30 +1,15 @@
+var drawers = require( './drawers.js' );
+
 module.exports = function () {
 	// eslint-disable-next-line no-restricted-properties
 	var M = mw.mobileFrontend,
 		mobile = M.require( 'mobile.startup' ),
 		references = mobile.references,
-		$drawerContainer = $( document.body ),
 		currentPage = mobile.currentPage(),
-		BODY_CLASSES_DRAWER_OPEN = 'navigation-enabled has-drawer--with-scroll-locked',
 		currentPageHTMLParser = mobile.currentPageHTMLParser(),
 		ReferencesHtmlScraperGateway = mobile.ReferencesHtmlScraperGateway,
 		gateway = new ReferencesHtmlScraperGateway( new mw.Api() );
 
-	/**
-	 * Discard a drawer from display on the page.
-	 * @ignore
-	 * @param {Drawer} drawer
-	 */
-	function discardDrawer( drawer ) {
-		// remove the class
-		$drawerContainer.removeClass( BODY_CLASSES_DRAWER_OPEN );
-		// queue removal from DOM (using setTimeout so that any animations have time to run)
-		setTimeout( function () {
-			// remove the node from the DOM.
-			drawer.$el.remove();
-		}, 1000 );
-	}
-
 	/**
 	 * Event handler to show reference when a reference link is clicked
 	 * @ignore
@@ -47,17 +32,13 @@ module.exports = function () {
 		references.showReference( href, currentPage, $dest.text(),
 			currentPageHTMLParser, gateway, {
 				onShow: function () {
-					// show shield and lock scrolling
-					$drawerContainer.addClass( BODY_CLASSES_DRAWER_OPEN );
+					drawers.onShow();
+					drawers.lockScroll();
 				},
-				onBeforeHide: discardDrawer
+				onBeforeHide: drawers.discardDrawer
 			}
 		).then( function ( drawer ) {
-			$drawerContainer.append( drawer.$el[ 0 ] );
-			// A click outside the reference drawer should close it.
-			$( window ).one( 'click', function () {
-				drawer.hide();
-			} );
+			drawers.displayDrawer( drawer, {} );
 		} );
 	}
 

skin.json

@@ -601,6 +601,7 @@
 			},
 			"packageFiles": [
 				"resources/skins.minerva.scripts/init.js",
+				"resources/skins.minerva.scripts/drawers.js",
 				"resources/skins.minerva.scripts/ctaDrawers.js",
 				"resources/skins.minerva.scripts/menu/MainMenu.js",
 				"resources/skins.minerva.scripts/menu.js",

tests/browser/features/support/pages/article_page.rb

@@ -178,10 +178,7 @@ class ArticlePage # rubocop:disable Metrics/ClassLength
   h2(:third_section, css: '.collapsible-block', index: 2)
 
   # issues
-  # We use 2 selectors here - the first relates to the old treatment (A) and
-  # the 2nd relates to the new treatment (.issues-group-B .ambox)
-  # see https://phabricator.wikimedia.org/T206647
-  a(:issues_stamp, css: '.mw-mf-cleanup, .issues-group-B .ambox')
+  span(:issues_stamp, css: '.ambox-learn-more')
 
   # page info (action=info)
   td(:edit_count, css: '#mw-pageinfo-edits td', index: 1)