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
|
( function ( mw, $ ) {
/**
* A widget representing a filter item highlight color picker
*
* @extends OO.ui.Widget
* @mixins OO.ui.mixin.LabelElement
*
* @constructor
* @param {mw.rcfilters.Controller} controller RCFilters controller
* @param {mw.rcfilters.dm.FilterItem} model Filter item model
* @param {Object} [config] Configuration object
*/
mw.rcfilters.ui.HighlightColorPickerWidget = function MwRcfiltersUiHighlightColorPickerWidget( controller, model, config ) {
var colors = [ 'none' ].concat( mw.rcfilters.HighlightColors );
config = config || {};
// Parent
mw.rcfilters.ui.HighlightColorPickerWidget.parent.call( this, config );
// Mixin constructors
OO.ui.mixin.LabelElement.call( this, $.extend( {}, config, {
label: mw.message( 'rcfilters-highlightmenu-title' ).text()
} ) );
this.controller = controller;
this.model = model;
this.currentSelection = 'none';
this.buttonSelect = new OO.ui.ButtonSelectWidget( {
items: colors.map( function ( color ) {
return new OO.ui.ButtonOptionWidget( {
icon: color === 'none' ? 'check' : null,
data: color,
classes: [
'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color',
'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color-' + color
],
framed: false
} );
} ),
classes: 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect'
} );
// Event
this.model.connect( this, { update: 'updateUiBasedOnModel' } );
this.buttonSelect.connect( this, { choose: 'onChooseColor' } );
this.updateUiBasedOnModel();
this.$element
.addClass( 'mw-rcfilters-ui-highlightColorPickerWidget' )
.append(
this.$label
.addClass( 'mw-rcfilters-ui-highlightColorPickerWidget-label' ),
this.buttonSelect.$element
);
};
/* Initialization */
OO.inheritClass( mw.rcfilters.ui.HighlightColorPickerWidget, OO.ui.Widget );
OO.mixinClass( mw.rcfilters.ui.HighlightColorPickerWidget, OO.ui.mixin.LabelElement );
/* Events */
/**
* @event chooseColor
* @param {string} The chosen color
*
* A color has been chosen
*/
/* Methods */
/**
* Respond to item model update event
*/
mw.rcfilters.ui.HighlightColorPickerWidget.prototype.updateUiBasedOnModel = function () {
this.selectColor( this.model.getHighlightColor() || 'none' );
};
/**
* Select the color for this widget
*
* @param {string} color Selected color
*/
mw.rcfilters.ui.HighlightColorPickerWidget.prototype.selectColor = function ( color ) {
var previousItem = this.buttonSelect.findItemFromData( this.currentSelection ),
selectedItem = this.buttonSelect.findItemFromData( color );
if ( this.currentSelection !== color ) {
this.currentSelection = color;
this.buttonSelect.selectItem( selectedItem );
if ( previousItem ) {
previousItem.setIcon( null );
}
if ( selectedItem ) {
selectedItem.setIcon( 'check' );
}
}
};
mw.rcfilters.ui.HighlightColorPickerWidget.prototype.onChooseColor = function ( button ) {
var color = button.data;
if ( color === 'none' ) {
this.controller.clearHighlightColor( this.model.getName() );
} else {
this.controller.setHighlightColor( this.model.getName(), color );
}
this.emit( 'chooseColor', color );
};
}( mediaWiki, jQuery ) );
|
