Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix #288 placeholder and bindings #301

Closed
wants to merge 1 commit into from
Closed

fix #288 placeholder and bindings #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
61 changes: 23 additions & 38 deletions src/aria/html/TextInput.js
View file
Open in desktop
Expand Up @@ -34,17 +34,6 @@
callNormalizedCallback(callback, this._domElt.value);
}

/**
* 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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -260,10 +244,7 @@
}
}

var placeholder = this._cfg.placeholder;
if (!_placeholderSupported && placeholder) {
this._setPlaceholder();
}
this._setPlaceholder();
},

/**
Expand All @@ -274,7 +255,8 @@
*/
onbind : function (name, value, oldValue) {
if (name === "value") {
this._domElt.value = value;
this._domElt.value = (value != null) ? value : "";
this._setPlaceholder();
}
},

Expand Down Expand Up @@ -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;
}
},

Expand Down Expand Up @@ -384,7 +369,7 @@
});

this._chainListener(listeners, context, "type", {
fn : setPlaceholderOnType,
fn : this._setPlaceholder,
scope : this
});
}
Expand Down
30 changes: 30 additions & 0 deletions test/aria/html/textinput/placeholder/PlaceholderTestCase.js
View file
Open in desktop
Expand Up @@ -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);
},
Expand All @@ -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
Expand Down Expand Up @@ -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();

}

}
})
11 changes: 11 additions & 0 deletions test/aria/html/textinput/placeholder/PlaceholderTestCaseTpl.tpl
View file
Open in desktop
Expand Up @@ -57,6 +57,17 @@
}
}/}

{@html:TextInput {
id: "texttestTwo",
placeholder : "Set arrival",
bind : {
value: {
inside: data,
to: "arrival"
}
}
}/}

</div>

<div id="outsideDiv">&nbsp;</div>
Expand Down
8 changes: 0 additions & 8 deletions test/aria/html/textinput/placeholder/PlaceholderTestCaseTplScript.js
View file
Open in desktop
Expand Up @@ -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;
Expand Down