Merge "Expose LinkRenderer for LogFormatter instances"

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

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 51b348e..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
@@ -5,6 +5,7 @@
         * @extends OO.ui.Widget
         * @mixins OO.ui.mixin.LabelElement
         * @mixins OO.ui.mixin.IconElement
+        * @mixins OO.ui.mixin.TitledElement
         *
         * @constructor
         * @param {mw.rcfilters.dm.SavedQueryItemModel} model View model
@@ -28,6 +29,9 @@
                OO.ui.mixin.IconElement.call( this, $.extend( {
                        icon: ''
                }, config ) );
+               OO.ui.mixin.TitledElement.call( this, $.extend( {
+                       title: this.model.getLabel()
+               }, config ) );
 
                this.edit = false;
                this.$overlay = config.$overlay || this.$element;
@@ -37,12 +41,12 @@
                        icon: 'ellipsis',
                        framed: false
                } );
-               this.menu = new OO.ui.FloatingMenuSelectWidget( {
+               this.menu = new OO.ui.MenuSelectWidget( {
                        classes: [ 'mw-rcfilters-ui-savedLinksListItemWidget-menu' ],
                        widget: this.popupButton,
                        width: 200,
                        horizontalPosition: 'end',
-                       $container: this.popupButton.$element,
+                       $floatableContainer: this.popupButton.$element,
                        items: [
                                new OO.ui.MenuOptionWidget( {
                                        data: 'edit',
@@ -77,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 )
@@ -102,10 +109,6 @@
                                                $( '<div>' )
                                                        .addClass( 'mw-rcfilters-ui-row' )
                                                        .append(
-                                                               $( '<div>' )
-                                                                       .addClass( 'mw-rcfilters-ui-cell' )
-                                                                       .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-icon' )
-                                                                       .append( this.$icon ),
                                                                $( '<div>' )
                                                                        .addClass( 'mw-rcfilters-ui-cell' )
                                                                        .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-content' )
@@ -115,6 +118,10 @@
                                                                                this.editInput.$element,
                                                                                this.saveButton.$element
                                                                        ),
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell' )
+                                                                       .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-icon' )
+                                                                       .append( this.$icon ),
                                                                this.popupButton.$element
                                                                        .addClass( 'mw-rcfilters-ui-cell' )
                                                        )
@@ -126,6 +133,7 @@
        OO.inheritClass( mw.rcfilters.ui.SavedLinksListItemWidget, OO.ui.Widget );
        OO.mixinClass( mw.rcfilters.ui.SavedLinksListItemWidget, OO.ui.mixin.LabelElement );
        OO.mixinClass( mw.rcfilters.ui.SavedLinksListItemWidget, OO.ui.mixin.IconElement );
+       OO.mixinClass( mw.rcfilters.ui.SavedLinksListItemWidget, OO.ui.mixin.TitledElement );
 
        /* Events */
 
@@ -199,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
         *
@@ -234,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
         *
@@ -252,6 +273,7 @@
 
                        this.editInput.toggle( isEdit );
                        this.$label.toggleClass( 'oo-ui-element-hidden', isEdit );
+                       this.$icon.toggleClass( 'oo-ui-element-hidden', isEdit );
                        this.popupButton.toggle( !isEdit );
                        this.saveButton.toggle( isEdit );