1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
// Demonstrate JavaScript 'infusion' of PHP-generated widgets.
// Used by widgets.php.
var $menu, themeButtons, themes;
// Helper function to get high resolution profiling data, where available.
function now() {
/* 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.)
function infuseAll() {
var start, end, all;
start = now();
all = $( '*[data-ooui]' ).map( function ( _, e ) {
return OO.ui.infuse( e.id );
} );
end = now();
window.console.log( 'Infusion time: ' + ( end - start ) );
return all;
}
$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() ); } );
} );
|
