Merge 9c2c97a into 4491708

hsp/rt/eltnode.js

@@ -66,7 +66,7 @@ var EltNode = klass({
     $constructor : function (tag, exps, attcfg, ehcfg, children, needSubScope) {
         TNode.$constructor.call(this, exps);
         this.tag = tag;
-        this.isInput = (this.tag === "input");
+        this.isInput = (this.tag === "input" || this.tag === "textarea");
         this.createAttList(attcfg, ehcfg);
         if (children && children !== 0) {
             this.children = children;

public/css/main.css

@@ -195,6 +195,13 @@ input[type=text] {
     border-radius: 3px;
 }
 
+textarea {
+    font-size: 14px;
+    border:1px solid #AAAAAA;
+    padding: 1px 2px;
+    border-radius: 3px;
+}
+
 input.cell {
   position:relative;
   top:1px;

public/samples/samples.js

@@ -102,6 +102,14 @@ module.exports = [{
                         src : "inputsample.hsp",
                         main : true
                     }]
+        }, {
+            title : "Multi-line inputs: textarea elements",
+            folder : "textarea",
+            description : "description.md",
+            files : [{
+                        src : "textarea.hsp",
+                        main : true
+                    }]
         }, {
             title : "Simple todo list",
             folder : "todolist",

public/samples/textarea/description.md

@@ -0,0 +1,5 @@
+This sample shows how textarea elements can be used in hashspace.
+
+[#output]
+
+Like for input elements, hashspace uses the `model` attribute to bind the textarea content with the template's model.

public/samples/textarea/textarea.hsp

@@ -0,0 +1,28 @@
+# template sample(data)
+    <div class="info2">The following textarea elements are synchronized:</div>
+    <div class="section">
+        <div>Text #1:</div>
+        <textarea rows="4" cols="40" model="{data.text}"/>
+    </div>
+    <div class="section">
+        <div>Text #2:</div>
+        <textarea rows="4" cols="40"  model="{data.text}"/>
+    </div>
+    <a onclick="{changeText(data)}">Change text</a>
+# /template
+
+var d={
+    // Frog by Donna Shepherd
+    text:"    @..@\n   (----)\n  ( >__< )\n ^^ ~~ ^^"
+}
+
+var count=1;
+function changeText(d) {
+    count++, msg=[];
+    for (var i=0;count>i;i++) {
+        msg.push("This text contains "+count+" lines")
+    }
+    d.text=msg.join("\n");
+}
+
+sample(d).render("output");

public/test/rt/index.html

@@ -59,6 +59,7 @@
 	require("test/rt/foreach.spec.hsp");
 	require("test/rt/if.spec.hsp");
 	require("test/rt/input.spec.hsp");
+	require("test/rt/textarea.spec.hsp");
 	require("test/rt/json.spec.js");
 	require("test/rt/klass.spec.js");
 	require("test/rt/let.spec.hsp");

public/test/rt/textarea.spec.hsp

@@ -0,0 +1,42 @@
+
+/*
+ * 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"),
+    ht=require("hsp/utils/hashtester");
+
+# template test1(data)
+    <textarea rows="4" cols="40"  model="{data.text}"/>
+# /template
+
+describe("Textarea Elements", function () {
+    it("validates model synchronization", function () {
+        var h=ht.newTestContext();
+        var model={text:"line 1\nline2"};
+
+        test1(model).render(h.container);
+        expect(h("textarea").value()).to.equal("line 1\nline2");
+
+        // change value from the DOM
+        h("textarea").type("AAA\nBBB\nCCC");
+        expect(model.text).to.equal("AAA\nBBB\nCCC"); 
+
+        // change value from the model
+        h.$set(model,"text","Hello\nWorld!");
+        expect(h("textarea").value()).to.equal("Hello\nWorld!");
+
+        h.$dispose();
+    });
+});