Henning Snater has uploaded a new change for review.
https://gerrit.wikimedia.org/r/66068
Change subject: [coordinate.js] Implemented "coordinateinput" widget
......................................................................
[coordinate.js] Implemented "coordinateinput" widget
The "coordinateinput" jQuery widget extends an input element with the ability
to handle
coordinate values.
Change-Id: I3cecd8e16719215d633537f57801c79082278328
---
M ValueView/ValueView.resources.mw.php
M ValueView/ValueView.tests.qunit.php
A ValueView/resources/jquery.coordinate/jquery.coordinate.coordinateinput.js
A
ValueView/tests/qunit/jquery.coordinate/jquery.coordinate.coordinateinput.tests.js
4 files changed, 216 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/DataValues
refs/changes/68/66068/1
diff --git a/ValueView/ValueView.resources.mw.php
b/ValueView/ValueView.resources.mw.php
index 34f707f..11a4406 100644
--- a/ValueView/ValueView.resources.mw.php
+++ b/ValueView/ValueView.resources.mw.php
@@ -89,6 +89,17 @@
)
),
+ 'jquery.coordinate.coordinateinput' => $moduleTemplate + array(
+ 'scripts' => array(
+
'jquery.coordinate/jquery.coordinate.coordinateinput.js',
+ ),
+ 'dependencies' => array(
+ 'jquery.ui.widget',
+ 'jquery.eachchange',
+ 'coordinate.js',
+ ),
+ ),
+
'jquery.time.timeinput' => $moduleTemplate + array(
'scripts' => array(
'jquery.time/jquery.time.timeinput.js',
diff --git a/ValueView/ValueView.tests.qunit.php
b/ValueView/ValueView.tests.qunit.php
index 5760f42..0da1fec 100644
--- a/ValueView/ValueView.tests.qunit.php
+++ b/ValueView/ValueView.tests.qunit.php
@@ -63,6 +63,15 @@
),
),
+ 'jquery.coordinate.coordinateinput.tests' => array(
+ 'scripts' => array(
+
"$bp/jquery.coordinate/jquery.coordinate.coordinateinput.tests.js",
+ ),
+ 'dependencies' => array(
+ 'jquery.coordinate.coordinateinput',
+ ),
+ ),
+
'jquery.time.timeinput.tests' => array(
'scripts' => array(
"$bp/jquery.time/jquery.time.timeinput.tests.js",
diff --git
a/ValueView/resources/jquery.coordinate/jquery.coordinate.coordinateinput.js
b/ValueView/resources/jquery.coordinate/jquery.coordinate.coordinateinput.js
new file mode 100644
index 0000000..82ba4ef
--- /dev/null
+++ b/ValueView/resources/jquery.coordinate/jquery.coordinate.coordinateinput.js
@@ -0,0 +1,110 @@
+/**
+ * Input element that interprets coordinate values.
+ *
+ * @licence GNU GPL v2+
+ * @author H. Snater < [email protected] >
+ *
+ * @event update: Triggered whenever the widget's value is updated.
+ * (1) {jQuery.Event}
+ * (2) {coordinate.Coordinate|null} New value (null for no or an
invalid value) the widget's
+ * value has been changed to.
+ *
+ * @dependency jQuery.Widget
+ * @dependency jQuery.eachchange
+ * @dependency coordinate.Coordinate
+ */
+( function( $, Coordinate ) {
+ 'use strict';
+
+ $.widget( 'coordinate.coordinateinput', {
+ /**
+ * Caches the widget's current value.
+ * @type {coordinate.Coordinate|null}
+ */
+ _value: null,
+
+ /**
+ * @see jQuery.Widget._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( 'update', null,
[self._value] );
+ }
+ } );
+ },
+
+ /**
+ * @see jQuery.Widget.destroy
+ */
+ destroy: function() {
+ this.element.removeClass( this.widgetName );
+ $.Widget.prototype.destroy.call( this );
+ },
+
+ /**
+ * Parses the current input value.
+ *
+ * @return {coordinate.Coordinate|null} Coordinate object when
parsing was successful.
+ */
+ _parse: function() {
+ var coordinateValue;
+
+ try {
+ coordinateValue = new Coordinate(
this.element.val() );
+ } catch( e ) {
+ return null;
+ }
+
+ return ( coordinateValue.isValid() ) ? coordinateValue
: null;
+ },
+
+ /**
+ * Sets/Gets the widget's value.
+ *
+ * @param {coordinate.Coordinate} [value]
+ * @return {coordinate.Coordinate|null}
+ */
+ value: function( value ) {
+ if( value === undefined ) {
+ return this._value;
+ }
+
+ if( value !== null && ( !( value instanceof Coordinate
) || !value.isValid() ) ) {
+ throw new Error( 'Cannot set value: Neither
valid Coordinate object nor \'null\' ' +
+ 'given.' );
+ }
+
+ if( value === null ) {
+ this.element.val( '' );
+ } else {
+ this.element.val( value.degreeText() );
+ }
+
+ 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, coordinate.Coordinate );
diff --git
a/ValueView/tests/qunit/jquery.coordinate/jquery.coordinate.coordinateinput.tests.js
b/ValueView/tests/qunit/jquery.coordinate/jquery.coordinate.coordinateinput.tests.js
new file mode 100644
index 0000000..7abf60f
--- /dev/null
+++
b/ValueView/tests/qunit/jquery.coordinate/jquery.coordinate.coordinateinput.tests.js
@@ -0,0 +1,86 @@
+/**
+ * @since 0.1
+ * @ingroup ValueView
+ *
+ * @licence GNU GPL v2+
+ * @author H. Snater < [email protected] >
+ */
+
+( function( $, Coordinate, QUnit ) {
+ 'use strict';
+
+ /**
+ * Factory for creating a jQuery.coordinate.coordinateinput widget
suitable for testing.
+ */
+ var newTestCoordinateinput = function( options ) {
+ return $( '<input/>' ).addClass( 'test_coordinateinput'
).coordinateinput( options );
+ };
+
+ QUnit.module( 'jquery.coordinate.coordinateinput', {
+ teardown: function() {
+ $( '.test_coordinateinput' ).remove();
+ }
+ } );
+
+ QUnit.test( 'Input interpretation', function( assert ) {
+ var $input = newTestCoordinateinput(),
+ inputEvent = $.Event( 'input' ),
+ keydownEvent = $.Event( 'keydown' );
+
+ var assertValue = function( value ) {
+ assert.ok(
+ value instanceof Coordinate,
+ 'Recognized coordinate value.'
+ );
+ };
+
+ $input.on( 'coordinateinputupdate', function( event, value ) {
+ assertValue( value );
+ } );
+
+ // Just test a valid coordinate string (no need to test the
coordinate parser).
+ // Issuing "input" and "keydown" event to trigger "eachchange"
in the various browsers.
+ $input.val( '30, 30' ).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 = newTestCoordinateinput();
+
+ assert.equal(
+ $input.data( 'coordinateinput' ).value(),
+ null,
+ 'No value set.'
+ );
+
+ assert.throws(
+ function() {
+ $input.data( 'coordinateinput' ).value( 'asdf'
);
+ },
+ Error,
+ 'Throwing error when trying to set incompatible value.'
+ );
+
+ assert.ok(
+ $input.data( 'coordinateinput' ).value( new Coordinate(
'30, 30' ) )
+ instanceof Coordinate,
+ 'Set coordinate value.'
+ );
+
+ assert.ok(
+ $input.data( 'coordinateinput' ).value() instanceof
Coordinate,
+ 'Checked set coordinate value.'
+ );
+
+ } );
+
+}( jQuery, coordinate.Coordinate, QUnit ) );
--
To view, visit https://gerrit.wikimedia.org/r/66068
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3cecd8e16719215d633537f57801c79082278328
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
