* Multi-select field
*/
class HTMLMultiSelectField extends HTMLFormField implements HTMLNestedFilterable {
+ /**
+ * @param array $params
+ * In adition to the usual HTMLFormField parameters, this can take the following fields:
+ * - dropdown: If given, the options will be displayed inside a dropdown with a text field that
+ * can be used to filter them. This is desirable mostly for very long lists of options.
+ * This only works for users with JavaScript support and falls back to the list of checkboxes.
+ */
+ public function __construct( $params ) {
+ parent::__construct( $params );
+
+ // For backwards compatibility, also handle the old way with 'cssclass' => 'mw-chosen'
+ if ( isset( $params['dropdown'] ) || strpos( $this->mClass, 'mw-chosen' ) !== false ) {
+ $this->mClass .= ' mw-htmlform-dropdown';
+ }
+ }
+
function validate( $value, $alldata ) {
$p = parent::validate( $value, $alldata );
}
function getInputHTML( $value ) {
+ if ( isset( $this->mParams['dropdown'] ) ) {
+ $this->mParent->getOutput()->addModules( 'jquery.chosen' );
+ }
+
$value = HTMLFormField::forceToStringRecursive( $value );
$html = $this->formatOptions( $this->getOptions(), $value );
function addMulti( $oldContainer, $container ) {
var name = $oldContainer.find( 'input:first-child' ).attr( 'name' ),
- oldClass = ( ' ' + $oldContainer.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen)/g, '' ),
+ oldClass = ( ' ' + $oldContainer.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen|mw-htmlform-dropdown)/g, '' ),
$select = $( '<select>' ),
dataPlaceholder = mw.message( 'htmlform-chosen-placeholder' );
oldClass = $.trim( oldClass );
}
mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
- if ( $root.find( '.mw-chosen' ).length ) {
+ if ( $root.find( '.mw-htmlform-dropdown' ).length ) {
mw.loader.using( 'jquery.chosen', function () {
- $root.find( '.mw-chosen' ).each( function () {
+ $root.find( '.mw-htmlform-dropdown' ).each( function () {
var type = this.nodeName.toLowerCase(),
$converted = convertCheckboxesToMulti( $( this ), type );
$converted.find( '.htmlform-chzn-select' ).chosen( { width: 'auto' } );