resources/src/mediawiki.rcfilters/ui/SaveFiltersPopupButtonWidget.js

   1 /**
   2  * Save filters widget. This widget is displayed in the tag area
   3  * and allows the user to save the current state of the system
   4  * as a new saved filter query they can later load or set as
   5  * default.
   6  *
   7  * @class mw.rcfilters.ui.SaveFiltersPopupButtonWidget
   8  * @ignore
   9  * @extends OO.ui.PopupButtonWidget
  10  *
  11  * @param {mw.rcfilters.Controller} controller Controller
  12  * @param {mw.rcfilters.dm.SavedQueriesModel} model View model
  13  * @param {Object} [config] Configuration object
  14  */
  15 const SaveFiltersPopupButtonWidget = function MwRcfiltersUiSaveFiltersPopupButtonWidget( controller, model, config ) {
  16         const $popupContent = $( '<div>' );
  17
  18         config = config || {};
  19
  20         this.controller = controller;
  21         this.model = model;
  22
  23         // Parent
  24         SaveFiltersPopupButtonWidget.super.call( this, Object.assign( {
  25                 framed: false,
  26                 icon: 'bookmark',
  27                 title: mw.msg( 'rcfilters-savedqueries-add-new-title' ),
  28                 popup: {
  29                         classes: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup' ],
  30                         padded: true,
  31                         head: true,
  32                         // Make the popup slightly wider to accommodate titles and labels
  33                         // from languages that are longer than the original English ones.
  34                         // See T217304
  35                         width: 450,
  36                         icon: 'bookmark',
  37                         label: mw.msg( 'rcfilters-savedqueries-add-new-title' ),
  38                         $content: $popupContent
  39                 }
  40         }, config ) );
  41
  42         this.input = new OO.ui.TextInputWidget( {
  43                 placeholder: mw.msg( 'rcfilters-savedqueries-new-name-placeholder' )
  44         } );
  45         const layout = new OO.ui.FieldLayout( this.input, {
  46                 label: mw.msg( 'rcfilters-savedqueries-new-name-label' ),
  47                 align: 'top'
  48         } );
  49
  50         this.setAsDefaultCheckbox = new OO.ui.CheckboxInputWidget();
  51         const checkBoxLayout = new OO.ui.FieldLayout( this.setAsDefaultCheckbox, {
  52                 label: mw.msg( 'rcfilters-savedqueries-setdefault' ),
  53                 align: 'inline'
  54         } );
  55
  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' ]
  60         } );
  61         this.cancelButton = new OO.ui.ButtonWidget( {
  62                 label: mw.msg( 'rcfilters-savedqueries-cancel-label' ),
  63                 classes: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons-cancel' ]
  64         } );
  65
  66         $popupContent
  67                 .append(
  68                         $( '<div>' )
  69                                 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-layout' )
  70                                 .append( layout.$element ),
  71                         $( '<div>' )
  72                                 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-options' )
  73                                 .append( checkBoxLayout.$element ),
  74                         $( '<div>' )
  75                                 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons' )
  76                                 .append(
  77                                         this.cancelButton.$element,
  78                                         this.applyButton.$element
  79                                 )
  80                 );
  81
  82         // Events
  83         this.popup.connect( this, {
  84                 ready: 'onPopupReady'
  85         } );
  86         this.input.connect( this, {
  87                 change: 'onInputChange',
  88                 enter: 'onInputEnter'
  89         } );
  90         this.input.$input.on( {
  91                 keyup: this.onInputKeyup.bind( this )
  92         } );
  93         this.setAsDefaultCheckbox.connect( this, { change: 'onSetAsDefaultChange' } );
  94         this.cancelButton.connect( this, { click: 'onCancelButtonClick' } );
  95         this.applyButton.connect( this, { click: 'onApplyButtonClick' } );
  96
  97         // Initialize
  98         this.applyButton.setDisabled( !this.input.getValue() );
  99         this.$element
 100                 .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget' );
 101 };
 102
 103 /* Initialization */
 104 OO.inheritClass( SaveFiltersPopupButtonWidget, OO.ui.PopupButtonWidget );
 105
 106 /**
 107  * Respond to input enter event
 108  */
 109 SaveFiltersPopupButtonWidget.prototype.onInputEnter = function () {
 110         this.apply();
 111 };
 112
 113 /**
 114  * Respond to input change event
 115  *
 116  * @param {string} value Input value
 117  */
 118 SaveFiltersPopupButtonWidget.prototype.onInputChange = function ( value ) {
 119         value = value.trim();
 120
 121         this.applyButton.setDisabled( !value );
 122 };
 123
 124 /**
 125  * Respond to input keyup event, this is the way to intercept 'escape' key
 126  *
 127  * @param {jQuery.Event} e Event data
 128  * @return {boolean|undefined} false
 129  */
 130 SaveFiltersPopupButtonWidget.prototype.onInputKeyup = function ( e ) {
 131         if ( e.which === OO.ui.Keys.ESCAPE ) {
 132                 this.popup.toggle( false );
 133                 return false;
 134         }
 135 };
 136
 137 /**
 138  * Respond to popup ready event
 139  */
 140 SaveFiltersPopupButtonWidget.prototype.onPopupReady = function () {
 141         this.input.focus();
 142 };
 143
 144 /**
 145  * Respond to "set as default" checkbox change
 146  *
 147  * @param {boolean} checked State of the checkbox
 148  */
 149 SaveFiltersPopupButtonWidget.prototype.onSetAsDefaultChange = function ( checked ) {
 150         this.applyButton
 151                 .setIcon( checked ? 'pushPin' : null );
 152 };
 153
 154 /**
 155  * Respond to cancel button click event
 156  */
 157 SaveFiltersPopupButtonWidget.prototype.onCancelButtonClick = function () {
 158         this.popup.toggle( false );
 159 };
 160
 161 /**
 162  * Respond to apply button click event
 163  */
 164 SaveFiltersPopupButtonWidget.prototype.onApplyButtonClick = function () {
 165         this.apply();
 166 };
 167
 168 /**
 169  * Apply and add the new quick link
 170  */
 171 SaveFiltersPopupButtonWidget.prototype.apply = function () {
 172         const label = this.input.getValue().trim();
 173
 174         // This condition is more for double-checking, since the
 175         // apply button should be disabled if the label is empty
 176         if ( label ) {
 177                 this.controller.saveCurrentQuery( label, this.setAsDefaultCheckbox.isSelected() );
 178                 this.input.setValue( '' );
 179                 this.setAsDefaultCheckbox.setSelected( false );
 180                 this.popup.toggle( false );
 181
 182                 this.emit( 'saveCurrent' );
 183         }
 184 };
 185
 186 module.exports = SaveFiltersPopupButtonWidget;