Skip to content

Loading…

fix #288 placeholder and bindings #301

Closed
wants to merge 1 commit into from

2 participants

@flongo
Aria Templates member

When the placeholder was not set, bindings were broken.
Also, when setting the bound value to null, the placeholder was not being displayed.

@piuccio piuccio fix #288 placeholder and bindings
When the placeholder was not set, bindings were broken.
Also, when setting the bound value to null, the placeholder was not being displayed.
6f7b18a
@piuccio

Integrated in c05e6de

@piuccio piuccio closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 19, 2012
  1. @piuccio @flongo

    fix #288 placeholder and bindings

    piuccio committed with flongo
    When the placeholder was not set, bindings were broken.
    Also, when setting the bound value to null, the placeholder was not being displayed.
This page is out of date. Refresh to see the latest.
View
61 src/aria/html/TextInput.js
@@ -35,17 +35,6 @@
}
/**
- * Callback for handling placeholder after type.
- * @private
- */
- function setPlaceholderOnType () {
- // This is to display the placeholder when the text input value is empty
- if (!_placeholderSupported && this._cfg.placeholder) {
- this._setPlaceholder();
- }
- }
-
- /**
* Convert a keydown event into a type event. This is achieved adding a very short callback on keydown. The reason
* being the fact that on keydown the input has still the previous value. In the callback we'll see the correct text
* input value. This function should have the same scope as the widget instance.
@@ -105,16 +94,12 @@
this._hasFocus = false;
- if (this._cfg.placeholder) {
- if (!this._hasPlaceholder) {
- aria.utils.Json.setValue(bind.inside, bind.to, newValue, bind.cb);
- } else {
- aria.utils.Json.setValue(bind.inside, bind.to, "", bind.cb);
- }
- }
-
- if (!_placeholderSupported && this._cfg.placeholder) {
- this._setPlaceholder();
+ if (this._hasPlaceholder) {
+ // We're handling the placeholder. Set an empty string in the datamodel instead of the placeholder value
+ // Note that the placeholder is set by the type function, so we know the field must be empty
+ aria.utils.Json.setValue(bind.inside, bind.to, "", bind.cb);
+ } else {
+ aria.utils.Json.setValue(bind.inside, bind.to, newValue, bind.cb);
}
this._firstFocus = true;
@@ -184,7 +169,6 @@
cfg.attributes.type = (cfg.password) ? "password" : "text";
cfg.on = cfg.on || {};
-
_placeholderSupported = ("placeholder" in Aria.$window.document.createElement("input"));
if (cfg.placeholder && _placeholderSupported) {
cfg.attributes.placeholder = cfg.placeholder;
@@ -260,10 +244,7 @@
}
}
- var placeholder = this._cfg.placeholder;
- if (!_placeholderSupported && placeholder) {
- this._setPlaceholder();
- }
+ this._setPlaceholder();
},
/**
@@ -274,7 +255,8 @@
*/
onbind : function (name, value, oldValue) {
if (name === "value") {
- this._domElt.value = value;
+ this._domElt.value = (value != null) ? value : "";
+ this._setPlaceholder();
}
},
@@ -336,20 +318,23 @@
},
/**
- * Set the css class and value for placeholder. Used only in IE 6/7/8/9 and FF 3.6.
+ * Set the css class and value for placeholder if needed by browsers that don't support it natively. Used
+ * only in IE 6/7/8/9 and FF 3.6.
* @protected
*/
_setPlaceholder : function () {
- var element = this._domElt;
- if (element.value === "") {
- element.value = this._cfg.placeholder;
- var cssClass = new aria.utils.ClassList(element);
- cssClass.add('placeholder');
- cssClass.$dispose();
- if (this._hasFocus) {
- aria.utils.Caret.setPosition(element, 0, 0);
+ if (!_placeholderSupported && this._cfg.placeholder) {
+ var element = this._domElt;
+ if (element.value === "") {
+ element.value = this._cfg.placeholder;
+ var cssClass = new aria.utils.ClassList(element);
+ cssClass.add('placeholder');
+ cssClass.$dispose();
+ if (this._hasFocus) {
+ aria.utils.Caret.setPosition(element, 0, 0);
+ }
+ this._hasPlaceholder = true;
}
- this._hasPlaceholder = true;
}
},
@@ -384,7 +369,7 @@
});
this._chainListener(listeners, context, "type", {
- fn : setPlaceholderOnType,
+ fn : this._setPlaceholder,
scope : this
});
}
View
30 test/aria/html/textinput/placeholder/PlaceholderTestCase.js
@@ -21,16 +21,32 @@ Aria.classDefinition({
this.$TemplateTestCase.constructor.call(this);
this.element = null;
this.secondElement = null;
+ this.thirdElement = null;
this.cssClass = null;
this.cssClass2 = null;
+ this.cssClass3 = null;
this._placeholderSupported = null;
this._placeholderSupported = ("placeholder" in Aria.$window.document.createElement("input"));
+ this.data = {
+ location : '',
+ departure : '',
+ arrival : 'whatever',
+ click : 0,
+ clickNoAutoselect : 0
+ };
+
+ this.setTestEnv({
+ template : "test.aria.html.textinput.placeholder.PlaceholderTestCaseTpl",
+ data : this.data
+ });
},
$destructor : function () {
this.element = null;
this.secondElement = null;
+ this.thirdElement = null;
this.cssClass.$dispose();
this.cssClass2.$dispose();
+ this.cssClass3.$dispose();
this._placeholderSupported = null;
this.$TemplateTestCase.$destructor.call(this);
},
@@ -40,8 +56,10 @@ Aria.classDefinition({
var inputs = document.getElementsByTagName("input");
this.element = inputs[0];
this.secondElement = inputs[1];
+ this.thirdElement = inputs[2];
this.cssClass = new aria.utils.ClassList(this.element);
this.cssClass2 = new aria.utils.ClassList(this.secondElement);
+ this.cssClass3 = new aria.utils.ClassList(this.thirdElement);
// Check that in IE6/7/8/9 and FF 3.6 there is the css class 'placeholder' and the value inside the text
// input and for the other browser check the attributes placeholder
@@ -185,7 +203,19 @@ Aria.classDefinition({
this.assertEquals(this.secondElement.value, "Support placeholder", "The placeholder is not displayed");
this.assertTrue(this.cssClass2.contains("placeholder"), "Css class placeholder is not there");
this.assertEquals(this.templateCtxt._tpl.data.departure, "", "The value inside the data model is not empty");
+
+ this._testWhenDataChangeToNull();
+
+ },
+
+ _testWhenDataChangeToNull : function () {
+ aria.utils.Json.setValue(this.data, "arrival", "");
+ this.assertEquals(this.thirdElement.value, "Set arrival", "The placeholder is not displayed after nullifying the datamodel to which the widget is bound");
+ this.assertTrue(this.cssClass3.contains("placeholder"), "Css class placeholder is not there");
+
this.end();
+
}
+
}
})
View
11 test/aria/html/textinput/placeholder/PlaceholderTestCaseTpl.tpl
@@ -57,6 +57,17 @@
}
}/}
+ {@html:TextInput {
+ id: "texttestTwo",
+ placeholder : "Set arrival",
+ bind : {
+ value: {
+ inside: data,
+ to: "arrival"
+ }
+ }
+ }/}
+
</div>
<div id="outsideDiv">&nbsp;</div>
View
8 test/aria/html/textinput/placeholder/PlaceholderTestCaseTplScript.js
@@ -16,14 +16,6 @@
Aria.tplScriptDefinition({
$classpath : "test.aria.html.textinput.placeholder.PlaceholderTestCaseTplScript",
$prototype : {
- $dataReady : function () {
- this.data = {
- location : '',
- departure : '',
- click : 0,
- clickNoAutoselect : 0
- };
- },
textType : function (value) {
return;
Something went wrong with that request. Please try again.