Daniel Werner has submitted this change and it was merged.
Change subject: (bug 48145) Applying input expander widget to TimeInput expert
......................................................................
(bug 48145) Applying input expander widget to TimeInput expert
Since for now, the input expander is just needed on the TimeInput expert, the
input expander
is initialized in the TimeInput expert. This will be refactored in future
change sets.
Change-Id: I35364583daf50bd1e67f8953731f8849a6705ced
---
M ValueView/ValueView.i18n.php
M ValueView/ValueView.resources.mw.php
M ValueView/ValueView.resources.php
M ValueView/resources/jquery.ui/jquery.ui.inputextender.js
M ValueView/resources/jquery.valueview/valueview.css
M ValueView/resources/jquery.valueview/valueview.experts/experts.TimeInput.js
M ValueView/tests/qunit/jquery.ui/jquery.ui.inputextender.tests.js
7 files changed, 122 insertions(+), 55 deletions(-)
Approvals:
Daniel Werner: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/ValueView/ValueView.i18n.php b/ValueView/ValueView.i18n.php
index bdb5cbc..a492cb8 100644
--- a/ValueView/ValueView.i18n.php
+++ b/ValueView/ValueView.i18n.php
@@ -43,6 +43,9 @@
// EmptyValue expert:
'valueview-expert-emptyvalue-empty' => 'empty',
+ 'valueview-preview-label' => 'will be displayed as:',
+ 'valueview-preview-novalue' => 'no valid value recognized',
+
'valueview-inputextender-showoptions' => 'show options',
'valueview-inputextender-hideoptions' => 'hide options',
);
@@ -58,6 +61,8 @@
'valueview-expert-unsupportedvalue-unsupporteddatatype' => 'Error shown
if a data value for a certain data type (see [[d:Wikidata:Glossary]]) should be
displayed or a form for creating one should be offered while this is not yet
possible from a technical point of view (e.g. because a valueview widget expert
handling data values for that data type has not yet been implemented).
Parameter $1 is the name of the data type which lacks support',
'valueview-expert-emptyvalue-empty' => 'Message expressing that there
is currently no value set in a jQuery valueview.
{{Identical|Empty}}',
+ 'valueview-preview-label' => 'Label displayed above the preview of a
value that is being entered by the user. The preview is the system\'s
interpretation of the specified value and - since there is no strict definition
for a user how to specify values - visualizes how the value will be displayed
later on after the value has been saved.',
+ 'valueview-preview-novalue' => 'Message displayed instead of an input
value\'s preview when no value is specified yet or when the specified value
could not be interpreted by the system.',
'valueview-inputextender-showoptions' => 'Message of the link displayed
next to an input element if there are detailed options for inputting a value.
This message is shown, when the options are currently invisible. By clicking
the link, the options are shown and can be adjusted.',
'valueview-inputextender-hideoptions' => 'Message of the link displayed
next to an input element if there are detailed options for inputting a value.
This message is shown, when the options are currently visible. By clicking the
link, the options will be hidden.',
);
diff --git a/ValueView/ValueView.resources.mw.php
b/ValueView/ValueView.resources.mw.php
index cf167bf..8b92f6d 100644
--- a/ValueView/ValueView.resources.mw.php
+++ b/ValueView/ValueView.resources.mw.php
@@ -104,6 +104,7 @@
'jquery.ui/jquery.ui.inputextender.css',
),
'dependencies' => array(
+ 'jquery.eachchange',
'jquery.ui.widget',
),
'messages' => array(
diff --git a/ValueView/ValueView.resources.php
b/ValueView/ValueView.resources.php
index 58fc807..93587a4 100644
--- a/ValueView/ValueView.resources.php
+++ b/ValueView/ValueView.resources.php
@@ -198,8 +198,12 @@
'jquery.valueview/valueview.experts/experts.TimeInput.js',
),
'dependencies' => array(
- 'jquery.valueview.experts.stringvalue',
'jquery.time.timeinput',
+ 'jquery.ui.inputextender',
+ ),
+ 'messages' => array(
+ 'valueview-preview-label',
+ 'valueview-preview-novalue',
),
),
diff --git a/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
b/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
index a97ce51..2d4956d 100644
--- a/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
+++ b/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
@@ -7,9 +7,15 @@
*
* @option {jQuery[]} [content] Default/"fixed" extender contents that always
should be visible as
* long as the extension itself is visible.
+ * Default value: []
*
* @option {jQuery[]} [extendedContent] Additional content that should only be
displayed after
* clicking on the extender link.
+ * Default value: []
+ *
+ * @option {boolean} [hideWhenInputEmpty] Whether all of the input extender's
contents shall be
+ * hidden when the associated input element is empty.
+ * Default value: true
*
* @option [messages] {Object} Strings used within the widget.
* Messages should be specified using mwMsgOrString(<resource loader
module message key>,
@@ -23,6 +29,7 @@
* Default value: 'hide options'
*
* @dependency jQuery.Widget
+ * @dependency jQuery.eachchange
*/
( function( $ ) {
'use strict';
@@ -39,7 +46,7 @@
*/
var IS_MODULE_LOADED = (
IS_MW_CONTEXT
- && $.inArray( 'jquery.wikibase.entityselector',
mw.loader.getModuleNames() ) !== -1
+ && $.inArray( 'jquery.ui.inputextender',
mw.loader.getModuleNames() ) !== -1
);
/**
@@ -62,6 +69,7 @@
options: {
content: [],
extendedContent: [],
+ hideWhenInputEmpty: true,
messages: {
'show options': mwMsgOrString(
'valueview-inputextender-showoptions', 'show options' ),
'hide options': mwMsgOrString(
'valueview-inputextender-hideoptions', 'hide options' )
@@ -158,11 +166,23 @@
this.element.add( this.$extender )
.on( 'focus.' + this.widgetName, function( event ) {
- self.showContent();
+ if( !self.options.hideWhenInputEmpty ||
self.element.val() !== '' || self._extended ) {
+ self.showContent();
+ }
} )
.on( 'blur.' + this.widgetName, function( event ) {
self.hideContent();
} );
+
+ if( this.options.hideWhenInputEmpty ) {
+ this.element.eachchange( function( event,
oldValue ) {
+ if( self.element.val() === '' &&
!self._extended ) {
+ self.hideContent();
+ } else if ( oldValue === '' ) {
+ self.showContent();
+ }
+ } );
+ }
this._draw();
},
@@ -205,12 +225,15 @@
if( this.$extendedContent.is( ':visible' ) ) {
this.$extendedContent.slideUp( 150, function() {
+ self._extended = false;
+ self.element.focus();
self.$extender.text(
self.options.messages['show options'] );
self._trigger( 'toggle' );
} );
} else {
- this.element.focus();
this.$extendedContent.slideDown( 150,
function() {
+ self._extended = true;
+ self.element.focus();
self.$extender.text(
self.options.messages['hide options'] );
self._trigger( 'toggle' );
} );
@@ -224,6 +247,9 @@
* @param {Function} [callback] Invoked as soon as the contents
are visible.
*/
showContent: function( callback ) {
+ if( this.$contentContainer.is( ':visible' ) ) {
+ return;
+ }
this.$contentContainer.fadeIn( 150, function() {
if( $.isFunction( callback ) ) {
callback();
@@ -237,6 +263,9 @@
* @param {Function} [callback] Invoked as soon as the contents
are hidden.
*/
hideContent: function( callback ) {
+ if( !this.$contentContainer.is( ':visible' ) ||
this._extended ) {
+ return;
+ }
this.$contentContainer.fadeOut( 150, function() {
if( $.isFunction( callback ) ) {
callback();
diff --git a/ValueView/resources/jquery.valueview/valueview.css
b/ValueView/resources/jquery.valueview/valueview.css
index cf9ca07..6bdf022 100644
--- a/ValueView/resources/jquery.valueview/valueview.css
+++ b/ValueView/resources/jquery.valueview/valueview.css
@@ -15,6 +15,10 @@
color: gray;
}
+.valueview .valueview-value {
+ position: relative;
+}
+
.valueview .valueview-input {
font-family: inherit;
font-size: inherit;
@@ -35,6 +39,14 @@
background-color: white;
}
+.valueview .valueview-preview-value {
+ font-size: 119%; /* Reset to default 100% */
+}
+
+.valueview .valueview-preview-novalue {
+ font-style: italic;
+}
+
.valueview-ineditmode.linkedsingleinputvalueview a,
.valueview-ineditmode.linkedsingleinputvalueview a {
/* make sure input box which still is inside a doesn't display text as
links */
diff --git
a/ValueView/resources/jquery.valueview/valueview.experts/experts.TimeInput.js
b/ValueView/resources/jquery.valueview/valueview.experts/experts.TimeInput.js
index 12c007c..479e4c0 100644
---
a/ValueView/resources/jquery.valueview/valueview.experts/experts.TimeInput.js
+++
b/ValueView/resources/jquery.valueview/valueview.experts/experts.TimeInput.js
@@ -5,7 +5,8 @@
* @author Daniel Werner < [email protected] >
* @author H. Snater < [email protected] >
*/
-( function( dv, vp, $, vv, Time ) {
+// TODO: Remove mediaWiki dependency
+( function( dv, vp, $, vv, Time, mw ) {
'use strict';
var PARENT = vv.Expert;
@@ -35,20 +36,79 @@
_newValue: null,
/**
+ * The preview section's node.
+ * @type {jQuery}
+ */
+ $preview: null,
+
+ /**
+ * The node of the previewed input value.
+ * @type {jQuery}
+ */
+ $previewValue: null,
+
+ /**
* @see jQuery.valueview.Expert._init
*/
_init: function() {
var self = this;
+
+ // TODO: Move preview out of the specific expert to a
more generic place
+ this.$preview = $( '<div/>' )
+ .addClass( 'valueview-preview' )
+ .append(
+ $( '<div/>' )
+ .addClass( 'valueview-preview-label' )
+ .text( mw.msg( 'valueview-preview-label' ) )
+ );
+
+ this.$previewValue = $( '<div/>' )
+ .addClass( 'valueview-preview-value' )
+ .appendTo( this.$preview );
this.$input = $( '<input/>', {
type: 'text',
'class': this.uiBaseClass + '-input
valueview-input'
} )
.appendTo( this.$viewPort )
+ .eachchange( function( event, oldValue ) {
+ var value = self.$input.data( 'timeinput'
).value();
+ if( oldValue === '' && value === null ||
self.$input.val() === '' ) {
+ self._updatePreview( null );
+ }
+ } )
.timeinput()
- .on( 'timeinputchange', function( event, value ) {
+ // TODO: Move input extender out of here to a more
generic place since it is not
+ // TimeInput specific.
+ .inputextender( { content: [ this.$preview ] } )
+ .on( 'timeinputupdate', function( event, value ) {
+ self._updatePreview( value );
self._viewNotifier.notify( 'change' );
} );
+ },
+
+ /**
+ * Updates the input value's preview.
+ * @since 0.1
+ *
+ * @param {time.Time|null} value
+ */
+ _updatePreview: function( value ) {
+ // No need to update the preview when the input value
is clear(ed) since the preview
+ // will be hidden anyway.
+ if( this.$input.val() === '' ) {
+ return;
+ }
+
+ if( value === null ) {
+ this.$previewValue
+ .addClass( 'valueview-preview-novalue' )
+ .text( mw.msg( 'valueview-preview-novalue' ) )
+ } else {
+ this.$previewValue
+ .removeClass( 'valueview-preview-novalue' )
+ .text( value.text() )
+ }
},
/**
@@ -114,6 +174,7 @@
if( this._newValue !== false ) {
this.$input.data( 'timeinput' ).value(
this._newValue );
+ this._updatePreview( this._newValue );
this._newValue = false;
}
},
@@ -134,4 +195,4 @@
} );
-}( dataValues, valueParsers, jQuery, jQuery.valueview, time.Time ) );
+}( dataValues, valueParsers, jQuery, jQuery.valueview, time.Time, mediaWiki )
);
diff --git a/ValueView/tests/qunit/jquery.ui/jquery.ui.inputextender.tests.js
b/ValueView/tests/qunit/jquery.ui/jquery.ui.inputextender.tests.js
index 4e6f739..598c654 100644
--- a/ValueView/tests/qunit/jquery.ui/jquery.ui.inputextender.tests.js
+++ b/ValueView/tests/qunit/jquery.ui/jquery.ui.inputextender.tests.js
@@ -9,6 +9,9 @@
( function( $, QUnit ) {
'use strict';
+ // TODO: Tests for toggling additional contents
+ // TODO: Tests for hideWhenInputEmptyOption
+
/**
* Factory for creating an input extender widget suitable for testing.
*/
@@ -77,54 +80,6 @@
QUnit.start();
} );
- } );
-
- QUnit.test( 'Toggle additional content', 4, function( assert ) {
- var $input = newTestInputextender(),
- extender = $input.data( 'inputextender' );
-
- var assertions = [
- function() {
- assert.ok(
- extender.$content.is( ':visible' ),
- 'Default content is still visible after
having clicked the extender link.'
- );
-
- assert.ok(
- extender.$extendedContent.is(
':visible' ),
- 'Additional content is visible after
having clicked the extender link.'
- );
- },
- function() {
- assert.ok(
- extender.$content.is( ':visible' ),
- 'Default content is still visible after
having clicked the extender link the second time.'
- );
-
- assert.ok(
- !extender.$extendedContent.is(
':visible' ),
- 'Additional content is hidden again
after having clicked the extender link the second time.'
- );
- }
- ];
-
- $input.on( 'inputextendertoggle', function( event ) {
- assertions[0]();
- $input
- .off( 'inputextendertoggle' )
- .on( 'inputextendertoggle', function( event ) {
- assertions[1]();
- QUnit.start();
- } );
- QUnit.start();
- } );
-
- // clicks will result into above event listeners being triggered
- QUnit.stop();
- extender.$extender.click();
-
- QUnit.stop();
- extender.$extender.click();
} );
}( jQuery, QUnit ) );
--
To view, visit https://gerrit.wikimedia.org/r/62152
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I35364583daf50bd1e67f8953731f8849a6705ced
Gerrit-PatchSet: 12
Gerrit-Project: mediawiki/extensions/DataValues
Gerrit-Branch: master
Gerrit-Owner: Henning Snater <[email protected]>
Gerrit-Reviewer: Daniel Werner <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
