all files / src/src/themes/wikimediaui/ WikimediaUITheme.js

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
 
 
 
 
 
1×
 
8240×
 
 
 
 
1×
 
 
 
 
 
 
1×
 
115663×
 
 
 
 
 
 
 
 
115663×
 
115663×
 
 
 
 
 
972×
114691×
112971×
112971×
 
 
 
112971×
 
112971×
 
 
 
 
 
 
2394×
110577×
 
 
2291×
108286×
 
108286×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108286×
108286×
108286×
108286×
108286×
 
 
 
115663×
693978×
 
 
115663×
 
 
 
 
 
1×
12×
 
 
 
 
1×
 
/**
 * @class
 * @extends OO.ui.Theme
 *
 * @constructor
 */
OO.ui.WikimediaUITheme = function OoUiWikimediaUITheme() {
	// Parent constructor
	OO.ui.WikimediaUITheme.super.call( this );
};
 
/* Setup */
 
OO.inheritClass( OO.ui.WikimediaUITheme, OO.ui.Theme );
 
/* Methods */
 
/**
 * @inheritdoc
 */
OO.ui.WikimediaUITheme.prototype.getElementClasses = function ( element ) {
	const
		variants = {
			invert: false,
			progressive: false,
			destructive: false,
			error: false,
			warning: false,
			success: false
		},
		// Parent method
		classes = OO.ui.WikimediaUITheme.super.prototype.getElementClasses.call( this, element );
 
	if (
		element instanceof OO.ui.IconWidget &&
		// eslint-disable-next-line no-jquery/no-class-state
		element.$element.hasClass( 'oo-ui-checkboxInputWidget-checkIcon' )
	) {
		// Icon on CheckboxInputWidget
		variants.invert = true;
	} else if ( element.supports( 'hasFlag' ) ) {
		const isFramed = element.supports( 'isFramed' ) && element.isFramed();
		const isActive = element.supports( 'isActive' ) && element.isActive();
		const isToolOrGroup =
			// Check if the class exists, as classes that are not in the 'core' module may
			// not be loaded.
			( OO.ui.Tool && element instanceof OO.ui.Tool ) ||
			( OO.ui.ToolGroup && element instanceof OO.ui.ToolGroup );
		if (
			// Button with a dark background.
			isFramed && ( isActive || element.isDisabled() || element.hasFlag( 'primary' ) ) ||
			// Toolbar with a dark background.
			isToolOrGroup && element.hasFlag( 'primary' )
		) {
			// … use white icon / indicator, regardless of other flags
			variants.invert = true;
		} else if ( !isFramed && element.isDisabled() && !element.hasFlag( 'invert' ) ) {
			// Frameless disabled button, always use black icon / indicator regardless of
			// other flags.
			variants.invert = false;
		} else Eif ( !element.isDisabled() ) {
			// Any other kind of button, use the right colored icon / indicator if available.
			variants.progressive = element.hasFlag( 'progressive' ) ||
				// Active tools/toolgroups
				( isToolOrGroup && isActive ) ||
				// Pressed or selected outline/menu option widgets
				(
					(
						element instanceof OO.ui.MenuOptionWidget ||
						// Check if the class exists, as classes that are not in the 'core' module
						// may not be loaded.
						(
							OO.ui.OutlineOptionWidget &&
							element instanceof OO.ui.OutlineOptionWidget
						)
					) &&
					( element.isPressed() || element.isSelected() )
				);
 
			variants.destructive = element.hasFlag( 'destructive' );
			variants.invert = element.hasFlag( 'invert' );
			variants.error = element.hasFlag( 'error' );
			variants.warning = element.hasFlag( 'warning' );
			variants.success = element.hasFlag( 'success' );
		}
	}
 
	for ( const variant in variants ) {
		classes[ variants[ variant ] ? 'on' : 'off' ].push( 'oo-ui-image-' + variant );
	}
 
	return classes;
};
 
/**
 * @inheritdoc
 */
OO.ui.WikimediaUITheme.prototype.getDialogTransitionDuration = function () {
	return 250;
};
 
/* Instantiation */
 
OO.ui.theme = new OO.ui.WikimediaUITheme();