MediaWiki:Gadget-QPreview.js

/**
 * QPreview
 * 
 * Enables a quick preview without refresh
 * Displays: * a render of the text in the edit box
 *           * categories and interwikis
 *           * indicators and display title
 *           * edit summary preview
 * Doesn't display: listing of the templates used
 * 
 * Initial author: [[:en:User:Alex Smotrov|en:Alex Smotrov]] at [[:en:User:Alex Smotrov/qpreview.js]],
 *  completed by [[:fr:Utilisateur:Seb35|fr:Seb35]] to display interwikis and categories,
 *  adapted and translated by [[commons:User:Diti|Diti]] and [[commons:User:Dschwen|Dschwen]]
 *  hungarian translation by [[w:hu:User:BáthoryPéter]]
 *
 * see [{{fullurl:commons:MediaWiki:Gadget-QPreview.js|action=history}} the page history] for a complete authors list
 */
( function qPreview( $, mw ) {
	var btn;

	var messages = [
		'otherlanguages',
		'pagetitle',
		mw.config.get( 'wgEditMessage', 'editing' ),
	];

	// e.g. qPreviewI18n.get( 'QPreview' )
	var qPreviewI18n = {
		'QPreview': { de: 'Schnellvorschau', fr: 'Aperçu', hu: 'Gyors előnézet' },
		'Traditional Preview': { de: 'Vorschau zeigen', fr: 'Prévisualiser', hu: 'Hagyományos előnézet' },

		get: function ( item ) {
			var lang = mw.config.get( 'wgUserLanguage' );
			if ( qPreviewI18n[ item ] ) {
				if( qPreviewI18n[ item ][ lang ] ) {
					return qPreviewI18n[ item ][ lang ];
				} else {
					return item;
				}
			} else {
				return item + ' (i18n!)';
			}
		}
	};

	function qPreviewInit() {
		var $oldPreview = $( '#wpPreviewWidget' );
		if ( !$oldPreview.length ) {
			return;
		}

		if ( !$( '#p-lang' ).length && $( '#p-tb' ).length ) {
			$( '<div>' )
				.attr( 'id', 'p-lang' )
				.addClass(  mw.config.get( 'skin' ) == 'vector' ? 'portal' : 'portlet' )
				.attr( 'role', 'navigation' )
				.attr( 'area-labelledby', 'p-lang-label' )
				.hide()
				.append( $( '<h3>' ).attr( 'id', 'p-lang-label' ).text( mw.msg( 'otherlanguages' ) ) )
				.append( $( '<div>' ).addClass( 'body' ).append( '<ul>' ) )
				.insertAfter( '.portal:last' );
		}

		if ( !$( '#catlinks' ).length && $( 'div.printfooter' ).length ) {
			$( '<div>' )
				.attr( 'id', 'catlinks' )
				.addClass( 'catlinks' )
				.attr( 'data-mw', 'interface' )
				.hide()
				.insertAfter( 'div.printfooter' );
		}

		btn = new OO.ui.ButtonInputWidget( {
			id: 'QPreviewWidget',
			inputId: 'btnQPreview',
		    label: qPreviewI18n.get( 'QPreview' ),
		    tabIndex: 6
		} );
		btn.on( 'click', qPreviewOnClick );
		btn.$element.insertBefore( $oldPreview );

		$oldPreview.find( 'input' ).val( qPreviewI18n.get( 'Traditional Preview' ) );
	}

	function qPreviewOnClick( e ) {
		var $wikiPreview = $( '#wikiPreview' );
		if ( !$wikiPreview.length ) {
			return;
		}

		btn.setLabel( '…' );
		var $editform = $( '#editform' );
		var section = $editform.find( '[name="wpSection"]' ).val();

		var text = $editform.find( '#wpTextbox1' ).textSelection( 'getContents' );
		var postData = {
			formatversion: 2,
			action: 'parse',
			title: mw.config.get( 'wgPageName' ),
			summary: OO.ui.infuse( $( '#wpSummaryWidget' ) ).getValue(),
			prop: 'text|indicators|displaytitle|modules|jsconfigvars|categorieshtml|langlinks',
			text: text,
			pst: true,
			preview: true,
			sectionpreview: section !== '',
			disableeditsection: true,
			useskin: mw.config.get( 'skin' ),
			uselang: mw.config.get( 'wgLang' )
		};
		if ( section === 'new' ) {
			postData.section = 'new';
			postData.sectiontitle = postData.summary;
		}

		var xhr = new mw.Api().post( postData );
		xhr.done( function ( response ) {
			var newList, $displaytitle, $content, $parent, $list;
			if ( response.parse.jsconfigvars ) {
				mw.config.set( response.parse.jsconfigvars );
			}
			if ( response.parse.modules ) {
				mw.loader.load( response.parse.modules.concat(
					response.parse.modulescripts,
					response.parse.modulestyles
				) );
			}
			
			newList = [];
			$.each( response.parse.indicators, function ( name, indicator ) {
				newList.push(
					$( '<div>' )
						.addClass( 'mw-indicator' )
						.attr( 'id', mw.util.escapeIdForAttribute( 'mw-indicator-' + name ) )
						.html( indicator )
						.get( 0 ),
					document.createTextNode( '\n' )
				);
			} );
			$( '.mw-indicators' ).empty().append( newList );

			if ( response.parse.displaytitle ) {
				$displaytitle = $( $.parseHTML( response.parse.displaytitle ) );
				$( '#firstHeading' ).msg(
					mw.config.get( 'wgEditMessage', 'editing' ),
					$displaytitle
				);
				document.title = mw.msg(
					'pagetitle',
					mw.msg(
						mw.config.get( 'wgEditMessage', 'editing' ),
						$displaytitle.text()
					)
				);
			}
			if ( response.parse.categorieshtml ) {
				$content = $( $.parseHTML( response.parse.categorieshtml ) );
				mw.hook( 'wikipage.categories' ).fire( $content );
				$( '.catlinks[data-mw="interface"]' ).show().replaceWith( $content );
			} else {
				$( '.catlinks[data-mw="interface"]' ).hide();
			}
			if ( response.parse.langlinks && $( '#p-lang' ).length ) {
				newList = response.parse.langlinks.map( function ( langlink ) {
					var bcp47 = mw.language.bcp47( langlink.lang );
					return $( '<li>' )
						.addClass( 'interlanguage-link interwiki-' + langlink.lang )
						.append( $( '<a>' )
							.attr( {
								href: langlink.url,
								title: langlink.title + ' - ' + langlink.langname,
								lang: bcp47,
								hreflang: bcp47
							} )
							.text( langlink.autonym )
						);
				} );
				$list = $( '#p-lang ul' );
				$parent = $list.parent();
				$list.detach().empty().append( newList ).prependTo( $parent );
			} else {
				$( '#p-lang' ).hide();
			}

			if ( response.parse.text ) {
				$content = $wikiPreview.children( '.mw-content-ltr,.mw-content-rtl' );
				$content
					.detach()
					.html( response.parse.text );

				mw.hook( 'wikipage.content' ).fire( $content );

				// Reattach
				$wikiPreview.append( $content );

				$wikiPreview.show();
			}
			$( '#wikiDiff' ).hide();
		} );

		xhr.done( function ( parseResp ) {
			var parse = parseResp && parseResp.parse,
				isSubject = ( section === 'new' ),
				summaryMsg = isSubject ? 'subject-preview' : 'summary-preview',
				$summaryPreview = $editform.find( '.mw-summary-preview' ).empty();
			if ( parse && parse.parsedsummary ) {
				$summaryPreview.append(
					mw.message( summaryMsg ).parse(),
					' ',
					$( '<span>' ).addClass( 'comment' ).html(
						// There is no equivalent to rawParams
						mw.message( 'parentheses' ).escaped()
							// .replace() use $ as start of a pattern.
							// $$ is the pattern for '$'.
							// The inner .replace() duplicates any $ and
							// the outer .replace() simplifies the $$.
							.replace( '$1', parse.parsedsummary.replace( /\$/g, '$$$$' ) )
					)
				);
			}
			mw.hook( 'wikipage.editform' ).fire( $editform );
		} ).fail( function ( code, result ) {
			// This just shows the error for whatever request failed first
			var errorMsg = 'API error: ' + code;
			if ( code === 'http' ) {
				errorMsg = 'HTTP error: ';
				if ( result.exception ) {
					errorMsg += result.exception;
				} else {
					errorMsg += result.textStatus;
				}
			}
			$errorBox = $( '<div>' )
				.addClass( 'mw-message-box mw-message-box-error' )
				.html( '<strong>' + mw.message( 'previewerrortext' ).escaped() + '</strong><br>' )
				.append( document.createTextNode( errorMsg ) );
			$( '#wikiDiff' ).hide();
			$wikiPreview.hide().before( $errorBox );
		} );

		xhr.always( function () {
			btn.setLabel( qPreviewI18n.get( 'QPreview' ) );
		} );

		// Compatibility with InterwikiTranslator tool
		if ( typeof interwikiTranslator !== 'undefined' ) {
			// Interwikik frissítése után interwikiFordito.js újrafuttatása
			interwikiTranslator.init();
		}
	}

	$.when(
		new mw.Api().loadMessages( messages ),
		$.ready
	).then( qPreviewInit );
} ( jQuery, mediaWiki ) );