RCFilters: Trim spaces in saved query names

Make sure to trim the spaces before saving, and also to verify that
names that contain spaces-only are considered empty.

Also make sure that the same behavior is working when saved queries
are edited - but since the save query button may be disabled, make
sure that any blur event on the input gets us out of the edit mode
either after save or without saving (if the string is invalid)

Bug: T169273
Change-Id: I16da9fcde0bf6be2b854243d7facc80d2860e458

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 62f7aee..dfb188d 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
@@ -105,6 +105,8 @@
         * @param {string} value Input value
         */
        mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onInputChange = function ( value ) {
+               value = value.trim();
+
                this.applyButton.setDisabled( !value );
        };
 
@@ -146,7 +148,7 @@
         * Apply and add the new quick link
         */
        mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.apply = function () {
-               var label = this.input.getValue();
+               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

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
index 7ce9b6a..b6b20ee 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
@@ -81,8 +81,11 @@
                this.menu.connect( this, {
                        choose: 'onMenuChoose'
                } );
-               this.saveButton.connect( this, { click: 'onSaveButtonClick' } );
-               this.editInput.connect( this, { enter: 'onEditInputEnter' } );
+               this.saveButton.connect( this, { click: 'save' } );
+               this.editInput.connect( this, {
+                       change: 'onInputChange',
+                       enter: 'save'
+               } );
                this.editInput.$input.on( {
                        blur: this.onInputBlur.bind( this ),
                        keyup: this.onInputKeyup.bind( this )
@@ -204,22 +207,6 @@
                this.menu.toggle( false );
        };
 
-       /**
-        * Respond to save button click
-        */
-       mw.rcfilters.ui.SavedLinksListItemWidget.prototype.onSaveButtonClick = function () {
-               this.emit( 'edit', this.editInput.getValue() );
-               this.toggleEdit( false );
-       };
-
-       /**
-        * Respond to input enter event
-        */
-       mw.rcfilters.ui.SavedLinksListItemWidget.prototype.onEditInputEnter = function () {
-               this.emit( 'edit', this.editInput.getValue() );
-               this.toggleEdit( false );
-       };
-
        /**
         * Respond to input keyup event, this is the way to intercept 'escape' key
         *
@@ -239,10 +226,39 @@
         * Respond to blur event on the input
         */
        mw.rcfilters.ui.SavedLinksListItemWidget.prototype.onInputBlur = function () {
-               this.emit( 'edit', this.editInput.getValue() );
+               this.save();
+
+               // Whether the save succeeded or not, the input-blur event
+               // means we need to cancel editing mode
                this.toggleEdit( false );
        };
 
+       /**
+        * Respond to input change event
+        *
+        * @param {string} value Input value
+        */
+       mw.rcfilters.ui.SavedLinksListItemWidget.prototype.onInputChange = function ( value ) {
+               value = value.trim();
+
+               this.saveButton.setDisabled( !value );
+       };
+
+       /**
+        * Save the name of the query
+        *
+        * @param {string} [value] The value to save
+        * @fires edit
+        */
+       mw.rcfilters.ui.SavedLinksListItemWidget.prototype.save = function () {
+               var value = this.editInput.getValue().trim();
+
+               if ( value ) {
+                       this.emit( 'edit', value );
+                       this.toggleEdit( false );
+               }
+       };
+
        /**
         * Toggle edit mode on this widget
         *