Merge "Show a warning in edit preview when a template loop is detected"

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
index 9b7a2fb..bb837e0 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
@@ -14,6 +14,7 @@
         */
        mw.rcfilters.ui.SaveFiltersPopupButtonWidget = function MwRcfiltersUiSaveFiltersPopupButtonWidget( controller, model, config ) {
                var layout,
+                       checkBoxLayout,
                        $popupContent = $( '<div>' );
 
                config = config || {};
@@ -24,7 +25,7 @@
                // Parent
                mw.rcfilters.ui.SaveFiltersPopupButtonWidget.parent.call( this, $.extend( {
                        framed: false,
-                       icon: 'clip',
+                       icon: 'unClip',
                        $overlay: this.$overlay,
                        title: mw.msg( 'rcfilters-savedqueries-add-new-title' ),
                        popup: {
@@ -36,16 +37,22 @@
                        }
                }, config ) );
                // // HACK: Add an icon to the popup head label
-               this.popup.$head.prepend( ( new OO.ui.IconWidget( { icon: 'clip' } ) ).$element );
+               this.popup.$head.prepend( ( new OO.ui.IconWidget( { icon: 'unClip' } ) ).$element );
 
                this.input = new OO.ui.TextInputWidget( {
-                       validate: 'non-empty'
+                       placeholder: mw.msg( 'rcfilters-savedqueries-new-name-placeholder' )
                } );
                layout = new OO.ui.FieldLayout( this.input, {
                        label: mw.msg( 'rcfilters-savedqueries-new-name-label' ),
                        align: 'top'
                } );
 
+               this.setAsDefaultCheckbox = new OO.ui.CheckboxInputWidget();
+               checkBoxLayout = new OO.ui.FieldLayout( this.setAsDefaultCheckbox, {
+                       label: mw.msg( 'rcfilters-savedqueries-setdefault' ),
+                       align: 'inline'
+               } );
+
                this.applyButton = new OO.ui.ButtonWidget( {
                        label: mw.msg( 'rcfilters-savedqueries-apply-label' ),
                        classes: [ 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons-apply' ],
@@ -61,6 +68,9 @@
                                $( '<div>' )
                                        .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-layout' )
                                        .append( layout.$element ),
+                               $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-options' )
+                                       .append( checkBoxLayout.$element ),
                                $( '<div>' )
                                        .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup-buttons' )
                                        .append(
@@ -71,17 +81,21 @@
 
                // Events
                this.popup.connect( this, {
-                       ready: 'onPopupReady',
-                       toggle: 'onPopupToggle'
+                       ready: 'onPopupReady'
+               } );
+               this.input.connect( this, {
+                       change: 'onInputChange',
+                       enter: 'onInputEnter'
                } );
-               this.input.connect( this, { enter: 'onInputEnter' } );
                this.input.$input.on( {
                        keyup: this.onInputKeyup.bind( this )
                } );
+               this.setAsDefaultCheckbox.connect( this, { change: 'onSetAsDefaultChange' } );
                this.cancelButton.connect( this, { click: 'onCancelButtonClick' } );
                this.applyButton.connect( this, { click: 'onApplyButtonClick' } );
 
                // Initialize
+               this.applyButton.setDisabled( !this.input.getValue() );
                this.$element
                        .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget' );
        };
@@ -96,11 +110,22 @@
                this.apply();
        };
 
+       /**
+        * Respond to input change event
+        *
+        * @param {string} value Input value
+        */
+       mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onInputChange = function ( value ) {
+               value = value.trim();
+
+               this.applyButton.setDisabled( !value );
+       };
+
        /**
         * Respond to input keyup event, this is the way to intercept 'escape' key
         *
         * @param {jQuery.Event} e Event data
-        * @returns {boolean} false
+        * @return {boolean} false
         */
        mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onInputKeyup = function ( e ) {
                if ( e.which === OO.ui.Keys.ESCAPE ) {
@@ -110,19 +135,24 @@
        };
 
        /**
-        * Respond to popup toggle event
-        *
-        * @param {boolean} isVisible Popup is visible
+        * Respond to popup ready event
         */
-       mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onPopupToggle = function ( isVisible ) {
-               this.setIcon( isVisible ? 'unClip' : 'clip' );
+       mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onPopupReady = function () {
+               this.input.focus();
        };
 
        /**
-        * Respond to popup ready event
+        * Respond to "set as default" checkbox change
+        * @param {boolean} checked State of the checkbox
         */
-       mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onPopupReady = function () {
-               this.input.focus();
+       mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onSetAsDefaultChange = function ( checked ) {
+               var messageKey = checked ?
+                       'rcfilters-savedqueries-apply-and-setdefault-label' :
+                       'rcfilters-savedqueries-apply-label';
+
+               this.applyButton
+                       .setIcon( checked ? 'pushPin' : null )
+                       .setLabel( mw.msg( messageKey ) );
        };
 
        /**
@@ -143,17 +173,17 @@
         * Apply and add the new quick link
         */
        mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.apply = function () {
-               var widget = this,
-                       label = this.input.getValue();
-
-               this.input.getValidity()
-                       .done( function () {
-                               widget.controller.saveCurrentQuery( label );
-                               widget.input.setValue( this.input, '' );
-                               widget.emit( 'saveCurrent' );
-                       } )
-                       .always( function () {
-                               widget.popup.toggle( false );
-                       } );
+               var label = this.input.getValue().trim();
+
+               // This condition is more for sanity-check, since the
+               // apply button should be disabled if the label is empty
+               if ( label ) {
+                       this.controller.saveCurrentQuery( label, this.setAsDefaultCheckbox.isSelected() );
+                       this.input.setValue( '' );
+                       this.setAsDefaultCheckbox.setSelected( false );
+                       this.popup.toggle( false );
+
+                       this.emit( 'saveCurrent' );
+               }
        };
 }( mediaWiki ) );