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
) {
17 $popupContent
= $( '<div>' );
19 config
= config
|| {};
21 this.controller
= controller
;
25 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.parent
.call( this, $.extend( {
28 $overlay
: this.$overlay
,
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.applyButton
= new OO
.ui
.ButtonWidget( {
50 label
: mw
.msg( 'rcfilters-savedqueries-apply-label' ),
51 classes
: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons-apply' ],
52 flags
: [ 'primary', 'progressive' ]
54 this.cancelButton
= new OO
.ui
.ButtonWidget( {
55 label
: mw
.msg( 'rcfilters-savedqueries-cancel-label' ),
56 classes
: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons-cancel' ]
62 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-layout' )
63 .append( layout
.$element
),
65 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons' )
67 this.cancelButton
.$element
,
68 this.applyButton
.$element
73 this.popup
.connect( this, {
76 this.input
.connect( this, {
77 change
: 'onInputChange',
80 this.input
.$input
.on( {
81 keyup
: this.onInputKeyup
.bind( this )
83 this.cancelButton
.connect( this, { click
: 'onCancelButtonClick' } );
84 this.applyButton
.connect( this, { click
: 'onApplyButtonClick' } );
87 this.applyButton
.setDisabled( !this.input
.getValue() );
89 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget' );
93 OO
.inheritClass( mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
, OO
.ui
.PopupButtonWidget
);
96 * Respond to input enter event
98 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onInputEnter = function () {
103 * Respond to input change event
105 * @param {string} value Input value
107 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onInputChange = function ( value
) {
108 value
= value
.trim();
110 this.applyButton
.setDisabled( !value
);
114 * Respond to input keyup event, this is the way to intercept 'escape' key
116 * @param {jQuery.Event} e Event data
117 * @returns {boolean} false
119 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onInputKeyup = function ( e
) {
120 if ( e
.which
=== OO
.ui
.Keys
.ESCAPE
) {
121 this.popup
.toggle( false );
127 * Respond to popup ready event
129 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onPopupReady = function () {
134 * Respond to cancel button click event
136 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onCancelButtonClick = function () {
137 this.popup
.toggle( false );
141 * Respond to apply button click event
143 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onApplyButtonClick = function () {
148 * Apply and add the new quick link
150 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.apply = function () {
151 var label
= this.input
.getValue().trim();
153 // This condition is more for sanity-check, since the
154 // apply button should be disabled if the label is empty
156 this.controller
.saveCurrentQuery( label
);
157 this.input
.setValue( '' );
158 this.popup
.toggle( false );
160 this.emit( 'saveCurrent' );