Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/386913 )
Change subject: Hygiene: Minera owns PointerOverlay
......................................................................
Hygiene: Minera owns PointerOverlay
The only usage is inside Minerva so we will move this module here.
Change-Id: If6859f0c8f855c6b116b254c58a6814f54b7c36d
---
M i18n/en.json
M i18n/qqq.json
A resources/skins.minerva.newusers/PointerOverlay.hogan
A resources/skins.minerva.newusers/PointerOverlay.js
R resources/skins.minerva.newusers/PointerOverlay.less
M resources/skins.minerva.newusers/init.js
M skin.json
7 files changed, 168 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/MinervaNeue
refs/changes/13/386913/1
diff --git a/i18n/en.json b/i18n/en.json
index d7f8a87..e40793f 100644
--- a/i18n/en.json
+++ b/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",
"mobile-frontend-editor-redlink-create": "Create page",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index caf550a..19cb5a0 100644
--- a/i18n/qqq.json
+++ b/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.",
diff --git a/resources/skins.minerva.newusers/PointerOverlay.hogan
b/resources/skins.minerva.newusers/PointerOverlay.hogan
new file mode 100644
index 0000000..3c98b30
--- /dev/null
+++ b/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>
diff --git a/resources/skins.minerva.newusers/PointerOverlay.js
b/resources/skins.minerva.newusers/PointerOverlay.js
new file mode 100644
index 0000000..de876db
--- /dev/null
+++ b/resources/skins.minerva.newusers/PointerOverlay.js
@@ -0,0 +1,150 @@
+( 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
+ * @extends Overlay
+ */
+ function PointerOverlay() {
+ Overlay.apply( this, arguments );
+ }
+
+ OO.mfExtend( PointerOverlay, Overlay, {
+ className: 'overlay pointer-overlay tutorial-overlay',
+ /**
+ * @inheritdoc
+ */
+ isBorderBox: false,
+ /**
+ * @inheritdoc
+ */
+ fullScreen: false,
+ /**
+ * @inheritdoc
+ */
+ closeOnContentTap: true,
+ template: template.get( 'skins.minerva.newusers',
'PointerOverlay.hogan' ),
+ /**
+ * @inheritdoc
+ * @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
+ } ),
+ /**
+ * @inheritdoc
+ */
+ events: {
+ 'click .cancel': 'hide'
+ },
+ /** @inheritdoc */
+ 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 ) );
diff --git a/skinStyles/mobile.pointerOverlay/minerva.less
b/resources/skins.minerva.newusers/PointerOverlay.less
similarity index 100%
rename from skinStyles/mobile.pointerOverlay/minerva.less
rename to resources/skins.minerva.newusers/PointerOverlay.less
diff --git a/resources/skins.minerva.newusers/init.js
b/resources/skins.minerva.newusers/init.js
index 3ad08e5..5d72e5c 100644
--- a/resources/skins.minerva.newusers/init.js
+++ b/resources/skins.minerva.newusers/init.js
@@ -10,7 +10,7 @@
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 @@
$target.attr( 'href', href + '/leftNavSignup' );
}
- editOverlay = new PageActionOverlay( {
+ editOverlay = new PointerOverlay( {
target: target,
skin: skin,
isTutorial: true,
diff --git a/skin.json b/skin.json
index 6db3580..e368201 100644
--- a/skin.json
+++ b/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"
],
@@ -306,15 +303,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"
--
To view, visit https://gerrit.wikimedia.org/r/386913
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If6859f0c8f855c6b116b254c58a6814f54b7c36d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/MinervaNeue
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
