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 * @extends OO.ui.PopupButtonWidget
11 * @param {mw.rcfilters.Controller} controller Controller
12 * @param {mw.rcfilters.dm.SavedQueriesModel} model View model
13 * @param {Object} [config] Configuration object
15 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
= function MwRcfiltersUiSaveFiltersPopupButtonWidget( controller
, model
, config
) {
18 $popupContent
= $( '<div>' );
20 config
= config
|| {};
22 this.controller
= controller
;
26 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.parent
.call( this, $.extend( {
29 title
: mw
.msg( 'rcfilters-savedqueries-add-new-title' ),
31 classes
: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup' ],
34 label
: mw
.msg( 'rcfilters-savedqueries-add-new-title' ),
35 $content
: $popupContent
38 // // HACK: Add an icon to the popup head label
39 this.popup
.$head
.prepend( ( new OO
.ui
.IconWidget( { icon
: 'unClip' } ) ).$element
);
41 this.input
= new OO
.ui
.TextInputWidget( {
42 placeholder
: mw
.msg( 'rcfilters-savedqueries-new-name-placeholder' )
44 layout
= new OO
.ui
.FieldLayout( this.input
, {
45 label
: mw
.msg( 'rcfilters-savedqueries-new-name-label' ),
49 this.setAsDefaultCheckbox
= new OO
.ui
.CheckboxInputWidget();
50 checkBoxLayout
= new OO
.ui
.FieldLayout( this.setAsDefaultCheckbox
, {
51 label
: mw
.msg( 'rcfilters-savedqueries-setdefault' ),
55 this.applyButton
= new OO
.ui
.ButtonWidget( {
56 label
: mw
.msg( 'rcfilters-savedqueries-apply-label' ),
57 classes
: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons-apply' ],
58 flags
: [ 'primary', 'progressive' ]
60 this.cancelButton
= new OO
.ui
.ButtonWidget( {
61 label
: mw
.msg( 'rcfilters-savedqueries-cancel-label' ),
62 classes
: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons-cancel' ]
68 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-layout' )
69 .append( layout
.$element
),
71 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-options' )
72 .append( checkBoxLayout
.$element
),
74 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons' )
76 this.cancelButton
.$element
,
77 this.applyButton
.$element
82 this.popup
.connect( this, {
85 this.input
.connect( this, {
86 change
: 'onInputChange',
89 this.input
.$input
.on( {
90 keyup
: this.onInputKeyup
.bind( this )
92 this.setAsDefaultCheckbox
.connect( this, { change
: 'onSetAsDefaultChange' } );
93 this.cancelButton
.connect( this, { click
: 'onCancelButtonClick' } );
94 this.applyButton
.connect( this, { click
: 'onApplyButtonClick' } );
97 this.applyButton
.setDisabled( !this.input
.getValue() );
99 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget' );
103 OO
.inheritClass( mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
, OO
.ui
.PopupButtonWidget
);
106 * Respond to input enter event
108 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onInputEnter = function () {
113 * Respond to input change event
115 * @param {string} value Input value
117 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onInputChange = function ( value
) {
118 value
= value
.trim();
120 this.applyButton
.setDisabled( !value
);
124 * Respond to input keyup event, this is the way to intercept 'escape' key
126 * @param {jQuery.Event} e Event data
127 * @return {boolean} false
129 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onInputKeyup = function ( e
) {
130 if ( e
.which
=== OO
.ui
.Keys
.ESCAPE
) {
131 this.popup
.toggle( false );
137 * Respond to popup ready event
139 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onPopupReady = function () {
144 * Respond to "set as default" checkbox change
145 * @param {boolean} checked State of the checkbox
147 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onSetAsDefaultChange = function ( checked
) {
148 var messageKey
= checked
?
149 'rcfilters-savedqueries-apply-and-setdefault-label' :
150 'rcfilters-savedqueries-apply-label';
153 .setIcon( checked
? 'pushPin' : null )
154 .setLabel( mw
.msg( messageKey
) );
158 * Respond to cancel button click event
160 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onCancelButtonClick = function () {
161 this.popup
.toggle( false );
165 * Respond to apply button click event
167 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onApplyButtonClick = function () {
172 * Apply and add the new quick link
174 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.apply = function () {
175 var label
= this.input
.getValue().trim();
177 // This condition is more for sanity-check, since the
178 // apply button should be disabled if the label is empty
180 this.controller
.saveCurrentQuery( label
, this.setAsDefaultCheckbox
.isSelected() );
181 this.input
.setValue( '' );
182 this.setAsDefaultCheckbox
.setSelected( false );
183 this.popup
.toggle( false );
185 this.emit( 'saveCurrent' );