On the File page multi-lingual captions are displayed and edited using a table, each caption being on a separate row
The captions should probably be displayed using OOUI HorizontalLayout elements instead
From the review comments on the patch that introduced the table:
While this works, it's not really the OOUI way, AIUI (although that can be quite the PITA sometimes, and definitely would be to overhaul now)
There's a mixin (OO.ui.mixin.GroupElement) that lets you add/edit/... OOUI widgets (addItems, removeItems, getItems, ...).
This class could basically be something like this:
var panel = new OO.ui.FieldsetLayout(); panel.addItems( [ new OO.ui.HorizontalLayout( { items: [ new OO.ui.DropdownWidget(), // language selector new OO.ui.TextInputWidget(), // caption text new OO.ui.ButtonWidget() // delete button ] } ), new OO.ui.HorizontalLayout( { items: [ new OO.ui.DropdownWidget(), // language selector new OO.ui.TextInputWidget(), // caption text new OO.ui.ButtonWidget() // delete button ] } ) ] );
And then you would:
panel.getItems().each( function ( item ) { // process all values per line } );
Above is a very simplified example. In practice, these element probably won't suffice as-is (the dropdown will have to be something custom for ULS, for example), so you'd need to create multiple classes for each of these elements. That's the PITA part :)