From c72d47304327377239fa03bcc3a5abb7305414ab Mon Sep 17 00:00:00 2001
From: Anton Sarukhanov <code@ant.sr>
Date: Thu, 3 Nov 2016 15:28:47 -0400
Subject: [PATCH] JS dependent fields, cleanup contact form, rewrote menu js
 with jQuery

---
 content/pages/contact.md   |  6 ++--
 theme/static/css/style.css |  4 ++-
 theme/static/js/script.js  | 67 ++++++++++++++++++++++++++++----------
 theme/templates/page.html  |  2 +-
 4 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/content/pages/contact.md b/content/pages/contact.md
index aa79944..491ed89 100644
--- a/content/pages/contact.md
+++ b/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>
diff --git a/theme/static/css/style.css b/theme/static/css/style.css
index e33c1c7..2556797 100644
--- a/theme/static/css/style.css
+++ b/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 */
diff --git a/theme/static/js/script.js b/theme/static/js/script.js
index 3639632..5e55055 100644
--- a/theme/static/js/script.js
+++ b/theme/static/js/script.js
@@ -1,20 +1,17 @@
-/* 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")
diff --git a/theme/templates/page.html b/theme/templates/page.html
index 2ac9941..34a6c45 100644
--- a/theme/templates/page.html
+++ b/theme/templates/page.html
@@ -1,5 +1,5 @@
 {% 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 %}
-- 
GitLab