Merge "Avoid duplicate key generation code in MessageCache"
[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 2bd2f0e..f4f460d 100644 (file)
@@ -11,8 +11,6 @@
         * @param {OO.ui.InputWidget} filterInput A filter input that focuses the capsule widget
         * @param {Object} config Configuration object
         * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
-        * @cfg {number} [topScrollOffset=10] When scrolling the entire widget to the top, leave this
-        *  much space (in pixels) above the widget.
         */
        mw.rcfilters.ui.FilterCapsuleMultiselectWidget = function MwRcfiltersUiFilterCapsuleMultiselectWidget( controller, model, filterInput, config ) {
                var title = new OO.ui.LabelWidget( {
 
                // Parent
                mw.rcfilters.ui.FilterCapsuleMultiselectWidget.parent.call( this, $.extend( true, {
-                       popup: { $autoCloseIgnore: filterInput.$element.add( this.$overlay ) }
+                       popup: {
+                               $autoCloseIgnore: filterInput.$element.add( this.$overlay ),
+                               $floatableContainer: filterInput.$element
+                       }
                }, config ) );
 
                this.controller = controller;
                this.model = model;
                this.filterInput = filterInput;
-
-               this.topScrollOffset = config.topScrollOffset || 10;
+               this.isSelecting = false;
+               this.selected = null;
 
                this.resetButton = new OO.ui.ButtonWidget( {
-                       icon: 'trash',
                        framed: false,
-                       title: mw.msg( 'rcfilters-clear-all-filters' ),
                        classes: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-resetButton' ]
                } );
 
 
                // Events
                this.resetButton.connect( this, { click: 'onResetButtonClick' } );
+               this.resetButton.$element.on( 'mousedown', this.onResetButtonMouseDown.bind( this ) );
                this.model.connect( this, {
                        itemUpdate: 'onModelItemUpdate',
                        highlightChange: 'onModelHighlightChange'
                } );
-               this.popup.connect( this, { toggle: 'onPopupToggle' } );
+               this.aggregate( { click: 'capsuleItemClick' } );
 
                // Add the filterInput as trigger
                this.filterInput.$input
        };
 
        /**
-        * Respond to popup toggle event
+        * Respond to mouse down event on the reset button to prevent the popup from opening
         *
-        * @param {boolean} isVisible Popup is visible
-        */
-       mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.onPopupToggle = function ( isVisible ) {
-               if ( isVisible ) {
-                       this.scrollToTop();
-               }
-       };
-
-       /**
-        * Scroll the capsule to the top of the screen
+        * @param {jQuery.Event} e Event
         */
-       mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.scrollToTop = function () {
-               var container = OO.ui.Element.static.getClosestScrollableContainer( this.$element[ 0 ], 'y' );
-
-               $( container ).animate( {
-                       scrollTop: this.$element.offset().top - this.topScrollOffset
-               } );
+       mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.onResetButtonMouseDown = function ( e ) {
+               e.stopPropagation();
        };
 
        /**
                this.resetButton.setLabel(
                        currFiltersAreEmpty ? mw.msg( 'rcfilters-restore-default-filters' ) : ''
                );
+               this.resetButton.setTitle(
+                       currFiltersAreEmpty ? null : mw.msg( 'rcfilters-clear-all-filters' )
+               );
 
                this.resetButton.toggle( !hideResetButton );
                this.emptyFilterMessage.toggle( currFiltersAreEmpty );
        };
 
+       /**
+        * Mark an item widget as selected
+        *
+        * @param {mw.rcfilters.ui.CapsuleItemWidget} item Capsule widget
+        */
+       mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.select = function ( item ) {
+               if ( this.selected !== item ) {
+                       // Unselect previous
+                       if ( this.selected ) {
+                               this.selected.toggleSelected( false );
+                       }
+
+                       // Select new one
+                       this.selected = item;
+                       if ( this.selected ) {
+                               item.toggleSelected( true );
+                       }
+               }
+       };
+
+       /**
+        * Reset selection and remove selected states from all items
+        */
+       mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.resetSelection = function () {
+               if ( this.selected !== null ) {
+                       this.selected = null;
+                       this.getItems().forEach( function ( capsuleWidget ) {
+                               capsuleWidget.toggleSelected( false );
+                       } );
+               }
+       };
+
        /**
         * @inheritdoc
         */