Merge "RCFilters UI: Ajaxify everything"

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

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
index b77df3b..6aa514e 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
@@ -21,8 +21,9 @@
 
                this.controller = controller;
                this.model = model;
+               this.selected = false;
 
-               this.checkboxWidget = new OO.ui.CheckboxInputWidget( {
+               this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
                        value: this.model.getName(),
                        selected: this.model.isSelected()
                } );
@@ -40,19 +41,42 @@
                        );
                }
 
+               this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
+                       this.controller,
+                       this.model,
+                       {
+                               $overlay: config.$overlay || this.$element
+                       }
+               );
+               this.highlightButton.toggle( this.model.isHighlightEnabled() );
+
                layout = new OO.ui.FieldLayout( this.checkboxWidget, {
                        label: $label,
                        align: 'inline'
                } );
 
                // Event
-               this.checkboxWidget.connect( this, { change: 'onCheckboxChange' } );
+               this.checkboxWidget.connect( this, { userChange: 'onCheckboxChange' } );
                this.model.connect( this, { update: 'onModelUpdate' } );
+               this.model.getGroupModel().connect( this, { update: 'onGroupModelUpdate' } );
 
                this.$element
                        .addClass( 'mw-rcfilters-ui-filterItemWidget' )
                        .append(
-                               layout.$element
+                               $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-table' )
+                                       .append(
+                                               $( '<div>' )
+                                                       .addClass( 'mw-rcfilters-ui-row' )
+                                                       .append(
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-filterCheckbox' )
+                                                                       .append( layout.$element ),
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-highlightButton' )
+                                                                       .append( this.highlightButton.$element )
+                                                       )
+                                       )
                        );
        };
 
@@ -78,6 +102,49 @@
         */
        mw.rcfilters.ui.FilterItemWidget.prototype.onModelUpdate = function () {
                this.checkboxWidget.setSelected( this.model.isSelected() );
+
+               this.setCurrentMuteState();
+       };
+
+       /**
+        * Respond to item group model update event
+        */
+       mw.rcfilters.ui.FilterItemWidget.prototype.onGroupModelUpdate = function () {
+               this.setCurrentMuteState();
+       };
+
+       /**
+        * Set selected state on this widget
+        *
+        * @param {boolean} [isSelected] Widget is selected
+        */
+       mw.rcfilters.ui.FilterItemWidget.prototype.toggleSelected = function ( isSelected ) {
+               isSelected = isSelected !== undefined ? isSelected : !this.selected;
+
+               if ( this.selected !== isSelected ) {
+                       this.selected = isSelected;
+
+                       this.$element.toggleClass( 'mw-rcfilters-ui-filterItemWidget-selected', this.selected );
+               }
+       };
+
+       /**
+        * Set the current mute state for this item
+        */
+       mw.rcfilters.ui.FilterItemWidget.prototype.setCurrentMuteState = function () {
+               this.$element.toggleClass(
+                       'mw-rcfilters-ui-filterItemWidget-muted',
+                       this.model.isConflicted() ||
+                       this.model.isIncluded() ||
+                       (
+                               // Item is also muted when any of the items in its group is active
+                               this.model.getGroupModel().isActive() &&
+                               // But it isn't selected
+                               !this.model.isSelected()
+                       )
+               );
+
+               this.highlightButton.toggle( this.model.isHighlightEnabled() );
        };
 
        /**
@@ -88,5 +155,4 @@
        mw.rcfilters.ui.FilterItemWidget.prototype.getName = function () {
                return this.model.getName();
        };
-
 }( mediaWiki, jQuery ) );