For plain HTML forms, we just put the required data in the 'data-hide-if' attribute. For OOUI, it's not so easy - while we could just call ->setAttribute(...) on the FieldLayout, this would disappear when infusing (since it's not part of the config), and we have no control over when some piece of JavaScript decides to infuse the element. Even if we managed to handle it first, infusing replaces the DOM nodes for elements with new ones, which would "disable" our event handlers. To solve this, I'm creating two new layouts HTMLFormFieldLayout and HTMLFormActionFieldLayout (subclassing FieldLayout and ActionFieldLayout) with a common trait (mixin) HTMLFormElement. This is all implemented both in PHP and JS. Right now it only serves to carry the 'hide-if' data from PHP to JS code, but I imagine it'll be extended in the future for other HTMLForm features not yet present in the OOUI version (e.g. 'cloner' fields). The code in hide-if.js has been modified to work with jQuery objects or with OOjs UI Widgets with minimal changes. I had to duplicate the map of HTMLFormField classes to modules they require there (from autoinfuse.js), which is ugly - I'm fixing this in a follow-up commit I3da75706209cbc16b19cc3f02b355e58ca75fec9. Bug: T141558 Change-Id: I3b06a6f75eed01d3e0bdc5dd33e1b40b7a2fc0a2
57 lines
1.5 KiB
PHP
57 lines
1.5 KiB
PHP
<?php
|
|
|
|
/**
|
|
* Allows custom data specific to HTMLFormField to be set for OOjs UI forms. A matching JS widget
|
|
* (defined in htmlform.Element.js) picks up the extra config when constructed using OO.ui.infuse().
|
|
*
|
|
* Currently only supports passing 'hide-if' data.
|
|
*/
|
|
trait HTMLFormElement {
|
|
|
|
protected $hideIf = null;
|
|
|
|
public function initializeHTMLFormElement( array $config = [] ) {
|
|
// Properties
|
|
$this->hideIf = isset( $config['hideIf'] ) ? $config['hideIf'] : null;
|
|
|
|
// Initialization
|
|
if ( $this->hideIf ) {
|
|
$this->addClasses( [ 'mw-htmlform-hide-if' ] );
|
|
}
|
|
$this->registerConfigCallback( function( &$config ) {
|
|
if ( $this->hideIf !== null ) {
|
|
$config['hideIf'] = $this->hideIf;
|
|
}
|
|
} );
|
|
}
|
|
}
|
|
|
|
class HTMLFormFieldLayout extends OOUI\FieldLayout {
|
|
use HTMLFormElement;
|
|
|
|
public function __construct( $fieldWidget, array $config = [] ) {
|
|
// Parent constructor
|
|
parent::__construct( $fieldWidget, $config );
|
|
// Traits
|
|
$this->initializeHTMLFormElement( $config );
|
|
}
|
|
|
|
protected function getJavaScriptClassName() {
|
|
return 'mw.htmlform.FieldLayout';
|
|
}
|
|
}
|
|
|
|
class HTMLFormActionFieldLayout extends OOUI\ActionFieldLayout {
|
|
use HTMLFormElement;
|
|
|
|
public function __construct( $fieldWidget, $buttonWidget = false, array $config = [] ) {
|
|
// Parent constructor
|
|
parent::__construct( $fieldWidget, $buttonWidget, $config );
|
|
// Traits
|
|
$this->initializeHTMLFormElement( $config );
|
|
}
|
|
|
|
protected function getJavaScriptClassName() {
|
|
return 'mw.htmlform.ActionFieldLayout';
|
|
}
|
|
}
|