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

   1 /**
   2  * Wrapper for the RC form with hide/show links
   3  * Must be constructed after the model is initialized.
   4  *
   5  * @class mw.rcfilters.ui.FormWrapperWidget
   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 var FormWrapperWidget = function MwRcfiltersUiFormWrapperWidget( filtersModel, changeListModel, controller, $formRoot, config ) {
  16         config = config || {};
  17
  18         // Parent
  19         FormWrapperWidget.parent.call( this, $.extend( {}, config, {
  20                 $element: $formRoot
  21         } ) );
  22
  23         this.changeListModel = changeListModel;
  24         this.filtersModel = filtersModel;
  25         this.controller = controller;
  26         this.$submitButton = this.$element.find( 'form input[type=submit]' );
  27
  28         this.$element
  29                 .on( 'click', 'a[data-params]', this.onLinkClick.bind( this ) );
  30
  31         this.$element
  32                 .on( 'submit', 'form', this.onFormSubmit.bind( this ) );
  33
  34         // Events
  35         this.changeListModel.connect( this, {
  36                 invalidate: 'onChangesModelInvalidate',
  37                 update: 'onChangesModelUpdate'
  38         } );
  39
  40         // Initialize
  41         this.cleanUpFieldset();
  42         this.$element
  43                 .addClass( 'mw-rcfilters-ui-FormWrapperWidget' );
  44 };
  45
  46 /* Initialization */
  47
  48 OO.inheritClass( FormWrapperWidget, OO.ui.Widget );
  49
  50 /**
  51  * Respond to link click
  52  *
  53  * @param {jQuery.Event} e Event
  54  * @return {boolean} false
  55  */
  56 FormWrapperWidget.prototype.onLinkClick = function ( e ) {
  57         this.controller.updateChangesList( $( e.target ).data( 'params' ) );
  58         return false;
  59 };
  60
  61 /**
  62  * Respond to form submit event
  63  *
  64  * @param {jQuery.Event} e Event
  65  * @return {boolean} false
  66  */
  67 FormWrapperWidget.prototype.onFormSubmit = function ( e ) {
  68         var data = {};
  69
  70         // Collect all data from the form
  71         $( e.target ).find( 'input, select' ).each( function () {
  72                 if ( this.type === 'hidden' || this.type === 'submit' ) {
  73                         return;
  74                 }
  75
  76                 if ( this.type === 'checkbox' && !this.checked ) {
  77                         // Use a fixed value for unchecked checkboxes.
  78                         data[ this.name ] = '';
  79                 } else {
  80                         // Use the live value for select, checked checkboxes, or non-checkbox input.
  81                         data[ this.name ] = $( this ).val();
  82                 }
  83         } );
  84
  85         this.controller.updateChangesList( data );
  86         return false;
  87 };
  88
  89 /**
  90  * Respond to model invalidate
  91  */
  92 FormWrapperWidget.prototype.onChangesModelInvalidate = function () {
  93         this.$submitButton.prop( 'disabled', true );
  94 };
  95
  96 /**
  97  * Respond to model update, replace the show/hide links with the ones from the
  98  * server so they feature the correct state.
  99  *
 100  * @param {jQuery|string} $changesList Updated changes list
 101  * @param {jQuery} $fieldset Updated fieldset
 102  * @param {string} noResultsDetails Type of no result error
 103  * @param {boolean} isInitialDOM Whether $changesListContent is the existing (already attached) DOM
 104  */
 105 FormWrapperWidget.prototype.onChangesModelUpdate = function ( $changesList, $fieldset, noResultsDetails, isInitialDOM ) {
 106         this.$submitButton.prop( 'disabled', false );
 107
 108         // Replace the entire fieldset
 109         this.$element.empty().append( $fieldset.contents() );
 110
 111         if ( !isInitialDOM ) {
 112                 // Make sure enhanced RC re-initializes correctly
 113                 mw.hook( 'wikipage.content' ).fire( this.$element );
 114         }
 115
 116         this.cleanUpFieldset();
 117 };
 118
 119 /**
 120  * Clean up the old-style show/hide that we have implemented in the filter list
 121  */
 122 FormWrapperWidget.prototype.cleanUpFieldset = function () {
 123         this.$element.find( '.clshowhideoption[data-feature-in-structured-ui=1]' ).each( function () {
 124                 // HACK: Remove the text node after the span.
 125                 // If there isn't one, we're at the end, so remove the text node before the span.
 126                 // This would be unnecessary if we added separators with CSS.
 127                 if ( this.nextSibling && this.nextSibling.nodeType === Node.TEXT_NODE ) {
 128                         this.parentNode.removeChild( this.nextSibling );
 129                 } else if ( this.previousSibling && this.previousSibling.nodeType === Node.TEXT_NODE ) {
 130                         this.parentNode.removeChild( this.previousSibling );
 131                 }
 132                 // Remove the span itself
 133                 this.parentNode.removeChild( this );
 134         } );
 135
 136         // Hide namespaces and tags
 137         this.$element.find( '.namespaceForm' ).detach();
 138         this.$element.find( '.mw-tagfilter-label' ).closest( 'tr' ).detach();
 139
 140         // Hide Related Changes page name form
 141         this.$element.find( '.targetForm' ).detach();
 142
 143         // misc: limit, days, watchlist info msg
 144         this.$element.find( '.rclinks, .cldays, .wlinfo' ).detach();
 145
 146         if ( !this.$element.find( '.mw-recentchanges-table tr' ).length ) {
 147                 this.$element.find( '.mw-recentchanges-table' ).detach();
 148                 this.$element.find( 'hr' ).detach();
 149         }
 150
 151         // Get rid of all <br>s, which are inside rcshowhide
 152         // If we still have content in rcshowhide, the <br>s are
 153         // gone. Instead, the CSS now has a rule to mark all <span>s
 154         // inside .rcshowhide with display:block; to simulate newlines
 155         // where they're actually needed.
 156         this.$element.find( 'br' ).detach();
 157         if ( !this.$element.find( '.rcshowhide' ).contents().length ) {
 158                 this.$element.find( '.rcshowhide' ).detach();
 159         }
 160
 161         if ( this.$element.find( '.cloption' ).text().trim() === '' ) {
 162                 this.$element.find( '.cloption-submit' ).detach();
 163         }
 164
 165         this.$element.find(
 166                 '.rclistfrom, .rcnotefrom, .rcoptions-listfromreset'
 167         ).detach();
 168
 169         // Get rid of the legend
 170         this.$element.find( 'legend' ).detach();
 171
 172         // Check if the element is essentially empty, and detach it if it is
 173         if ( !this.$element.text().trim().length ) {
 174                 this.$element.detach();
 175         }
 176 };
 177
 178 module.exports = FormWrapperWidget;