#225 Add ability to specify HTML5 data attributes in tags

Author: Igor Polevoy

activeweb/src/main/java/org/javalite/activeweb/freemarker/FormTag.java

@@ -109,6 +109,14 @@
  *       <input type="hidden" name="blah">
  *  </form>
  </pre>
+
+ * <h4>Adding HTML5-style attributes</h4>
+ *  Use a special attribute "data", whose value will be added to the resulting tag verbatim.
+ *
+ *<pre>
+ &lt;@form data="data-greeting='hola' data-bye='astalavista'" ...  &gt;
+ *</pre>
+ *
  * @author Igor Polevoy
  */
 public class FormTag  extends FreeMarkerTag{
@@ -157,13 +165,16 @@ protected void render(Map params, String body, Writer writer) throws Exception {
             tf.attribute("method", "post");
         }else{
             if(params.get("method") != null)
-            tf.attribute("method", params.get("method").toString());
+                tf.attribute("method", params.get("method").toString());
         }
         if(params.get("html_id")!= null){
             tf.attribute("id", params.get("html_id").toString());
         }
 
-        tf.addAttributesExcept(params, "controller", "action", "method", "id", "html_id");
+        tf.addAttributesExcept(params, "controller", "action", "method", "id", "html_id", "data");
+        if(params.containsKey("data")){
+            tf.textAttributes(params.get("data").toString());
+        }
         tf.write(writer);
     }
 }

activeweb/src/main/java/org/javalite/activeweb/freemarker/LinkToTag.java

@@ -164,6 +164,14 @@
  * </code>
  *
  *  In this example, the link is trying to make an Ajax call to a controlled action which does not exists.
+ *
+ * <h4>Adding HTML5-style attributes</h4>
+ *  Use a special attribute "data", whose value will be added to the resulting tag verbatim.
+ *
+ *<pre>
+ &lt;@link_to data="data-greeting='hola' data-bye='astalavista'" ...  &gt;
+ *</pre>
+
  *
  * @author Igor Polevoy
  */
@@ -253,7 +261,13 @@ protected void render(Map params, String body, Writer writer) throws Exception {
 
         tf.addAttributesExcept(params, "controller", "action", "form", "id", "method",
                 "query_string", "query_params", "context_path", "destination",
-                "before", "before_arg", "after", "after_arg", "confirm", "error", "html_id");
+                "before", "before_arg", "after", "after_arg", "confirm", "error", "html_id", "data");
+
+
+        if(params.containsKey("data")){
+            tf.textAttributes(params.get("data").toString());
+        }
+
         writer.write(tf.toString());
     }
 

activeweb/src/main/java/org/javalite/activeweb/freemarker/SelectTag.java

@@ -36,12 +36,27 @@
  *
  * then the output from the tag will be:
  *<pre>
- *     &lt;select&gt;&lt;option value=&quot;3&quot;&gt;A Tale of Two Cities&lt;/option&gt;
-       &lt;option value=&quot;1&quot;&gt;The Hitchhiker&apos;s Guide to the Galaxy&lt;/option&gt;&lt;option value=&quot;2&quot; selected=&quot;true&quot;&gt;All Quiet on Western Front&lt;/option&gt;&lt;/select&gt;
+ &lt;select&gt;
+       &lt;option value=&quot;3&quot;&gt;A Tale of Two Cities&lt;/option&gt;
+       &lt;option value=&quot;1&quot;&gt;The Hitchhiker&apos;s Guide to the Galaxy&lt;/option&gt;
+       &lt;option value=&quot;2&quot; selected=&quot;true&quot;&gt;All Quiet on Western Front&lt;/option&gt;
+ &lt;/select&gt;
  *</pre>
  *
  * Which means that the generated code is appended to hand-written body.
  *
+ * <br>
+ *
+ *  <h4>Adding HTML5-style attributes</h4>
+ *  Use a special attribute "data", whose value will be added to the resulting tag verbatim.
+ *
+ *<pre>
+ &lt;select data="data-greeting='hola' data-bye='astalavista'"  &gt;
+   ...
+ &lt;/select&gt;
+ *</pre>
+ *
+ *
  * @author Igor Polevoy: 4/12/12 1:13 PM
  */
 public class SelectTag extends FreeMarkerTag {
@@ -86,7 +101,11 @@ protected void render(Map params, String body, Writer writer) throws Exception {
         }
 
         TagFactory selectTf = new TagFactory("select", body + optionsBuffer);
-        selectTf.addAttributesExcept(params, "list");
-        writer.write(selectTf.toString());
+        selectTf.addAttributesExcept(params, "list", "data");
+        if(params.containsKey("data")){
+            selectTf.textAttributes(params.get("data").toString());
+        }
+        selectTf.write(writer);
+
     }
 }

activeweb/src/main/java/org/javalite/activeweb/freemarker/TagFactory.java

@@ -29,15 +29,19 @@
  * @author Igor Polevoy
  */
 public class TagFactory {
-    private String name, body;
-
+    private String name, body, textAttributes;
     private List<Attribute> attributes = new ArrayList<Attribute>();
 
+
     public TagFactory(String name, String body) {
         this.name = name;
         this.body = body;
     }
 
+    public void textAttributes(String textAttributes) {
+        this.textAttributes = textAttributes;
+    }
+
     public void attribute(String name, String value) {
         attributes.add(new Attribute(name, value));
 
@@ -63,6 +67,12 @@ public void write(Writer w) {
                 w.write("\"");
             }
 
+
+            if(textAttributes != null){
+                w.write(" ");
+                w.write(textAttributes);
+            }
+
             if(Util.blank(body)){
                 w.write("/>");
             }else{

activeweb/src/test/java/org/javalite/activeweb/freemarker/FormTagSpec.java

@@ -160,10 +160,15 @@ public void should_add_nbsp_to_emty_form(){
         StringWriter sw = new StringWriter();
         manager.merge(map("context_path", "/simple_context", "activeweb", map("controller", "simple", "restful", true)),
                 "/form/empty_form", sw);
+        a(sw.toString()).shouldBeEqual("<form action=\"/simple_context/simple\">&nbsp;</form>");
+    }
 
+    @Test
+    public void should_add_HTML5_attributes(){
+        StringWriter sw = new StringWriter();
+        manager.merge(map("context_path", "/simple_context", "activeweb", map("controller", "simple", "restful", true)),
+                "/form/html5_form", sw);
 
-        System.out.println(sw.toString());
-
-
+        a(sw.toString()).shouldBeEqual("<form action=\"/simple_context/simple\" data-input='hello'>&nbsp;</form>");
     }
 }

activeweb/src/test/java/org/javalite/activeweb/freemarker/LinkToTagSpec.java

@@ -125,7 +125,7 @@ public void shouldFailRestfulIfIdProvidedToNewForm(){
 
         sw = new StringWriter();
         manager.merge(map("context_path", "/bookstore", "activeweb", map("controller", "/rest/book", "restful", true)),
-                        "link_to/restful_id_for_new_form", sw);
+                "link_to/restful_id_for_new_form", sw);
     }
 
     /**
@@ -191,4 +191,13 @@ public void shouldFixIssue102() {
                 "/link_to/defect_105", sw);
         a(sw.toString()).shouldBeEqual("<a href=\"/book/read?first_name=John\" data-link=\"aw\" class=\"red_button\">Click here to read book 2</a>");
     }
+
+    @Test
+    public void should_add_HTML5_attributes() {
+        sw = new StringWriter();
+        manager.getTag("link_to").overrideContext("");
+        manager.merge(map("context_path", "/bookstore", "activeweb", map("controller", "simple", "restful", false)),
+                "/link_to/html5", sw);
+        a(sw.toString()).shouldBeEqual("<a href=\"/book/read?first_name=John\" data-link=\"aw\" class=\"red_button\" data-attributes='hello'>Click here to read book 2</a>");
+    }
 }

activeweb/src/test/java/org/javalite/activeweb/freemarker/SelectTagSpec.java

@@ -80,6 +80,16 @@ public void shouldRenderSelectTag() {
         a(sw.toString()).shouldBeEqual("<select><option value=\"1\">The Hitchhiker's Guide to the Galaxy</option><option value=\"2\" selected=\"true\">All Quiet on Western Front</option></select>");
     }
 
+    @Test
+    public void shouldRenderHTML5Attributes() {
+        sw = new StringWriter();
+        manager.merge(map("context_path", "/bookstore", "activeweb", map("controller", "simple", "restful", false),
+                        "books", list(new SelectOption(1, "The Hitchhiker's Guide to the Galaxy"), new SelectOption(2, "All Quiet on Western Front", true))),  //<<--- -this is data passed to tag
+                "/select/html5", sw);
+
+        a(sw.toString()).shouldBeEqual("<select data-attributes='hello'><option value=\"1\">The Hitchhiker's Guide to the Galaxy</option><option value=\"2\" selected=\"true\">All Quiet on Western Front</option></select>");
+    }
+
     @Test
     public void shouldRenderSelectTagWithBody() {
         sw = new StringWriter();

activeweb/src/test/views/form/html5_form.ftl

@@ -0,0 +1 @@
+<@form controller="simple" data="data-input='hello'"/>

activeweb/src/test/views/link_to/html5.ftl

@@ -0,0 +1 @@
+<@link_to controller="book" action="read" id=null query_string="first_name=John" class="red_button" data="data-attributes='hello'">Click here to read book 2</@>

activeweb/src/test/views/select/html5.ftl

@@ -0,0 +1 @@
+<@select list=books data="data-attributes='hello'"/>