jenkins-bot has submitted this change and it was merged. Change subject: OOUI PHP: Support RTL text direction ......................................................................
OOUI PHP: Support RTL text direction
Added support to the demo. Note how the GridLayout's directionality
changes.
Currently only per-document directionality is supported. That might
change in the future.
Bug: 72584
Change-Id: I4a4242d36c5765c39b37efbbddd822ac1f2d4f3b
---
M demos/widgets.php
M php/OoUiElement.php
M php/layouts/OoUiGridLayout.php
M src/Element.js
4 files changed, 78 insertions(+), 38 deletions(-)
Approvals:
Mooeypoo: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/widgets.php b/demos/widgets.php
index 3c922f6..56f2079 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -1,27 +1,48 @@
+<?php
+ $autoload = '../vendor/autoload.php';
+ if ( !file_exists( $autoload ) ) {
+ trigger_error(
+ '<h1>Did you forget to run <code>composer
install</code>?</h1>'
+ );
+ exit();
+ }
+ require_once $autoload;
+
+ OoUiTheme::setSingleton( new OoUiMediaWikiTheme() );
+
+ $direction = ( isset( $_GET['dir'] ) && $_GET['dir'] === 'rtl' ) ?
'rtl' : 'ltr';
+ $directionSuffix = $direction === 'rtl' ? '.rtl' : '';
+ OoUiElement::setDefaultDir( $direction );
+?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>OOjs UI Widget Demo</title>
- <link rel="stylesheet" href="../dist/oojs-ui-mediawiki.svg.css">
- <link rel="stylesheet" href="styles/demo.css">
+ <link rel="stylesheet" href="../dist/oojs-ui-mediawiki.svg<?php echo
$directionSuffix; ?>.css">
+ <link rel="stylesheet" href="styles/demo<?php echo $directionSuffix;
?>.css">
</head>
-<body>
+<body class="oo-ui-<?php echo $direction; ?>">
<div class="oo-ui-demo">
- <div class="oo-ui-demo-container">
+ <div class="oo-ui-demo-menu">
<?php
- $autoload = '../vendor/autoload.php';
- if ( !file_exists( $autoload ) ) {
- trigger_error(
- '<h1>Did you forget to run
<code>composer install</code>?</h1>'
- );
- exit();
- }
- require_once $autoload;
-
- OoUiTheme::setSingleton( new
OoUiMediaWikiTheme() );
+ echo new OoUiButtonGroupWidget( array(
+ 'items' => array(
+ new OoUiButtonWidget( array(
+ 'label' => 'LTR',
+ 'href' => '?dir=ltr',
+ 'target' => null,
+ ) ),
+ new OoUiButtonWidget( array(
+ 'label' => 'RTL',
+ 'href' => '?dir=rtl',
+ 'target' => null,
+ ) ),
+ )
+ ) );
?>
-
+ </div>
+ <div class="oo-ui-demo-container">
<?php
function widgetWrap( $element ) {
@@ -120,7 +141,7 @@
'items' => array(
new OoUiFieldLayout(
new ButtonWidgetTitled(
array(
- 'label' =>
'Hover me!',
+ 'label' =>
"Hover me!\xE2\x80\x8E",
) ),
array(
'label' =>
'Titled button',
@@ -129,7 +150,7 @@
),
new OoUiFieldLayout(
new OoUiButtonWidget(
array(
- 'label' =>
'Click me!',
+ 'label' =>
"Click me!\xE2\x80\x8E",
'href' =>
'http://example.com/',
) ),
array(
@@ -238,7 +259,7 @@
'title' =>
'Picture icon'
) ),
array(
- 'label' =>
'IconWidget (normal)',
+ 'label' =>
"IconWidget (normal)\xE2\x80\x8E",
'align' => 'top'
)
),
@@ -249,7 +270,7 @@
'disabled' =>
true
) ),
array(
- 'label' =>
'IconWidget (disabled)',
+ 'label' =>
"IconWidget (disabled)\xE2\x80\x8E",
'align' => 'top'
)
),
@@ -259,7 +280,7 @@
'title' =>
'Required icon'
) ),
array(
- 'label' =>
'IndicatorWidget (normal)',
+ 'label' =>
"IndicatorWidget (normal)\xE2\x80\x8E",
'align' => 'top'
)
),
@@ -270,7 +291,7 @@
'disabled' =>
true
) ),
array(
- 'label' =>
'IndicatorWidget (disabled)',
+ 'label' =>
"IndicatorWidget (disabled)\xE2\x80\x8E",
'align' => 'top'
)
),
@@ -281,7 +302,7 @@
) ),
array(
'align' =>
'top',
- 'label' =>
'ButtonInputWidget (type: submit)'
+ 'label' =>
"ButtonInputWidget (type: submit)\xE2\x80\x8E"
)
),
new OoUiFieldLayout(
@@ -292,7 +313,7 @@
) ),
array(
'align' =>
'top',
- 'label' =>
'ButtonInputWidget (type: submit, using <input/>)'
+ 'label' =>
"ButtonInputWidget (type: submit, using <input/>)\xE2\x80\x8E"
)
),
new OoUiFieldLayout(
@@ -311,7 +332,7 @@
) ),
array(
'align' =>
'inline',
- 'label' =>
'CheckboxInputWidget (disabled)'
+ 'label' =>
"CheckboxInputWidget (disabled)\xE2\x80\x8E"
)
),
new OoUiFieldLayout(
@@ -324,21 +345,21 @@
new OoUiFieldLayout(
new
OoUiTextInputWidget( array( 'icon' => 'search' ) ),
array(
- 'label' =>
'TextInputWidget (icon)',
+ 'label' =>
"TextInputWidget (icon)\xE2\x80\x8E",
'align' => 'top'
)
),
new OoUiFieldLayout(
new
OoUiTextInputWidget( array( 'indicator' => 'required' ) ),
array(
- 'label' =>
'TextInputWidget (indicator)',
+ 'label' =>
"TextInputWidget (indicator)\xE2\x80\x8E",
'align' => 'top'
)
),
new OoUiFieldLayout(
new
OoUiTextInputWidget( array( 'placeholder' => 'Placeholder' ) ),
array(
- 'label' =>
'TextInputWidget (placeholder)',
+ 'label' =>
"TextInputWidget (placeholder)\xE2\x80\x8E",
'align' => 'top'
)
),
@@ -348,7 +369,7 @@
'readOnly' =>
true
) ),
array(
- 'label' =>
'TextInputWidget (readonly)',
+ 'label' =>
"TextInputWidget (readonly)\xE2\x80\x8E",
'align' => 'top'
)
),
@@ -358,7 +379,7 @@
'disabled' =>
true
) ),
array(
- 'label' =>
'TextInputWidget (disabled)',
+ 'label' =>
"TextInputWidget (disabled)\xE2\x80\x8E",
'align' => 'top'
)
),
@@ -368,7 +389,7 @@
'value' =>
'Multiline'
) ),
array(
- 'label' =>
'TextInputWidget (multiline)',
+ 'label' =>
"TextInputWidget (multiline)\xE2\x80\x8E",
'align' => 'top'
)
),
diff --git a/php/OoUiElement.php b/php/OoUiElement.php
index a37b908..d962178 100644
--- a/php/OoUiElement.php
+++ b/php/OoUiElement.php
@@ -16,6 +16,15 @@
*/
public static $tagName = 'div';
+ /**
+ * Default text direction, used for some layout calculations. Use
setDefaultDir() to change.
+ *
+ * Currently only per-document directionality is supported.
+ *
+ * @var string
+ */
+ public static $defaultDir = 'ltr';
+
/* Members */
/**
@@ -154,13 +163,23 @@
}
/**
- * Get the direction of the user interface.
+ * Get the direction of the user interface for a given element.
*
- * @return string Text direction, either `ltr` or `rtl`
+ * Currently only per-document directionality is supported.
+ *
+ * @param OoUiTag $element Element to check
+ * @return string Text direction, either 'ltr' or 'rtl'
*/
- public static function getDir() {
- // TODO: Figure out a way to override this functionality when
used within MediaWiki, and use
- // $wgLang->getDir() to get the user interface direction
- return 'ltr';
+ public static function getDir( OoUiTag $element ) {
+ return self::$defaultDir;
+ }
+
+ /**
+ * Set the default direction of the user interface.
+ *
+ * @return string Text direction, either 'ltr' or 'rtl'
+ */
+ public static function setDefaultDir( $dir ) {
+ self::$defaultDir = $dir === 'rtl' ? 'rtl' : 'ltr';
}
}
diff --git a/php/layouts/OoUiGridLayout.php b/php/layouts/OoUiGridLayout.php
index c093427..509d32e 100644
--- a/php/layouts/OoUiGridLayout.php
+++ b/php/layouts/OoUiGridLayout.php
@@ -105,7 +105,7 @@
$cssHeight = round( $height * 100 ) . '%';
$cssTop = round( $top * 100 ) . '%';
- $direction = OoUiElement::getDir() === 'ltr' ?
'left' : 'right';
+ $direction = OoUiElement::getDir( $this ) ===
'ltr' ? 'left' : 'right';
$cssLeft = round( $left * 100 ) . '%';
$css =
diff --git a/src/Element.js b/src/Element.js
index 93ef8d2..1505a22 100644
--- a/src/Element.js
+++ b/src/Element.js
@@ -114,7 +114,7 @@
*
* @static
* @param {jQuery|HTMLElement|HTMLDocument|Window} obj Context to get the
direction for
- * @return {string} Text direction, either `ltr` or `rtl`
+ * @return {string} Text direction, either 'ltr' or 'rtl'
*/
OO.ui.Element.getDir = function ( obj ) {
var isDoc, isWin;
--
To view, visit https://gerrit.wikimedia.org/r/170341
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I4a4242d36c5765c39b37efbbddd822ac1f2d4f3b
Gerrit-PatchSet: 3
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Legoktm <[email protected]>
Gerrit-Reviewer: Mooeypoo <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
