Henning Snater has uploaded a new change for review.
https://gerrit.wikimedia.org/r/61978
Change subject: Introduced timeinput jQuery widget
......................................................................
Introduced timeinput jQuery widget
TimeInput expert uses new timeinput widget to capture time values.
Change-Id: Icc8ec0057520ef07cc2dd3bfdf008e740db530cb
---
M ValueView/ValueView.resources.mw.php
M ValueView/ValueView.resources.php
M ValueView/ValueView.tests.qunit.php
A ValueView/resources/jquery.time/jquery.time.timeinput.js
A ValueView/tests/qunit/jquery.time/jquery.time.timeinput.tests.js
5 files changed, 208 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/DataValues
refs/changes/78/61978/1
diff --git a/ValueView/ValueView.resources.mw.php
b/ValueView/ValueView.resources.mw.php
index 0f1d6b5..83a816e 100644
--- a/ValueView/ValueView.resources.mw.php
+++ b/ValueView/ValueView.resources.mw.php
@@ -84,6 +84,17 @@
'jquery.ui.autocomplete'
)
),
+
+ 'jquery.time.timeinput' => $moduleTemplate + array(
+ 'scripts' => array(
+ 'jquery.time/jquery.time.timeinput.js',
+ ),
+ 'dependencies' => array(
+ 'jquery.ui.widget',
+ 'jquery.eachchange',
+ 'time.js'
+ ),
+ ),
);
// return jQuery.valueview's native resources plus those required by
the MW extension:
diff --git a/ValueView/ValueView.resources.php
b/ValueView/ValueView.resources.php
index 95c39be..91b02ba 100644
--- a/ValueView/ValueView.resources.php
+++ b/ValueView/ValueView.resources.php
@@ -180,9 +180,9 @@
'jquery.valueview/valueview.experts/experts.TimeValue.js',
),
'dependencies' => array(
+ 'jquery.time.timeinput',
'jquery.valueview.experts.staticdom',
'jquery.valueview.BifidExpert',
- 'jquery.valueview.experts.stringvalue',
),
),
diff --git a/ValueView/ValueView.tests.qunit.php
b/ValueView/ValueView.tests.qunit.php
index c0bc370..8123865 100644
--- a/ValueView/ValueView.tests.qunit.php
+++ b/ValueView/ValueView.tests.qunit.php
@@ -53,6 +53,15 @@
),
),
+ 'jquery.time.timeinput.tests' => array(
+ 'scripts' => array(
+
"$bp/jquery.time/jquery.time.timeinput.tests.js",
+ ),
+ 'dependencies' => array(
+ 'jquery.time.timeinput',
+ ),
+ ),
+
'jquery.ui.suggester.tests' => array(
'scripts' => array(
"$bp/jquery.ui/jquery.ui.suggester.tests.js",
diff --git a/ValueView/resources/jquery.time/jquery.time.timeinput.js
b/ValueView/resources/jquery.time/jquery.time.timeinput.js
new file mode 100644
index 0000000..4e061c5
--- /dev/null
+++ b/ValueView/resources/jquery.time/jquery.time.timeinput.js
@@ -0,0 +1,102 @@
+/**
+ * Input element that interprets time values.
+ *
+ * @licence GNU GPL v2+
+ * @author H. Snater < [email protected] >
+ *
+ * @event change: Triggered whenever the widget's value has changed.
+ * (1) {jQuery.Event}
+ * (2) {time.Time|null} New value (null for no or an invalid value) the
widget's value has
+ * been changed to.
+ *
+ * @dependency jQuery.ui.Widget
+ * @dependency jQuery.eachchange
+ * @dependency time.Time
+ */
+( function( $, Time ) {
+ 'use strict';
+
+ $.widget( 'time.timeinput', {
+ /**
+ * Caches the widget's current value.
+ * @type {time.Time|null}
+ */
+ _value: null,
+
+ /**
+ * @see jQuery.ui.autocomplete._create
+ */
+ _create: function() {
+ var self = this;
+
+ this.element.addClass( this.widgetName );
+
+ this.element.eachchange( function( event, oldValue ) {
+ var value = self._parse();
+ if( value !== self._value ) {
+ self._value = value;
+ self._trigger( 'change', null,
[self._value] );
+ }
+ } );
+ },
+
+ /**
+ * @see jQuery.ui.Widget.destroy
+ */
+ destroy: function() {
+ this.element.removeClass( this.widgetName );
+ $.ui.Widget.prototype.destroy.call( this );
+ },
+
+ /**
+ * Parses the current input value.
+ *
+ * @return {time.Time|null} Time object when parsing was
successful.
+ */
+ _parse: function() {
+ var timeValue = new Time( this.element.val() );
+ return ( timeValue.isValid() ) ? timeValue : null;
+ },
+
+ /**
+ * Sets/Gets the widget's value.
+ *
+ * @param {time.Time} [value]
+ * @returns {time.Time|null}
+ */
+ value: function( value ) {
+ if( value === undefined ) {
+ return this._value;
+ }
+
+ if( value !== null && ( !( value instanceof Time ) ||
!value.isValid() ) ) {
+ throw new Error( 'Cannot set value: Neither
valid Time object nor \'null\' given.' );
+ }
+
+ if( value === null ) {
+ this.element.val( '' );
+ } else {
+ this.element.val( value.text() );
+ }
+
+ this._value = value;
+ return this._value;
+ },
+
+ /**
+ * Disables the widget.
+ */
+ disable: function() {
+ this.element.prop( 'disabled', true ).addClass(
'ui-state-disabled' );
+ },
+
+ /**
+ * Enables the widget.
+ */
+ enable: function() {
+ this.element.prop( 'disabled', false ).removeClass(
'ui-state-disabled' );
+ }
+
+ } );
+
+} )( jQuery, time.Time );
diff --git a/ValueView/tests/qunit/jquery.time/jquery.time.timeinput.tests.js
b/ValueView/tests/qunit/jquery.time/jquery.time.timeinput.tests.js
new file mode 100644
index 0000000..78d4f5a
--- /dev/null
+++ b/ValueView/tests/qunit/jquery.time/jquery.time.timeinput.tests.js
@@ -0,0 +1,85 @@
+/**
+ * @since 0.1
+ * @ingroup ValueView
+ *
+ * @licence GNU GPL v2+
+ * @author H. Snater < [email protected] >
+ */
+
+( function( $, Time, QUnit ) {
+ 'use strict';
+
+ /**
+ * Factory for creating a jQuery.time.timeinput widget suitable for
testing.
+ */
+ var newTestTimeinput = function( options ) {
+ return $( '<input/>' ).addClass( 'test_timeinput' ).timeinput(
options );
+ };
+
+ QUnit.module( 'jquery.time.timeinput', QUnit.newMwEnvironment( {
+ teardown: function() {
+ $( '.test_timeinput' ).remove();
+ }
+ } ) );
+
+ QUnit.test( 'Input interpretation', function( assert ) {
+ var $input = newTestTimeinput(),
+ inputEvent = $.Event( 'input' ),
+ keydownEvent = $.Event( 'keydown' );
+
+ var assertValue = function( value ) {
+ assert.ok(
+ value instanceof Time,
+ 'Recognized time value.'
+ );
+ };
+
+ $input.on( 'timeinputchange', function( event, value ) {
+ assertValue( value );
+ } );
+
+ // Just test a valid date string (no use for testing the time
parser).
+ // Issuing "input" and "keydown" event to trigger "eachchange"
in the various browsers.
+ $input.val( '1.1.1980' ).trigger( inputEvent ).trigger(
keydownEvent );
+
+ assertValue = function( value ) {
+ assert.equal(
+ value,
+ null,
+ 'Emptied input value.'
+ );
+ };
+
+ $input.val( '' ).trigger( inputEvent ).trigger( keydownEvent );
+ } );
+
+ QUnit.test( 'value()', function( assert ) {
+ var $input = newTestTimeinput();
+
+ assert.equal(
+ $input.data( 'timeinput' ).value(),
+ null,
+ 'No value set.'
+ );
+
+ assert.throws(
+ function() {
+ $input.data( 'timeinput' ).value( 'asdf' );
+ },
+ Error,
+ 'Throwing error when trying to set incompatible value.'
+ );
+
+ assert.ok(
+ $input.data( 'timeinput' ).value( new Time( '1.1.1980'
) ) instanceof Time,
+ 'Set time value.'
+ );
+
+ assert.ok(
+ $input.data( 'timeinput' ).value() instanceof Time,
+ 'Checked set time value.'
+ );
+
+ } );
+
+}( jQuery, time.Time, QUnit ) );
--
To view, visit https://gerrit.wikimedia.org/r/61978
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icc8ec0057520ef07cc2dd3bfdf008e740db530cb
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/DataValues
Gerrit-Branch: master
Gerrit-Owner: Henning Snater <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
