From dfb73b563fc27f67ef800e1849dbaf80f11e1a77 Mon Sep 17 00:00:00 2001
From: asonix <asonix@asonix.dog>
Date: Thu, 7 Jan 2021 22:41:37 -0600
Subject: [PATCH] Add javascripts for button loading states, file input states

---
 toolkit/scss/toolkit.scss            |  1 +
 toolkit/src/build.rs                 |  1 +
 toolkit/static/button.js             | 33 +++++++++++++++++++++++
 toolkit/static/file_input.js         | 39 ++++++++++++++++++++++++++++
 toolkit/templates/card.rs.html       |  5 +---
 toolkit/templates/card_title.rs.html |  5 ++++
 6 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 toolkit/static/button.js
 create mode 100644 toolkit/static/file_input.js
 create mode 100644 toolkit/templates/card_title.rs.html

diff --git a/toolkit/scss/toolkit.scss b/toolkit/scss/toolkit.scss
index afa9f38..0827115 100644
--- a/toolkit/scss/toolkit.scss
+++ b/toolkit/scss/toolkit.scss
@@ -136,6 +136,7 @@ body {
 }
 
 .toolkit-button-group {
+    display: flex;
     margin: 0 -4px;
 }
 
diff --git a/toolkit/src/build.rs b/toolkit/src/build.rs
index 6c8623a..5350a8e 100644
--- a/toolkit/src/build.rs
+++ b/toolkit/src/build.rs
@@ -3,6 +3,7 @@ use ructe::Ructe;
 fn main() -> ructe::Result<()> {
     let mut ructe = Ructe::from_env()?;
     let mut statics = ructe.statics()?;
+    statics.add_files("static")?;
     statics.add_sass_file("scss/toolkit.scss")?;
     ructe.compile_templates("templates")?;
 
diff --git a/toolkit/static/button.js b/toolkit/static/button.js
new file mode 100644
index 0000000..c93d366
--- /dev/null
+++ b/toolkit/static/button.js
@@ -0,0 +1,33 @@
+(function(fn) {
+    if (document.readyState === "complete" || document.readyState === "interactive") {
+        setTimeout(fn, 1);
+    } else {
+        document.addEventListener("DOMContentLoaded", fn);
+    }
+})(function() {
+    function preventDoubleClick(event) {
+        event.preventDefault();
+    }
+
+    function onClick(button, span) {
+        return function _listener() {
+            span.textContent = "Loading";
+
+            button.removeEventListener("click", _listener);
+            button.addEventListener("click", preventDoubleClick);
+        };
+    }
+
+    var buttons = document.getElementsByClassName("toolkit-button");
+
+    for (var i = 0; i < buttons.length; i++) {
+        var span = buttons[i].getElementsByTagName("span")[0];
+        var button = buttons[i].getElementsByTagName("button")[0];
+
+        if (!span || !button) {
+            continue;
+        }
+
+        button.addEventListener("click", onClick(button, span));
+    }
+})
diff --git a/toolkit/static/file_input.js b/toolkit/static/file_input.js
new file mode 100644
index 0000000..aefadf3
--- /dev/null
+++ b/toolkit/static/file_input.js
@@ -0,0 +1,39 @@
+(function(fn) {
+    if (document.readyState === "complete" || document.readyState === "interactive") {
+        setTimeout(fn, 1);
+    } else {
+        document.addEventListener("DOMContentLoaded", fn);
+    }
+})(function() {
+    function selectedMessage(multiple, files) {
+        if (multiple && files.length == 1) {
+            return "1 Selected File";
+        } else if (multiple) {
+            return "0 Selected files";
+        } else {
+            return "Selected: " + files[0].name;
+        }
+    }
+
+    function onSelect(input, span) {
+        return function(event) {
+            if (event.target.files) {
+                span.textContent = selectedMessage(input.multiple, event.target.files);
+            }
+        };
+    }
+
+    var file_inputs = document.getElementsByClassName("toolkit-file");
+
+    for (var i = 0; i < file_inputs.length; i++) {
+        var span = file_inputs[i].getElementsByTagName("span")[0];
+        var input = file_inputs[i].getElementsByTagName("input")[0];
+
+        if (!span || !input) {
+            console.error("Error fetching file upload for", file_inputs[i]);
+            continue;
+        }
+
+        input.addEventListener("change", onSelect(input, span));
+    }
+})
diff --git a/toolkit/templates/card.rs.html b/toolkit/templates/card.rs.html
index 71193f9..d9355b2 100644
--- a/toolkit/templates/card.rs.html
+++ b/toolkit/templates/card.rs.html
@@ -1,10 +1,7 @@
 @use crate::Card;
 
-@(card: &Card, title: Content, body: Content)
+@(card: &Card, body: Content)
 
 <div class="@card.class_string()">
-    <div class="toolkit-card--title">
-        @:title()
-    </div>
     @:body()
 </div>
diff --git a/toolkit/templates/card_title.rs.html b/toolkit/templates/card_title.rs.html
new file mode 100644
index 0000000..520399f
--- /dev/null
+++ b/toolkit/templates/card_title.rs.html
@@ -0,0 +1,5 @@
+@(title: Content)
+
+<div class="toolkit-card--title">
+    @:title()
+</div>