2 * Wrapper for the RC form with hide/show links
3 * Must be constructed after the model is initialized.
5 * @class mw.rcfilters.ui.FormWrapperWidget
6 * @extends OO.ui.Widget
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
15 var FormWrapperWidget
= function MwRcfiltersUiFormWrapperWidget( filtersModel
, changeListModel
, controller
, $formRoot
, config
) {
16 config
= config
|| {};
19 FormWrapperWidget
.parent
.call( this, $.extend( {}, config
, {
23 this.changeListModel
= changeListModel
;
24 this.filtersModel
= filtersModel
;
25 this.controller
= controller
;
26 this.$submitButton
= this.$element
.find( 'form input[type=submit]' );
29 .on( 'click', 'a[data-params]', this.onLinkClick
.bind( this ) );
32 .on( 'submit', 'form', this.onFormSubmit
.bind( this ) );
35 this.changeListModel
.connect( this, {
36 invalidate
: 'onChangesModelInvalidate',
37 update
: 'onChangesModelUpdate'
41 this.cleanUpFieldset();
43 .addClass( 'mw-rcfilters-ui-FormWrapperWidget' );
48 OO
.inheritClass( FormWrapperWidget
, OO
.ui
.Widget
);
51 * Respond to link click
53 * @param {jQuery.Event} e Event
54 * @return {boolean} false
56 FormWrapperWidget
.prototype.onLinkClick = function ( e
) {
57 this.controller
.updateChangesList( $( e
.target
).data( 'params' ) );
62 * Respond to form submit event
64 * @param {jQuery.Event} e Event
65 * @return {boolean} false
67 FormWrapperWidget
.prototype.onFormSubmit = function ( e
) {
70 // Collect all data from the form
71 $( e
.target
).find( 'input, select' ).each( function () {
72 if ( this.type
=== 'hidden' || this.type
=== 'submit' ) {
76 if ( this.type
=== 'checkbox' && !this.checked
) {
77 // Use a fixed value for unchecked checkboxes.
78 data
[ this.name
] = '';
80 // Use the live value for select, checked checkboxes, or non-checkbox input.
81 data
[ this.name
] = $( this ).val();
85 this.controller
.updateChangesList( data
);
90 * Respond to model invalidate
92 FormWrapperWidget
.prototype.onChangesModelInvalidate = function () {
93 this.$submitButton
.prop( 'disabled', true );
97 * Respond to model update, replace the show/hide links with the ones from the
98 * server so they feature the correct state.
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
105 FormWrapperWidget
.prototype.onChangesModelUpdate = function ( $changesList
, $fieldset
, noResultsDetails
, isInitialDOM
) {
106 this.$submitButton
.prop( 'disabled', false );
108 // Replace the entire fieldset
109 this.$element
.empty().append( $fieldset
.contents() );
111 if ( !isInitialDOM
) {
112 // Make sure enhanced RC re-initializes correctly
113 mw
.hook( 'wikipage.content' ).fire( this.$element
);
116 this.cleanUpFieldset();
120 * Clean up the old-style show/hide that we have implemented in the filter list
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
);
132 // Remove the span itself
133 this.parentNode
.removeChild( this );
136 // Hide namespaces and tags
137 this.$element
.find( '.namespaceForm' ).detach();
138 this.$element
.find( '.mw-tagfilter-label' ).closest( 'tr' ).detach();
140 // Hide Related Changes page name form
141 this.$element
.find( '.targetForm' ).detach();
143 // misc: limit, days, watchlist info msg
144 this.$element
.find( '.rclinks, .cldays, .wlinfo' ).detach();
146 if ( !this.$element
.find( '.mw-recentchanges-table tr' ).length
) {
147 this.$element
.find( '.mw-recentchanges-table' ).detach();
148 this.$element
.find( 'hr' ).detach();
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();
161 if ( this.$element
.find( '.cloption' ).text().trim() === '' ) {
162 this.$element
.find( '.cloption-submit' ).detach();
166 '.rclistfrom, .rcnotefrom, .rcoptions-listfromreset'
169 // Get rid of the legend
170 this.$element
.find( 'legend' ).detach();
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();
178 module
.exports
= FormWrapperWidget
;