Bartosz Dziewoński has uploaded a new change for review. https://gerrit.wikimedia.org/r/166398
Change subject: [WIP] Remaining widgets: Icon, Indicator, Label, Input, TextInput, CheckboxInput ...................................................................... [WIP] Remaining widgets: Icon, Indicator, Label, Input, TextInput, CheckboxInput Change-Id: I914d4973171567fb1e54de283d380f2f5bef4962 --- M demos/widgets.php M php/OoUiTag.php A php/widgets/OoUiCheckboxInputWidget.php A php/widgets/OoUiIconWidget.php A php/widgets/OoUiIndicatorWidget.php A php/widgets/OoUiInputWidget.php A php/widgets/OoUiLabelWidget.php A php/widgets/OoUiTextInputWidget.php M src/widgets/CheckboxInputWidget.js 9 files changed, 484 insertions(+), 3 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/98/166398/1 diff --git a/demos/widgets.php b/demos/widgets.php index f694685..6d0ebd4 100644 --- a/demos/widgets.php +++ b/demos/widgets.php @@ -24,6 +24,12 @@ require_once '../php/elements/OoUiGroupElement.php'; require_once '../php/widgets/OoUiButtonWidget.php'; require_once '../php/widgets/OoUiButtonGroupWidget.php'; + require_once '../php/widgets/OoUiIconWidget.php'; + require_once '../php/widgets/OoUiIndicatorWidget.php'; + require_once '../php/widgets/OoUiLabelWidget.php'; + require_once '../php/widgets/OoUiInputWidget.php'; + require_once '../php/widgets/OoUiCheckboxInputWidget.php'; + require_once '../php/widgets/OoUiTextInputWidget.php'; require_once '../php/OoUiTheme.php'; require_once '../php/layouts/OoUiFieldLayout.php'; require_once '../php/layouts/OoUiFieldsetLayout.php'; @@ -182,6 +188,134 @@ ) ); ?> + + <?php + echo new OoUiFieldsetLayout( array( + 'label' => 'Super simple widgets', + 'items' => array( + new OoUiFieldLayout( + new OoUiIconWidget( array( + 'icon' => 'picture', + 'title' => 'Picture icon' + ) ), + array( + 'label' => 'IconWidget (normal)', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiIconWidget( array( + 'icon' => 'picture', + 'title' => 'Picture icon', + 'disabled' => true + ) ), + array( + 'label' => 'IconWidget (disabled)', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiIndicatorWidget( array( + 'indicator' => 'required', + 'title' => 'Required icon' + ) ), + array( + 'label' => 'IndicatorWidget (normal)', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiIndicatorWidget( array( + 'indicator' => 'required', + 'title' => 'Required icon', + 'disabled' => true + ) ), + array( + 'label' => 'IndicatorWidget (disabled)', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiCheckboxInputWidget( array( + 'value' => true + ) ), + array( + 'align' => 'inline', + 'label' => 'CheckboxInputWidget' + ) + ), + new OoUiFieldLayout( + new OoUiCheckboxInputWidget( array( + 'value' => true, + 'disabled' => true + ) ), + array( + 'align' => 'inline', + 'label' => 'CheckboxInputWidget (disabled)' + ) + ), + new OoUiFieldLayout( + new OoUiTextInputWidget( array( 'value' => 'Text input' ) ), + array( + 'label' => 'TextInputWidget', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiTextInputWidget( array( 'icon' => 'search' ) ), + array( + 'label' => 'TextInputWidget (icon)', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiTextInputWidget( array( 'indicator' => 'required' ) ), + array( + 'label' => 'TextInputWidget (indicator)', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiTextInputWidget( array( 'placeholder' => 'Placeholder' ) ), + array( + 'label' => 'TextInputWidget (placeholder)', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiTextInputWidget( array( + 'value' => 'Readonly', + 'readOnly' => true + ) ), + array( + 'label' => 'TextInputWidget (readonly)', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiTextInputWidget( array( + 'value' => 'Disabled', + 'disabled' => true + ) ), + array( + 'label' => 'TextInputWidget (disabled)', + 'align' => 'top' + ) + ), + new OoUiFieldLayout( + new OoUiTextInputWidget( array( + 'multiline' => true, + 'value' => 'Multiline' + ) ), + array( + 'label' => 'TextInputWidget (multiline)', + 'align' => 'top' + ) + ), + ) + ) ); + + ?> </div> </div> </body> diff --git a/php/OoUiTag.php b/php/OoUiTag.php index 5d0ec24..bc2572f 100644 --- a/php/OoUiTag.php +++ b/php/OoUiTag.php @@ -127,6 +127,22 @@ } /** + * Set value of input element ('value' attribute for most, element content for textarea). + * + * @param string $value Value to set + * @chainable + */ + public function setValue( $value ) { + if ( strtolower( $this->tag ) === 'textarea' ) { + $this->clearContent(); + $this->appendContent( htmlspecialchars( $value ) ); + } else { + $this->setAttributes( array( 'value' => $value ) ); + } + return $this; + } + + /** * Remove HTML attributes. * * @param array $keys List of attribute keys to remove diff --git a/php/widgets/OoUiCheckboxInputWidget.php b/php/widgets/OoUiCheckboxInputWidget.php new file mode 100644 index 0000000..4c0db6a --- /dev/null +++ b/php/widgets/OoUiCheckboxInputWidget.php @@ -0,0 +1,48 @@ +<?php + +class OoUiCheckboxInputWidget extends OoUiInputWidget { + + /** + * Create checkbox input widget. + * + * @param array $config Configuration options + */ + public function __construct( array $config = array() ) { + // Parent constructor + parent::__construct( $config ); + + // Initialization + $this->addClasses( array( 'oo-ui-checkboxInputWidget' ) ); + } + + protected function getInputElement( $config ) { + $input = new OoUiTag( 'input' ); + $input->setAttributes( array( 'type' => 'checkbox' ) ); + return $input; + } + + /** + * Get checked state of the checkbox + * + * @return boolean If the checkbox is checked + */ + public function getValue() { + return $this->value; + } + + /** + * Set checked state of the checkbox + * + * @param boolean $value New value + * @chainable + */ + public function setValue( $value ) { + $this->value = (bool)$value; + if ( $this->value ) { + $this->input->setAttributes( array( 'checked' => 'checked' ) ); + } else { + $this->input->removeAttributes( array( 'checked' ) ); + } + return $this; + } +} diff --git a/php/widgets/OoUiIconWidget.php b/php/widgets/OoUiIconWidget.php new file mode 100644 index 0000000..22a393c --- /dev/null +++ b/php/widgets/OoUiIconWidget.php @@ -0,0 +1,25 @@ +<?php + +class OoUiIconWidget extends OoUiWidget { + + /* Static properties */ + + public static $tagName = 'span'; + + /** + * Create icon widget. + * + * @param array $config Configuration options + */ + public function __construct( array $config = array() ) { + // Parent constructor + parent::__construct( $config ); + + // Mixins + $this->mixin( new OoUiIconElement( $this, $this, $config ) ); + $this->mixin( new OoUiTitledElement( $this, $this, $config ) ); + + // Initialization + $this->addClasses( array( 'oo-ui-iconWidget' ) ); + } +} diff --git a/php/widgets/OoUiIndicatorWidget.php b/php/widgets/OoUiIndicatorWidget.php new file mode 100644 index 0000000..cb381e0 --- /dev/null +++ b/php/widgets/OoUiIndicatorWidget.php @@ -0,0 +1,25 @@ +<?php + +class OoUiIndicatorWidget extends OoUiWidget { + + /* Static properties */ + + public static $tagName = 'span'; + + /** + * Create indicator widget. + * + * @param array $config Configuration options + */ + public function __construct( array $config = array() ) { + // Parent constructor + parent::__construct( $config ); + + // Mixins + $this->mixin( new OoUiIndicatorElement( $this, $this, $config ) ); + $this->mixin( new OoUiTitledElement( $this, $this, $config ) ); + + // Initialization + $this->addClasses( array( 'oo-ui-indicatorWidget' ) ); + } +} diff --git a/php/widgets/OoUiInputWidget.php b/php/widgets/OoUiInputWidget.php new file mode 100644 index 0000000..e86d50e --- /dev/null +++ b/php/widgets/OoUiInputWidget.php @@ -0,0 +1,139 @@ +<?php + +class OoUiInputWidget extends OoUiWidget { + + /* Properties */ + + /** + * Input value. + * + * @var string + */ + protected $value = ''; + + /** + * Prevent chages. + * + * @var boolean + */ + protected $readOnly = false; + + /** + * Create input widget. + * + * @param array $config Configuration options + * @param string $config['name'] HTML input name (default: '') + * @param string $config['value'] Input value (default: '') + * @param boolean $config['readOnly'] Prevent changes (default: false) + */ + public function __construct( array $config = array() ) { + // Config initialization + $config = array_merge( array( 'readOnly' => false ), $config ); + + // Parent constructor + parent::__construct( $config ); + + // Properties + $this->input = $this->getInputElement( $config ); + + // Mixins + $this->mixin( new OoUiFlaggedElement( $this, $this, $config ) ); + + // Initialization + if ( isset( $config['name'] ) ) { + $this->input->setAttributes( array( 'name' => $config['name'] ) ); + } + if ( $this->isDisabled() ) { + $this->input->setAttributes( array( 'disabled' => 'disabled' ) ); + } + $this->setReadOnly( $config['readOnly'] ); + $this + ->addClasses( array( 'oo-ui-inputWidget' ) ) + ->appendContent( $this->input ); + $this->setValue( isset( $config['value'] ) ? $config['value'] : null ); + } + + /** + * Get input element. + * + * @param array $config Configuration options + * @return OoUiTag Input element + */ + protected function getInputElement( $config ) { + return new OoUiTag( 'input' ); + } + + /** + * Get the value of the input. + * + * @return string Input value + */ + public function getValue() { + return $this->value; + } + + /** + * Set the value of the input. + * + * @param string $value New value + * @chainable + */ + public function setValue( $value ) { + $this->value = $this->sanitizeValue( $value ); + $this->input->setValue( $this->value ); + return $this; + } + + /** + * Sanitize incoming value. + * + * Ensures value is a string, and converts null to empty string. + * + * @param string $value Original value + * @return string Sanitized value + */ + protected function sanitizeValue( $value ) { + if ( $value === null ) { + return ''; + } else { + return (string)$value; + } + } + + /** + * Check if the widget is read-only. + * + * @return boolean + */ + public function isReadOnly() { + return $this->readOnly; + } + + /** + * Set the read-only state of the widget. + * + * @param boolean $state Make input read-only + * @chainable + */ + public function setReadOnly( $state ) { + $this->readOnly = (bool)$state; + if ( $this->readOnly ) { + $this->input->setAttributes( array( 'readonly' => 'readonly' ) ); + } else { + $this->input->removeAttributes( array( 'readonly' ) ); + } + return $this; + } + + public function setDisabled( $state ) { + parent::setDisabled( $state ); + if ( isset( $this->input ) ) { + if ( $this->isDisabled() ) { + $this->input->setAttributes( array( 'disabled' => 'disabled' ) ); + } else { + $this->input->removeAttributes( array( 'disabled' ) ); + } + } + return $this; + } +} diff --git a/php/widgets/OoUiLabelWidget.php b/php/widgets/OoUiLabelWidget.php new file mode 100644 index 0000000..4260b6d --- /dev/null +++ b/php/widgets/OoUiLabelWidget.php @@ -0,0 +1,27 @@ +<?php + +class OoUiLabelWidget extends OoUiWidget { + + /* Static properties */ + + public static $tagName = 'span'; + + /** + * Create label widget. + * + * @param array $config Configuration options + */ + public function __construct( array $config = array() ) { + // Parent constructor + parent::__construct( $config ); + + // Mixins + $this->mixin( new OoUiLabelElement( $this, $this, $config ) ); + + // Properties + $this->input = isset( $config['input'] ) ? $config['input'] : null; + + // Initialization + $this->addClasses( array( 'oo-ui-labelWidget' ) ); + } +} diff --git a/php/widgets/OoUiTextInputWidget.php b/php/widgets/OoUiTextInputWidget.php new file mode 100644 index 0000000..123b72a --- /dev/null +++ b/php/widgets/OoUiTextInputWidget.php @@ -0,0 +1,67 @@ +<?php + +class OoUiTextInputWidget extends OoUiInputWidget { + + /* Properties */ + + /** + * Allow multiple lines of text. + * + * @var boolean + */ + protected $multiline = false; + + /** + * Create text input widget. + * + * @param array $config Configuration options + * @param boolean $config['multiline'] Allow multiple lines of text (default: false) + */ + public function __construct( array $config = array() ) { + // Parent constructor + parent::__construct( $config ); + + // Properties + $this->multiline = isset( $config['multiline'] ) ? (bool)$config['multiline'] : false; + $this->icon = new OoUiTag( 'span' ); + $this->indicator = new OoUiTag( 'span' ); + + // Mixins + $this->mixin( new OoUiIconElement( $this, $this->icon, $config ) ); + $this->mixin( new OoUiIndicatorElement( $this, $this->indicator, $config ) ); + + // Initialization + $this + ->addClasses( array( 'oo-ui-textInputWidget' ) ) + ->appendContent( $this->icon, $this->indicator ); + if ( isset( $config['placeholder'] ) ) { + $this->input->setAttributes( array( 'placeholder' => $config['placeholder'] ) ); + } + $this->setAttributes( array( 'role' => 'textbox' ) ); + } + + /** + * Get input element. + * + * @param array $config Configuration options + * @return OoUiTag Input element + */ + protected function getInputElement( $config ) { + if ( isset( $config['multiline'] ) && $config['multiline'] ) { + return new OoUiTag( 'textarea' ); + } else { + $input = new OoUiTag( 'input' ); + $input->setAttributes( array( 'type' => 'text' ) ); + return $input; + } + } + + /** + * Check if the widget is read-only. + * + * @return boolean + */ + public function isMultiLine() { + return (bool)$this->multiline; + } +} diff --git a/src/widgets/CheckboxInputWidget.js b/src/widgets/CheckboxInputWidget.js index 4799ee0..f05319f 100644 --- a/src/widgets/CheckboxInputWidget.js +++ b/src/widgets/CheckboxInputWidget.js @@ -19,8 +19,6 @@ OO.inheritClass( OO.ui.CheckboxInputWidget, OO.ui.InputWidget ); -/* Events */ - /* Methods */ /** @@ -42,7 +40,9 @@ }; /** - * Set value + * Set checked state of the checkbox + * + * @param {boolean} value New value */ OO.ui.CheckboxInputWidget.prototype.setValue = function ( value ) { value = !!value; -- To view, visit https://gerrit.wikimedia.org/r/166398 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I914d4973171567fb1e54de283d380f2f5bef4962 Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits