Cscott has uploaded a new change for review.
https://gerrit.wikimedia.org/r/192723
Change subject: Element: Add `content` config option, matching PHP side.
......................................................................
Element: Add `content` config option, matching PHP side.
The `config.content` option HTML-escapes strings by default and is
less tightly tied to jQuery. It matches the syntax one would use to
add content to a PHP OOUI widget.
Change-Id: I4a66b7e6fa2b51823c4b0358ec07ad8dd8c64413
---
M build/modules.json
M demos/pages/widgets.js
M demos/widgets.php
M src/Element.js
A src/HtmlSnippet.js
M src/elements/LabelElement.js
6 files changed, 73 insertions(+), 17 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/23/192723/1
diff --git a/build/modules.json b/build/modules.json
index d3d9df6..6ae9a4b 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -14,6 +14,7 @@
"src/Dialog.js",
"src/WindowManager.js",
"src/Error.js",
+ "src/HtmlSnippet.js",
"src/Process.js",
"src/ToolFactory.js",
"src/ToolGroupFactory.js",
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index b2b8095..f324eb9 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1140,6 +1140,15 @@
}
),
new OO.ui.FieldLayout(
+ new OO.ui.LabelWidget( {
+ label: new OO.ui.HtmlSnippet(
'<b>Fancy</b> <i>text</i> <u>formatting</u>!' )
+ } ),
+ {
+ label: 'LabelWidget (with
html)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
diff --git a/demos/widgets.php b/demos/widgets.php
index 7b0610a..57928d0 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -703,6 +703,15 @@
'label' =>
"LabelWidget (disabled)\xE2\x80\x8E",
'align' => 'top'
)
+ ),
+ new OOUI\FieldLayout(
+ new OOUI\LabelWidget(
array(
+ 'label' => new
OOUI\HtmlSnippet( '<b>Fancy</b> <i>text</i> <u>formatting</u>!' ),
+ ) ),
+ array(
+ 'label' =>
"LabelWidget (with html)\xE2\x80\x8E",
+ 'align' => 'top'
+ )
)
)
) );
@@ -781,21 +790,6 @@
);
echo $form;
-
- echo new OOUI\FieldsetLayout( array(
- 'label' => 'PHP-specific',
- 'items' => array(
- new OOUI\FieldLayout(
- new OOUI\LabelWidget(
array(
- 'label' => new
OOUI\HtmlSnippet( '<b>Fancy</b> <i>text</i> <u>formatting</u>!' ),
- ) ),
- array(
- 'label' =>
'LabelWidget with HtmlSnippet',
- 'align' => 'top'
- )
- ),
- )
- ) );
?>
</div>
diff --git a/src/Element.js b/src/Element.js
index 0bc5e14..ae943b4 100644
--- a/src/Element.js
+++ b/src/Element.js
@@ -14,6 +14,9 @@
* [2]:
https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches#cssExample
* @cfg {string} [id] The HTML id attribute used in the rendered tag.
* @cfg {string} [text] Text to insert
+ * @cfg {Array} [content] An array of content elements to append (after #text).
+ * Strings will be html-escaped; use an OO.ui.HtmlSnippet to append raw HTML.
+ * Instances of OO.ui.Elememt will have their #$element appended.
* @cfg {jQuery} [$content] Content elements to append (after #text)
* @cfg {Mixed} [data] Custom data of any type or combination of types (e.g.,
string, number, array, object).
* Data can also be specified with the #setData method.
@@ -41,7 +44,25 @@
if ( config.text ) {
this.$element.text( config.text );
}
+ if ( config.content ) {
+ // 'content' treats plain strings as text; use an
+ // HtmlSnippet to append HTML content. OO.ui.Elements get their
+ // appropriate $element appended.
+ this.$element.append( config.content.map( function ( v ) {
+ if ( typeof v === 'string' ) {
+ // escape string so it is properly represented
in HTML
+ return $( '<div>' ).text( v ).html();
+ } else if ( v instanceof OO.ui.HtmlSnippet ) {
+ // bypass escaping.
+ return v.toString();
+ } else if ( v instanceof OO.ui.Element ) {
+ return v.$element;
+ }
+ return v;
+ } ) );
+ }
if ( config.$content ) {
+ // '$content' treats plain strings as HTML
this.$element.append( config.$content );
}
};
diff --git a/src/HtmlSnippet.js b/src/HtmlSnippet.js
new file mode 100644
index 0000000..b9c5c31
--- /dev/null
+++ b/src/HtmlSnippet.js
@@ -0,0 +1,29 @@
+/**
+ * Wraps an HTML snippet for use with configuration values which default
+ * to strings. This bypasses the default html-escaping done to string
+ * values.
+ *
+ * @class
+ *
+ * @constructor
+ * @param {string} [content] HTML content
+ */
+OO.ui.HtmlSnippet = function OoUiHtmlSnippet( content ) {
+ // Properties
+ this.content = content;
+};
+
+/* Setup */
+
+OO.initClass( OO.ui.HtmlSnippet );
+
+/* Methods */
+
+/**
+ * Render into HTML.
+ *
+ * @return {string} Unchanged HTML snippet.
+ */
+OO.ui.HtmlSnippet.prototype.toString = function () {
+ return this.content;
+};
diff --git a/src/elements/LabelElement.js b/src/elements/LabelElement.js
index 4b10b61..ba62baf 100644
--- a/src/elements/LabelElement.js
+++ b/src/elements/LabelElement.js
@@ -81,13 +81,13 @@
* An empty string will result in the label being hidden. A string containing
only whitespace will
* be converted to a single ` `.
*
- * @param {jQuery|string|Function|null} label Label nodes; text; a function
that returns nodes or
+ * @param {jQuery|string|OO.ui.HtmlSnippet|Function|null} label Label nodes;
text; a function that returns nodes or
* text; or null for no label
* @chainable
*/
OO.ui.LabelElement.prototype.setLabel = function ( label ) {
label = typeof label === 'function' ? OO.ui.resolveMsg( label ) : label;
- label = ( typeof label === 'string' && label.length ) || label
instanceof jQuery ? label : null;
+ label = ( ( typeof label === 'string' && label.length ) || label
instanceof jQuery || label instanceof OO.ui.HtmlSnippet ) ? label : null;
this.$element.toggleClass( 'oo-ui-labelElement', !!label );
@@ -142,6 +142,8 @@
} else {
this.$label.text( label );
}
+ } else if ( label instanceof OO.ui.HtmlSnippet ) {
+ this.$label.html( label.toString() );
} else if ( label instanceof jQuery ) {
this.$label.empty().append( label );
} else {
--
To view, visit https://gerrit.wikimedia.org/r/192723
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I4a66b7e6fa2b51823c4b0358ec07ad8dd8c64413
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Cscott <canan...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
