diff --git a/resources/skins.minerva.scripts/page-issues/overlay/IssueList.js b/resources/skins.minerva.scripts/page-issues/overlay/IssueList.js
index 57ec9d917..3f0b19a20 100644
--- a/resources/skins.minerva.scripts/page-issues/overlay/IssueList.js
+++ b/resources/skins.minerva.scripts/page-issues/overlay/IssueList.js
@@ -12,16 +12,24 @@ const
*
* @param {IssueSummary} issues
*/
-function IssueList( issues ) {
- this.issues = issues;
- View.call( this, { className: 'cleanup' } );
+class IssueList extends View {
+ constructor( issues ) {
+ super( {
+ className: 'cleanup',
+ issues
+ } );
+ }
+
+ get tagName() {
+ return 'ul';
+ }
+
+ postRender() {
+ super.postRender();
+ this.append(
+ ( this.options.issues || [] ).map( ( issue ) => new IssueNotice( issue ).$el )
+ );
+ }
}
-OO.inheritClass( IssueList, View );
-IssueList.prototype.tagName = 'ul';
-IssueList.prototype.postRender = function () {
- View.prototype.postRender.apply( this, arguments );
- this.append(
- ( this.issues || [] ).map( ( issue ) => new IssueNotice( issue ).$el )
- );
-};
+
module.exports = IssueList;
diff --git a/resources/skins.minerva.scripts/page-issues/overlay/IssueNotice.js b/resources/skins.minerva.scripts/page-issues/overlay/IssueNotice.js
index 90d2cfb08..4ed1faa15 100644
--- a/resources/skins.minerva.scripts/page-issues/overlay/IssueNotice.js
+++ b/resources/skins.minerva.scripts/page-issues/overlay/IssueNotice.js
@@ -11,14 +11,23 @@ const
*
* @param {IssueSummary} props
*/
-function IssueNotice( props ) {
- View.call( this, props );
+class IssueNotice extends View {
+ constructor( props ) {
+ super( props );
+ }
+
+ get tagName() {
+ return 'li';
+ }
+
+ get template() {
+ return mw.template.get( 'skins.minerva.scripts', 'IssueNotice.mustache' );
+ }
+
+ postRender() {
+ super.postRender();
+ this.$el.find( '.issue-notice' ).prepend( this.options.issue.iconElement );
+ }
}
-OO.inheritClass( IssueNotice, View );
-IssueNotice.prototype.tagName = 'li';
-IssueNotice.prototype.template = mw.template.get( 'skins.minerva.scripts', 'IssueNotice.mustache' );
-IssueNotice.prototype.postRender = function () {
- View.prototype.postRender.apply( this, arguments );
- this.$el.find( '.issue-notice' ).prepend( this.options.issue.iconElement );
-};
+
module.exports = IssueNotice;
diff --git a/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.js b/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.js
index 2f8c66df8..5da154534 100644
--- a/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.js
+++ b/resources/skins.minerva.scripts/page-issues/overlay/pageIssuesOverlay.js
@@ -23,15 +23,10 @@ function pageIssuesOverlay( issues, section, namespaceID ) {
getNamespaceHeadingText( namespaceID ) :
mw.msg( 'minerva-meta-data-issues-section-header' );
- const overlay = new Overlay( {
+ return Overlay.make( {
className: 'overlay overlay-issues',
- heading: '' + headingText + ''
- } );
-
- overlay.$el.find( '.overlay-content' ).append(
- new IssueList( issues ).$el
- );
- return overlay;
+ heading: `${ headingText }`
+ }, new IssueList( issues ) );
}
/**