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:
parent
65f2e5ef51
commit
73131b7b45
|
@ -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 ) );
|
||||||
|
|
|
@ -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
|
|
||||||
} );
|
} );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue