diff options
author | Pierre Schmitz <pierre@archlinux.de> | 2015-12-17 09:15:42 +0100 |
---|---|---|
committer | Pierre Schmitz <pierre@archlinux.de> | 2015-12-17 09:44:51 +0100 |
commit | a1789ddde42033f1b05cc4929491214ee6e79383 (patch) | |
tree | 63615735c4ddffaaabf2428946bb26f90899f7bf /vendor/oojs/oojs-ui/demos/infusion.js | |
parent | 9e06a62f265e3a2aaabecc598d4bc617e06fa32d (diff) |
Update to MediaWiki 1.26.0
Diffstat (limited to 'vendor/oojs/oojs-ui/demos/infusion.js')
-rw-r--r-- | vendor/oojs/oojs-ui/demos/infusion.js | 58 |
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 ] ); |