JS dependent fields, cleanup contact form, rewrote menu js with jQuery

content/pages/contact.md

@@ -8,8 +8,8 @@ Submit the form below, write to [mail@ant.sr](mailto:mail@ant.sr) or leave a mes
 Looking forward to hearing from you!
 
 <form class="xhr" action="https://api.ant.sr/api/contact" method="post">
-    <input name="name" placeholder="Name">
-    <input name="email" type="email" placeholder="Email" required>
-    <textarea name="text" placeholder="Your message" required></textarea>
+    <textarea name="text" placeholder="Your message" required autofocus></textarea>
+    <input name="name" data-reveal-after="[name=text]" placeholder="Your Name" required>
+    <input name="email" data-reveal-after="[name=text]" type="email" placeholder="Your Email" required>
     <input type="submit" value="Send">
 </form>

theme/static/css/style.css

@@ -135,9 +135,11 @@ form {
 }
 input {
     flex: 1 0 10em;
+    margin: .25em;
 }
 textarea {
-    flex: 0 0 100%;
+    flex: 1 1 100%;
+    margin: .25em;
 }
 
 /* Links */

theme/static/js/script.js

-/* Responsive Navigation Menu */
+/* Responsive Navigation Menu
+ *
+ * Expand/collapse logic for hamburger menu.
+ */
 (function(selector) {
-    var nav = document.querySelector(selector),
-        toggle = document.createElement("button");
-    toggle.className = "toggle";
-    toggle.innerHTML  = "<span class='toggle-box'>"
-                      + "<span class='toggle-inner'></span>"
-                      + "</span>";
-    toggle.addEventListener("click", function(e) {
-        if (nav.className.indexOf("collapsed") != -1) {
-            nav.className = nav.className.replace("collapsed", "expanded");
-        } else {
-            nav.className = nav.className.replace("expanded", "collapsed");
-        }
-    }, false);
-    nav.insertBefore(toggle, nav.firstChild);
-    nav.className += "collapsed";
+    var toggle = $("<button>")
+        .addClass("toggle")
+        .html("<span class='toggle-box'>"
+            + "<span class='toggle-inner'></span>"
+            + "</span>")
+        .click(function() {
+            $(selector).toggleClass("collapsed expanded");
+        });
+    $(selector).prepend(toggle).addClass("collapsed");
 })("body > div > nav");
 
 /* Submit forms using XHR */
@@ -35,7 +32,6 @@
                     alert("Too many requests from your network. Please try again in "
                         + retry + " seconds.");
                 } else {
-                    console.log(jqXHR);
                     alert("Too many requests from your network. Please try again later.");
                 }
             } else {
@@ -45,3 +41,40 @@
         return false;
     });
 })("form.xhr");
+
+/* Dynamic Form Inputs
+ *
+ * data-reveal-after    If this attribute is filled with a jQuery selector,
+ *                      the input will be hidden until the target element has
+ *                      been changed to a non-empty value.
+ */
+(function(selector) {
+    var triggers = [];
+    $(selector).find(":input[data-reveal-after]")
+        .each(function() {
+            var trigger = $(this).data('reveal-after');
+            var deps = $(trigger).data('dependents');
+            if ($.isArray(deps)) {
+                deps.push(this);
+            } else {
+                deps = [this];
+            }
+            $(trigger).data('dependents', deps);
+            if (triggers.indexOf(trigger) == -1) {
+                triggers.push(trigger);
+            }
+        });
+    for (t in triggers) {
+        $(triggers[t]).change(function() {
+            var deps = $(this).data('dependents');
+            for (d in deps) {
+                if ($(this).val()) {
+                    $(deps[d]).show();
+                } else {
+                    $(deps[d]).hide();
+                }
+            }
+            $(deps[0]).focus();
+        }).change();
+    }
+})("form")

theme/templates/page.html

 {% extends "base.html" %}
-{% block title %}{{ page.title }}| {{ super() }}{% endblock %}
+{% block title %}{{ page.title }} | {{ super() }}{% endblock %}
 {% block content %}
             <h1>{{ page.title }}</h1>
 {% import 'translations.html' as translations with context %}