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
  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( mw.rcfilters.ui.FormWrapperWidget, OO.ui.Widget );
  49
  50         /**
  51          * Respond to link click
  52          *
  53          * @param {jQuery.Event} e Event
  54          * @return {boolean} false
  55          */
  56         mw.rcfilters.ui.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         mw.rcfilters.ui.FormWrapperWidget.prototype.onFormSubmit = function ( e ) {
  68                 var data = {};
  69
  70                 // Collect all data from form
  71                 $( e.target ).find( 'input:not([type="hidden"],[type="submit"]), select' ).each( function () {
  72                         var value = '';
  73
  74                         if ( !$( this ).is( ':checkbox' ) || $( this ).is( ':checked' ) ) {
  75                                 value = $( this ).val();
  76                         }
  77
  78                         data[ $( this ).prop( 'name' ) ] = value;
  79                 } );
  80
  81                 this.controller.updateChangesList( data );
  82                 return false;
  83         };
  84
  85         /**
  86          * Respond to model invalidate
  87          */
  88         mw.rcfilters.ui.FormWrapperWidget.prototype.onChangesModelInvalidate = function () {
  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          * @param {boolean} isInitialDOM Whether $changesListContent is the existing (already attached) DOM
  99          */
 100         mw.rcfilters.ui.FormWrapperWidget.prototype.onChangesModelUpdate = function ( $changesList, $fieldset, isInitialDOM ) {
 101                 this.$submitButton.prop( 'disabled', false );
 102
 103                 // Replace the entire fieldset
 104                 this.$element.empty().append( $fieldset.contents() );
 105
 106                 if ( !isInitialDOM ) {
 107                         // Make sure enhanced RC re-initializes correctly
 108                         mw.hook( 'wikipage.content' ).fire( this.$element );
 109                 }
 110
 111                 this.cleanUpFieldset();
 112         };
 113
 114         /**
 115          * Clean up the old-style show/hide that we have implemented in the filter list
 116          */
 117         mw.rcfilters.ui.FormWrapperWidget.prototype.cleanUpFieldset = function () {
 118                 var $namespaceSelect = this.$element.find( '#namespace' );
 119
 120                 this.$element.find( '.rcshowhideoption[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                 if ( mw.config.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ) ) {
 135                         $namespaceSelect.closest( 'tr' ).detach();
 136                         this.$element.find( '.mw-tagfilter-label' ).closest( 'tr' ).detach();
 137                 }
 138
 139                 // Hide limit and days
 140                 this.$element.find( '.rclinks' ).detach();
 141
 142                 if ( !this.$element.find( '.mw-recentchanges-table tr' ).length ) {
 143                         this.$element.find( '.mw-recentchanges-table' ).detach();
 144                         this.$element.find( 'hr' ).detach();
 145                 }
 146                 if ( !this.$element.find( '.rcshowhide' ).contents().length ) {
 147                         this.$element.find( '.rcshowhide' ).detach();
 148                         // If we're hiding rcshowhide, the '<br>'s are around it,
 149                         // there's no need for them either.
 150                         this.$element.find( 'br' ).detach();
 151                 }
 152         };
 153 }( mediaWiki ) );