Refactor: popover using data attributes

4 files changed, 28 insertions, 24 deletions

diff --git a/webapp/coffee/dependency_input.coffee b/webapp/coffee/dependency_input.coffee
index 7b9432a..6e2b0eb 100644
--- a/webapp/coffee/dependency_input.coffee
+++ b/webapp/coffee/dependency_input.coffee
@@ -10,6 +10,20 @@ class DependencyInput
                 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-content=""
+                data-original-title=""
+                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>
+                    """
         @value = ""
 
     render: ->
@@ -34,15 +48,10 @@ class DependencyInput
                 question_widget = $("input[name='#{q_name}']")
                 if question_widget.length > 0
                     q_value = question_widget.val()
-            input.popover({
-                title: q_value,
-                content: opt_value,
-                trigger: "manual"
-            })
-            input.popover("show")
+            input.attr("data-original-title", q_value)
+            input.attr("data-content", opt_value)
 
-        input.on "blur", ->
-            input.popover("destroy")
+        input.popover({trigger: "click"})
 
         return widget
 
diff --git a/webapp/js_tests/spec/DependencyInputSpec.js b/webapp/js_tests/spec/DependencyInputSpec.js
index dc339ca..d3b0acf 100644
--- a/webapp/js_tests/spec/DependencyInputSpec.js
+++ b/webapp/js_tests/spec/DependencyInputSpec.js
@@ -4,7 +4,7 @@
     it("should render html element", function() {
       var dependency_input, expected_input, expected_span, field_order, group_order, outer_html, widget;
       expected_span = "<span class=\"_parentesis _parentesis_open\">(</span><span class=\"_parentesis _parentesis_close\">)</span>";
-      expected_input = "<input class=\"span2 droppable dependence_value\" type=\"text\" name=\"groups.1.fields.1.dependence.values\" value=\"\" placeholder=\"nro. ID\"";
+      expected_input = "<input data-toggle=\"popover\" data-placement=\"top\" data-content=\"\" data-original-title=\"\" class=\"span2 droppable dependence_value\" type=\"text\" name=\"groups.1.fields.1.dependence.values\" value=\"\" placeholder=\"nro. ID\"";
       group_order = "1";
       field_order = "1";
       dependency_input = new DependencyInput(group_order, field_order);
@@ -15,7 +15,7 @@
     });
     it("render should have group_order, field_order and value", function() {
       var dependency_input, expected_input, field_order, group_order, outer_html, widget;
-      expected_input = "<input class=\"span2 droppable dependence_value\" type=\"text\" name=\"groups.0.fields.0.dependence.values\" value=\"\" placeholder=\"nro. ID\"";
+      expected_input = "<input data-toggle=\"popover\" data-placement=\"top\" 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);
@@ -64,8 +64,7 @@
       expect(popover_title).toHaveText(q_value);
       popover_content = $(".popover .popover-content");
       expect(popover_content).toHaveText(opt_value);
-      $(".popover").remove();
-      input.blur();
+      input.popover('hide');
       new_value = "new value";
       q_selector = "input[name=\"" + q_name + "\"]";
       opt_selector = "input[name=\"" + opt_name + "\"]";
diff --git a/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee b/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee
index 320e162..a687875 100644
--- a/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee
+++ b/webapp/js_tests/spec/coffee/DependencyInputSpec.coffee
@@ -4,7 +4,7 @@ describe "DependencyInput", ->
             <span class="_parentesis _parentesis_open">(</span><span class="_parentesis _parentesis_close">)</span>
                         """
         expected_input = """
-            <input class="span2 droppable dependence_value" type="text" name="groups.1.fields.1.dependence.values" value="" placeholder="nro. ID"
+            <input data-toggle="popover" data-placement="top" data-content="" data-original-title="" class="span2 droppable dependence_value" type="text" name="groups.1.fields.1.dependence.values" value="" placeholder="nro. ID"
                          """
         group_order = "1"
         field_order = "1"
@@ -16,7 +16,7 @@ describe "DependencyInput", ->
 
     it "render should have group_order, field_order and value", ->
         expected_input = """
-            <input class="span2 droppable dependence_value" type="text" name="groups.0.fields.0.dependence.values" value="" placeholder="nro. ID"
+            <input data-toggle="popover" data-placement="top" 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"
@@ -76,8 +76,7 @@ describe "DependencyInput", ->
         popover_content = $(".popover .popover-content")
         expect(popover_content).toHaveText(opt_value)
 
-        $(".popover").remove()
-        input.blur()
+        input.popover('hide')
         new_value = "new value"
         q_selector = """input[name="#{q_name}"]"""
         opt_selector = """input[name="#{opt_name}"]"""
diff --git a/webapp/webapp/static/js/dependency_input.js b/webapp/webapp/static/js/dependency_input.js
index 457b317..b2b27e8 100644
--- a/webapp/webapp/static/js/dependency_input.js
+++ b/webapp/webapp/static/js/dependency_input.js
@@ -7,6 +7,7 @@
       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.value = "";
     }
 
@@ -35,15 +36,11 @@
             q_value = question_widget.val();
           }
         }
-        input.popover({
-          title: q_value,
-          content: opt_value,
-          trigger: "manual"
-        });
-        return input.popover("show");
+        input.attr("data-original-title", q_value);
+        return input.attr("data-content", opt_value);
       });
-      input.on("blur", function() {
-        return input.popover("destroy");
+      input.popover({
+        trigger: "click"
       });
       return widget;
     };