Hygiene: move page issue overlay to distinct file

Move page issue overlay specific code out of cleanuptemplates and into
PageIssueOverlay to clarify what code is specific to the page issues
modal screen and what's specific to the page itself.

Bug: T191528
Change-Id: I95821ccda84306ddd5d22b57ffbae8d13ca44408
This commit is contained in:
Stephen Niedzielski 2018-08-17 14:00:57 -05:00
parent 65f2e5ef51
commit 73131b7b45
2 changed files with 119 additions and 110 deletions

View File

@ -1,39 +1,40 @@
( function ( M ) { ( function ( M, mwMsg ) {
var Overlay = M.require( 'mobile.startup/Overlay' ), var
util = M.require( 'mobile.startup/util' ); Overlay = M.require( 'mobile.startup/Overlay' ),
util = M.require( 'mobile.startup/util' ),
/** KEYWORD_ALL_SECTIONS = 'all',
* @typedef {Object} PageIssue NS_MAIN = 0,
* @property {string} icon html associated with Icon component NS_TALK = 1,
* @property {string} text html explaining the details of the issue NS_CATEGORY = 14;
* @property {string} severity associated with the issue
*/
/**
* Obtain severity associated with a given $target node
* by looking at associated parent node (defined by template)
*
* @param {jQuery.Object} $target
* @return {string} severity as defined in associated PageIssue
*/
function parseSeverity( $target ) {
return $target.parents( '.issue-notice' ).data( 'severity' );
}
/** /**
* Overlay for displaying page issues * Overlay for displaying page issues
* @class PageIssuesOverlay * @class PageIssuesOverlay
* @extends Overlay * @extends Overlay
* *
* @param {Object} options Configuration options * @param {IssueSummary[]} issues list of page issue summaries for display.
* @param {string} options.headingText * @param {PageIssuesLogger} logger E.g., { log: console.log }.
* @param {PageIssue[]} options.issues list of page issues for display * @param {string} section
* @fires PageIssuesOverlay#link-edit-click * @param {number} namespaceID
* @fires PageIssuesOverlay#link-internal-click
*/ */
function PageIssuesOverlay( options ) { function PageIssuesOverlay( issues, logger, section, namespaceID ) {
options.heading = '<strong>' + options.headingText + '</strong>'; var
options,
// Note only the main namespace is expected to make use of section issues, so the heading will
// always be minerva-meta-data-issues-section-header regardless of namespace.
headingText = section === '0' || section === KEYWORD_ALL_SECTIONS ?
getNamespaceHeadingText( namespaceID ) :
mwMsg( 'minerva-meta-data-issues-section-header' );
this.issues = issues;
this.logger = logger;
options = {};
options.issues = issues;
options.heading = '<strong>' + headingText + '</strong>';
Overlay.call( this, options ); Overlay.call( this, options );
this.on( Overlay.EVENT_EXIT, this.onExit.bind( this ) );
} }
OO.mfExtend( PageIssuesOverlay, Overlay, { OO.mfExtend( PageIssuesOverlay, Overlay, {
@ -42,6 +43,7 @@
* @instance * @instance
*/ */
className: 'overlay overlay-issues', className: 'overlay overlay-issues',
/** /**
* @memberof PageIssuesOverlay * @memberof PageIssuesOverlay
* @instance * @instance
@ -50,6 +52,7 @@
'click a:not(.external):not([href*=edit])': 'onInternalClick', 'click a:not(.external):not([href*=edit])': 'onInternalClick',
'click a[href*="edit"]': 'onEditClick' 'click a[href*="edit"]': 'onEditClick'
} ), } ),
/** /**
* @memberof PageIssuesOverlay * @memberof PageIssuesOverlay
* @instance * @instance
@ -57,38 +60,87 @@
templatePartials: util.extend( {}, Overlay.prototype.templatePartials, { templatePartials: util.extend( {}, Overlay.prototype.templatePartials, {
content: mw.template.get( 'skins.minerva.scripts', 'PageIssuesOverlayContent.hogan' ) content: mw.template.get( 'skins.minerva.scripts', 'PageIssuesOverlayContent.hogan' )
} ), } ),
/** /**
* Event that is triggered when an internal link inside the overlay is clicked * Note: an "on enter" state is tracked by the issueClicked log event.
* This event will not be triggered if the link contains the edit keyword, in which * @return {void}
* case onEditClick will be fired */
* This is primarily used for instrumenting page issues onExit: function () {
* (see https://meta.wikimedia.org/wiki/Schema:PageIssues) this.logger.log( {
* @param {jQuery.Event} ev action: 'modalClose',
issuesSeverity: this.issues.map( issueSummaryToSeverity )
} );
},
/**
* Event that is triggered when an internal link inside the overlay is clicked. This event will
* not be triggered if the link contains the edit keyword, in which case onEditClick will be
* fired. This is primarily used for instrumenting page issues (see
* https://meta.wikimedia.org/wiki/Schema:PageIssues).
* @param {JQuery.Event} ev
* @memberof PageIssuesOverlay * @memberof PageIssuesOverlay
* @instance * @instance
*/ */
onInternalClick: function ( ev ) { onInternalClick: function ( ev ) {
/** var severity = parseSeverity( this.$( ev.target ) );
* @event PageIssuesOverlay#link-internal-click this.logger.log( {
* @param {string} severity action: 'modalInternalClicked',
*/ issuesSeverity: [ severity ]
this.emit( 'link-internal-click', parseSeverity( this.$( ev.target ) ) ); } );
}, },
/** /**
* Event that is triggered when an edit link inside the overlay is clicked * Event that is triggered when an edit link inside the overlay is clicked. This is primarily
* This is primarily used for instrumenting page issues * used for instrumenting page issues (see https://meta.wikimedia.org/wiki/Schema:PageIssues).
* (see https://meta.wikimedia.org/wiki/Schema:PageIssues) * @param {JQuery.Event} ev
* @param {jQuery.Event} ev
* @memberof PageIssuesOverlay * @memberof PageIssuesOverlay
* @instance * @instance
*/ */
onEditClick: function ( ev ) { onEditClick: function ( ev ) {
/** var severity = parseSeverity( this.$( ev.target ) );
* @event PageIssuesOverlay#link-edit-click this.logger.log( {
* @param {string} severity action: 'modalEditClicked',
*/ issuesSeverity: [ severity ]
this.emit( 'link-edit-click', parseSeverity( this.$( ev.target ) ) ); } );
} }
} ); } );
/**
* Obtain severity associated with a given $target node by looking at associated parent node
* (defined by templatePartials, PageIssuesOverlayContent.hogan).
*
* @param {JQuery.Object} $target
* @return {string[]} severity as defined in associated PageIssue
*/
function parseSeverity( $target ) {
return $target.parents( '.issue-notice' ).data( 'severity' );
}
/**
* @param {IssueSummary} issue
* @return {string} A PageIssue.severity.
*/
function issueSummaryToSeverity( issue ) {
return issue.severity;
}
/**
* Obtain a suitable heading for the issues overlay based on the namespace
* @param {number} namespaceID is the namespace to generate heading for
* @return {string} heading for overlay
*/
function getNamespaceHeadingText( namespaceID ) {
switch ( namespaceID ) {
case NS_CATEGORY:
return mw.msg( 'mobile-frontend-meta-data-issues-categories' );
case NS_TALK:
return mw.msg( 'mobile-frontend-meta-data-issues-talk' );
case NS_MAIN:
return mw.msg( 'mobile-frontend-meta-data-issues' );
default:
return '';
}
}
M.define( 'skins.minerva.scripts/PageIssuesOverlay', PageIssuesOverlay ); M.define( 'skins.minerva.scripts/PageIssuesOverlay', PageIssuesOverlay );
}( mw.mobileFrontend ) ); }( mw.mobileFrontend, mw.msg ) );

View File

@ -9,7 +9,6 @@
NS_TALK = 1, NS_TALK = 1,
NS_CATEGORY = 14, NS_CATEGORY = 14,
CURRENT_NS = config.get( 'wgNamespaceNumber' ), CURRENT_NS = config.get( 'wgNamespaceNumber' ),
allPageIssuesSeverity,
Icon = M.require( 'mobile.startup/Icon' ), Icon = M.require( 'mobile.startup/Icon' ),
pageIssuesLogger = M.require( 'skins.minerva.scripts/pageIssuesLogger' ), pageIssuesLogger = M.require( 'skins.minerva.scripts/pageIssuesLogger' ),
pageIssuesParser = M.require( 'skins.minerva.scripts/pageIssuesParser' ), pageIssuesParser = M.require( 'skins.minerva.scripts/pageIssuesParser' ),
@ -24,27 +23,30 @@
} ), } ),
newTreatmentEnabled = abTest.isB(); newTreatmentEnabled = abTest.isB();
/**
* @typedef {Object} IssueSummary
* @prop {string} severity A PageIssue.severity.
* @prop {string} icon HTML string.
* @prop {string} text HTML string.
*/
function isLoggingRequired( pageIssues ) { function isLoggingRequired( pageIssues ) {
// No logging necessary when the A/B test is disabled (control group). // No logging necessary when the A/B test is disabled (control group).
return abTest.isEnabled() && pageIssues.length; return abTest.isEnabled() && pageIssues.length;
} }
/** /**
* @param {PageIssue} issue * @param {IssueSummary} summary
* @return {string} * @return {string}
*/ */
function formatPageIssuesSeverity( issue ) { function formatPageIssuesSeverity( summary ) {
return issue.severity; return summary.severity;
} }
/** /**
* Extract a summary message from a cleanup template generated element that is * Extract a summary message from a cleanup template generated element that is
* friendly for mobile display. * friendly for mobile display.
* @param {Object} $box element to extract the message from * @param {Object} $box element to extract the message from
* @ignore
* @typedef {Object} IssueSummary
* @prop {string} severity
* @prop {string} icon HTML string.
* @prop {string} text HTML string.
* @return {IssueSummary} * @return {IssueSummary}
*/ */
function extractMessage( $box ) { function extractMessage( $box ) {
@ -206,24 +208,6 @@
} }
} }
/**
* Obtain a suitable heading for the issues overlay based on the namespace
* @param {number} ns is the namespace to generate heading for
* @return {string} heading for overlay
*/
function getNamespaceHeadingText( ns ) {
switch ( ns ) {
case NS_CATEGORY:
return mw.msg( 'mobile-frontend-meta-data-issues-categories' );
case NS_TALK:
return mw.msg( 'mobile-frontend-meta-data-issues-talk' );
case NS_MAIN:
return mw.msg( 'mobile-frontend-meta-data-issues' );
default:
return '';
}
}
/** /**
* Scan an element for any known cleanup templates and replace them with a button * Scan an element for any known cleanup templates and replace them with a button
* that opens them in a mobile friendly overlay. * that opens them in a mobile friendly overlay.
@ -233,7 +217,6 @@
*/ */
function initPageIssues( overlayManager, page ) { function initPageIssues( overlayManager, page ) {
var label, var label,
headingText = getNamespaceHeadingText( CURRENT_NS ),
$lead = page.getLeadSectionElement(), $lead = page.getLeadSectionElement(),
issueOverlayShowAll = CURRENT_NS === NS_CATEGORY || CURRENT_NS === NS_TALK || !$lead, issueOverlayShowAll = CURRENT_NS === NS_CATEGORY || CURRENT_NS === NS_TALK || !$lead,
inline = newTreatmentEnabled && CURRENT_NS === 0; inline = newTreatmentEnabled && CURRENT_NS === 0;
@ -275,43 +258,17 @@
getIssues( KEYWORD_ALL_SECTIONS ).map( formatPageIssuesSeverity ) getIssues( KEYWORD_ALL_SECTIONS ).map( formatPageIssuesSeverity )
) )
); );
// Report that the page has been loaded.
pageIssuesLogger.log( {
action: 'pageLoaded',
issuesSeverity: getIssues( KEYWORD_ALL_SECTIONS ).map( formatPageIssuesSeverity )
} );
} }
// Setup the overlay route. // Setup the overlay route.
overlayManager.add( new RegExp( '^/issues/(\\d+|' + KEYWORD_ALL_SECTIONS + ')$' ), function ( section ) { overlayManager.add( new RegExp( '^/issues/(\\d+|' + KEYWORD_ALL_SECTIONS + ')$' ), function ( section ) {
var overlay = new PageIssuesOverlay( { return new PageIssuesOverlay( getIssues( section ), pageIssuesLogger, section, CURRENT_NS );
issues: getIssues( section ),
// Note only the main namespace is expected to make use of section issues, so the heading will always be
// minerva-meta-data-issues-section-header regardless of namespace
headingText: section === '0' || section === KEYWORD_ALL_SECTIONS ? headingText :
mw.msg( 'minerva-meta-data-issues-section-header' )
} );
// Tracking overlay close event.
overlay.on( 'Overlay-exit', function () {
pageIssuesLogger.log( {
action: 'modalClose',
issuesSeverity: getIssues( section ).map( formatPageIssuesSeverity )
} );
} );
overlay.on( 'link-edit-click', function ( severity ) {
pageIssuesLogger.log( {
action: 'modalEditClicked',
issuesSeverity: [ severity ]
} );
} );
overlay.on( 'link-internal-click', function ( severity ) {
pageIssuesLogger.log( {
action: 'modalInternalClicked',
issuesSeverity: [ severity ]
} );
} );
return overlay;
} );
// Tracking pageLoaded event (technically, "issues" loaded).
pageIssuesLogger.log( {
action: 'pageLoaded',
issuesSeverity: allPageIssuesSeverity
} ); } );
} }