Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

placeholder feature for HTML Text Input #288

Closed
wants to merge 1 commit into from

2 participants

@fab-b
Collaborator

Introducing placeholder attribute for modern browser and a special css class for IE6/7/8/9 and FF3.6

@fab-b fab-b referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@fab-b fab-b referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@fab-b fab-b referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@fab-b fab-b referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@fab-b fab-b referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@fab-b fab-b referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@fab-b fab-b referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@fab-b fab-b referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@piuccio

Integrated in 9d360be

@piuccio piuccio closed this
@piuccio piuccio referenced this pull request from a commit in piuccio/ariatemplates
@piuccio piuccio fix #288 placeholder prevents binding
The previous commit prevents binding to take place if placeholder value is not specified
1fff6b9
@flongo flongo referenced this pull request from a commit in flongo/ariatemplates
@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 piuccio referenced this pull request from a commit
@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.
c05e6de
@flongo flongo referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@flongo flongo referenced this pull request from a commit in flongo/ariatemplates
@flongo flongo fix #288 placeholder not removed correctly after data model changes b91b822
@susant123 susant123 referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@susant123 susant123 referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@susant123 susant123 referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 18, 2012
  1. @fab-b
This page is out of date. Refresh to see the latest.
View
25 src/aria/html/Element.js
@@ -216,6 +216,31 @@
*/
_notifyDataChange : function (args, propertyName) {
this.onbind(propertyName, this._transform(this._cfg.bind[propertyName].transform, args.newValue, "toWidget"), args.oldValue);
+ },
+
+ /**
+ * Add a listener for an event. It will be called before an already registered event, if any.
+ * @protected
+ * @param {aria.html.beans.ElementCfg.Properties.$properties.on} listeners Map of listeners
+ * @param {aria.templates.TemplateCtxt} context Template context
+ * @param {String} eventType Type of the event
+ * @param {aria.core.CfgBeans.Callback} callback listener to chain
+ */
+ _chainListener : function (listeners, context, eventType, callback) {
+ var normalized = null;
+ if (listeners[eventType]) {
+ normalized = this.$normCallback.call(context._tpl, listeners[eventType]);
+ }
+
+ listeners[eventType] = {
+ fn : function (event) {
+ this.$callback(callback, event);
+ if (normalized) {
+ normalized.fn.call(normalized.scope, event, normalized.args);
+ }
+ },
+ scope : this
+ };
}
}
});
View
196 src/aria/html/TextInput.js
@@ -31,11 +31,21 @@
*/
function typeCallback (callback) {
this._typeCallback = null;
-
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
* input value. This function should have the same scope as the widget instance.
@@ -58,42 +68,105 @@
}
/**
- * Being a BindableWidget we already have one direction binding of value (from the datamodel to teh widget). This
+ * Internal callback for placeholder handling on keydown.
+ * @param {aria.DomEvent} event keydown event
+ * @private
+ */
+ function keyDownCallback (event) {
+ // This is to remove the placeholder when the text input receives the first input char
+ if (!_placeholderSupported && this._cfg.placeholder) {
+ if (this._hasPlaceholder) {
+ var domevent = aria.DomEvent;
+ var specialKeys = [domevent.KC_END, domevent.KC_RIGHT, domevent.KC_ARROW_RIGHT, domevent.KC_DOWN,
+ domevent.KC_ARROW_DOWN, domevent.KC_DELETE, domevent.KC_BACKSPACE];
+ if (!aria.utils.Array.contains(specialKeys, event.keyCode)) {
+ var cssClass = new aria.utils.ClassList(this._domElt);
+ this._domElt.value = "";
+ this._hasPlaceholder = false;
+ cssClass.remove('placeholder');
+ cssClass.$dispose();
+ } else {
+ event.preventDefault();
+ }
+ }
+ }
+ }
+
+ /**
+ * Being a BindableWidget we already have one direction binding of value (from the datamodel to the widget). This
* function is the callback for implementing the other bind, from the widget to the datamodel. The value is set in
* the datamodel on blur. It also takes care of calling the 'on blur' callback if it was defined.
* @param {aria.DomEvent} event blur event
- * @param {aria.core.CfgBeans.Callback} blurCallback On blur callback
* @private
*/
- function bidirectionalBlurBinding (event, blurCallback) {
+ function bidirectionalBlurBinding (event) {
var bind = this._bindingListeners.value;
var newValue = this._transform(bind.transform, event.target.getValue(), "fromWidget");
- aria.utils.Json.setValue(bind.inside, bind.to, newValue, bind.cb);
+
+ 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();
+ }
this._firstFocus = true;
- if (blurCallback) {
- blurCallback.fn.call(blurCallback.scope, event, blurCallback.args);
+ }
+
+ /**
+ * This is to put the caret at position (0, 0) in browsers that do not support the placeholder attribute.
+ * @param {aria.DomEvent} event focus event
+ * @private
+ */
+ function focusBinding (event) {
+ this._hasFocus = true;
+
+ if (this._cfg.placeholder) {
+ var cssClass = new aria.utils.ClassList(this._domElt);
+ if (cssClass.contains('placeholder')) {
+ aria.utils.Caret.setPosition(this._domElt, 0, 0);
+ }
+ cssClass.$dispose();
}
}
/**
* This is to implement the autoselect.
* @param {aria.DomEvent} event focus event
- * @param {aria.core.CfgBeans.Callback} clickCallback On click callback
* @private
*/
- function clickBinding (event, clickCallback) {
+ function clickBinding (event) {
if (this._cfg.autoselect) {
- this._autoselect();
- }
-
- if (clickCallback) {
- clickCallback.fn.call(clickCallback.scope, event, clickCallback.args);
+ if (!_placeholderSupported && this._cfg.placeholder) {
+ var cssClass = new aria.utils.ClassList(this._domElt);
+ if (cssClass.contains('placeholder')) {
+ aria.utils.Caret.setPosition(this._domElt, 0, 0);
+ } else {
+ aria.utils.Caret.select(this._domElt);
+ }
+ cssClass.$dispose();
+ } else {
+ aria.utils.Caret.select(this._domElt);
+ }
}
}
/**
+ * This is to check if the browser supports placeholder attribute.
+ * @private
+ * @type Boolean
+ */
+ var _placeholderSupported = null;
+
+ /**
* TextInput widget. Bindable widget providing bi-directional bind of 'value' and on 'type' event callback.
*/
Aria.classDefinition({
@@ -111,6 +184,14 @@
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;
+ }
+
+ this._registerListeners(cfg, context);
+
/**
* Wheter or not this widget has a 'on type' callback
* @protected
@@ -118,16 +199,29 @@
*/
this._reactOnType = this._registerType(cfg.on, context);
- this._registerListeners(cfg, context);
-
/**
* Flag set to false after first focus, and set back to true after a blur. Used for the autoselect
* behaviour. This value is true when the field receives focus for the first time (user action) and false
* when the focus is given programmatically by the controller
+ * @protected
* @type Boolean
*/
this._firstFocus = true;
+ /**
+ * Flag used to indicate if the element has focus
+ * @protected
+ * @type Boolean
+ */
+ this._hasFocus = false;
+
+ /**
+ * Flag used to indicate if the element has the placeholder
+ * @protected
+ * @type Boolean
+ */
+ this._hasPlaceholder = false;
+
this.$Element.constructor.call(this, cfg, context, line);
},
$destructor : function () {
@@ -165,6 +259,11 @@
this._domElt.value = newValue;
}
}
+
+ var placeholder = this._cfg.placeholder;
+ if (!_placeholderSupported && placeholder) {
+ this._setPlaceholder();
+ }
},
/**
@@ -231,48 +330,63 @@
*/
_autoselect : function () {
if (this._firstFocus) {
- // this allow to click again and put the cursor at a given
- // position
this._firstFocus = false;
- var field = this._domElt;
- var start = 0;
- var end = (field.value.length) ? field.value.length : 0;
- if (end) {
- aria.utils.Caret.setCaretPosition(field, start, end);
+ aria.utils.Caret.select(this._domElt);
+ }
+ },
+
+ /**
+ * Set the css class and value for placeholder. 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);
}
+ this._hasPlaceholder = true;
}
},
/**
* Add special listeners on top of the ones specified in configuration.
* @param {aria.html.beans.TextInputCfg.Properties} cfg Widget configuration.
- * @param {aria.templates.TemplateCtxt} context Reference of the template context.
+ * @param {aria.templates.TemplateCtxt} context Template context.
* @protected
*/
_registerListeners : function (cfg, context) {
var listeners = cfg.on;
- var normalized;
-
- if (listeners.blur) {
- normalized = this.$normCallback.call(context._tpl, listeners.blur);
- }
- listeners.blur = {
+ this._chainListener(listeners, context, "blur", {
fn : bidirectionalBlurBinding,
- scope : this,
- args : normalized
- };
+ scope : this
+ });
- if (cfg.autoselect) {
- if (listeners.click) {
- normalized = this.$normCallback.call(context._tpl, listeners.click);
- }
+ if ((!_placeholderSupported && cfg.placeholder) || cfg.autoselect) {
+ this._chainListener(listeners, context, "focus", {
+ fn : focusBinding,
+ scope : this
+ });
- listeners.click = {
+ this._chainListener(listeners, context, "click", {
fn : clickBinding,
- scope : this,
- args : normalized
- };
+ scope : this
+ });
+
+ this._chainListener(listeners, context, "keydown", {
+ fn : keyDownCallback,
+ scope : this
+ });
+
+ this._chainListener(listeners, context, "type", {
+ fn : setPlaceholderOnType,
+ scope : this
+ });
}
}
View
16 src/aria/utils/Caret.js
@@ -26,7 +26,7 @@ Aria.classDefinition({
* @param {HTMLElement} element The html element
* @return {Object} The caret position (start and end)
*/
- getCaretPosition : function (element) {
+ getPosition : function (element) {
var pos = {
start : 0,
end : 0
@@ -58,7 +58,7 @@ Aria.classDefinition({
* @param {Number} start The starting caret position
* @param {Number} end The ending caret position
*/
- setCaretPosition : function (element, start, end) {
+ setPosition : function (element, start, end) {
if ("selectionStart" in element) {
element.selectionStart = start;
element.selectionEnd = end;
@@ -71,6 +71,18 @@ Aria.classDefinition({
range.select();
}
}
+ },
+
+ /**
+ * Select the element text setting the caret position to the whole input value.
+ * @type {HTMLElement} element The html elment
+ */
+ select : function (element) {
+ var start = 0;
+ var end = (element.value.length) ? element.value.length : 0;
+ if (end) {
+ this.setPosition(element, start, end);
+ }
}
}
});
View
4 src/aria/widgets/form/TextInput.js
@@ -507,7 +507,7 @@ Aria.classDefinition({
return null;
}
var ctrl = this.getTextInputField();
- return aria.utils.Caret.getCaretPosition(ctrl);
+ return aria.utils.Caret.getPosition(ctrl);
},
/**
@@ -521,7 +521,7 @@ Aria.classDefinition({
}
var ctrl = this.getTextInputField();
- aria.utils.Caret.setCaretPosition(ctrl, start, end);
+ aria.utils.Caret.setPosition(ctrl, start, end);
},
/**
View
1  test/aria/html/textinput/TextInputTestSuite.js
@@ -25,5 +25,6 @@ Aria.classDefinition({
this.addTests("test.aria.html.textinput.TextInputPasswordTest");
this.addTests("test.aria.html.textinput.focus.FocusTestCase");
this.addTests("test.aria.html.textinput.autoselect.AutoselectTestCase");
+ this.addTests("test.aria.html.textinput.placeholder.PlaceholderTestCase");
}
});
View
13 test/aria/html/textinput/autoselect/AutoselectTestCase.js
@@ -23,6 +23,7 @@ Aria.classDefinition({
},
$destructor : function () {
this.element = null;
+ this.$TemplateTestCase.$destructor.call(this);
},
$prototype : {
runTemplateTest : function () {
@@ -38,7 +39,7 @@ Aria.classDefinition({
},
afterFirstClick : function () {
- var caretPos = aria.utils.Caret.getCaretPosition(this.element);
+ var caretPos = aria.utils.Caret.getPosition(this.element);
this.assertEquals(caretPos.start, 0, "The start pos of caret is not zero");
this.assertEquals(caretPos.end, 0, "The end pos of caret is not zero");
@@ -50,7 +51,7 @@ Aria.classDefinition({
},
afterType : function () {
- var caretPos = aria.utils.Caret.getCaretPosition(this.element);
+ var caretPos = aria.utils.Caret.getPosition(this.element);
this.assertEquals(caretPos.start, this.element.value.length, "The start pos of caret is not at the end of the word typed");
this.assertEquals(caretPos.end, this.element.value.length, "The end pos of caret is not at the end of the word typed");
@@ -75,7 +76,7 @@ Aria.classDefinition({
afterThirdClick : function () {
this.assertEquals(this.templateCtxt._tpl.data.click, 2, "Click callback set in the widget configuration has not been called");
- var caretPos = aria.utils.Caret.getCaretPosition(this.element);
+ var caretPos = aria.utils.Caret.getPosition(this.element);
this.assertEquals(caretPos.start, 0, "The start pos of caret is not zero");
this.assertEquals(caretPos.end, this.element.value.length, "The end pos of caret is not at the end of the word typed");
this.assertEquals(this.element.value, "brazil", "The value of input text is not brazil");
@@ -87,7 +88,7 @@ Aria.classDefinition({
},
afterFirstClickTwo : function () {
- var caretPos = aria.utils.Caret.getCaretPosition(this.secondElement);
+ var caretPos = aria.utils.Caret.getPosition(this.secondElement);
this.assertEquals(caretPos.start, 0, "The start pos of caret is not zero");
this.assertEquals(caretPos.end, 0, "The end pos of caret is not zero");
@@ -99,7 +100,7 @@ Aria.classDefinition({
},
afterTypeTwo : function () {
- var caretPos = aria.utils.Caret.getCaretPosition(this.secondElement);
+ var caretPos = aria.utils.Caret.getPosition(this.secondElement);
this.assertEquals(caretPos.start, this.secondElement.value.length, "The start pos of caret is not at the end of the word typed");
this.assertEquals(caretPos.end, this.secondElement.value.length, "The end pos of caret is not at the end of the word typed");
@@ -125,7 +126,7 @@ Aria.classDefinition({
// check that click callback declared in the widget configuration is called
this.assertEquals(this.templateCtxt._tpl.data.clickNoAutoselect, 2, "Click callback set in the widget configuration has not been called");
- var caretPos = aria.utils.Caret.getCaretPosition(this.secondElement);
+ var caretPos = aria.utils.Caret.getPosition(this.secondElement);
this.assertEquals(caretPos.start - caretPos.end, 0, "Autoselect false has not been taken into account");
this.assertEquals(this.secondElement.value, "argentina", "The value of input text is not argentina");
View
191 test/aria/html/textinput/placeholder/PlaceholderTestCase.js
@@ -0,0 +1,191 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Aria.classDefinition({
+ $classpath : "test.aria.html.textinput.placeholder.PlaceholderTestCase",
+ $extends : "aria.jsunit.TemplateTestCase",
+ $dependencies : ["aria.utils.Dom", "aria.utils.ClassList", "aria.html.TextInput", "aria.utils.SynEvents"],
+ $constructor : function () {
+ this.$TemplateTestCase.constructor.call(this);
+ this.element = null;
+ this.secondElement = null;
+ this.cssClass = null;
+ this.cssClass2 = null;
+ this._placeholderSupported = null;
+ this._placeholderSupported = ("placeholder" in Aria.$window.document.createElement("input"));
+ },
+ $destructor : function () {
+ this.element = null;
+ this.secondElement = null;
+ this.cssClass.$dispose();
+ this.cssClass2.$dispose();
+ this._placeholderSupported = null;
+ this.$TemplateTestCase.$destructor.call(this);
+ },
+ $prototype : {
+ runTemplateTest : function () {
+ var document = Aria.$window.document;
+ var inputs = document.getElementsByTagName("input");
+ this.element = inputs[0];
+ this.secondElement = inputs[1];
+ this.cssClass = new aria.utils.ClassList(this.element);
+ this.cssClass2 = new aria.utils.ClassList(this.secondElement);
+
+ // 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
+
+ if (!this._placeholderSupported) {
+ this.assertEquals(this.element.value, "Support placeholder", "The value inside the text input is not the placeholder");
+ this.assertTrue(this.cssClass.contains("placeholder"), "Css class placeholder is missing");
+ aria.utils.SynEvents.click(this.element, {
+ fn : this.afterFirstClick,
+ scope : this
+ });
+ } else {
+ this.assertEquals(this.element.placeholder, "Support placeholder", "The placeholder is not the placeholder expected");
+ this.assertEquals(this.secondElement.placeholder, "Support placeholder", "The placeholder is not the placeholder expected");
+ this.end();
+ }
+ },
+
+ afterFirstClick : function () {
+ this.assertEquals(this.element.value, "Support placeholder", "The placeholder is not displayed");
+ this.assertTrue(this.cssClass.contains("placeholder"), "Css class placeholder is missing");
+
+ aria.utils.SynEvents.type(this.element, "japan", {
+ fn : this.afterType,
+ scope : this
+ });
+ },
+
+ afterType : function () {
+ var outside = aria.utils.Dom.getElementById("outsideDiv");
+
+ this.assertEquals(this.element.value, "japan", "The placeholder is displayed");
+ this.assertTrue(!this.cssClass.contains("placeholder"), "Css class placeholder is there");
+
+ aria.utils.SynEvents.click(outside, {
+ fn : this.afterClickOutside,
+ scope : this
+ });
+ },
+
+ afterClickOutside : function () {
+ this.assertEquals(this.element.value, "japan", "The placeholder is displayed");
+ this.assertTrue(!this.cssClass.contains("placeholder"), "Css class placeholder is there");
+
+ aria.utils.SynEvents.click(this.element, {
+ fn : this.afterSecondClick,
+ scope : this
+ });
+ },
+
+ afterSecondClick : function () {
+ this.assertEquals(this.element.value, "japan", "The placeholder is displayed");
+ this.assertTrue(!this.cssClass.contains("placeholder"), "Css class placeholder is there");
+
+ aria.utils.SynEvents.type(this.element, "\b\b\b\b\b", {
+ fn : this.afterSecondType,
+ scope : this
+ });
+ },
+
+ afterSecondType : function () {
+ this.assertEquals(this.element.value, "Support placeholder", "The placeholder is not displayed");
+ this.assertTrue(this.cssClass.contains("placeholder"), "Css class placeholder is not there");
+
+ var outside = aria.utils.Dom.getElementById("outsideDiv");
+
+ aria.utils.SynEvents.click(outside, {
+ fn : this.afterSecondClickOutside,
+ scope : this
+ });
+ },
+
+ afterSecondClickOutside : function () {
+ this.assertEquals(this.element.value, "Support placeholder", "The placeholder is not displayed");
+ this.assertTrue(this.cssClass.contains("placeholder"), "Css class placeholder is not there");
+ this.assertEquals(this.templateCtxt._tpl.data.location, "", "The value inside the data model is not empty");
+
+ // Test for the first inputtext finished!
+
+ aria.utils.SynEvents.click(this.secondElement, {
+ fn : this.afterFirstClickTwo,
+ scope : this
+ });
+ },
+
+ afterFirstClickTwo : function () {
+ this.assertEquals(this.secondElement.value, "Support placeholder", "The placeholder is not displayed");
+ this.assertTrue(this.cssClass2.contains("placeholder"), "Css class placeholder is missing");
+
+ aria.utils.SynEvents.type(this.secondElement, "brazil", {
+ fn : this.afterTypeTwo,
+ scope : this
+ });
+ },
+
+ afterTypeTwo : function () {
+ var outside = aria.utils.Dom.getElementById("outsideDiv");
+
+ this.assertEquals(this.secondElement.value, "brazil", "The placeholder is displayed");
+ this.assertTrue(!this.cssClass2.contains("placeholder"), "Css class placeholder is there");
+
+ aria.utils.SynEvents.click(outside, {
+ fn : this.afterClickOutsideTwo,
+ scope : this
+ });
+ },
+
+ afterClickOutsideTwo : function () {
+ this.assertEquals(this.secondElement.value, "brazil", "The placeholder is displayed");
+ this.assertTrue(!this.cssClass2.contains("placeholder"), "Css class placeholder is there");
+
+ aria.utils.SynEvents.click(this.secondElement, {
+ fn : this.afterSecondClickTwo,
+ scope : this
+ });
+ },
+
+ afterSecondClickTwo : function () {
+ this.assertEquals(this.secondElement.value, "brazil", "The placeholder is displayed");
+ this.assertTrue(!this.cssClass2.contains("placeholder"), "Css class placeholder is there");
+
+ aria.utils.SynEvents.type(this.secondElement, "\b\b\b\b\b\b", {
+ fn : this.afterSecondTypeTwo,
+ scope : this
+ });
+ },
+
+ afterSecondTypeTwo : function () {
+ this.assertEquals(this.secondElement.value, "Support placeholder", "The placeholder is not displayed");
+ this.assertTrue(this.cssClass2.contains("placeholder"), "Css class placeholder is not there");
+
+ var outside = aria.utils.Dom.getElementById("outsideDiv");
+
+ aria.utils.SynEvents.click(outside, {
+ fn : this.afterSecondClickOutsideTwo,
+ scope : this
+ });
+ },
+
+ afterSecondClickOutsideTwo : function () {
+ 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.end();
+ }
+ }
+})
View
65 test/aria/html/textinput/placeholder/PlaceholderTestCaseTpl.tpl
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+{Template {
+ $classpath : "test.aria.html.textinput.placeholder.PlaceholderTestCaseTpl",
+ $wlibs : {
+ html : "aria.html.HtmlLibrary"
+ },
+ $hasScript : true
+}}
+
+{macro main()}
+
+<div id="justToGetTheCorrectDom">
+
+ {@html:TextInput {
+ id: "texttest",
+ placeholder : "Support placeholder",
+ autoselect : true,
+ on : {
+ type : "textType",
+ click : "textClick"
+ },
+ bind : {
+ value : {
+ inside : data,
+ to : "location"
+ }
+ }
+ }/}
+
+ {@html:TextInput {
+ id: "texttestOne",
+ placeholder : "Support placeholder",
+ autoselect : false,
+ on : {
+ type : "textType",
+ click : "textClickWithoutAutoselect"
+ },
+ bind : {
+ value: {
+ inside: data,
+ to: "departure"
+ }
+ }
+ }/}
+
+</div>
+
+<div id="outsideDiv">&nbsp;</div>
+
+{/macro}
+{/Template}
View
40 test/aria/html/textinput/placeholder/PlaceholderTestCaseTplScript.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Aria.tplScriptDefinition({
+ $classpath : "test.aria.html.textinput.placeholder.PlaceholderTestCaseTplScript",
+ $prototype : {
+ $dataReady : function () {
+ this.data = {
+ location : '',
+ departure : '',
+ click : 0,
+ clickNoAutoselect : 0
+ };
+ },
+
+ textType : function (value) {
+ return;
+ },
+
+ textClick : function () {
+ this.data.click++;
+ },
+
+ textClickWithoutAutoselect : function () {
+ this.data.clickNoAutoselect++;
+ }
+ }
+});
Something went wrong with that request. Please try again.