3 * Wrapper for the RC form with hide/show links
4 * Must be constructed after the model is initialized.
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 mw
.rcfilters
.ui
.FormWrapperWidget
= function MwRcfiltersUiFormWrapperWidget( filtersModel
, changeListModel
, controller
, $formRoot
, config
) {
16 config
= config
|| {};
19 mw
.rcfilters
.ui
.FormWrapperWidget
.parent
.call( this, $.extend( {}, config
, {
23 OO
.ui
.mixin
.PendingElement
.call( this, config
);
25 this.changeListModel
= changeListModel
;
26 this.filtersModel
= filtersModel
;
27 this.controller
= controller
;
28 this.$submitButton
= this.$element
.find( 'form input[type=submit]' );
31 .on( 'click', 'a[data-params]', this.onLinkClick
.bind( this ) );
34 .on( 'submit', 'form', this.onFormSubmit
.bind( this ) );
37 this.changeListModel
.connect( this, {
38 invalidate
: 'onChangesModelInvalidate',
39 update
: 'onChangesModelUpdate'
43 this.cleanUpFieldset();
45 .addClass( 'mw-rcfilters-ui-FormWrapperWidget' )
46 .addClass( 'mw-rcfilters-ui-ready' );
51 OO
.inheritClass( mw
.rcfilters
.ui
.FormWrapperWidget
, OO
.ui
.Widget
);
52 OO
.mixinClass( mw
.rcfilters
.ui
.FormWrapperWidget
, OO
.ui
.mixin
.PendingElement
);
55 * Respond to link click
57 * @param {jQuery.Event} e Event
58 * @return {boolean} false
60 mw
.rcfilters
.ui
.FormWrapperWidget
.prototype.onLinkClick = function ( e
) {
61 this.controller
.updateChangesList( $( e
.target
).data( 'params' ) );
66 * Respond to form submit event
68 * @param {jQuery.Event} e Event
69 * @return {boolean} false
71 mw
.rcfilters
.ui
.FormWrapperWidget
.prototype.onFormSubmit = function ( e
) {
74 // Collect all data from form
75 $( e
.target
).find( 'input:not([type="hidden"],[type="submit"]), select' ).each( function () {
76 if ( !$( this ).is( ':checkbox' ) || $( this ).is( ':checked' ) ) {
77 data
[ $( this ).prop( 'name' ) ] = $( this ).val();
81 this.controller
.updateChangesList( data
);
86 * Respond to model invalidate
88 mw
.rcfilters
.ui
.FormWrapperWidget
.prototype.onChangesModelInvalidate = function () {
90 this.$submitButton
.prop( 'disabled', true );
94 * Respond to model update, replace the show/hide links with the ones from the
95 * server so they feature the correct state.
97 * @param {jQuery|string} $changesList Updated changes list
98 * @param {jQuery} $fieldset Updated fieldset
100 mw
.rcfilters
.ui
.FormWrapperWidget
.prototype.onChangesModelUpdate = function ( $changesList
, $fieldset
) {
101 this.$submitButton
.prop( 'disabled', false );
103 // Replace the entire fieldset
104 this.$element
.empty().append( $fieldset
.contents() );
106 this.cleanUpFieldset();
112 * Clean up the old-style show/hide that we have implemented in the filter list
114 mw
.rcfilters
.ui
.FormWrapperWidget
.prototype.cleanUpFieldset = function () {
117 // HACK: Remove old-style filter links for filters handled by the widget
118 // Ideally the widget would handle all filters and we'd just remove .rcshowhide entirely
119 this.$element
.find( '.rcshowhide' ).children().each( function () {
120 // HACK: Interpret the class name to get the filter name
121 // This should really be set as a data attribute
124 // Some of the older browsers we support don't have .classList,
125 // so we have to interpret the class attribute manually.
126 classes
= this.getAttribute( 'class' ).split( ' ' );
127 for ( i
= 0; i
< classes
.length
; i
++ ) {
128 if ( classes
[ i
].substr( 0, 'rcshow'.length
) === 'rcshow' ) {
129 name
= classes
[ i
].substr( 'rcshow'.length
);
133 if ( name
=== null ) {
136 if ( name
=== 'hidemine' ) {
137 // HACK: the span for hidemyself is called hidemine
141 // This span corresponds to a filter that's in our model, so remove it
142 if ( widget
.filtersModel
.getItemByName( name
) ) {
143 // HACK: Remove the text node after the span.
144 // If there isn't one, we're at the end, so remove the text node before the span.
145 // This would be unnecessary if we added separators with CSS.
146 if ( this.nextSibling
&& this.nextSibling
.nodeType
=== Node
.TEXT_NODE
) {
147 this.parentNode
.removeChild( this.nextSibling
);
148 } else if ( this.previousSibling
&& this.previousSibling
.nodeType
=== Node
.TEXT_NODE
) {
149 this.parentNode
.removeChild( this.previousSibling
);
151 // Remove the span itself
152 this.parentNode
.removeChild( this );