Cscott has uploaded a new change for review.
https://gerrit.wikimedia.org/r/190368
Change subject: WIP: Implement OO.ui.infuse
......................................................................
WIP: Implement OO.ui.infuse
Change-Id: I567c27914d52abe25892945a743a0931c220015c
---
M build/modules.json
M demos/widgets.php
A src/Infuse.js
M src/elements/DraggableGroupElement.js
M src/layouts/FieldLayout.js
M src/layouts/FieldsetLayout.js
M src/layouts/StackLayout.js
M src/widgets/ButtonGroupWidget.js
M src/widgets/SelectWidget.js
9 files changed, 67 insertions(+), 5 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/68/190368/1
diff --git a/build/modules.json b/build/modules.json
index d3d9df6..fd56c86 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -14,6 +14,7 @@
"src/Dialog.js",
"src/WindowManager.js",
"src/Error.js",
+ "src/Infuse.js",
"src/Process.js",
"src/ToolFactory.js",
"src/ToolGroupFactory.js",
diff --git a/demos/widgets.php b/demos/widgets.php
index 8feab82..4f2c317 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -756,5 +756,18 @@
?>
</div>
</div>
+<!-- Demonstrate JavaScript "infusion" of PHP widgets -->
+ <script src="../lib/jquery.js"></script>
+ <script src="../lib/oojs.jquery.js"></script>
+ <script src="../dist/oojs-ui.js"></script>
+ <script src="../dist/oojs-ui-apex.js"></script>
+ <script src="../dist/oojs-ui-mediawiki.js"></script>
+ <script type="text/javascript">
+// Let's infuse some widgets!
+var jsWidget = OO.ui.infuse('theme-select');
+console.log('yo!', jsWidget);
+// infuse everything!
+$('*[data-ooui]').map(function(_, e) { return OO.ui.infuse(e.id); });
+ </script>
</body>
</html>
diff --git a/src/Infuse.js b/src/Infuse.js
new file mode 100644
index 0000000..d2f97fc
--- /dev/null
+++ b/src/Infuse.js
@@ -0,0 +1,43 @@
+/**
+ * Reconstitute a JavaScript object corresponding to a widget created
+ * by the PHP implementation.
+ */
+OO.ui.infuse = (function() {
+ var infusionCache = {};
+ var infuseOne = function( $elem, id ) {
+ var data = $elem.attr( 'data-ooui' );
+ if ( !data ) {
+ throw new Error( 'No infusion data found: ' + id );
+ }
+ data = JSON.parse( data );
+ if ( !( data._ && OO.ui[data._] ) ) {
+ throw new Error( 'Unknown widget type: ' + id );
+ }
+ var Cls = OO.ui[data._];
+ var obj = new Cls(data);
+ // now replace old DOM with this new DOM.
+ $elem.replaceWith( obj.$element );
+ return obj;
+ };
+ var infuse = function( id ) {
+ if ( typeof(id) !== 'string' ) {
+ // This allows us to use OO.ui.infuse to map items in a group.
+ return id;
+ }
+ var selector = '#' + id;
+ var cached = infusionCache[selector];
+ if ( cached === true ) {
+ throw new Error( 'circular dependency! ' + selector );
+ } else if ( cached ) {
+ return cached;
+ }
+ var $elem = $(selector);
+ if ( ! $elem.length ) {
+ throw new Error( 'widget not found: ' + selector );
+ }
+ infusionCache[selector] = true; // prevent loops
+ infusionCache[selector] = infuseOne( $elem, id );
+ return infusionCache[selector];
+ };
+ return infuse;
+})();
diff --git a/src/elements/DraggableGroupElement.js
b/src/elements/DraggableGroupElement.js
index 126cb46..e319a7a 100644
--- a/src/elements/DraggableGroupElement.js
+++ b/src/elements/DraggableGroupElement.js
@@ -42,7 +42,7 @@
// Initialize
if ( $.isArray( config.items ) ) {
- this.addItems( config.items );
+ this.addItems( config.items.map( OO.ui.infuse ) );
}
this.$placeholder = $( '<div>' )
.addClass( 'oo-ui-draggableGroupElement-placeholder' );
diff --git a/src/layouts/FieldLayout.js b/src/layouts/FieldLayout.js
index dc58e81..04eb519 100644
--- a/src/layouts/FieldLayout.js
+++ b/src/layouts/FieldLayout.js
@@ -22,6 +22,11 @@
* @cfg {string} [help] Explanatory text shown as a '?' icon.
*/
OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) {
+ // allow single-argument call
+ if ( $.isPlainObject( fieldWidget ) && config === undefined ) {
+ config = fieldWidget;
+ fieldWidget = OO.ui.infuse( config.fieldWidget );
+ }
var hasInputWidget = fieldWidget instanceof OO.ui.InputWidget;
// Configuration initialization
diff --git a/src/layouts/FieldsetLayout.js b/src/layouts/FieldsetLayout.js
index 7b5a1df..6fa4614 100644
--- a/src/layouts/FieldsetLayout.js
+++ b/src/layouts/FieldsetLayout.js
@@ -47,7 +47,7 @@
.addClass( 'oo-ui-fieldsetLayout' )
.prepend( this.$help, this.$icon, this.$label, this.$group );
if ( $.isArray( config.items ) ) {
- this.addItems( config.items );
+ this.addItems( config.items.map( OO.ui.infuse ) );
}
};
diff --git a/src/layouts/StackLayout.js b/src/layouts/StackLayout.js
index 507993b..e525949 100644
--- a/src/layouts/StackLayout.js
+++ b/src/layouts/StackLayout.js
@@ -30,7 +30,7 @@
this.$element.addClass( 'oo-ui-stackLayout-continuous' );
}
if ( $.isArray( config.items ) ) {
- this.addItems( config.items );
+ this.addItems( config.items.map( OO.ui.infuse ) );
}
};
diff --git a/src/widgets/ButtonGroupWidget.js b/src/widgets/ButtonGroupWidget.js
index be0eb30..09649b6 100644
--- a/src/widgets/ButtonGroupWidget.js
+++ b/src/widgets/ButtonGroupWidget.js
@@ -24,7 +24,7 @@
// Initialization
this.$element.addClass( 'oo-ui-buttonGroupWidget' );
if ( $.isArray( config.items ) ) {
- this.addItems( config.items );
+ this.addItems( config.items.map( OO.ui.infuse ) );
}
};
diff --git a/src/widgets/SelectWidget.js b/src/widgets/SelectWidget.js
index 9e68296..ce1f545 100644
--- a/src/widgets/SelectWidget.js
+++ b/src/widgets/SelectWidget.js
@@ -42,7 +42,7 @@
.addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' )
.attr( 'role', 'listbox' );
if ( $.isArray( config.items ) ) {
- this.addItems( config.items );
+ this.addItems( config.items.map( OO.ui.infuse ) );
}
};
--
To view, visit https://gerrit.wikimedia.org/r/190368
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I567c27914d52abe25892945a743a0931c220015c
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Cscott <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
