Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/229662
Change subject: Use OOUI for 'create' form
......................................................................
Use OOUI for 'create' form
Starting out with T106948. All the other forms still remain to be
converted.
Depends on:
* If1e139d4f07be98e418e11470794ea42e8a9b2eb in MediaWiki core
* Icd05431bedb09d782cb880deb455e52241ca2403 in OOjs UI
Bug: T106948
Change-Id: I2d6a9d6ea3e7b79ac90e9c3b1b0dc179cbee50f3
---
M .jshintrc
M InputBox.classes.php
M extension.json
M resources/ext.inputBox.js
M resources/ext.inputBox.styles.css
5 files changed, 53 insertions(+), 35 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/InputBox
refs/changes/62/229662/1
diff --git a/.jshintrc b/.jshintrc
index b6a0f58..ff6d4f5 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -35,6 +35,7 @@
"predef": [
"mediaWiki",
"jQuery",
+ "OO",
"QUnit"
]
}
diff --git a/InputBox.classes.php b/InputBox.classes.php
index 5ce2590..4295807 100644
--- a/InputBox.classes.php
+++ b/InputBox.classes.php
@@ -58,6 +58,7 @@
case 'create':
case 'comment':
$this->mParser->getOutput()->addModules(
'ext.inputBox' );
+ $this->mParser->enableOOUI();
return $this->getCreateForm();
case 'move':
return $this->getMoveForm();
@@ -367,27 +368,38 @@
if ( $this->mType == 'comment' ) {
$htmlOut .= Html::hidden( 'section', 'new' );
}
- $htmlOut .= Xml::openElement( 'input',
- array(
- 'type' => $this->mHidden ? 'hidden' : 'text',
+ if ( $this->mHidden ) {
+ $htmlOut .= Html::hidden( 'title', $this->mDefaultText
);
+ } else {
+ $classes = array( 'createboxInput' );
+ if ( strtolower( $this->mBR ) !== '<br />' ) {
+ $classes[] = 'mw-inputbox-input-inline';
+ }
+
+ $widget = new OOUI\TextInputWidget( array(
+ 'infusable' => true,
'name' => 'title',
- 'class' => ( strtolower( $this->mBR ) === '<br
/>' ? 'mw-inputbox-input ' : '' ) .
- 'mw-ui-input mw-ui-input-inline
createboxInput',
+ 'classes' => $classes,
'value' => $this->mDefaultText,
'placeholder' => $this->mPlaceholderText,
- 'size' => $this->mWidth,
- 'dir' => $this->mDir,
- )
- );
- $htmlOut .= $this->mBR;
- $htmlOut .= Xml::openElement( 'input',
- array(
+ // TODO What about these? 'size' we can
probably ignore, but 'dir' has to be preserved.
+ // 'size' => $this->mWidth,
+ // 'dir' => $this->mDir,
+ ) );
+
+ $htmlOut .= $widget;
+ }
+
+ $htmlOut .= new OOUI\ButtonInputWidget( array(
+ 'infusable' => true,
'type' => 'submit',
'name' => 'create',
- 'class' => 'mw-ui-button mw-ui-progressive
createboxButton',
- 'value' => $this->mButtonLabel
- )
- );
+ 'value' => $this->mButtonLabel,
+ 'flags' => array( 'primary', 'progressive' ),
+ 'classes' => array( 'createboxButton' ),
+ 'label' => $this->mButtonLabel,
+ ) );
+
$htmlOut .= Xml::closeElement( 'form' );
$htmlOut .= Xml::closeElement( 'div' );
diff --git a/extension.json b/extension.json
index 66e1d52..d050fe6 100644
--- a/extension.json
+++ b/extension.json
@@ -33,6 +33,7 @@
"ext.inputBox": {
"scripts": "ext.inputBox.js",
"dependencies": [
+ "oojs-ui",
"jquery.throttle-debounce"
],
"targets": [
diff --git a/resources/ext.inputBox.js b/resources/ext.inputBox.js
index 2469fd1..292b023 100644
--- a/resources/ext.inputBox.js
+++ b/resources/ext.inputBox.js
@@ -7,23 +7,16 @@
( function ( $, mw ) {
'use strict';
mw.hook( 'wikipage.content' ).add( function( $content ) {
- var $input = $content.find(
'.createboxInput:not([type=hidden])' ),
- onChange = function() {
- var $textbox = $( this ),
- $submit = $textbox.data( 'form-submit' );
+ $content.find( '.createboxInput' ).each( function () {
+ var
+ input = OO.ui.infuse( this ),
+ button = OO.ui.infuse( input.$element.nextAll(
'.createboxButton' )[0] );
- if ( !$submit ) {
- $submit = $textbox.nextAll(
'input.createboxButton' ).first();
- $textbox.data( 'form-submit', $submit );
- }
+ input.on( 'change', function ( value ) {
+ button.setDisabled( value.length < 1 );
+ } );
- $submit.prop( 'disabled', $textbox.val().length < 1 );
- }, i;
-
- for ( i = 0; i < $input.length; i++ ) {
- onChange.call( $input.get( i ) );
- }
-
- $input.on( 'keyup input change', $.debounce( 50, onChange ) );
+ button.setDisabled( input.getValue().length < 1 );
+ } );
} );
}( jQuery, mediaWiki ) );
diff --git a/resources/ext.inputBox.styles.css
b/resources/ext.inputBox.styles.css
index d2d1e13..e754d2b 100644
--- a/resources/ext.inputBox.styles.css
+++ b/resources/ext.inputBox.styles.css
@@ -14,6 +14,17 @@
white-space: nowrap;
}
-.mw-inputbox-input {
- margin-bottom: 0.5em;
-}
\ No newline at end of file
+.oo-ui-textInputWidget.createboxInput {
+ /* Should we support overriding this? */
+ width: 25em;
+}
+
+.mw-inputbox-centered .createboxInput {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.mw-inputbox-centered .mw-inputbox-input-inline.createboxInput {
+ display: inline-block;
+ margin-right: 0.5em;
+}
--
To view, visit https://gerrit.wikimedia.org/r/229662
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2d6a9d6ea3e7b79ac90e9c3b1b0dc179cbee50f3
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/InputBox
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
