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

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