From 92559fd7df55eb989d81c94691d2e0740dffee45 Mon Sep 17 00:00:00 2001
From: Ryan Peters <ryan@binarydad.com>
Date: Wed, 21 Jul 2021 11:00:05 -0400
Subject: [PATCH] add extension for typing delay

---
 BinaryDad.Coding/Pages/Shared/_Layout.cshtml |  5 +--
 BinaryDad.Coding/wwwroot/css/site.css        |  4 +++
 BinaryDad.Coding/wwwroot/js/extensions.js    | 36 ++++++++++++++++++++
 BinaryDad.Coding/wwwroot/js/hub.js           |  2 +-
 4 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 BinaryDad.Coding/wwwroot/js/extensions.js

diff --git a/BinaryDad.Coding/Pages/Shared/_Layout.cshtml b/BinaryDad.Coding/Pages/Shared/_Layout.cshtml
index e7ac2c2..13381a3 100644
--- a/BinaryDad.Coding/Pages/Shared/_Layout.cshtml
+++ b/BinaryDad.Coding/Pages/Shared/_Layout.cshtml
@@ -16,8 +16,8 @@
         <nav class="navbar navbar-expand navbar-light justify-content-between">
             <a class="navbar-brand" href="#">HTML 101</a>
             <form class="form-inline" action="">
-                <input type="text" class="form-control mr-sm-2" id="your-name-text" placeholder="Enter your name" />
-                <input type="text" class="form-control" maxlength="6" id="your-color-text" placeholder="Color" />
+                <input type="text" class="form-control mr-sm-2" id="your-name-text" placeholder="Enter your name!" />
+                <input type="text" class="form-control" id="your-color-text" placeholder="Color?" />
             </form>
             <div class="collapse navbar-collapse">
                 <ul class="navbar-nav ml-auto">
@@ -42,6 +42,7 @@
     </div>
 
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
+    <script src="~/js/extensions.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>
 
diff --git a/BinaryDad.Coding/wwwroot/css/site.css b/BinaryDad.Coding/wwwroot/css/site.css
index 4c8536b..a8229df 100644
--- a/BinaryDad.Coding/wwwroot/css/site.css
+++ b/BinaryDad.Coding/wwwroot/css/site.css
@@ -22,6 +22,10 @@ textarea, .navbar-brand {
     line-height: 18px;
 }
 
+#your-name-text, #your-color-text {
+    font-weight: bold;
+}
+
 #your-color-text {
     width: 90px;
     text-align: center;
diff --git a/BinaryDad.Coding/wwwroot/js/extensions.js b/BinaryDad.Coding/wwwroot/js/extensions.js
new file mode 100644
index 0000000..64e4312
--- /dev/null
+++ b/BinaryDad.Coding/wwwroot/js/extensions.js
@@ -0,0 +1,36 @@
+; (function ($) {
+    $.fn.extend({
+        doneTyping: function (callback, timeout) {
+            timeout = timeout || 500; // 500 ms default timeout
+            var timeoutReference,
+                doneTyping = function (el) {
+                    if (!timeoutReference) return;
+                    timeoutReference = null;
+                    callback.call(el);
+                };
+            return this.each(function (i, el) {
+                var $el = $(el);
+                // Chrome Fix (Use keyup over keypress to detect backspace)
+                // thank you @palerdot
+                $el.is(':input') && $el.on('keyup keypress paste', function (e) {
+                    // This catches the backspace button in chrome, but also prevents
+                    // the event from triggering too preemptively. Without this line,
+                    // using tab/shift+tab will make the focused element fire the callback.
+                    if (e.type == 'keyup' && e.keyCode != 8) return;
+
+                    // Check if timeout has been set. If it has, "reset" the clock and
+                    // start over again.
+                    if (timeoutReference) clearTimeout(timeoutReference);
+                    timeoutReference = setTimeout(function () {
+                        // if we made it here, our timeout has elapsed. Fire the
+                        // callback
+                        doneTyping(el);
+                    }, timeout);
+                }).on('blur', function () {
+                    // If we can, fire the event since we're leaving the field
+                    doneTyping(el);
+                });
+            });
+        }
+    });
+})(jQuery);
\ No newline at end of file
diff --git a/BinaryDad.Coding/wwwroot/js/hub.js b/BinaryDad.Coding/wwwroot/js/hub.js
index 7c42671..5d24567 100644
--- a/BinaryDad.Coding/wwwroot/js/hub.js
+++ b/BinaryDad.Coding/wwwroot/js/hub.js
@@ -34,7 +34,7 @@
 
     // events
     $(window).on('hashchange', isLiveMode);
-    $('#your-name-text, #your-color-text').on('blur', sendName);
+    $('#your-name-text, #your-color-text').doneTyping(sendName);
 
     let isTeacher = window.location.hash === '#4ELQcUq7UnFGghAZCVr4Chr9JmtncigfkGu5WSf9';