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 <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
