Hygiene: Minerva owns PointerOverlay

The only usage is inside Minerva so we will move this module here.

Change-Id: If6859f0c8f855c6b116b254c58a6814f54b7c36d

i18n/en.json

@@ -8,6 +8,7 @@
 	"mobile-frontend-cookies-required": "Cookies are required to switch view modes. Please enable them and try again.",
 	"mobile-frontend-editor-blocked-info-loggedin": "Your account is blocked from editing. The block was made by {{GENDER:$2|$2}} for the following reason: $1",
 	"mobile-frontend-editor-cta": "Help improve this page!",
+	"minerva-pointer-dismiss": "Dismiss",
 	"mobile-frontend-editor-disabled": "This page is protected to prevent vandalism.",
 	"mobile-frontend-editor-edit": "Edit",
 	"minerva-download": "Download",

i18n/qqq.json

@@ -11,6 +11,7 @@
 			"Umherirrender"
 		]
 	},
+	"minerva-pointer-dismiss": "Label of button that dismisses overlay pointing at a particular new feature.",
 	"minerva-last-modified-date": "Text that displays the date the page was last modified. Parameters:\n* $1 - date\n* $2 - time\n{{Related|Mobile-frontend-last-modified}}",
 	"minerva-talk-add-topic": "Label for button which shows at bottom of talk pages in mobile view prompting addition of topic",
 	"mobile-frontend-console-recruit": "Message that is displayed in the JavaScript console aimed at developers in an attempt to recruit volunteers. The \\o/ emoticon is a man with his arms in the air with the purpose of drawing attention to the message. If this doesn't translate into the destination language feel free to omit it or use something more applicable.",

resources/skins.minerva.newusers/PointerOverlay.hogan

@@ -0,0 +1,5 @@
+<p>{{{summary}}}</p>
+<div class="button-bar">
+	{{#cancelMsg}}<button class="button cancel inline">{{cancelMsg}}</button>{{/cancelMsg}}
+	{{#confirmMsg}}<button class="button actionable">{{confirmMsg}}</button>{{/confirmMsg}}
+</div>

resources/skins.minerva.newusers/PointerOverlay.js

@@ -0,0 +1,135 @@
+( function ( M, $ ) {
+	var msg = mw.msg,
+		template = mw.template,
+		Overlay = M.require( 'mobile.startup/Overlay' );
+
+	/**
+	 * Page overlay prompting a user for given action
+	 * @class PointerOverlay
+	 */
+	function PointerOverlay() {
+		Overlay.apply( this, arguments );
+	}
+
+	OO.mfExtend( PointerOverlay, Overlay, {
+		className: 'overlay pointer-overlay tutorial-overlay',
+		isBorderBox: false,
+		fullScreen: false,
+		closeOnContentTap: true,
+		template: template.get( 'skins.minerva.newusers', 'PointerOverlay.hogan' ),
+		/**
+		 * @cfg {Object} defaults Default options hash.
+		 * @cfg {string} defaults.isCompact whether the pointer overlay should be compact
+		 * @cfg {number} defaults.timeout in milliseconds. If not zero the pointer overlay will
+		 *  hide after this duration of time.
+		 * @cfg {string} defaults.isTutorial whether the pointer overlay contains tutorial like instructions
+		 * @cfg {string} defaults.summary Message describing thing being pointed to.
+		 * @cfg {string} defaults.cancelMsg Cancel message.
+		 * @cfg {string} defaults.appendToElement Where pointer overlay should be appended to.
+		 * @cfg {string} defaults.target jQuery selector to point tutorial at
+		 * @cfg {string} [defaults.alignment] Determines where the pointer should point to. Valid values 'left' or 'center'
+		 * @cfg {string} [defaults.confirmMsg] Label for a confirm message.
+		 */
+		defaults: $.extend( {}, Overlay.prototype.defaults, {
+			summary: undefined,
+			isCompact: false,
+			isTutorial: false,
+			timeout: 0,
+			cancelMsg: msg( 'minerva-pointer-dismiss' ),
+			appendToElement: undefined,
+			target: undefined,
+			alignment: 'center',
+			confirmMsg: undefined
+		} ),
+		events: {
+			'click .cancel': 'hide'
+		},
+		postRender: function () {
+			var $target,
+				self = this;
+
+			Overlay.prototype.postRender.apply( this );
+
+			if ( this.options.isCompact ) {
+				this.$el.addClass( 'pointer-overlay-compact' );
+			}
+			if ( this.options.isTutorial ) {
+				this.$el.addClass( 'pointer-overlay-tutorial' );
+			}
+			if ( this.options.timeout ) {
+				setTimeout( function () {
+					self.hide();
+				}, this.options.timeout );
+			}
+			if ( self.options.target ) {
+				// FIXME: this option should be a jQuery object already. Avoid use of global $.
+				$target = $( self.options.target );
+				// Ensure we position the overlay correctly but do not show the arrow
+				self._position( $target );
+				this.addPointerArrow( $target );
+			}
+		},
+		/**
+		 * Refreshes the pointer arrow.
+		 * @method
+		 * @param {string} target jQuery selector
+		 */
+		refreshPointerArrow: function ( target ) {
+			this.$pointer.remove();
+			this.addPointerArrow( $( target ) );
+		},
+		/**
+		 * Position the overlay under a specified element
+		 * @private
+		 * @param {jQuery.Object} $pa An element that should be pointed at by the overlay
+		 */
+		_position: function ( $pa ) {
+			var left,
+				paOffset = $pa.offset(),
+				h = $pa.outerHeight( true ),
+				y = paOffset.top + h;
+
+			this.$el.css( 'top', y );
+			if ( this.options.autoHide ) {
+				left = paOffset.left;
+				this.$el.css( 'left', left );
+			}
+		},
+		/**
+		 * Position overlay and add pointer arrow that points at specified element
+		 * @method
+		 * @param {jQuery.Object} $pa An element that should be pointed at by the overlay
+		 */
+		addPointerArrow: function ( $pa ) {
+			var left,
+				paOffset = $pa.offset(),
+				overlayOffset = this.$el.offset(),
+				center = $pa.width() / 2;
+
+			this._position( $pa );
+			// add the entire width of the pointer
+			left = 24;
+			if ( !this.options.autoHide ) {
+				left += paOffset.left - overlayOffset.left;
+			}
+			if ( this.alignment === 'center' ) {
+				left -= center;
+			}
+
+			this.$pointer = $( '<div class="tutorial-pointer"></div>' ).css( {
+				top: -6,
+				left: left
+			} ).appendTo( this.$el );
+
+			// Since the positioning of this overlay is dependent on the current viewport it makes sense to
+			// use a global window event so that on resizes it is correctly positioned.
+			M.on(
+				'resize',
+				$.proxy( this, 'refreshPointerArrow', this.options.target )
+			);
+		}
+	} );
+
+	M.define( 'skins.minerva.newusers/PointerOverlay', PointerOverlay );
+
+}( mw.mobileFrontend, jQuery ) );

resources/skins.minerva.newusers/init.js

@@ -10,7 +10,7 @@ editing. You can replicate this by appending campaign=leftNavSignup to the URL o
 editable page whilst logged in, although you must be in test group A to see the CTA.
 */
 ( function ( M, $ ) {
-	var PageActionOverlay = require( 'mobile.pointerOverlay' ),
+	var PointerOverlay = M.require( 'skins.minerva.newusers/PointerOverlay' ),
 		skin = M.require( 'skins.minerva.scripts/skin' ),
 		mainMenu = M.require( 'skins.minerva.scripts.top/mainMenu' ),
 		util = M.require( 'mobile.startup/util' ),
@@ -55,7 +55,7 @@ editable page whilst logged in, although you must be in test group A to see the
 			$target.attr( 'href', href + '/leftNavSignup' );
 		}
 
-		editOverlay = new PageActionOverlay( {
+		editOverlay = new PointerOverlay( {
 			target: target,
 			skin: skin,
 			isTutorial: true,

skin.json

@@ -76,9 +76,6 @@
 			"mediawiki.special.preferences.styles": [
 				"skinStyles/mediawiki.special.preferences.styles/styles.less"
 			],
-			"mobile.pointerOverlay": [
-				"skinStyles/mobile.pointerOverlay/minerva.less"
-			],
 			"mobile.search": [
 				"skinStyles/mobile.search/SearchOverlay.less"
 			],
@@ -310,15 +307,23 @@
 				"mobile",
 				"desktop"
 			],
+			"styles": [
+				"resources/skins.minerva.newusers/PointerOverlay.less"
+			],
+			"templates": {
+				"PointerOverlay.hogan": "resources/skins.minerva.newusers/PointerOverlay.hogan"
+			},
 			"dependencies": [
 				"skins.minerva.editor",
 				"mediawiki.util",
-				"mobile.pointerOverlay"
+				"mobile.startup"
 			],
 			"scripts": [
+				"resources/skins.minerva.newusers/PointerOverlay.js",
 				"resources/skins.minerva.newusers/init.js"
 			],
 			"messages": [
+				"minerva-pointer-dismiss",
 				"mobile-frontend-editor-tutorial-summary",
 				"mobile-frontend-editor-tutorial-confirm",
 				"mobile-frontend-editor-tutorial-cancel"