render of DependenceInput admits data-placement

4 files changed, 31 insertions, 15 deletions

diff --git a/webapp/coffee/dependency_input.coffee b/webapp/coffee/dependency_input.coffee
index 6e2b0eb..aac32a1 100644
--- a/webapp/coffee/dependency_input.coffee
+++ b/webapp/coffee/dependency_input.coffee
@@ -3,18 +3,8 @@ class DependencyInput
         @template = """
             <span class="_parentesis _parentesis_open">(</span><span class="_parentesis _parentesis_close">)</span>
             <input
-                class="span2 droppable dependence_value"
-                type="text"
-                name="groups.[[ group_order ]].fields.[[ order ]].dependence.values"
-                value="[[ value ]]"
-                placeholder="nro. ID" />
-            <span class="_parentesis _parentesis_open">(</span><span class="_parentesis _parentesis_close">)</span>
-                    """
-        @template = """
-            <span class="_parentesis _parentesis_open">(</span><span class="_parentesis _parentesis_close">)</span>
-            <input
                 data-toggle="popover"
-                data-placement="top"
+                data-placement="[[ data_placement ]]"
                 data-content=""
                 data-original-title=""
                 class="span2 droppable dependence_value"
@@ -26,8 +16,10 @@ class DependencyInput
                     """
         @value = ""
 
-    render: ->
+    render: (data_placement) ->
+        data_placement = data_placement || "top"
         context = {
+            "data_placement": data_placement,
             "value": @value,
             "order": @field_order,
             "group_order": @group_order,
diff --git a/webapp/js_tests/spec/DependencyInputSpec.js b/webapp/js_tests/spec/DependencyInputSpec.js
index d3b0acf..8e75bbb 100644
--- a/webapp/js_tests/spec/DependencyInputSpec.js
+++ b/webapp/js_tests/spec/DependencyInputSpec.js
@@ -23,6 +23,17 @@
       outer_html = $('<div></div>').append(widget)[0].outerHTML;
       return expect(outer_html).toContain(expected_input);
     });
+    it("render should have given data-placement", function() {
+      var data_placement, dependency_input, expected_input, field_order, group_order, outer_html, widget;
+      expected_input = "<input data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"\" data-original-title=\"\" class=\"span2 droppable dependence_value\" type=\"text\" name=\"groups.0.fields.0.dependence.values\" value=\"\" placeholder=\"nro. ID\"";
+      group_order = "0";
+      field_order = "0";
+      dependency_input = new DependencyInput(group_order, field_order);
+      data_placement = "bottom";
+      widget = dependency_input.render(data_placement);
+      outer_html = $('<div></div>').append(widget)[0].outerHTML;
+      return expect(outer_html).toContain(expected_input);
+    });
     it("should respond with popover on click", function() {
       var container, dependency_input, field_order, group_order, input, widget;
       setFixtures('<div id="container"></div>');
diff --git a/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee b/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee
index a687875..f5981a2 100644
--- a/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee
+++ b/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee
@@ -25,6 +25,18 @@ describe "DependencyInput", ->
         outer_html = $('<div></div>').append(widget)[0].outerHTML
         expect(outer_html).toContain(expected_input)
 
+    it "render should have given data-placement", ->
+        expected_input = """
+            <input data-toggle="popover" data-placement="bottom" data-content="" data-original-title="" class="span2 droppable dependence_value" type="text" name="groups.0.fields.0.dependence.values" value="" placeholder="nro. ID"
+                         """
+        group_order = "0"
+        field_order = "0"
+        dependency_input = new DependencyInput(group_order, field_order)
+        data_placement = "bottom"
+        widget = dependency_input.render(data_placement)
+        outer_html = $('<div></div>').append(widget)[0].outerHTML
+        expect(outer_html).toContain(expected_input)
+
     it "should respond with popover on click", ->
         setFixtures('<div id="container"></div>');
         container = $('#container');
diff --git a/webapp/webapp/static/js/dependency_input.js b/webapp/webapp/static/js/dependency_input.js
index b2b27e8..068016f 100644
--- a/webapp/webapp/static/js/dependency_input.js
+++ b/webapp/webapp/static/js/dependency_input.js
@@ -6,14 +6,15 @@
     function DependencyInput(group_order, field_order) {
       this.group_order = group_order;
       this.field_order = field_order;
-      this.template = "<span class=\"_parentesis _parentesis_open\">(</span><span class=\"_parentesis _parentesis_close\">)</span>\n<input\n    class=\"span2 droppable dependence_value\"\n    type=\"text\"\n    name=\"groups.[[ group_order ]].fields.[[ order ]].dependence.values\"\n    value=\"[[ value ]]\"\n    placeholder=\"nro. ID\" />\n<span class=\"_parentesis _parentesis_open\">(</span><span class=\"_parentesis _parentesis_close\">)</span>";
-      this.template = "<span class=\"_parentesis _parentesis_open\">(</span><span class=\"_parentesis _parentesis_close\">)</span>\n<input\n    data-toggle=\"popover\"\n    data-placement=\"top\"\n    data-content=\"\"\n    data-original-title=\"\"\n    class=\"span2 droppable dependence_value\"\n    type=\"text\"\n    name=\"groups.[[ group_order ]].fields.[[ order ]].dependence.values\"\n    value=\"[[ value ]]\"\n    placeholder=\"nro. ID\" />\n<span class=\"_parentesis _parentesis_open\">(</span><span class=\"_parentesis _parentesis_close\">)</span>";
+      this.template = "<span class=\"_parentesis _parentesis_open\">(</span><span class=\"_parentesis _parentesis_close\">)</span>\n<input\n    data-toggle=\"popover\"\n    data-placement=\"[[ data_placement ]]\"\n    data-content=\"\"\n    data-original-title=\"\"\n    class=\"span2 droppable dependence_value\"\n    type=\"text\"\n    name=\"groups.[[ group_order ]].fields.[[ order ]].dependence.values\"\n    value=\"[[ value ]]\"\n    placeholder=\"nro. ID\" />\n<span class=\"_parentesis _parentesis_open\">(</span><span class=\"_parentesis _parentesis_close\">)</span>";
       this.value = "";
     }
 
-    DependencyInput.prototype.render = function() {
+    DependencyInput.prototype.render = function(data_placement) {
       var context, input, opt_value, q_value, widget;
+      data_placement = data_placement || "top";
       context = {
+        "data_placement": data_placement,
         "value": this.value,
         "order": this.field_order,
         "group_order": this.group_order