mediawiki-extensions-Visual.../modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineContainerWidget.js
Thiemo Kreuz ff9f8a9e2d Focus template editor elements on click in the new sidebar
Clicks on the left side now focus elements on the right
side.

This patch also simplifies the …ContainerWidget constructor.
The config parameter should only be used for "OOUI things"
that are needed by subclasses and mixins. But the parameters
we have here are not "UI things".

Passing them as config passes them to classes where we don't
know what they do with it. What probably happens is that
some class keeps a reference to the entire config object,
which doesn't have a benefit and possibly blocks garbage
collection.

Bug: T274544
Change-Id: I0c0e4a1ba59dcb43141338ffe939c9c6783e000d
2021-07-15 08:40:28 +00:00

121 lines
3.4 KiB
JavaScript

/*!
* VisualEditor user interface MWTransclusionOutlineContainerWidget class.
*
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Container for transclusion, may contain a single or multiple templates.
*
* @class
* @extends OO.ui.Widget
*
* @constructor
* @param {ve.dm.MWTransclusionModel} transclusionModel
* @param {OO.ui.BookletLayout} bookletLayout
* @property {Object.<string,ve.ui.MWTransclusionOutlinePartWidget>} partWidgets Map of top-level
* items currently visible in this container, indexed by part id
*/
ve.ui.MWTransclusionOutlineContainerWidget = function VeUiMWTransclusionOutlineContainerWidget( transclusionModel, bookletLayout ) {
// Parent constructor
ve.ui.MWTransclusionOutlineContainerWidget.super.call( this );
// Initialization
this.transclusionModel = transclusionModel;
this.bookletLayout = bookletLayout;
this.partWidgets = {};
// Events
this.transclusionModel.connect( this, {
replace: 'onReplacePart',
change: 'onTransclusionModelChange'
} );
this.$element.addClass( 've-ui-mwTransclusionOutlineContainerWidget' );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWTransclusionOutlineContainerWidget, OO.ui.Widget );
/* Events */
/**
* @private
* @param {ve.dm.MWTransclusionPartModel|null} removed Removed part
* @param {ve.dm.MWTransclusionPartModel|null} added Added part
*/
ve.ui.MWTransclusionOutlineContainerWidget.prototype.onReplacePart = function ( removed, added ) {
if ( removed ) {
this.removePartWidget( removed );
}
// TODO: reselect if active part was in a removed template
if ( added ) {
this.addPartWidget( added );
}
};
/**
* @private
*/
ve.ui.MWTransclusionOutlineContainerWidget.prototype.onTransclusionModelChange = function () {
var newOrder = this.transclusionModel.getParts();
for ( var i = 0; i < newOrder.length; i++ ) {
var expectedWidget = this.partWidgets[ newOrder[ i ].getId() ],
$expectedElement = expectedWidget && expectedWidget.$element,
$currentElement = this.$element.children().eq( i );
if ( !$currentElement.is( $expectedElement ) ) {
// Move each widget to the correct position if it wasn't there before
$currentElement.before( $expectedElement );
}
}
};
/* Methods */
/**
* @private
* @param {ve.dm.MWTransclusionPartModel} part
*/
ve.ui.MWTransclusionOutlineContainerWidget.prototype.removePartWidget = function ( part ) {
var partId = part.getId(),
widget = this.partWidgets[ partId ];
if ( widget ) {
widget.$element.remove();
delete this.partWidgets[ partId ];
}
};
/**
* @private
* @param {ve.dm.MWTransclusionPartModel} part
*/
ve.ui.MWTransclusionOutlineContainerWidget.prototype.addPartWidget = function ( part ) {
var widget;
if ( part instanceof ve.dm.MWTemplateModel ) {
widget = new ve.ui.MWTransclusionOutlineTemplateWidget( part );
} else if ( part instanceof ve.dm.MWTemplatePlaceholderModel ) {
widget = new ve.ui.MWTransclusionOutlinePlaceholderWidget( part );
} else if ( part instanceof ve.dm.MWTransclusionContentModel ) {
widget = new ve.ui.MWTransclusionOutlineWikitextWidget( part );
}
widget.connect( this, { partHeaderClick: 'onPartHeaderClick' } );
this.partWidgets[ part.getId() ] = widget;
// FIXME: Respect order
this.$element.append( widget.$element );
};
/**
* @param {string} partId
*/
ve.ui.MWTransclusionOutlineContainerWidget.prototype.onPartHeaderClick = function ( partId ) {
this.bookletLayout.setPage( partId );
};