3 * Save filters widget. This widget is displayed in the tag area
4 * and allows the user to save the current state of the system
5 * as a new saved filter query they can later load or set as
8 * @class mw.rcfilters.ui.SaveFiltersPopupButtonWidget
9 * @extends OO.ui.PopupButtonWidget
12 * @param {mw.rcfilters.Controller} controller Controller
13 * @param {mw.rcfilters.dm.SavedQueriesModel} model View model
14 * @param {Object} [config] Configuration object
16 var SaveFiltersPopupButtonWidget
= function MwRcfiltersUiSaveFiltersPopupButtonWidget( controller
, model
, config
) {
19 $popupContent
= $( '<div>' );
21 config
= config
|| {};
23 this.controller
= controller
;
27 SaveFiltersPopupButtonWidget
.parent
.call( this, $.extend( {
30 title
: mw
.msg( 'rcfilters-savedqueries-add-new-title' ),
32 classes
: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup' ],
35 label
: mw
.msg( 'rcfilters-savedqueries-add-new-title' ),
36 $content
: $popupContent
39 // // HACK: Add an icon to the popup head label
40 this.popup
.$head
.prepend( ( new OO
.ui
.IconWidget( { icon
: 'bookmark' } ) ).$element
);
42 this.input
= new OO
.ui
.TextInputWidget( {
43 placeholder
: mw
.msg( 'rcfilters-savedqueries-new-name-placeholder' )
45 layout
= new OO
.ui
.FieldLayout( this.input
, {
46 label
: mw
.msg( 'rcfilters-savedqueries-new-name-label' ),
50 this.setAsDefaultCheckbox
= new OO
.ui
.CheckboxInputWidget();
51 checkBoxLayout
= new OO
.ui
.FieldLayout( this.setAsDefaultCheckbox
, {
52 label
: mw
.msg( 'rcfilters-savedqueries-setdefault' ),
56 this.applyButton
= new OO
.ui
.ButtonWidget( {
57 label
: mw
.msg( 'rcfilters-savedqueries-apply-label' ),
58 classes
: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons-apply' ],
59 flags
: [ 'primary', 'progressive' ]
61 this.cancelButton
= new OO
.ui
.ButtonWidget( {
62 label
: mw
.msg( 'rcfilters-savedqueries-cancel-label' ),
63 classes
: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons-cancel' ]
69 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-layout' )
70 .append( layout
.$element
),
72 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-options' )
73 .append( checkBoxLayout
.$element
),
75 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons' )
77 this.cancelButton
.$element
,
78 this.applyButton
.$element
83 this.popup
.connect( this, {
86 this.input
.connect( this, {
87 change
: 'onInputChange',
90 this.input
.$input
.on( {
91 keyup
: this.onInputKeyup
.bind( this )
93 this.setAsDefaultCheckbox
.connect( this, { change
: 'onSetAsDefaultChange' } );
94 this.cancelButton
.connect( this, { click
: 'onCancelButtonClick' } );
95 this.applyButton
.connect( this, { click
: 'onApplyButtonClick' } );
98 this.applyButton
.setDisabled( !this.input
.getValue() );
100 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget' );
104 OO
.inheritClass( SaveFiltersPopupButtonWidget
, OO
.ui
.PopupButtonWidget
);
107 * Respond to input enter event
109 SaveFiltersPopupButtonWidget
.prototype.onInputEnter = function () {
114 * Respond to input change event
116 * @param {string} value Input value
118 SaveFiltersPopupButtonWidget
.prototype.onInputChange = function ( value
) {
119 value
= value
.trim();
121 this.applyButton
.setDisabled( !value
);
125 * Respond to input keyup event, this is the way to intercept 'escape' key
127 * @param {jQuery.Event} e Event data
128 * @return {boolean} false
130 SaveFiltersPopupButtonWidget
.prototype.onInputKeyup = function ( e
) {
131 if ( e
.which
=== OO
.ui
.Keys
.ESCAPE
) {
132 this.popup
.toggle( false );
138 * Respond to popup ready event
140 SaveFiltersPopupButtonWidget
.prototype.onPopupReady = function () {
145 * Respond to "set as default" checkbox change
146 * @param {boolean} checked State of the checkbox
148 SaveFiltersPopupButtonWidget
.prototype.onSetAsDefaultChange = function ( checked
) {
149 var messageKey
= checked
?
150 'rcfilters-savedqueries-apply-and-setdefault-label' :
151 'rcfilters-savedqueries-apply-label';
154 .setIcon( checked
? 'pushPin' : null )
155 .setLabel( mw
.msg( messageKey
) );
159 * Respond to cancel button click event
161 SaveFiltersPopupButtonWidget
.prototype.onCancelButtonClick = function () {
162 this.popup
.toggle( false );
166 * Respond to apply button click event
168 SaveFiltersPopupButtonWidget
.prototype.onApplyButtonClick = function () {
173 * Apply and add the new quick link
175 SaveFiltersPopupButtonWidget
.prototype.apply = function () {
176 var label
= this.input
.getValue().trim();
178 // This condition is more for sanity-check, since the
179 // apply button should be disabled if the label is empty
181 this.controller
.saveCurrentQuery( label
, this.setAsDefaultCheckbox
.isSelected() );
182 this.input
.setValue( '' );
183 this.setAsDefaultCheckbox
.setSelected( false );
184 this.popup
.toggle( false );
186 this.emit( 'saveCurrent' );
190 module
.exports
= SaveFiltersPopupButtonWidget
;