*
* @class
* @extends OO.ui.InputWidget
+ * @mixins OO.ui.mixin.IndicatorElement
*
* @constructor
* @param {Object} [config] Configuration options
}
// Properties (must be set before parent constructor, which calls #setValue)
- this.handle = new OO.ui.LabelWidget();
+ this.$handle = $( '<div>' );
+ this.label = new OO.ui.LabelWidget();
this.textInput = new OO.ui.TextInputWidget( {
required: config.required,
placeholder: placeholder,
// Parent constructor
mw.widgets.DateInputWidget.parent.call( this, config );
+ // Mixin constructors
+ OO.ui.mixin.IndicatorElement.call( this, config );
+
// Events
this.calendar.connect( this, {
change: 'onCalendarChange'
this.calendar.$element.on( {
keypress: this.onCalendarKeyPress.bind( this )
} );
- this.handle.$element.on( {
+ this.$handle.on( {
click: this.onClick.bind( this ),
keypress: this.onKeyPress.bind( this )
} );
// Initialization
// Move 'tabindex' from this.$input (which is invisible) to the visible handle
- this.setTabIndexedElement( this.handle.$element );
- this.handle.$element
+ this.setTabIndexedElement( this.$handle );
+ this.$handle
+ .append( this.label.$element, this.$indicator )
.addClass( 'mw-widget-dateInputWidget-handle' );
this.calendar.$element
.addClass( 'mw-widget-dateInputWidget-calendar' );
this.$element
.addClass( 'mw-widget-dateInputWidget' )
- .append( this.handle.$element, this.textInput.$element, this.calendar.$element );
+ .append( this.$handle, this.textInput.$element, this.calendar.$element );
if ( config.$overlay ) {
this.calendar.setFloatableContainer( this.$element );
/* Inheritance */
OO.inheritClass( mw.widgets.DateInputWidget, OO.ui.InputWidget );
+ OO.mixinClass( mw.widgets.DateInputWidget, OO.ui.mixin.IndicatorElement );
/* Methods */
if ( this.getValue() === '' ) {
this.textInput.setValue( '' );
this.calendar.setDate( null );
- this.handle.setLabel( mw.msg( 'mw-widgets-dateinput-no-date' ) );
+ this.label.setLabel( mw.msg( 'mw-widgets-dateinput-no-date' ) );
this.$element.addClass( 'mw-widget-dateInputWidget-empty' );
} else {
if ( !this.inTextInput ) {
if ( !this.inCalendar ) {
this.calendar.setDate( this.getValue() );
}
- this.handle.setLabel( this.getMoment().format( this.getDisplayFormat() ) );
+ this.label.setLabel( this.getMoment().format( this.getDisplayFormat() ) );
this.$element.removeClass( 'mw-widget-dateInputWidget-empty' );
}
};
*/
mw.widgets.DateInputWidget.prototype.deactivate = function () {
this.$element.removeClass( 'mw-widget-dateInputWidget-active' );
- this.handle.toggle( true );
+ this.$handle.show();
this.textInput.toggle( false );
this.calendar.toggle( false );
this.setValidityFlag();
mw.widgets.DateInputWidget.prototype.activate = function () {
this.calendar.resetUI();
this.$element.addClass( 'mw-widget-dateInputWidget-active' );
- this.handle.toggle( false );
+ this.$handle.hide();
this.textInput.toggle( true );
this.calendar.toggle( true );
mw.widgets.DateInputWidget.prototype.onCalendarKeyPress = function ( e ) {
if ( !this.isDisabled() && e.which === OO.ui.Keys.ENTER ) {
this.deactivate();
- this.handle.$element.focus();
+ this.$handle.focus();
return false;
}
};
*/
mw.widgets.DateInputWidget.prototype.onEnter = function () {
this.deactivate();
- this.handle.$element.focus();
+ this.$handle.focus();
};
/**
}
}
+@indicator-size: unit(12 / 16 / 0.8, em);
+
.mw-widget-dateInputWidget {
display: inline-block;
position: relative;
width: 100%;
display: inline-block;
cursor: pointer;
+ position: relative;
.oo-ui-unselectable();
.oo-ui-box-sizing(border-box);
+
+ > .oo-ui-indicatorElement-indicator {
+ display: none;
+ }
+ }
+
+ &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
}
&.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
background-color: white;
}
+ &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
+ width: @indicator-size;
+ margin: 0 0.775em;
+ }
+
> .oo-ui-textInputWidget input {
padding-left: 1em;
}
text-shadow: 0 1px 1px #fff;
border-color: #ddd;
background-color: #f3f3f3;
+
+ > .oo-ui-indicatorElement-indicator {
+ opacity: 0.2;
+ }
}
+
}
&.oo-ui-flaggedElement-invalid {