resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js

   1 ( function ( mw ) {
   2         /**
   3          * Wrapper for the RC form with hide/show links
   4          * Must be constructed after the model is initialized.
   5          *
   6          * @extends OO.ui.Widget
   7          *
   8          * @constructor
   9          * @param {mw.rcfilters.dm.FiltersViewModel} filtersModel Changes list view model
  10          * @param {mw.rcfilters.dm.ChangesListViewModel} changeListModel Changes list view model
  11          * @param {mw.rcfilters.Controller} controller RCfilters controller
  12          * @param {jQuery} $formRoot Root element of the form to attach to
  13          * @param {Object} config Configuration object
  14          */
  15         mw.rcfilters.ui.FormWrapperWidget = function MwRcfiltersUiFormWrapperWidget( filtersModel, changeListModel, controller, $formRoot, config ) {
  16                 config = config || {};
  17
  18                 // Parent
  19                 mw.rcfilters.ui.FormWrapperWidget.parent.call( this, $.extend( {}, config, {
  20                         $element: $formRoot
  21                 } ) );
  22                 // Mixin constructors
  23                 OO.ui.mixin.PendingElement.call( this, config );
  24
  25                 this.changeListModel = changeListModel;
  26                 this.filtersModel = filtersModel;
  27                 this.controller = controller;
  28                 this.$submitButton = this.$element.find( 'form input[type=submit]' );
  29
  30                 this.$element
  31                         .on( 'click', 'a[data-params]', this.onLinkClick.bind( this ) );
  32
  33                 this.$element
  34                         .on( 'submit', 'form', this.onFormSubmit.bind( this ) );
  35
  36                 // Events
  37                 this.changeListModel.connect( this, {
  38                         invalidate: 'onChangesModelInvalidate',
  39                         update: 'onChangesModelUpdate'
  40                 } );
  41
  42                 // Initialize
  43                 this.cleanUpFieldset();
  44                 this.$element
  45                         .addClass( 'mw-rcfilters-ui-FormWrapperWidget' );
  46         };
  47
  48         /* Initialization */
  49
  50         OO.inheritClass( mw.rcfilters.ui.FormWrapperWidget, OO.ui.Widget );
  51         OO.mixinClass( mw.rcfilters.ui.FormWrapperWidget, OO.ui.mixin.PendingElement );
  52
  53         /**
  54          * Respond to link click
  55          *
  56          * @param {jQuery.Event} e Event
  57          * @return {boolean} false
  58          */
  59         mw.rcfilters.ui.FormWrapperWidget.prototype.onLinkClick = function ( e ) {
  60                 this.controller.updateChangesList( $( e.target ).data( 'params' ) );
  61                 return false;
  62         };
  63
  64         /**
  65          * Respond to form submit event
  66          *
  67          * @param {jQuery.Event} e Event
  68          * @return {boolean} false
  69          */
  70         mw.rcfilters.ui.FormWrapperWidget.prototype.onFormSubmit = function ( e ) {
  71                 var data = {};
  72
  73                 // Collect all data from form
  74                 $( e.target ).find( 'input:not([type="hidden"],[type="submit"]), select' ).each( function () {
  75                         if ( !$( this ).is( ':checkbox' ) || $( this ).is( ':checked' ) ) {
  76                                 data[ $( this ).prop( 'name' ) ] = $( this ).val();
  77                         }
  78                 } );
  79
  80                 this.controller.updateChangesList( data );
  81                 return false;
  82         };
  83
  84         /**
  85          * Respond to model invalidate
  86          */
  87         mw.rcfilters.ui.FormWrapperWidget.prototype.onChangesModelInvalidate = function () {
  88                 this.pushPending();
  89                 this.$submitButton.prop( 'disabled', true );
  90         };
  91
  92         /**
  93          * Respond to model update, replace the show/hide links with the ones from the
  94          * server so they feature the correct state.
  95          *
  96          * @param {jQuery|string} $changesList Updated changes list
  97          * @param {jQuery} $fieldset Updated fieldset
  98          */
  99         mw.rcfilters.ui.FormWrapperWidget.prototype.onChangesModelUpdate = function ( $changesList, $fieldset ) {
 100                 this.$submitButton.prop( 'disabled', false );
 101
 102                 // Replace the entire fieldset
 103                 this.$element.empty().append( $fieldset.contents() );
 104
 105                 this.cleanUpFieldset();
 106
 107                 this.popPending();
 108         };
 109
 110         /**
 111          * Clean up the old-style show/hide that we have implemented in the filter list
 112          */
 113         mw.rcfilters.ui.FormWrapperWidget.prototype.cleanUpFieldset = function () {
 114                 var widget = this;
 115
 116                 // HACK: Remove old-style filter links for filters handled by the widget
 117                 // Ideally the widget would handle all filters and we'd just remove .rcshowhide entirely
 118                 this.$element.find( '.rcshowhide' ).children().each( function () {
 119                         // HACK: Interpret the class name to get the filter name
 120                         // This should really be set as a data attribute
 121                         var i,
 122                                 name = null,
 123                                 // Some of the older browsers we support don't have .classList,
 124                                 // so we have to interpret the class attribute manually.
 125                                 classes = this.getAttribute( 'class' ).split( ' ' );
 126                         for ( i = 0; i < classes.length; i++ ) {
 127                                 if ( classes[ i ].substr( 0, 'rcshow'.length ) === 'rcshow' ) {
 128                                         name = classes[ i ].substr( 'rcshow'.length );
 129                                         break;
 130                                 }
 131                         }
 132                         if ( name === null ) {
 133                                 return;
 134                         }
 135                         if ( name === 'hidemine' ) {
 136                                 // HACK: the span for hidemyself is called hidemine
 137                                 name = 'hidemyself';
 138                         }
 139
 140                         // This span corresponds to a filter that's in our model, so remove it
 141                         if ( widget.filtersModel.getItemByName( name ) ) {
 142                                 // HACK: Remove the text node after the span.
 143                                 // If there isn't one, we're at the end, so remove the text node before the span.
 144                                 // This would be unnecessary if we added separators with CSS.
 145                                 if ( this.nextSibling && this.nextSibling.nodeType === Node.TEXT_NODE ) {
 146                                         this.parentNode.removeChild( this.nextSibling );
 147                                 } else if ( this.previousSibling && this.previousSibling.nodeType === Node.TEXT_NODE ) {
 148                                         this.parentNode.removeChild( this.previousSibling );
 149                                 }
 150                                 // Remove the span itself
 151                                 this.parentNode.removeChild( this );
 152                         }
 153                 } );
 154         };
 155 }( mediaWiki ) );