User:TheDJ/ActualLivePreview.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

( function ( mw, $ ) {
	function dependenciesChecked() {

		if ( ( mw.config.get( 'wgAction' ) !== 'edit' && mw.config.get( 'wgAction' ) !== 'submit' ) ||
			!mw.user.options.get( 'previewontop' ) || !mw.user.options.get( 'uselivepreview' ) ||
			mw.config.get( 'wgPageContentModel' ) !== 'wikitext' )
		{
			return;
		}
		// TODO Give the spinner an 'id'/class
		mw.loader.using( ['mediawiki.util'] ).done( function() {
			mw.util.addCSS( '@media all and (min-width:1200px) { #mw-content-text { position: relative; } #editform { width: 50%; height: 100%; } #wpTextbox1 { height: 70%; height: 70vh; } #wikiPreview, #wikiDiff, .mw-spinner-preview { position: absolute; width: 50%; left: 50%; padding: 0 1em; box-sizing: border-box; } #wikiPreview { height: 100%; height: 100vh; overflow-y: scroll; } } .mw-spinner-preview { top: 2em; position: absolute; z-index: 1; }' );
		} );

		function initActualLivePreview () {
			var scrollTop = 0,
				oldScrollPos,
				$previewButton = $( '#wpPreview' ),
				$previewArea = $( '#wikiPreview' ),
				$wpTextbox1 = $( '#wpTextbox1' );

			// 1: after settling, call preview JS.
			// TODO, add some hook in live preview code, to know that it is done.
			window.setTimeout( function () {
				if( $( 'body' ).width() > 1200 ) {
					$previewButton.click();
				}
			}, 2000 );
			// 2: After input debounce, call preview JS
			// TODO, might wanna expose some of the preview api functions here
			$wpTextbox1.on( 'input', mw.util.debounce( 500, function () {
				if ( $( 'body' ).width() > 1200 ) {
					scrollTop = $previewArea.scrollTop();
					oldScrollPos = $wpTextbox1.scrollTop();
					$previewButton.click();
				}
			} ) ).on( 'scroll', mw.util.debounce( 100, function ( ) {
				if ( $( 'body' ).width() > 1200 ) {
					var height = $wpTextbox1.prop( 'scrollHeight' );
					var previewHeight = $previewArea.prop( 'scrollHeight' );
					var factor = previewHeight / height;
					if ( factor > 0 ) {
						var newScrollPos = $wpTextbox1.scrollTop();
						var offset = (newScrollPos - oldScrollPos)*factor;
						$previewArea.scrollTop( $previewArea.scrollTop() + offset );
						oldScrollPos = newScrollPos;
					}
				}
			} ) );
			// 3: Every time live preview is done rendering, try to scroll it to
			// its previous position
			// TODO, add some hook in live preview code, to know that it is done
			mw.hook( 'wikipage.content' ).add( function () {
				if( $( 'body' ).width() > 1200 ) {
					window.setTimeout( function () {
						$previewArea.scrollTop( scrollTop );
					}, 300 );
				}
			} );
		}
		$.when( $.ready, mw.loader.using( 'jquery.throttle-debounce' ) ).done( initActualLivePreview );
	}
	mw.loader.using( ['user.options'] ).done( dependenciesChecked );
} )( mediaWiki, jQuery );