'MediaWiki\\Widget\\Search\\SimpleSearchResultSetWidget' => __DIR__ . '/includes/widget/search/SimpleSearchResultSetWidget.php',
'MediaWiki\\Widget\\Search\\SimpleSearchResultWidget' => __DIR__ . '/includes/widget/search/SimpleSearchResultWidget.php',
'MediaWiki\\Widget\\SelectWithInputWidget' => __DIR__ . '/includes/widget/SelectWithInputWidget.php',
+ 'MediaWiki\\Widget\\SizeFilterWidget' => __DIR__ . '/includes/widget/SizeFilterWidget.php',
'MediaWiki\\Widget\\TitleInputWidget' => __DIR__ . '/includes/widget/TitleInputWidget.php',
'MediaWiki\\Widget\\UserInputWidget' => __DIR__ . '/includes/widget/UserInputWidget.php',
'MediaWiki\\Widget\\UsersMultiselectWidget' => __DIR__ . '/includes/widget/UsersMultiselectWidget.php',
--- /dev/null
+<?php
+
+namespace MediaWiki\Widget;
+
+use \OOUI\RadioSelectInputWidget;
+use \OOUI\TextInputWidget;
+use \OOUI\LabelWidget;
+
+/**
+ * Select and input widget.
+ *
+ * @copyright 2011-2018 MediaWiki Widgets Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+class SizeFilterWidget extends \OOUI\Widget {
+
+ protected $radioselectinput = null;
+ protected $textinput = null;
+
+ /**
+ * RadioSelectInputWidget and a TextInputWidget to set minimum or maximum byte size
+ *
+ * @param array $config Configuration options
+ * - array $config['textinput'] Configuration for the TextInputWidget
+ * - array $config['radioselectinput'] Configuration for the RadioSelectWidget
+ * - bool $congif['selectMin'] Whether to select 'min', false would select 'max'
+ */
+ public function __construct( array $config = [] ) {
+ // Configuration initialization
+ $config = array_merge( [
+ 'selectMin' => true,
+ 'textinput' => [],
+ 'radioselectinput' => []
+ ], $config );
+ $config['textinput'] = array_merge( [
+ 'type' => 'number'
+ ], $config['textinput'] );
+ $config['radioselectinput'] = array_merge( [ 'options' => [
+ [
+ 'data' => 'min',
+ 'label' => wfMessage( 'minimum-size' )->text()
+ ],
+ [
+ 'data' => 'max',
+ 'label' => wfMessage( 'maximum-size' )->text()
+ ]
+ ] ], $config['radioselectinput'] );
+
+ // Parent constructor
+ parent::__construct( $config );
+
+ // Properties
+ $this->config = $config;
+ $this->radioselectinput = new RadioSelectInputWidget( $config[ 'radioselectinput'] );
+ $this->textinput = new TextInputWidget( $config[ 'textinput' ] );
+ $this->label = new LabelWidget( [ 'label' => wfMessage( 'pagesize' )->text() ] );
+
+ // Initialization
+ $this->radioselectinput->setValue( $config[ 'selectMin' ] ? 'min' : 'max' );
+ $this
+ ->addClasses( [ 'mw-widget-sizeFilterWidget' ] )
+ ->appendContent( $this->radioselectinput, $this->textinput, $this->label );
+ }
+
+ protected function getJavaScriptClassName() {
+ return 'mw.widgets.SizeFilterWidget';
+ }
+
+ public function getConfig( &$config ) {
+ $config['textinput'] = $this->config['textinput'];
+ $config['radioselectinput'] = $this->config['radioselectinput'];
+ $config['selectMin'] = $this->config['selectMin'];
+ return parent::getConfig( $config );
+ }
+}
'styles' => 'resources/src/mediawiki.widgets/mw.widgets.SelectWithInputWidget.base.css',
'targets' => [ 'desktop', 'mobile' ],
],
+ 'mediawiki.widgets.SizeFilterWidget' => [
+ 'scripts' => 'resources/src/mediawiki.widgets/mw.widgets.SizeFilterWidget.js',
+ 'dependencies' => [
+ 'mediawiki.widgets.SizeFilterWidget.styles',
+ 'oojs-ui-widgets',
+ ],
+ 'messages' => [
+ 'minimum-size',
+ 'maximum-size',
+ 'pagesize',
+ ],
+ 'targets' => [ 'desktop', 'mobile' ],
+ ],
+ 'mediawiki.widgets.SizeFilterWidget.styles' => [
+ 'styles' => 'resources/src/mediawiki.widgets/mw.widgets.SizeFilterWidget.base.css',
+ 'targets' => [ 'desktop', 'mobile' ],
+ ],
'mediawiki.widgets.MediaSearch' => [
'scripts' => [
'resources/src/mediawiki.widgets/MediaSearch/mw.widgets.APIResultsProvider.js',
--- /dev/null
+/*!
+ * MediaWiki Widgets - base SizeFilterWidget styles.
+ *
+ * @copyright 2011-2018 MediaWiki Widgets Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+.mw-widget-sizeFilterWidget > .oo-ui-widget {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.mw-widget-sizeFilterWidget .oo-ui-textInputWidget {
+ max-width: 29.5em;
+}
+
+/* PHP widget */
+.mw-widget-sizeFilterWidget .oo-ui-radioSelectInputWidget .oo-ui-fieldLayout {
+ display: inline-block;
+ margin: 0;
+ vertical-align: middle;
+}
+
+.mw-widget-sizeFilterWidget .oo-ui-radioSelectInputWidget .oo-ui-fieldLayout:first-child {
+ margin-right: 0.5em;
+}
+
+/* JS widget */
+.mw-widget-sizeFilterWidget .oo-ui-radioSelectInputWidget .oo-ui-radioOptionWidget {
+ display: inline-table;
+ width: auto;
+ margin: 0;
+ vertical-align: middle;
+}
+
+.mw-widget-sizeFilterWidget .oo-ui-radioSelectInputWidget .oo-ui-radioOptionWidget:first-child {
+ margin-right: 0.5em;
+}
--- /dev/null
+/*!
+ * MediaWiki Widgets - SizeFilterWidget class.
+ *
+ * @copyright 2011-2018 MediaWiki Widgets Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+( function ( $, mw ) {
+
+ /**
+ * RadioSelectInputWidget and a TextInputWidget to set minimum or maximum byte size
+ *
+ * mw.loader.using( 'mediawiki.widgets.SizeFilterWidget', function () {
+ * var sf = new mw.widgets.SizeFilterWidget();
+ * $( 'body' ).append( sf.$element );
+ * } );
+ *
+ * @class mw.widgets.SizeFilterWidget
+ * @extends OO.ui.Widget
+ * @uses OO.ui.RadioSelectInputWidget
+ * @uses OO.ui.TextInputWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {Object} [radioselectinput] Config for the radio select input
+ * @cfg {Object} [textinput] Config for the text input
+ * @cfg {boolean} [selectMin=true] Whether to select 'min', false would select 'max'
+ */
+ mw.widgets.SizeFilterWidget = function MwWidgetsSizeFilterWidget( config ) {
+ // Config initialization
+ config = $.extend( { selectMin: true }, config );
+ config.textinput = $.extend( {
+ type: 'number'
+ }, config.textinput );
+ config.radioselectinput = $.extend( {
+ options: [
+ { data: 'min', label: mw.msg( 'minimum-size' ) },
+ { data: 'max', label: mw.msg( 'maximum-size' ) }
+ ]
+ }, config.radioselectinput );
+
+ // Properties
+ this.radioselectinput = new OO.ui.RadioSelectInputWidget( config.radioselectinput );
+ this.textinput = new OO.ui.TextInputWidget( config.textinput );
+ this.label = new OO.ui.LabelWidget( { label: mw.msg( 'pagesize' ) } );
+
+ // Parent constructor
+ mw.widgets.SizeFilterWidget.parent.call( this, config );
+
+ // Initialization
+ this.radioselectinput.setValue( config.selectMin ? 'min' : 'max' );
+ this.$element
+ .addClass( 'mw-widget-sizeFilterWidget' )
+ .append(
+ this.radioselectinput.$element,
+ this.textinput.$element,
+ this.label.$element
+ );
+ };
+
+ /* Setup */
+ OO.inheritClass( mw.widgets.SizeFilterWidget, OO.ui.Widget );
+
+ /* Static Methods */
+
+ /**
+ * @inheritdoc
+ */
+ mw.widgets.SizeFilterWidget.static.reusePreInfuseDOM = function ( node, config ) {
+ config = mw.widgets.SizeFilterWidget.parent.static.reusePreInfuseDOM( node, config );
+ config.radioselectinput = OO.ui.RadioSelectInputWidget.static.reusePreInfuseDOM(
+ $( node ).find( '.oo-ui-radioSelectInputWidget' ),
+ config.radioselectinput
+ );
+ config.textinput = OO.ui.TextInputWidget.static.reusePreInfuseDOM(
+ $( node ).find( '.oo-ui-textInputWidget' ),
+ config.textinput
+ );
+ return config;
+ };
+
+ /**
+ * @inheritdoc
+ */
+ mw.widgets.SizeFilterWidget.static.gatherPreInfuseState = function ( node, config ) {
+ var state = mw.widgets.SizeFilterWidget.parent.static.gatherPreInfuseState( node, config );
+ state.radioselectinput = OO.ui.RadioSelectInputWidget.static.gatherPreInfuseState(
+ $( node ).find( '.oo-ui-radioSelectInputWidget' ),
+ config.radioselectinput
+ );
+ state.textinput = OO.ui.TextInputWidget.static.gatherPreInfuseState(
+ $( node ).find( '.oo-ui-textInputWidget' ),
+ config.textinput
+ );
+ return state;
+ };
+
+ /* Methods */
+
+ /**
+ * @inheritdoc
+ */
+ mw.widgets.SizeFilterWidget.prototype.restorePreInfuseState = function ( state ) {
+ mw.widgets.SizeFilterWidget.parent.prototype.restorePreInfuseState.call( this, state );
+ this.radioselectinput.restorePreInfuseState( state.radioselectinput );
+ this.textinput.restorePreInfuseState( state.textinput );
+ };
+
+}( jQuery, mediaWiki ) );