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

   1 ( function ( mw ) {
   2         /**
   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
   6          * default.
   7          *
   8          * @extends OO.ui.PopupButtonWidget
   9          *
  10          * @constructor
  11          * @param {mw.rcfilters.Controller} controller Controller
  12          * @param {mw.rcfilters.dm.SavedQueriesModel} model View model
  13          * @param {Object} [config] Configuration object
  14          */
  15         mw.rcfilters.ui.SaveFiltersPopupButtonWidget = function MwRcfiltersUiSaveFiltersPopupButtonWidget( controller, model, config ) {
  16                 var layout,
  17                         $popupContent = $( '<div>' );
  18
  19                 config = config || {};
  20
  21                 this.controller = controller;
  22                 this.model = model;
  23
  24                 // Parent
  25                 mw.rcfilters.ui.SaveFiltersPopupButtonWidget.parent.call( this, $.extend( {
  26                         framed: false,
  27                         icon: 'clip',
  28                         $overlay: this.$overlay,
  29                         title: mw.msg( 'rcfilters-savedqueries-add-new-title' ),
  30                         popup: {
  31                                 classes: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup' ],
  32                                 padded: true,
  33                                 head: true,
  34                                 label: mw.msg( 'rcfilters-savedqueries-add-new-title' ),
  35                                 $content: $popupContent
  36                         }
  37                 }, config ) );
  38                 // // HACK: Add an icon to the popup head label
  39                 this.popup.$head.prepend( ( new OO.ui.IconWidget( { icon: 'clip' } ) ).$element );
  40
  41                 this.input = new OO.ui.TextInputWidget( {
  42                         validate: 'non-empty'
  43                 } );
  44                 layout = new OO.ui.FieldLayout( this.input, {
  45                         label: mw.msg( 'rcfilters-savedqueries-new-name-label' ),
  46                         align: 'top'
  47                 } );
  48
  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' ]
  53                 } );
  54                 this.cancelButton = new OO.ui.ButtonWidget( {
  55                         label: mw.msg( 'rcfilters-savedqueries-cancel-label' ),
  56                         classes: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons-cancel' ]
  57                 } );
  58
  59                 $popupContent
  60                         .append(
  61                                 $( '<div>' )
  62                                         .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-layout' )
  63                                         .append( layout.$element ),
  64                                 $( '<div>' )
  65                                         .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons' )
  66                                         .append(
  67                                                 this.cancelButton.$element,
  68                                                 this.applyButton.$element
  69                                         )
  70                         );
  71
  72                 // Events
  73                 this.popup.connect( this, {
  74                         ready: 'onPopupReady',
  75                         toggle: 'onPopupToggle'
  76                 } );
  77                 this.input.connect( this, { enter: 'onInputEnter' } );
  78                 this.input.$input.on( {
  79                         keyup: this.onInputKeyup.bind( this )
  80                 } );
  81                 this.cancelButton.connect( this, { click: 'onCancelButtonClick' } );
  82                 this.applyButton.connect( this, { click: 'onApplyButtonClick' } );
  83
  84                 // Initialize
  85                 this.$element
  86                         .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget' );
  87         };
  88
  89         /* Initialization */
  90         OO.inheritClass( mw.rcfilters.ui.SaveFiltersPopupButtonWidget, OO.ui.PopupButtonWidget );
  91
  92         /**
  93          * Respond to input enter event
  94          */
  95         mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onInputEnter = function () {
  96                 this.apply();
  97         };
  98
  99         /**
 100          * Respond to input keyup event, this is the way to intercept 'escape' key
 101          *
 102          * @param {jQuery.Event} e Event data
 103          * @returns {boolean} false
 104          */
 105         mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onInputKeyup = function ( e ) {
 106                 if ( e.which === OO.ui.Keys.ESCAPE ) {
 107                         this.popup.toggle( false );
 108                         return false;
 109                 }
 110         };
 111
 112         /**
 113          * Respond to popup toggle event
 114          *
 115          * @param {boolean} isVisible Popup is visible
 116          */
 117         mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onPopupToggle = function ( isVisible ) {
 118                 this.setIcon( isVisible ? 'unClip' : 'clip' );
 119         };
 120
 121         /**
 122          * Respond to popup ready event
 123          */
 124         mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onPopupReady = function () {
 125                 this.input.focus();
 126         };
 127
 128         /**
 129          * Respond to cancel button click event
 130          */
 131         mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onCancelButtonClick = function () {
 132                 this.popup.toggle( false );
 133         };
 134
 135         /**
 136          * Respond to apply button click event
 137          */
 138         mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onApplyButtonClick = function () {
 139                 this.apply();
 140         };
 141
 142         /**
 143          * Apply and add the new quick link
 144          */
 145         mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.apply = function () {
 146                 var widget = this,
 147                         label = this.input.getValue();
 148
 149                 this.input.getValidity()
 150                         .done( function () {
 151                                 widget.controller.saveCurrentQuery( label );
 152                                 widget.input.setValue( this.input, '' );
 153                                 widget.emit( 'saveCurrent' );
 154                         } )
 155                         .always( function () {
 156                                 widget.popup.toggle( false );
 157                         } );
 158         };
 159 }( mediaWiki ) );