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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
( function ( mw ) {
/**
* A widget representing a menu section for filter groups
*
* @class
* @extends OO.ui.MenuSectionOptionWidget
*
* @constructor
* @param {mw.rcfilters.Controller} controller RCFilters controller
* @param {mw.rcfilters.dm.FilterGroup} model Filter group model
* @param {Object} config Configuration object
* @cfg {jQuery} [$overlay] Overlay
*/
mw.rcfilters.ui.FilterMenuSectionOptionWidget = function MwRcfiltersUiFilterMenuSectionOptionWidget( controller, model, config ) {
var whatsThisMessages,
$header = $( '<div>' )
.addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header' ),
$popupContent = $( '<div>' )
.addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content' );
config = config || {};
this.controller = controller;
this.model = model;
this.$overlay = config.$overlay || this.$element;
// Parent
mw.rcfilters.ui.FilterMenuSectionOptionWidget.parent.call( this, $.extend( {
label: this.model.getTitle(),
$label: $( '<div>' )
.addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title' )
}, config ) );
$header.append( this.$label );
if ( this.model.hasWhatsThis() ) {
whatsThisMessages = this.model.getWhatsThis();
// Create popup
if ( whatsThisMessages.header ) {
$popupContent.append(
( new OO.ui.LabelWidget( {
label: mw.msg( whatsThisMessages.header ),
classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-header' ]
} ) ).$element
);
}
if ( whatsThisMessages.body ) {
$popupContent.append(
( new OO.ui.LabelWidget( {
label: mw.msg( whatsThisMessages.body ),
classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-body' ]
} ) ).$element
);
}
if ( whatsThisMessages.linkText && whatsThisMessages.url ) {
$popupContent.append(
( new OO.ui.ButtonWidget( {
framed: false,
flags: [ 'progressive' ],
href: whatsThisMessages.url,
label: mw.msg( whatsThisMessages.linkText ),
classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-link' ]
} ) ).$element
);
}
// Add button
this.whatsThisButton = new OO.ui.PopupButtonWidget( {
framed: false,
label: mw.msg( 'rcfilters-filterlist-whatsthis' ),
$overlay: this.$overlay,
classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton' ],
flags: [ 'progressive' ],
popup: {
padded: false,
align: 'center',
position: 'above',
$content: $popupContent,
classes: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup' ]
}
} );
$header
.append( this.whatsThisButton.$element );
}
// Events
this.model.connect( this, { update: 'updateUiBasedOnState' } );
// Initialize
this.$element
.addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget' )
.addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-name-' + this.model.getName() )
.append( $header );
this.updateUiBasedOnState();
};
/* Initialize */
OO.inheritClass( mw.rcfilters.ui.FilterMenuSectionOptionWidget, OO.ui.MenuSectionOptionWidget );
/* Methods */
/**
* Respond to model update event
*/
mw.rcfilters.ui.FilterMenuSectionOptionWidget.prototype.updateUiBasedOnState = function () {
this.$element.toggleClass(
'mw-rcfilters-ui-filterMenuSectionOptionWidget-active',
this.model.isActive()
);
this.toggle( this.model.isVisible() );
};
/**
* Get the group name
*
* @return {string} Group name
*/
mw.rcfilters.ui.FilterMenuSectionOptionWidget.prototype.getName = function () {
return this.model.getName();
};
}( mediaWiki ) );
|
