All files / mobile.init editorLoadingOverlay.js

69.69% Statements 23/33
50% Branches 2/4
62.5% Functions 5/8
69.69% Lines 23/33

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89  1x 1x 1x                           1x 1x 1x               1x         1x 1x 1x         1x                 1x 1x 1x     1x   1x                                         1x 1x 1x 1x 1x       1x     1x  
var
	fakeToolbar = require( './fakeToolbar' ),
	IconButton = require( '../mobile.startup/IconButton' ),
	Overlay = require( '../mobile.startup/Overlay' );
 
/* global $ */
 
/**
 * Like loadingOverlay(), but with a fake editor toolbar instead of the spinner.
 *
 * @param {Function} afterShow Callback which runs after overlay is shown
 * @param {Function} afterHide Callback which runs after overlay is hidden
 * @param {Function} [loadBasicEditor] Callback for the "Use basic editor" button
 * @return {Overlay}
 */
function editorLoadingOverlay( afterShow, afterHide, loadBasicEditor ) {
	var timeout,
		$fakeToolbar = fakeToolbar(),
		$loadBasicWrapper = $( '<div>' ).addClass( 've-loadbasiceditor' ),
		loadBasicButton = new IconButton( {
			label: mw.msg( 'mobile-frontend-editor-loadbasiceditor' ),
			action: 'progressive',
			weight: 'normal',
			size: 'medium',
			isIconOnly: false,
			icon: null
		} ),
		overlay = new Overlay( {
			className: 'overlay overlay-loading',
			noHeader: true,
			isBorderBox: false,
			onBeforeExit: function ( exit ) {
				exit();
				afterHide();
				Iif ( timeout ) {
					clearTimeout( timeout );
				}
			}
		} ),
		logFeatureUse = function ( feature, action ) {
			mw.track( 'visualEditorFeatureUse', {
				feature: feature,
				action: action,
				// eslint-disable-next-line camelcase
				editor_interface: 'visualeditor'
			} );
		};
 
	overlay.show = function () {
		Overlay.prototype.show.call( this );
		afterShow();
	};
 
	overlay.$el.find( '.overlay-content' ).append( $fakeToolbar );
 
	Iif ( loadBasicEditor ) {
		overlay.$el.find( '.overlay-content' ).append(
			$loadBasicWrapper.append(
				$( '<p>' ).text( mw.msg( 'mobile-frontend-editor-loadingtooslow' ) ),
				loadBasicButton.$el
			)
		);
 
		timeout = setTimeout( function () {
			$loadBasicWrapper.addClass( 've-loadbasiceditor-shown' );
			logFeatureUse( 'mobileVisualFallback', 'context-show' );
		}, 3000 );
 
		loadBasicButton.$el.on( 'click', function () {
			$loadBasicWrapper.removeClass( 've-loadbasiceditor-shown' );
			logFeatureUse( 'mobileVisualFallback', 'fallback-confirm' );
			loadBasicEditor();
		} );
	}
 
	// Animate the toolbar sliding into place.
	$fakeToolbar.addClass( 'toolbar-hidden' );
	setTimeout( function () {
		$fakeToolbar.addClass( 'toolbar-shown' );
		setTimeout( function () {
			$fakeToolbar.addClass( 'toolbar-shown-done' );
		}, 250 );
	} );
 
	return overlay;
}
 
module.exports = editorLoadingOverlay;