/**
* Quick links menu option widget
*
+ * @class
* @extends OO.ui.Widget
* @mixins OO.ui.mixin.LabelElement
* @mixins OO.ui.mixin.IconElement
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 )
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
*
* @param {jQuery.Event} e Event data
- * @returns {boolean} false
+ * @return {boolean} false
*/
mw.rcfilters.ui.SavedLinksListItemWidget.prototype.onInputKeyup = function ( e ) {
if ( e.which === OO.ui.Keys.ESCAPE ) {
* 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
*
/**
* Get item ID
*
- * @returns {string} Query identifier
+ * @return {string} Query identifier
*/
mw.rcfilters.ui.SavedLinksListItemWidget.prototype.getID = function () {
return this.model.getID();