mediawiki-skins-MinervaNeue/resources/skins.minerva.scripts/cleanuptemplates.js
jdlrobson b19997a970 Collapse amboxes in edit view
In edit mode various amboxes are shown which push the editor area
below the fold.

We solved this problem already for "page issues" in normal page views
so we should apply the same solution here.

"Editing help" message will show under the heading. When clicked
information will show in an overlay.

Change-Id: Ia6e478f289267d22adc55532221cba2aae16ff36
2017-09-27 21:04:36 +00:00

131 lines
3.7 KiB
JavaScript

( function ( M, $ ) {
( function () {
var action = mw.config.get( 'wgAction' ),
overlayManager = M.require( 'skins.minerva.scripts/overlayManager' ),
CleanupOverlay = M.require( 'mobile.issues/CleanupOverlay' );
/**
* Extract a summary message from a cleanup template generated element that is
* friendly for mobile display.
* @param {Object} $box element to extract the message from
* @ignore
* @return {string} html of message.
*/
function extractMessage( $box ) {
var selector = '.mbox-text, .ambox-text',
$container = $( '<div>' );
$box.find( selector ).each( function () {
var contents,
$this = $( this );
// Clean up talk page boxes
$this.find( 'table, .noprint' ).remove();
contents = $this.html();
if ( contents ) {
$( '<p>' ).html( contents ).appendTo( $container );
}
} );
return $container.html();
}
/**
* Create a link element that opens the issues overlay.
*
* @ignore
*
* @param {string} labelText The text value of the element
* @return {jQuery}
*/
function createLinkElement( labelText ) {
return $( '<a class="cleanup mw-mf-cleanup"></a>' )
.text( labelText );
}
/**
* Render a banner in a containing element.
* @param {jQuery.Object} $container to render the page issues banner inside.
* @param {string} labelText what the label of the page issues banner should say
* @param {string} headingText the heading of the overlay that is created when the page issues banner is clicked
* @ignore
*/
function createBanner( $container, labelText, headingText ) {
var selector = 'table.ambox, table.tmbox, table.cmbox, table.fmbox',
$metadata = $container.find( selector ),
issues = [],
$link;
// clean it up a little
$metadata.find( '.NavFrame' ).remove();
$metadata.each( function () {
var content,
$this = $( this );
if ( $this.find( selector ).length === 0 ) {
content = extractMessage( $this );
if ( content ) {
issues.push( {
text: content
} );
}
}
} );
$link = createLinkElement( labelText );
$link.attr( 'href', '#/issues' );
overlayManager.add( /^\/issues$/, function () {
return new CleanupOverlay( {
issues: issues,
headingText: headingText
} );
} );
if ( $metadata.length ) {
$link.insertAfter( $( 'h1#section_0' ) );
$metadata.remove();
}
}
/**
* Scan an element for any known cleanup templates and replace them with a button
* that opens them in a mobile friendly overlay.
* @ignore
*/
function initPageIssues() {
var ns = mw.config.get( 'wgNamespaceNumber' ),
// Categories have no lead section
$container = ns === 14 ? $( '#bodyContent' ) :
M.getCurrentPage().getLeadSectionElement();
if ( action === 'edit' ) {
$container = $( '#mw-content-text' );
} else if ( $container === null ) {
return;
}
if ( action === 'edit' ) {
createBanner( $container, mw.msg( 'edithelp' ),
mw.msg( 'edithelp' ) );
} else if ( ns === 0 ) {
createBanner( $container, mw.msg( 'mobile-frontend-meta-data-issues' ),
mw.msg( 'mobile-frontend-meta-data-issues-header' ) );
// Create a banner for talk pages (namespace 1) in beta mode to make them more readable.
} else if ( ns === 1 ) {
createBanner( $container, mw.msg( 'mobile-frontend-meta-data-issues-talk' ),
mw.msg( 'mobile-frontend-meta-data-issues-header-talk' ) );
} else if ( ns === 14 ) {
createBanner( $container, mw.msg( 'mobile-frontend-meta-data-issues-categories' ),
mw.msg( 'mobile-frontend-meta-data-issues-header-talk' ) );
}
}
// Setup the issues banner on the page
initPageIssues();
}() );
}( mw.mobileFrontend, jQuery ) );