* Remove redundant inline 'position: absolute' on the spinner.
* Remove trailing white space in jquery.spinner.css.
* Cache #editform query result.
* Remove redundant removeSelectors.join(',') logic.
* White space.
* Move delegate click event listener down from body to #editform
(the common ancestor of the #wpDiff and #wpPreview buttons).
* Remove minHeight (was needed because the spinner was positioned
absolute), which gets rid of the weird white gap for #wikiPreview if
you do live diff instead of live preview.
Change-Id: Icdf975f201947ecadb886057131f2531c68791fb
.mw-spinner-inline {
display: inline-block;
vertical-align: middle;
.mw-spinner-inline {
display: inline-block;
vertical-align: middle;
/* IE < 8 */
zoom: 1;
*display: inline;
/* IE < 8 */
zoom: 1;
*display: inline;
* @param {jQuery.Event} e
*/
function doLivePreview( e ) {
* @param {jQuery.Event} e
*/
function doLivePreview( e ) {
- var $wikiPreview, copySelectors, removeSelectors, $copyElements, $spinner,
+ var $wikiPreview, $editform, copySelectors, $copyElements, $spinner,
targetUrl, postData, $previewDataHolder;
e.preventDefault();
targetUrl, postData, $previewDataHolder;
e.preventDefault();
$( mw ).trigger( 'LivePreviewPrepare' );
$wikiPreview = $( '#wikiPreview' );
$( mw ).trigger( 'LivePreviewPrepare' );
$wikiPreview = $( '#wikiPreview' );
+ $editform = $( '#editform' );
// Show #wikiPreview if it's hidden to be able to scroll to it
// (if it is hidden, it's also empty, so nothing changes in the rendering)
// Show #wikiPreview if it's hidden to be able to scroll to it
// (if it is hidden, it's also empty, so nothing changes in the rendering)
$copyElements = $( copySelectors.join( ',' ) );
// Not shown during normal preview, to be removed if present
$copyElements = $( copySelectors.join( ',' ) );
// Not shown during normal preview, to be removed if present
- removeSelectors = [
- '.mw-newarticletext'
- ];
-
- $( removeSelectors.join( ',' ) ).remove();
+ $( '.mw-newarticletext' ).remove();
$spinner = $.createSpinner( {
size: 'large',
$spinner = $.createSpinner( {
size: 'large',
});
$wikiPreview.before( $spinner );
$spinner.css( {
});
$wikiPreview.before( $spinner );
$spinner.css( {
marginTop: $spinner.height()
} );
marginTop: $spinner.height()
} );
- // Make sure preview area is at least as tall as 2x the height of the spinner.
- // 1x because if its smaller, it will spin behind the edit toolbar.
- // (this happens on the first preview when editPreview is still empty)
- // 2x because the spinner has 1x margin top breathing room.
- $wikiPreview.css( 'minHeight', $spinner.height() * 2 );
// Can't use fadeTo because it calls show(), and we might want to keep some elements hidden
// (e.g. empty #catlinks)
// Can't use fadeTo because it calls show(), and we might want to keep some elements hidden
// (e.g. empty #catlinks)
- $copyElements.animate( {
- opacity: 0.4
- }, 'fast' );
+ $copyElements.animate( { opacity: 0.4 }, 'fast' );
$previewDataHolder = $( '<div>' );
$previewDataHolder = $( '<div>' );
- targetUrl = $( '#editform' ).attr( 'action' );
+ targetUrl = $editform.attr( 'action' );
// Gather all the data from the form
// Gather all the data from the form
- postData = $( '#editform' ).formToArray();
+ postData = $editform.formToArray();
postData.push( {
name: e.target.name,
value: ''
postData.push( {
name: e.target.name,
value: ''
// although that requires figuring out how to convert that raw data into proper HTML.
$previewDataHolder.load( targetUrl + ' ' + copySelectors.join( ',' ), postData, function () {
var i, $from;
// although that requires figuring out how to convert that raw data into proper HTML.
$previewDataHolder.load( targetUrl + ' ' + copySelectors.join( ',' ), postData, function () {
var i, $from;
// Copy the contents of the specified elements from the loaded page to the real page.
// Also copy their class attributes.
for ( i = 0; i < copySelectors.length; i++ ) {
// Copy the contents of the specified elements from the loaded page to the real page.
// Also copy their class attributes.
for ( i = 0; i < copySelectors.length; i++ ) {
if ( !document.getElementById( 'wikiDiff' ) && document.getElementById( 'wikiPreview' ) ) {
$( '#wikiPreview' ).after(
if ( !document.getElementById( 'wikiDiff' ) && document.getElementById( 'wikiPreview' ) ) {
$( '#wikiPreview' ).after(
- $( '<div>' ).attr( 'id', 'wikiDiff')
+ $( '<div>' ).attr( 'id', 'wikiDiff' )
- $( document.body ).on( 'click', '#wpPreview, #wpDiff', doLivePreview );
+ $( '#editform' ).on( 'click', '#wpPreview, #wpDiff', doLivePreview );
} );
}( mediaWiki, jQuery ) );
} );
}( mediaWiki, jQuery ) );