Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/248483
Change subject: [BREAKING CHANGE] Turn Element#gatherPreInfuseState into a
static method
......................................................................
[BREAKING CHANGE] Turn Element#gatherPreInfuseState into a static method
This is a prerequisite for being able to reuse parts of DOM when
infusing (T114408), which will improve interoperability with browsers'
form autofilling features and is likely to improve performance.
Because the DOM reuse would have to happen in the constructor, and
because it will destroy some of the state we're trying to preserve (in
particular, detaching a node will lose its focus), we need to do the
gathering before constructing the widget.
Change-Id: I429548772d7a829806b291825589960f2f32de0c
---
M src/Element.js
M src/widgets/CheckboxInputWidget.js
M src/widgets/InputWidget.js
M src/widgets/RadioInputWidget.js
M src/widgets/RadioSelectInputWidget.js
M src/widgets/TextInputWidget.js
6 files changed, 91 insertions(+), 79 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/83/248483/1
diff --git a/src/Element.js b/src/Element.js
index 01f52ba..f1299fd 100644
--- a/src/Element.js
+++ b/src/Element.js
@@ -201,10 +201,10 @@
}
}
} );
+ // pick up dynamic state, like focus, value of form inputs, scroll
position, etc.
+ state = cls.static.gatherPreInfuseState( $elem, data );
// jscs:disable requireCapitalizedConstructors
obj = new cls( data ); // rebuild widget
- // pick up dynamic state, like focus, value of form inputs, scroll
position, etc.
- state = obj.gatherPreInfuseState( $elem );
// now replace old DOM with this new DOM.
if ( top ) {
$elem.replaceWith( obj.$element );
@@ -220,6 +220,24 @@
// restore dynamic state after the new element is inserted into DOM
domPromise.done( obj.restorePreInfuseState.bind( obj, state ) );
return obj;
+};
+
+/**
+ * Gather the dynamic state (focus, value of form inputs, scroll position,
etc.) of a HTML DOM node
+ * (and its children) that represent an Element of the same class and the
given configuration,
+ * generated by the PHP implementation.
+ *
+ * This method is called just before `node` is detached from the DOM. The
return value of this
+ * function will be passed to #restorePreInfuseState after the newly created
widget's #$element
+ * is inserted into DOM to replace `node`.
+ *
+ * @protected
+ * @param {HTMLElement} node
+ * @param {Object} config
+ * @return {Object}
+ */
+OO.ui.Element.static.gatherPreInfuseState = function () {
+ return {};
};
/**
@@ -798,23 +816,6 @@
*/
OO.ui.Element.prototype.scrollElementIntoView = function ( config ) {
return OO.ui.Element.static.scrollIntoView( this.$element[ 0 ], config
);
-};
-
-/**
- * Gather the dynamic state (focus, value of form inputs, scroll position,
etc.) of a HTML DOM node
- * (and its children) that represent an Element of the same type and
configuration as the current
- * one, generated by the PHP implementation.
- *
- * This method is called just before `node` is detached from the DOM. The
return value of this
- * function will be passed to #restorePreInfuseState after this widget's
#$element is inserted into
- * DOM to replace `node`.
- *
- * @protected
- * @param {HTMLElement} node
- * @return {Object}
- */
-OO.ui.Element.prototype.gatherPreInfuseState = function () {
- return {};
};
/**
diff --git a/src/widgets/CheckboxInputWidget.js
b/src/widgets/CheckboxInputWidget.js
index e10fffa..853ef81 100644
--- a/src/widgets/CheckboxInputWidget.js
+++ b/src/widgets/CheckboxInputWidget.js
@@ -58,6 +58,20 @@
OO.inheritClass( OO.ui.CheckboxInputWidget, OO.ui.InputWidget );
+/* Static Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.CheckboxInputWidget.static.gatherPreInfuseState = function ( node,
config ) {
+ var
+ state =
OO.ui.CheckboxInputWidget.parent.static.gatherPreInfuseState( node, config ),
+ $input = $( node ).find( '.oo-ui-inputWidget-input' );
+ state.$input = $input; // shortcut for performance, used in InputWidget
+ state.checked = $input.prop( 'checked' );
+ return state;
+};
+
/* Methods */
/**
@@ -110,18 +124,6 @@
this.setSelected( selected );
}
return this.selected;
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.CheckboxInputWidget.prototype.gatherPreInfuseState = function ( node ) {
- var
- state =
OO.ui.CheckboxInputWidget.parent.prototype.gatherPreInfuseState.call( this,
node ),
- $input = $( node ).find( '.oo-ui-inputWidget-input' );
- state.$input = $input; // shortcut for performance, used in InputWidget
- state.checked = $input.prop( 'checked' );
- return state;
};
/**
diff --git a/src/widgets/InputWidget.js b/src/widgets/InputWidget.js
index 3fd5fa5..9702e0e 100644
--- a/src/widgets/InputWidget.js
+++ b/src/widgets/InputWidget.js
@@ -67,6 +67,21 @@
OO.ui.InputWidget.static.supportsSimpleLabel = true;
+/* Static Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.InputWidget.static.gatherPreInfuseState = function ( node, config ) {
+ var
+ state = OO.ui.InputWidget.parent.static.gatherPreInfuseState(
node, config ),
+ $input = state.$input || $( node ).find(
'.oo-ui-inputWidget-input' );
+ state.value = $input.val();
+ // Might be better in TabIndexedElement, but it's awkward to do there
because mixins are awkward
+ state.focus = $input.is( ':focus' );
+ return state;
+};
+
/* Events */
/**
@@ -243,19 +258,6 @@
OO.ui.InputWidget.prototype.blur = function () {
this.$input[ 0 ].blur();
return this;
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.InputWidget.prototype.gatherPreInfuseState = function ( node ) {
- var
- state =
OO.ui.InputWidget.parent.prototype.gatherPreInfuseState.call( this, node ),
- $input = state.$input || $( node ).find(
'.oo-ui-inputWidget-input' );
- state.value = $input.val();
- // Might be better in TabIndexedElement, but it's awkward to do there
because mixins are awkward
- state.focus = $input.is( ':focus' );
- return state;
};
/**
diff --git a/src/widgets/RadioInputWidget.js b/src/widgets/RadioInputWidget.js
index 0b4d2ba..77498f4 100644
--- a/src/widgets/RadioInputWidget.js
+++ b/src/widgets/RadioInputWidget.js
@@ -58,6 +58,20 @@
OO.inheritClass( OO.ui.RadioInputWidget, OO.ui.InputWidget );
+/* Static Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.RadioInputWidget.static.gatherPreInfuseState = function ( node, config )
{
+ var
+ state =
OO.ui.RadioInputWidget.parent.static.gatherPreInfuseState( node, config ),
+ $input = $( node ).find( '.oo-ui-inputWidget-input' );
+ state.$input = $input; // shortcut for performance, used in InputWidget
+ state.checked = $input.prop( 'checked' );
+ return state;
+};
+
/* Methods */
/**
@@ -94,18 +108,6 @@
*/
OO.ui.RadioInputWidget.prototype.isSelected = function () {
return this.$input.prop( 'checked' );
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.RadioInputWidget.prototype.gatherPreInfuseState = function ( node ) {
- var
- state =
OO.ui.RadioInputWidget.parent.prototype.gatherPreInfuseState.call( this, node ),
- $input = $( node ).find( '.oo-ui-inputWidget-input' );
- state.$input = $input; // shortcut for performance, used in InputWidget
- state.checked = $input.prop( 'checked' );
- return state;
};
/**
diff --git a/src/widgets/RadioSelectInputWidget.js
b/src/widgets/RadioSelectInputWidget.js
index f489a6e..4ac6ece 100644
--- a/src/widgets/RadioSelectInputWidget.js
+++ b/src/widgets/RadioSelectInputWidget.js
@@ -54,6 +54,18 @@
OO.ui.RadioSelectInputWidget.static.supportsSimpleLabel = false;
+/* Static Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.RadioSelectInputWidget.static.gatherPreInfuseState = function ( node,
config ) {
+ var state =
OO.ui.RadioSelectInputWidget.parent.static.gatherPreInfuseState( node, config );
+ state.value = $( node ).find( '.oo-ui-radioInputWidget
.oo-ui-inputWidget-input:checked' ).val();
+ return state;
+};
+
+
/* Methods */
/**
@@ -127,13 +139,4 @@
}
return this;
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.RadioSelectInputWidget.prototype.gatherPreInfuseState = function ( node
) {
- var state =
OO.ui.RadioSelectInputWidget.parent.prototype.gatherPreInfuseState.call( this,
node );
- state.value = $( node ).find( '.oo-ui-radioInputWidget
.oo-ui-inputWidget-input:checked' ).val();
- return state;
};
diff --git a/src/widgets/TextInputWidget.js b/src/widgets/TextInputWidget.js
index e09c78c..d1bcef0 100644
--- a/src/widgets/TextInputWidget.js
+++ b/src/widgets/TextInputWidget.js
@@ -177,6 +177,22 @@
integer: /^\d+$/
};
+/* Static Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.TextInputWidget.static.gatherPreInfuseState = function ( node, config ) {
+ var
+ state =
OO.ui.TextInputWidget.parent.static.gatherPreInfuseState( node, config ),
+ $input = $( node ).find( '.oo-ui-inputWidget-input' );
+ state.$input = $input; // shortcut for performance, used in InputWidget
+ if ( config.multiline ) {
+ state.scrollTop = $input.scrollTop();
+ }
+ return state;
+};
+
/* Events */
/**
@@ -697,20 +713,6 @@
this.$input.css( property, this.$label.outerWidth( true ) );
return this;
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.TextInputWidget.prototype.gatherPreInfuseState = function ( node ) {
- var
- state =
OO.ui.TextInputWidget.parent.prototype.gatherPreInfuseState.call( this, node ),
- $input = $( node ).find( '.oo-ui-inputWidget-input' );
- state.$input = $input; // shortcut for performance, used in InputWidget
- if ( this.multiline ) {
- state.scrollTop = $input.scrollTop();
- }
- return state;
};
/**
--
To view, visit https://gerrit.wikimedia.org/r/248483
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I429548772d7a829806b291825589960f2f32de0c
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
