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( {
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, {
74 ready
: 'onPopupReady',
75 toggle
: 'onPopupToggle'
77 this.input
.connect( this, { enter
: 'onInputEnter' } );
78 this.input
.$input
.on( {
79 keyup
: this.onInputKeyup
.bind( this )
81 this.cancelButton
.connect( this, { click
: 'onCancelButtonClick' } );
82 this.applyButton
.connect( this, { click
: 'onApplyButtonClick' } );
86 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget' );
90 OO
.inheritClass( mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
, OO
.ui
.PopupButtonWidget
);
93 * Respond to input enter event
95 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onInputEnter = function () {
100 * Respond to input keyup event, this is the way to intercept 'escape' key
102 * @param {jQuery.Event} e Event data
103 * @returns {boolean} false
105 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onInputKeyup = function ( e
) {
106 if ( e
.which
=== OO
.ui
.Keys
.ESCAPE
) {
107 this.popup
.toggle( false );
113 * Respond to popup ready event
115 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onPopupReady = function () {
120 * Respond to cancel button click event
122 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onCancelButtonClick = function () {
123 this.popup
.toggle( false );
127 * Respond to apply button click event
129 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.onApplyButtonClick = function () {
134 * Apply and add the new quick link
136 mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget
.prototype.apply = function () {
138 label
= this.input
.getValue();
140 this.input
.getValidity()
142 widget
.controller
.saveCurrentQuery( label
);
143 widget
.input
.setValue( this.input
, '' );
144 widget
.emit( 'saveCurrent' );
145 widget
.popup
.toggle( false );