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 :)