jenkins-bot has submitted this change and it was merged.
Change subject: ButtonWidget: Implement, document and demonstrate the 'active'
config option
......................................................................
ButtonWidget: Implement, document and demonstrate the 'active' config option
ButtonWidget can now be marked as active (`active: true`) to indicate
that clicking the button will only refresh the current page. This is
meant to be used in navigation menus shaped like buttons in PHP. The
JavaScript ButtonWidget was also updated to match, though.
PHP ButtonWidget has gained two new methods: setActive() and isActive().
In JavaScript, they were already implemented on ButtonElement, because
they are used in implementation details of ButtonOptionWidget and
ToggleButtonWidget (and because moving them elsewhere would break
backwards compatibility). Marked them as @protected on ButtonElement
now, and @public on ButtonWidget.
Change-Id: I088c2cc1cbd498046fad4238af1fdad0f3d7467f
---
M demos/demos.php
M php/widgets/ButtonWidget.php
M src/mixins/ButtonElement.js
M src/widgets/ButtonWidget.js
4 files changed, 58 insertions(+), 3 deletions(-)
Approvals:
VolkerE: Looks good to me, approved
Jforrester: Looks good to me, but someone else must approve
jenkins-bot: Verified
diff --git a/demos/demos.php b/demos/demos.php
index d09aae8..8d8b8dd 100644
--- a/demos/demos.php
+++ b/demos/demos.php
@@ -56,10 +56,12 @@
new OOUI\ButtonWidget( array(
'label' => 'MediaWiki',
'href' => '?' .
http_build_query( array_merge( $query, array( 'theme' => 'mediawiki' ) ) ),
+ 'active' =>
$query['theme'] === 'mediawiki',
) ),
new OOUI\ButtonWidget( array(
'label' => 'Apex',
'href' => '?' .
http_build_query( array_merge( $query, array( 'theme' => 'apex' ) ) ),
+ 'active' =>
$query['theme'] === 'apex',
) ),
)
) );
@@ -69,10 +71,12 @@
new OOUI\ButtonWidget( array(
'label' => 'LTR',
'href' => '?' .
http_build_query( array_merge( $query, array( 'direction' => 'ltr' ) ) ),
+ 'active' =>
$query['direction'] === 'ltr',
) ),
new OOUI\ButtonWidget( array(
'label' => 'RTL',
'href' => '?' .
http_build_query( array_merge( $query, array( 'direction' => 'rtl' ) ) ),
+ 'active' =>
$query['direction'] === 'rtl',
) ),
)
) );
@@ -83,10 +87,12 @@
new OOUI\ButtonWidget( array(
'label' => 'JS',
'href' =>
".#$page-$theme-$direction",
+ 'active' => false,
) ),
new OOUI\ButtonWidget( array(
'label' => 'PHP',
'href' => '?' .
http_build_query( $query ),
+ 'active' => true,
) ),
)
) );
diff --git a/php/widgets/ButtonWidget.php b/php/widgets/ButtonWidget.php
index 18fe6df..1ae97aa 100644
--- a/php/widgets/ButtonWidget.php
+++ b/php/widgets/ButtonWidget.php
@@ -16,6 +16,13 @@
use AccessKeyedElement;
/**
+ * Whether button is active.
+ *
+ * @var boolean
+ */
+ protected $active = false;
+
+ /**
* Hyperlink to visit when clicked.
*
* @var string
@@ -40,6 +47,7 @@
/**
* @param array $config Configuration options
+ * @param string $config['active'] Whether button should be shown as
active (default: false)
* @param string $config['href'] Hyperlink to visit when clicked
* @param string $config['target'] Target to open hyperlink in
* @param boolean $config['noFollow'] Search engine traversal hint
(default: true)
@@ -67,6 +75,7 @@
->addClasses( [ 'oo-ui-buttonWidget' ] )
->appendContent( $this->button );
+ $this->setActive( isset( $config['active'] ) ?
$config['active'] : false );
$this->setHref( isset( $config['href'] ) ? $config['href'] :
null );
$this->setTarget( isset( $config['target'] ) ?
$config['target'] : null );
$this->setNoFollow( isset( $config['noFollow'] ) ?
$config['noFollow'] : true );
@@ -164,7 +173,33 @@
return $this;
}
+ /**
+ * Toggle active state.
+ *
+ * A button should be marked as active when clicking it would only
refresh the page.
+ *
+ * @param boolean $active Make button active
+ * @return $this
+ */
+ public function setActive( $active = null ) {
+ $this->active = !!$active;
+ $this->toggleClasses( [ 'oo-ui-buttonElement-active' ],
$this->active );
+ return $this;
+ }
+
+ /**
+ * Check if button is active.
+ *
+ * @return boolean Button is active
+ */
+ public function isActive() {
+ return $this->active;
+ }
+
public function getConfig( &$config ) {
+ if ( $this->active !== false ) {
+ $config['active'] = $this->active;
+ }
if ( $this->href !== null ) {
$config['href'] = $this->href;
}
diff --git a/src/mixins/ButtonElement.js b/src/mixins/ButtonElement.js
index e8ac8d8..63e1a26 100644
--- a/src/mixins/ButtonElement.js
+++ b/src/mixins/ButtonElement.js
@@ -225,10 +225,13 @@
/**
* Set the button's active state.
*
- * The active state occurs when a {@link OO.ui.ButtonOptionWidget
ButtonOptionWidget} or
- * a {@link OO.ui.ToggleButtonWidget ToggleButtonWidget} is pressed. This
method does nothing
- * for other button types.
+ * The active state can be set on:
*
+ * - {@link OO.ui.ButtonOptionWidget ButtonOptionWidget} when it is selected
+ * - {@link OO.ui.ToggleButtonWidget ToggleButtonWidget} when it is toggle on
+ * - {@link OO.ui.ButtonWidget ButtonWidget} when clicking the button would
only refresh the page
+ *
+ * @protected
* @param {boolean} value Make button active
* @chainable
*/
@@ -241,6 +244,7 @@
/**
* Check if the button is active
*
+ * @protected
* @return {boolean} The button is active
*/
OO.ui.mixin.ButtonElement.prototype.isActive = function () {
diff --git a/src/widgets/ButtonWidget.js b/src/widgets/ButtonWidget.js
index 5760412..6c27d06 100644
--- a/src/widgets/ButtonWidget.js
+++ b/src/widgets/ButtonWidget.js
@@ -30,6 +30,7 @@
*
* @constructor
* @param {Object} [config] Configuration options
+ * @cfg {boolean} [active=false] Whether button should be shown as active
* @cfg {string} [href] Hyperlink to visit when the button is clicked.
* @cfg {string} [target] The frame or window in which to open the hyperlink.
* @cfg {boolean} [noFollow] Search engine traversal hint (default: true)
@@ -64,6 +65,7 @@
this.$element
.addClass( 'oo-ui-buttonWidget' )
.append( this.$button );
+ this.setActive( config.active );
this.setHref( config.href );
this.setTarget( config.target );
this.setNoFollow( config.noFollow );
@@ -219,3 +221,11 @@
return this;
};
+
+// Override method visibility hints from ButtonElement
+/**
+ * @method setActive
+ */
+/**
+ * @method isActive
+ */
--
To view, visit https://gerrit.wikimedia.org/r/284529
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I088c2cc1cbd498046fad4238af1fdad0f3d7467f
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Alex Monk <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
