Add javascripts for button loading states, file input states

toolkit/scss/toolkit.scss

@@ -136,6 +136,7 @@ body {
 }
 
 .toolkit-button-group {
+    display: flex;
     margin: 0 -4px;
 }
 

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")?;
 

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));
+    }
+})

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));
+    }
+})

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>

toolkit/templates/card_title.rs.html

@@ -0,0 +1,5 @@
+@(title: Content)
+
+<div class="toolkit-card--title">
+    @:title()
+</div>