EditCheckDialog.js
No OneTemporary
Actions

Size

15 KB

Referenced Files

None

Subscribers

None

EditCheckDialog.js
View Options

	/*!
	* VisualEditor UserInterface EditCheckDialog class.
	*
	* @copyright See AUTHORS.txt
	*/

	/**
	* Find and replace dialog.
	*
	* @class
	* @extends ve.ui.ToolbarDialog
	*
	* @constructor
	* @param {Object} [config] Configuration options
	*/
	ve.ui.EditCheckDialog = function VeUiEditCheckDialog() {
	// Pre-initialization
	this.$element.addClass( 've-ui-editCheckDialog' );
	};

	/* Inheritance */

	OO.initClass( ve.ui.EditCheckDialog );

	/* Static Properties */

	// TODO: Keep surface active on mobile for some checks?
	ve.ui.EditCheckDialog.static.activeSurface = !OO.ui.isMobile();

	// Invisible title for accessibility
	ve.ui.EditCheckDialog.static.title = OO.ui.deferMsg( 'editcheck-review-title' );

	/* Methods */

	/**
	* @inheritdoc
	*/
	ve.ui.EditCheckDialog.prototype.initialize = function () {
	this.title = new OO.ui.LabelWidget( {
	label: this.constructor.static.title,
	classes: [ 've-ui-editCheckDialog-title' ]
	} );

	// FIXME: click handlers are getting unbound when the window is closed

	this.closeButton = new OO.ui.ButtonWidget( {
	classes: [ 've-ui-editCheckDialog-close' ],
	framed: false,
	label: ve.msg( 'visualeditor-contextitemwidget-label-close' ),
	invisibleLabel: true,
	icon: 'expand'
	} ).connect( this, {
	click: 'onCloseButtonClick'
	} );

	this.currentOffset = null;
	this.currentActions = null;

	this.footerLabel = new OO.ui.LabelWidget();
	this.previousButton = new OO.ui.ButtonWidget( {
	icon: 'previous',
	title: ve.msg( 'last' ),
	invisibleLabel: true,
	framed: false
	} ).connect( this, {
	click: 'onPreviousButtonClick'
	} );
	this.nextButton = new OO.ui.ButtonWidget( {
	icon: 'next',
	title: ve.msg( 'next' ),
	invisibleLabel: true,
	framed: false
	} ).connect( this, {
	click: 'onNextButtonClick'
	} );
	this.footer = new OO.ui.HorizontalLayout( {
	classes: [ 've-ui-editCheckDialog-footer' ],
	items: [
	this.footerLabel,
	this.previousButton,
	this.nextButton
	]
	} );

	this.$actions = $( '<div>' );
	if ( OO.ui.isMobile() ) {
	this.$body.append( this.title.$element );
	}
	this.$body.append( this.closeButton.$element, this.$actions, this.footer.$element );
	};

	ve.ui.EditCheckDialog.prototype.onActionsUpdated = function ( listener, actions, newActions, discardedActions, rejected ) {
	if ( listener !== this.listener ) {
	return;
	}
	if ( this.updateFilter ) {
	actions = this.updateFilter( actions, newActions, discardedActions, this.currentActions );
	}
	this.showActions( actions, newActions, rejected );
	};

	ve.ui.EditCheckDialog.prototype.showActions = function ( actions, newActions, lastActionRejected ) {
	this.currentActions = actions;
	if ( actions.length === 0 ) {
	return this.close( { action: lastActionRejected ? 'reject' : 'complete' } );
	}

	// This just adjusts so the previously selected check remains selected:
	let newOffset = Math.min( this.currentOffset, actions.length - 1 );
	if ( newActions.length ) {
	newOffset = actions.indexOf( newActions[ 0 ] );
	}

	this.refresh();

	this.setCurrentOffset( newOffset, false );
	};

	ve.ui.EditCheckDialog.prototype.hasAction = function ( action ) {
	return this.currentActions.some( ( caction ) => action.equals( caction ) );
	};

	ve.ui.EditCheckDialog.prototype.refresh = function () {
	this.$actions.empty();

	this.currentActions.forEach( ( action, index ) => {
	const widget = action.render( index !== this.currentOffset, this.singleAction, this.surface );
	widget.on( 'togglecollapse', this.onToggleCollapse, [ action, index ], this );
	action.off( 'act' ).on( 'act', this.onAct, [ action, widget ], this );
	this.$actions.append( widget.$element );

	// for scrolling later
	action.widget = widget;
	} );
	};

	/**
	* Set the offset of the current check, within the list of all checks
	*
	* @param {number\|null} offset
	* @param {boolean} fromUserAction
	* @param {boolean} internal
	*/
	ve.ui.EditCheckDialog.prototype.setCurrentOffset = function ( offset, fromUserAction, internal ) {
	// TODO: work out how to tell the window to recalculate height here

	if ( offset === null \|\| offset === -1 ) {
	/* That's valid, carry on */
	offset = null;
	} else if ( !Number.isSafeInteger( offset ) \|\| ( offset < 0 \|\| offset > ( this.currentActions.length - 1 ) ) ) {
	throw new Error( `Bad offset ${ offset }, expected an integer between 0 and ${ this.currentActions.length - 1 }` );
	}

	this.currentOffset = offset;

	this.$body.find( '.ve-ui-editCheckActionWidget' ).each( ( i, el ) => {
	$( el ).toggleClass( 've-ui-editCheckActionWidget-collapsed', i !== this.currentOffset );
	} );

	if ( this.currentOffset !== null ) {
	this.footerLabel.setLabel(
	ve.msg( 'visualeditor-find-and-replace-results',
	ve.init.platform.formatNumber( this.currentOffset + 1 ),
	ve.init.platform.formatNumber( this.currentActions.length )
	)
	);
	} else {
	this.footerLabel.setLabel( '' );
	}
	this.nextButton.setDisabled( this.currentOffset !== null && this.currentOffset >= this.currentActions.length - 1 );
	this.previousButton.setDisabled( this.currentOffset === null \|\| this.currentOffset <= 0 );

	this.updateSize();

	if ( !internal ) {
	this.controller.focusAction( this.currentActions[ this.currentOffset ], fromUserAction );
	}
	};

	ve.ui.EditCheckDialog.prototype.onFocusAction = function ( action, index, scrollTo ) {
	this.setCurrentOffset( this.currentActions.indexOf( action ), scrollTo, true );
	};

	/**
	* @inheritdoc
	*/
	ve.ui.EditCheckDialog.prototype.getSetupProcess = function ( data, process ) {
	return process.first( () => {
	this.controller = data.controller;
	this.controller.on( 'actionsUpdated', this.onActionsUpdated, false, this );
	this.controller.on( 'focusAction', this.onFocusAction, false, this );

	const actions = data.actions \|\| this.controller.getActions( this.listener );

	this.listener = data.listener \|\| 'onDocumentChange';
	this.surface = data.surface;
	this.updateFilter = data.updateFilter;

	this.singleAction = ( this.listener === 'onBeforeSave' ) \|\| OO.ui.isMobile();

	this.closeButton.toggle( OO.ui.isMobile() );
	if ( data.footer !== undefined ) {
	this.footer.toggle( data.footer );
	} else {
	this.footer.toggle(
	this.singleAction &&
	// If we're in single-check mode don't show even the disabled pagers:
	!mw.config.get( 'wgVisualEditorConfig' ).editCheckSingle
	);
	}
	this.$element.toggleClass( 've-ui-editCheckDialog-singleAction', this.singleAction );

	this.surface.context.hide();

	this.showActions( actions, actions );
	}, this );
	};

	/**
	* @inheritdoc
	*/
	ve.ui.EditCheckDialog.prototype.getTeardownProcess = function ( data, process ) {
	return process.next( () => {
	this.controller.off( 'actionsUpdated', this.onActionsUpdated, this );
	this.controller.off( 'focusAction', this.onFocusAction, this );
	this.$actions.empty();
	}, this );
	};

	/**
	* Handle 'act' events from the mw.widget.EditCheckActionWidget
	*
	* @param {mw.editcheck.EditCheckAction} action
	* @param {mw.editcheck.EditCheckActionWidget} widget
	* @param {jQuery.Promise} promise Promise which resolves when the action is complete
	*/
	ve.ui.EditCheckDialog.prototype.onAct = function ( action, widget, promise ) {
	widget.setDisabled( true );
	this.nextButton.setDisabled( true );
	this.previousButton.setDisabled( true );
	promise.then( ( data ) => {
	widget.setDisabled( false );
	this.nextButton.setDisabled( false );
	this.previousButton.setDisabled( false );

	if ( data && this.listener === 'onBeforeSave' ) {
	// If an action has been taken, we want to linger for a brief moment
	// to show the result of the action before moving away
	// TODO: This was written for AddReferenceEditCheck but should be
	// more generic
	const pause = data.action !== 'reject' ? 500 : 0;
	setTimeout( () => {
	const rejected = [ 'feedback', 'reject', 'dismiss' ].includes( data.action );
	this.controller.removeAction( this.listener, action, rejected );
	}, pause );
	} else {
	this.controller.refresh();
	}
	} );
	};

	/**
	* Handle 'togglecollapse' events from the mw.widget.EditCheckActionWidget
	*
	* @param {mw.editcheck.EditCheckAction} action
	* @param {number} index
	* @param {boolean} collapsed
	*/
	ve.ui.EditCheckDialog.prototype.onToggleCollapse = function ( action, index, collapsed ) {
	if ( !collapsed ) {
	// expanded one
	this.setCurrentOffset( this.currentActions.indexOf( action ), true );
	if ( !OO.ui.isMobile() ) {
	const surfaceModel = this.surface.getModel();
	const checkRange = action.getFocusSelection().getCoveringRange();
	const surfaceRange = surfaceModel.getSelection().getCoveringRange();
	// Collapse and move the selection to the nearest part of the check range
	// Don't alter it if it touches the check range
	if ( surfaceRange === null \|\| surfaceRange.end < checkRange.start ) {
	surfaceModel.setLinearSelection( new ve.Range( checkRange.start ) );
	this.surface.getView().activate();
	this.surface.getView().focus();
	} else if ( surfaceRange.start > checkRange.end ) {
	surfaceModel.setLinearSelection( new ve.Range( checkRange.end ) );
	this.surface.getView().activate();
	this.surface.getView().focus();
	}
	}
	}
	};

	/**
	* Handle click events from the close button
	*/
	ve.ui.EditCheckDialog.prototype.onCloseButtonClick = function () {
	// eslint-disable-next-line no-jquery/no-class-state
	const collapse = !this.$element.hasClass( 've-ui-editCheckDialog-collapsed' );
	this.$element.toggleClass( 've-ui-editCheckDialog-collapsed', collapse );
	this.closeButton.setIcon( collapse ? 'collapse' : 'expand' );
	};

	/**
	* Handle click events from the next button
	*/
	ve.ui.EditCheckDialog.prototype.onNextButtonClick = function () {
	this.setCurrentOffset( this.currentOffset === null ? 0 : this.currentOffset + 1, true );
	};

	/**
	* Handle click events from the previous button
	*/
	ve.ui.EditCheckDialog.prototype.onPreviousButtonClick = function () {
	this.setCurrentOffset( this.currentOffset === null ? this.currentActions.length - 1 : this.currentOffset - 1, true );
	};

	ve.ui.SidebarEditCheckDialog = function VeUiSidebarEditCheckDialog( config ) {
	// Parent constructor
	ve.ui.SidebarEditCheckDialog.super.call( this, config );

	// Mixin constructor
	ve.ui.EditCheckDialog.call( this, config );
	};

	OO.inheritClass( ve.ui.SidebarEditCheckDialog, ve.ui.SidebarDialog );

	OO.mixinClass( ve.ui.SidebarEditCheckDialog, ve.ui.EditCheckDialog );

	ve.ui.SidebarEditCheckDialog.static.name = 'sidebarEditCheckDialog';

	ve.ui.SidebarEditCheckDialog.static.size = 'medium';

	ve.ui.SidebarEditCheckDialog.prototype.initialize = function () {
	// Parent method
	ve.ui.SidebarEditCheckDialog.super.prototype.initialize.call( this );
	// Mixin method
	return ve.ui.EditCheckDialog.prototype.initialize.call( this );
	};

	ve.ui.SidebarEditCheckDialog.prototype.getSetupProcess = function ( data ) {
	// Parent method
	const process = ve.ui.SidebarEditCheckDialog.super.prototype.getSetupProcess.call( this, data );
	// Mixin method
	return ve.ui.EditCheckDialog.prototype.getSetupProcess.call( this, data, process ).next( () => {
	this.controller.on( 'position', this.onPosition, null, this );
	} );
	};

	ve.ui.SidebarEditCheckDialog.prototype.getTeardownProcess = function ( data ) {
	// Parent method
	const process = ve.ui.SidebarEditCheckDialog.super.prototype.getTeardownProcess.call( this, data );
	// Mixin method
	return ve.ui.EditCheckDialog.prototype.getTeardownProcess.call( this, data, process ).next( () => {
	this.controller.off( 'position', this.onPosition, this );
	} );
	};

	ve.ui.SidebarEditCheckDialog.prototype.onPosition = function () {
	if ( this.listener === 'onBeforeSave' ) {
	return;
	}
	const surfaceView = this.surface.getView();
	const surfaceTop = surfaceView.$element.offset().top + 10;
	this.currentActions.forEach( ( action ) => {
	const widget = action.widget;
	if ( widget ) {
	let top = Infinity;
	action.getHighlightSelections().forEach( ( selection ) => {
	const selectionView = ve.ce.Selection.static.newFromModel( selection, surfaceView );
	const rect = selectionView.getSelectionBoundingRect();
	if ( !rect ) {
	return;
	}
	top = Math.min( top, rect.top );
	} );
	widget.$element.css( 'margin-top', '' );
	widget.$element.css(
	'margin-top',
	Math.max( 0, top + surfaceTop - widget.$element.offset().top )
	);
	}
	} );
	};

	ve.ui.SidebarEditCheckDialog.prototype.onToggleCollapse = function () {
	// mixin
	ve.ui.EditCheckDialog.prototype.onToggleCollapse.apply( this, arguments );

	this.onPosition();
	};

	/* Registration */

	ve.ui.windowFactory.register( ve.ui.SidebarEditCheckDialog );

	ve.ui.FixedEditCheckDialog = function VeUiFixedEditCheckDialog( config ) {
	// Parent constructor
	ve.ui.FixedEditCheckDialog.super.call( this, config );

	// Mixin constructor
	ve.ui.EditCheckDialog.call( this, config );
	};

	OO.inheritClass( ve.ui.FixedEditCheckDialog, ve.ui.ToolbarDialog );

	OO.mixinClass( ve.ui.FixedEditCheckDialog, ve.ui.EditCheckDialog );

	ve.ui.FixedEditCheckDialog.static.name = 'fixedEditCheckDialog';

	ve.ui.FixedEditCheckDialog.static.position = OO.ui.isMobile() ? 'below' : 'side';

	ve.ui.FixedEditCheckDialog.static.size = OO.ui.isMobile() ? 'full' : 'medium';

	ve.ui.FixedEditCheckDialog.prototype.initialize = function () {
	// Parent method
	ve.ui.FixedEditCheckDialog.super.prototype.initialize.call( this );
	// Mixin method
	return ve.ui.EditCheckDialog.prototype.initialize.call( this );
	};

	ve.ui.FixedEditCheckDialog.prototype.getSetupProcess = function ( data ) {
	// Parent method
	const process = ve.ui.FixedEditCheckDialog.super.prototype.getSetupProcess.call( this, data );
	// Mixin method
	return ve.ui.EditCheckDialog.prototype.getSetupProcess.call( this, data, process );
	};

	ve.ui.FixedEditCheckDialog.prototype.getTeardownProcess = function ( data ) {
	// Parent method
	const process = ve.ui.FixedEditCheckDialog.super.prototype.getTeardownProcess.call( this, data );
	// Mixin method
	return ve.ui.EditCheckDialog.prototype.getTeardownProcess.call( this, data, process );
	};

	ve.ui.FixedEditCheckDialog.prototype.onFocusAction = function ( action, index, scrollTo ) {
	if ( this.singleAction && action === null ) {
	// Can't unset the offset in single-action mode, because it hides the sidebar contents
	return;
	}
	// Mixin method
	return ve.ui.EditCheckDialog.prototype.onFocusAction.call( this, action, index, scrollTo );
	};

	/* Registration */

	ve.ui.windowFactory.register( ve.ui.FixedEditCheckDialog );

	ve.ui.commandRegistry.register(
	new ve.ui.Command(
	'editCheckDialogInProcessOpen', 'window', 'open', { args: [ 'editCheckDialog', { listener: 'onDocumentChange' } ] }
	)
	);

	ve.ui.commandRegistry.register(
	new ve.ui.Command(
	'editCheckDialogInProcessToggle', 'window', 'toggle', { args: [ 'editCheckDialog', { listener: 'onDocumentChange' } ] }
	)
	);

	ve.ui.commandRegistry.register(
	new ve.ui.Command(
	'editCheckDialogBeforeSave', 'window', 'toggle', { args: [ 'editCheckDialog', { listener: 'onBeforeSave' } ] }
	)
	);

	/**
	* @class
	* @extends ve.ui.ToolbarDialogTool
	* @constructor
	* @param {OO.ui.ToolGroup} toolGroup
	* @param {Object} [config] Configuration options
	*/
	ve.ui.EditCheckDialogTool = function VeUiEditCheckDialogTool() {
	ve.ui.EditCheckDialogTool.super.apply( this, arguments );
	};
	OO.inheritClass( ve.ui.EditCheckDialogTool, ve.ui.ToolbarDialogTool );
	ve.ui.EditCheckDialogTool.static.name = 'editCheckDialog';
	ve.ui.EditCheckDialogTool.static.group = 'notices';
	ve.ui.EditCheckDialogTool.static.icon = 'robot';
	ve.ui.EditCheckDialogTool.static.title = 'Edit check'; // OO.ui.deferMsg( 'visualeditor-dialog-command-help-title' );
	ve.ui.EditCheckDialogTool.static.autoAddToCatchall = false;
	ve.ui.EditCheckDialogTool.static.commandName = 'editCheckDialogInProcessToggle';
	// ve.ui.EditCheckDialogTool.static.commandName = 'editCheckDialogBeforeSave';

	// Demo button for opening edit check sidebar
	// ve.ui.toolFactory.register( ve.ui.EditCheckDialogTool );

File Metadata

Mime Type: text/plain
Expires: Tue, Aug 18, 19:58 (2 w, 3 d ago)
Storage Engine: local-disk
Storage Format: Raw Data
Storage Handle: 41/6a/2f45d974693580b35be164f80029
Default Alt Text: EditCheckDialog.js (15 KB)

EditCheckDialog.jsNo OneTemporaryActions

EditCheckDialog.jsView Options

File Metadata

Event Timeline

EditCheckDialog.js
No OneTemporary
Actions

EditCheckDialog.js
View Options