wiki.techinc.nl/includes/htmlform/HTMLFormElement.php
Bartosz Dziewoński 89107070d1 Support 'hide-if' parameters in OOUI HTMLForm
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
2016-08-22 15:42:22 +00:00

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';
}
}