Merge 93bb931 into fcab2c5

docs/api/index.md

@@ -327,7 +327,7 @@ Because of the space which always gets _inserted between the expressions_, it do
 It is possible to specify functions to adapt the value of an expression to the desired display, but also to provide them with arguments or to combine them through piped expressions.
 
 e.g.
-```{some.expression|modifier1:arg2:arg3|modifier2}```
+``` {some.expression|modifier1:arg2:arg3|modifier2} ```
 
 There are two ways to use modifiers:
 
@@ -425,6 +425,18 @@ __Example:__
 <div ontap="{ontapHandler(event)}" ontapstart="{ontapHandler(event)}" ontapcancel="{ontapHandler(event)}"></div>
 ```
 
+---
+
+#### onupdate event for `input` and `textarea`
+The engine adds a special event on <inut> and <texarea> elements. It is fired 1s after a user stops typing in a field.
+
+__Example:__
+
+```html
+<input onupdate="{updateHandler(event)}"/>
+```
+
+
 ## Interfaces
 
 #### Component controllers

docs/samples/inputsample/inputsample.hsp

@@ -2,8 +2,9 @@
     <div class="info2">All the following inputs are synchronized:</div>
     <div class="section">
         Comment #1: <input type="text" value="{data.comment}"/><br/>
-        Comment #2: <input type="text" model="{data.comment}"/><br/>
-        Comment #3: <span class="textValue">{data.comment}</span>
+        Comment #2: <input type="text" model="{data.comment}" onupdate="{data.updateHandler(event)}"/> with onupdate callback<br/>
+        Comment #3: <span class="textValue">{data.comment}</span><br/>
+        Delayed oninput: {data.delayed}
     </div>
     <div class="section">
         <input id="cb1" type="checkbox" value="{data.isChecked}"/>
@@ -32,7 +33,10 @@
 </template>
 
 <script>
-var d={comment:"edit me!", isChecked:false, selection:"B", dtype:"text"}
+var d={comment:"edit me!", isChecked:false, selection:"B", dtype:"text", delayed:"",
+updateHandler: function(event) {
+    this.delayed = event.target.value;
+}};
 
 // Needed by the playground application.
 // Update it, but do not remove it!

hsp/rt/attributes/onupdate.js

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2014 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.
+ */
+
+var klass = require("../../klass");
+
+var OnUpdateHandler = klass({
+    ONUPDATE_TIMER : 1000,
+
+    $constructor : function (nodeInstance, callback) {
+        this.callback = callback;
+        this._inputEvents = ["input", "keyup", "change"];
+        nodeInstance.addEventListeners(this._inputEvents);
+        this.timerId = null;
+    },
+
+    $handleEvent : function (event) {
+        if (this._inputEvents.indexOf(event.type) > -1) {
+            this._clearTimer();
+            var _this = this;
+            this.timerId = setTimeout(function () {
+                _this._onUpdateFinalize(event);
+            }, this.ONUPDATE_TIMER);
+        }
+    },
+
+    _onUpdateFinalize: function(event) {
+        var eventCopy = {};
+        for (var i in event) {
+            eventCopy[i] = event[i];
+        }
+        eventCopy.type = "update";
+        this.callback(eventCopy);
+    },
+
+    _clearTimer: function() {
+        if (this.timerId) {
+            clearTimeout(this.timerId);
+            this.timerId = null;
+        }
+    },
+
+    $dispose: function() {
+        this._clearTimer();
+    }
+});
+
+module.exports = OnUpdateHandler;

hsp/rt/eltnode.js

@@ -27,6 +27,8 @@ var ClassHandler = require('./attributes/class');
 hsp.registerCustomAttributes("class", ClassHandler);
 var ModelValueHandler = require('./attributes/modelvalue');
 hsp.registerCustomAttributes(["model", "value"], ModelValueHandler, 0, ["input", "textarea"]);
+var OnUpdateHandler = require('./attributes/onupdate');
+hsp.registerCustomAttributes(["onupdate"], OnUpdateHandler, 0, ["input", "textarea"]);
 
 var booleanAttributes = {
     async: true,

test/rt/attributes/onupdate.spec.hsp

@@ -0,0 +1,145 @@
+<script>
+/*
+ * Copyright 2014 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.
+ */
+
+var hsp = require("hsp/rt");
+var $set = require('hsp/$set');
+var fireEvent = require("hsp/utils/eventgenerator").fireEvent;
+</script>
+
+<template test1(model)>
+    <input type="text" model="{model.value}" onupdate="{model.cb(event)}"/>
+</template>
+
+<template test2(model)>
+    <textarea model="{model.value}" onupdate="{model.cb(event)}"/>
+</template>
+
+<script>
+describe("onupdate attribute", function () {
+
+    var clock;
+    beforeEach(function () {
+         clock = sinon.useFakeTimers();
+     });
+
+    afterEach(function () {
+        clock.restore();
+    });
+
+    it("should fire once after a single keystroke", function () {
+        var counter = 0;
+        var model = {
+            value: "",
+            cb: function (evt) {
+                counter++;
+            }
+        };
+        var n = test1(model);
+        var input = n.childNodes[0];
+        input.node.value = "a";
+        fireEvent("keyup", input.node); // to simulate change
+        clock.tick(500);
+        expect(counter).to.equal(0);
+        clock.tick(600);
+        expect(counter).to.equal(1);
+
+        clock.tick(6000);
+        expect(counter).to.equal(1);
+        n.$dispose();
+    });
+
+    it("should fire once after several keystrokes", function () {
+        var counter = 0;
+        var model = {
+            value: "",
+            cb: function (evt) {
+                counter++;
+            }
+        };
+        var n = test2(model);
+        var input = n.childNodes[0];
+
+        expect(counter).to.equal(0);
+        input.node.value = "a";
+        fireEvent("keyup", input.node); // to simulate change
+        clock.tick(500);
+
+        expect(counter).to.equal(0);
+        input.node.value = "ab";
+        fireEvent("keyup", input.node); // to simulate change
+        clock.tick(900);
+
+        expect(counter).to.equal(0);
+        input.node.value = "abc";
+        fireEvent("keyup", input.node); // to simulate change
+        clock.tick(1100);
+
+        expect(counter).to.equal(1);
+        clock.tick(6000);
+        expect(counter).to.equal(1);
+        n.$dispose();
+    });
+
+    it("should fire twice after 2 sequences of keystrokes", function () {
+        var counter = 0;
+        var model = {
+            value: "",
+            cb: function (evt) {
+                counter++;
+            }
+        };
+        var n = test1(model);
+        var input = n.childNodes[0];
+
+        expect(counter).to.equal(0);
+        input.node.value = "a";
+        fireEvent("keyup", input.node); // to simulate change
+        clock.tick(500);
+
+        expect(counter).to.equal(0);
+        input.node.value = "ab";
+        fireEvent("keyup", input.node); // to simulate change
+        clock.tick(1200);
+
+        expect(counter).to.equal(1);
+        input.node.value = "abc";
+        fireEvent("keyup", input.node); // to simulate change
+        clock.tick(6000);
+
+        expect(counter).to.equal(2);
+        n.$dispose();
+    });
+
+    it("should not fire after a $dispose ", function () {
+        var counter = 0;
+        var model = {
+            value: "",
+            cb: function (evt) {
+                counter++;
+            }
+        };
+        var n = test1(model);
+        var input = n.childNodes[0];
+        input.node.value = "a";
+        fireEvent("keyup", input.node); // to simulate change
+
+        n.$dispose();
+        clock.tick(5000);
+        expect(counter).to.equal(0);        
+    });
+
+});
+</script>

test/rt/index.html

@@ -81,6 +81,7 @@
 	require("test/rt/text.spec.hsp");
 	require("test/rt/attributes/class.spec.hsp");
 	require("test/rt/attributes/modelvalue.spec.hsp");
+	require("test/rt/attributes/onupdate.spec.hsp");
 	require("test/gestures/touchEvent.spec.js");
 	require("test/gestures/tap.spec.hsp");
 	require("test/gestures/longPress.spec.hsp");