summaryrefslogtreecommitdiff
path: root/vendor/oojs/oojs-ui/demos/infusion.js
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/oojs/oojs-ui/demos/infusion.js')
-rw-r--r--vendor/oojs/oojs-ui/demos/infusion.js58
1 files changed, 13 insertions, 45 deletions
diff --git a/vendor/oojs/oojs-ui/demos/infusion.js b/vendor/oojs/oojs-ui/demos/infusion.js
index 4fa0f64a..ea927ea5 100644
--- a/vendor/oojs/oojs-ui/demos/infusion.js
+++ b/vendor/oojs/oojs-ui/demos/infusion.js
@@ -1,19 +1,19 @@
// Demonstrate JavaScript 'infusion' of PHP-generated widgets.
// Used by widgets.php.
-var $menu, themeButtons, themes;
+var infuseButton;
// Helper function to get high resolution profiling data, where available.
function now() {
- /* global performance */
+ /*global performance */
return ( typeof performance !== 'undefined' ) ? performance.now() :
Date.now ? Date.now() : new Date().getTime();
}
// Add a button to infuse everything!
-// (You wouldn't typically do this: you'd only infuse those objects which
-// you needed to attach client-side behaviors to. But our theme-setting
-// code needs a list of all widgets, and it's a good overall test.)
+// (You wouldn't typically do this: you'd only infuse those objects which you needed to attach
+// client-side behaviors to, or where the JS implementation provides additional features over PHP,
+// like DropdownInputWidget. We do it here because it's a good overall test.)
function infuseAll() {
var start, end, all;
start = now();
@@ -22,45 +22,13 @@ function infuseAll() {
} );
end = now();
window.console.log( 'Infusion time: ' + ( end - start ) );
- return all;
+ infuseButton.setDisabled( true );
}
-$menu = $( '.oo-ui-demo-menu' );
-$menu.append(
- new OO.ui.ButtonGroupWidget().addItems( [
- new OO.ui.ButtonWidget( { label: 'Infuse' } )
- .on( 'click', infuseAll )
- ] ).$element );
-// Hook up the theme switch buttons.
-// This is more like a typical use case: we are just infusing specific
-// named UI elements.
-themeButtons = [
- // If you're lazy, you can just use OO.ui.infuse. But if you name the
- // Element type you're expecting, you can get some type checking.
- OO.ui.ButtonWidget.static.infuse( 'theme-mediawiki' ),
- OO.ui.ButtonWidget.static.infuse( 'theme-apex' )
-];
-themes = {
- mediawiki: new OO.ui.MediaWikiTheme(),
- apex: new OO.ui.ApexTheme()
-};
-function updateTheme( theme ) {
- OO.ui.theme = themes[theme];
- $.each( infuseAll(), function ( _, el ) {
- // FIXME: this isn't really supported, but it makes a neat demo.
- OO.ui.theme.updateElementClasses( el );
- } );
- // A bit of a hack, but it will do for a demo.
- $( 'link[rel="stylesheet"][title="theme"]' ).attr(
- 'href',
- '../dist/oojs-ui-' + theme + '.vector.css'
- );
-}
-// This is another more typical usage: we take the existing server-side
-// buttons and replace the href with a JS click handler.
-$.each( themeButtons, function ( _, b ) {
- // Get rid of the old server-side click handling.
- b.setHref( null );
- // Add new client-side click handling.
- b.on( 'click', function () { updateTheme( b.getData() ); } );
-} );
+// More typical usage: we take the existing server-side
+// button group and do things to it, here adding a new button.
+infuseButton = new OO.ui.ButtonWidget( { label: 'Infuse' } )
+ .on( 'click', infuseAll );
+
+OO.ui.ButtonGroupWidget.static.infuse( 'oo-ui-demo-menu-infuse' )
+ .addItems( [ infuseButton ] );