2 * MediaWiki Widgets - ExpiryWidget class.
4 * @copyright 2018 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
11 * Creates a mw.widgets.ExpiryWidget object.
13 * @class mw.widgets.ExpiryWidget
14 * @extends OO.ui.Widget
17 * @param {Object} [config] Configuration options
19 mw
.widgets
.ExpiryWidget = function ( config
) {
20 var RFC2822
= 'ddd, DD MMM YYYY HH:mm:ss [GMT]';
22 // Config initialization
23 config
= $.extend( {}, config
);
25 this.relativeField
= new config
.RelativeInputClass( config
.relativeInput
);
26 this.relativeField
.$element
.addClass( 'mw-widget-ExpiryWidget-relative' );
29 mw
.widgets
.ExpiryWidget
.parent
.call( this, config
);
32 this.inputSwitch
= new OO
.ui
.ButtonSelectWidget( {
35 new OO
.ui
.ButtonOptionWidget( {
39 new OO
.ui
.ButtonOptionWidget( {
45 this.dateTimeField
= new mw
.widgets
.datetime
.DateTimeInputWidget( {
46 min
: new Date(), // The selected date must at least be now.
47 required
: config
.required
50 // Initially hide the dateTime field.
51 this.dateTimeField
.toggle( false );
52 // Initially set the relative input.
53 this.inputSwitch
.selectItemByData( 'relative' );
57 // Toggle the visible inputs.
58 this.inputSwitch
.on( 'choose', function ( event
) {
59 switch ( event
.getData() ) {
61 this.dateTimeField
.toggle( true );
62 this.relativeField
.toggle( false );
65 this.dateTimeField
.toggle( false );
66 this.relativeField
.toggle( true );
71 // When the date time field update, update the relative
73 this.dateTimeField
.on( 'change', function ( value
) {
76 // Do not alter the visible input.
77 if ( this.relativeField
.isVisible() ) {
81 // If the value was cleared, do not attempt to parse it.
83 this.relativeField
.setValue( value
);
87 datetime
= moment( value
);
89 // If the datetime is invlaid for some reason, reset the relative field.
90 if ( !datetime
.isValid() ) {
91 this.relativeField
.setValue( undefined );
94 // Set the relative field value. The field only accepts English strings.
95 this.relativeField
.setValue( datetime
.utc().locale( 'en' ).format( RFC2822
) );
98 // When the relative field update, update the date time field if it's a
99 // value that moment understands.
100 this.relativeField
.on( 'change', function ( event
) {
103 // Emit a change event for this widget.
104 this.emit( 'change', event
);
106 // Do not alter the visible input.
107 if ( this.dateTimeField
.isVisible() ) {
111 // Parsing of free text field may fail, so always check if the date is
113 datetime
= moment( event
);
115 if ( datetime
.isValid() ) {
116 this.dateTimeField
.setValue( datetime
.utc().toISOString() );
118 this.dateTimeField
.setValue( undefined );
124 .addClass( 'mw-widget-ExpiryWidget' )
125 .addClass( 'mw-widget-ExpiryWidget-hasDatePicker' )
127 this.inputSwitch
.$element
,
128 this.dateTimeField
.$element
,
129 this.relativeField
.$element
132 // Trigger an initial onChange.
133 this.relativeField
.emit( 'change', this.relativeField
.getValue() );
138 OO
.inheritClass( mw
.widgets
.ExpiryWidget
, OO
.ui
.Widget
);
143 mw
.widgets
.ExpiryWidget
.static.reusePreInfuseDOM = function ( node
, config
) {
144 var relativeElement
= $( node
).find( '.mw-widget-ExpiryWidget-relative' );
146 config
= mw
.widgets
.ExpiryWidget
.parent
.static.reusePreInfuseDOM( node
, config
);
148 if ( relativeElement
.hasClass( 'oo-ui-textInputWidget' ) ) {
149 config
.RelativeInputClass
= OO
.ui
.TextInputWidget
;
150 } else if ( relativeElement
.hasClass( 'mw-widget-selectWithInputWidget' ) ) {
151 config
.RelativeInputClass
= mw
.widgets
.SelectWithInputWidget
;
154 config
.relativeInput
= config
.RelativeInputClass
.static.reusePreInfuseDOM(
165 mw
.widgets
.ExpiryWidget
.static.gatherPreInfuseState = function ( node
, config
) {
166 var state
= mw
.widgets
.ExpiryWidget
.parent
.static.gatherPreInfuseState( node
, config
);
168 state
.relativeInput
= config
.RelativeInputClass
.static.gatherPreInfuseState(
169 $( node
).find( '.mw-widget-ExpiryWidget-relative' ),
179 mw
.widgets
.ExpiryWidget
.prototype.restorePreInfuseState = function ( state
) {
180 mw
.widgets
.ExpiryWidget
.parent
.prototype.restorePreInfuseState
.call( this, state
);
181 this.relativeField
.restorePreInfuseState( state
.relativeInput
);
187 mw
.widgets
.ExpiryWidget
.prototype.setDisabled = function ( disabled
) {
188 mw
.widgets
.ExpiryWidget
.parent
.prototype.setDisabled
.call( this, disabled
);
189 this.relativeField
.setDisabled( disabled
);
191 if ( this.inputSwitch
) {
192 this.inputSwitch
.setDisabled( disabled
);
195 if ( this.dateTimeField
) {
196 this.dateTimeField
.setDisabled( disabled
);
201 * Gets the value of the widget.
205 mw
.widgets
.ExpiryWidget
.prototype.getValue = function () {
206 return this.relativeField
.getValue();