Fix various JS Turbo issues

First one, Turbo reasonably yelled at us in the JS console that we
should put its script tag in the `head` rather than the `body`, because
it re-executes scripts in the `body` and we don't want to spin up Turbo
multiple times!

I also removed some scripts that aren't relevant anymore, fixed a bug
in `outfits/new.js` where failing to load a donation pet would cause
the preview thing to not work when you type (I think this might've
already been an issue?), reworked `item_header.js` to just run once in
the `head`, and split scripts into `:javascripts` (run once in `head`)
vs `:javascripts_body` (run every page load in `body`).

app/assets/javascripts/closet_hangers/index.js

@@ -747,16 +747,6 @@
     }
   });
 
-  /*
-
-    Hanger list controls
-
-  */
-
-  $("input[type=submit][data-confirm]").live("click", function (e) {
-    if (!confirm(this.getAttribute("data-confirm"))) e.preventDefault();
-  });
-
   /*
 
     Closet list droppable

app/assets/javascripts/fundraising/campaigns/show.js

@@ -1,66 +0,0 @@
-(function() {
-  var donationForm = document.getElementById('donation-form');
-
-  function field(name) {
-    return donationForm.querySelector(
-      'input[name=donation\\[' + name + '\\]]');
-  }
-
-  var checkout = StripeCheckout.configure({
-    key: donationForm.getAttribute('data-checkout-publishable-key'),
-    image: donationForm.getAttribute('data-checkout-image'),
-    token: function(token) {
-      field('stripe_token').value = token.id;
-      field('stripe_token_type').value = token.type;
-      field('donor_email').value = token.email;
-      donationForm.submit();
-    },
-    bitcoin: true
-  });
-
-  donationForm.addEventListener('submit', function(e) {
-    if (!field('stripe_token').value) {
-      e.preventDefault();
-
-      var amountChoice =
-        donationForm.querySelector('input[name=amount]:checked');
-      if (amountChoice.value === "custom") {
-        amountChoice = document.getElementById('amount-custom-value');
-      }
-
-      // Start parsing at the first digit in the string, to trim leading dollar
-      // signs and what have you.
-      var amountNumberString = (amountChoice.value.match(/[0-9].*/) || [""])[0];
-      var amount = Math.floor(parseFloat(amountNumberString) * 100);
-
-      if (!isNaN(amount)) {
-        field('amount').value = amountNumberString;
-        checkout.open({
-          name: 'Dress to Impress',
-          description: 'Donation (thank you!)',
-          amount: amount,
-          panelLabel: "Donate"
-        });
-      }
-    }
-  });
-
-  var toggle = document.getElementById('success-thanks-toggle-description');
-  if (toggle) {
-    toggle.addEventListener('click', function() {
-      var desc = document.getElementById('description');
-      var attr = 'data-show';
-      if (desc.hasAttribute(attr)) {
-        desc.removeAttribute(attr);
-      } else {
-        desc.setAttribute(attr, true);
-      }
-    });
-  }
-
-  document.getElementById('amount-custom').addEventListener('change', function(e) {
-    if (e.target.checked) {
-      document.getElementById('amount-custom-value').focus();
-    }
-  });
-})();

app/assets/javascripts/items/item_header.js

@@ -3,22 +3,17 @@ function setFormStateCookie(value) {
 	document.cookie = `DTIItemPageUserListsFormState=${value};max-age=${thirtyDays}`;
 }
 
-const headers = document.querySelectorAll(".item-header");
-for (const header of headers) {
-	try {
+document.addEventListener("click", (event) => {
+	if (event.target.matches(".item-header .user-lists-form-opener")) {
+		const header = event.target.closest(".item-header");
 		const form = header.querySelector(".user-lists-form");
-		const opener = header.querySelector(".user-lists-form-opener");
-		opener.addEventListener("click", (event) => {
-			if (form.hasAttribute("hidden")) {
-				form.removeAttribute("hidden");
-				setFormStateCookie("open");
-			} else {
-				form.setAttribute("hidden", "");
-				setFormStateCookie("closed");
-			}
-			event.preventDefault();
-		});
-	} catch (error) {
-		console.error(`Error applying dialog behavior to item header:`, error);
+		if (form.hasAttribute("hidden")) {
+			form.removeAttribute("hidden");
+			setFormStateCookie("open");
+		} else {
+			form.setAttribute("hidden", "");
+			setFormStateCookie("closed");
+		}
+		event.preventDefault();
 	}
-}
+});

app/assets/javascripts/outfits/index.js

@@ -1,3 +0,0 @@
-$("form.button_to input[type=submit]").click(function (e) {
-  if (!confirm(this.getAttribute("data-confirm"))) e.preventDefault();
-});

app/assets/javascripts/outfits/new.js

@@ -194,7 +194,7 @@
     Preview.updateWithName(name_el);
 
     name_el.keyup(function () {
-      if (previewWithNameTimeout) {
+      if (previewWithNameTimeout && Preview.Job.current) {
         clearTimeout(previewWithNameTimeout);
         Preview.Job.current.loading = false;
       }

app/helpers/application_helper.rb

@@ -114,7 +114,7 @@ module ApplicationHelper
 
   def include_javascript_libraries(*library_names)
     raw(library_names.inject('') do |html, name|
-      html + javascript_include_tag(JAVASCRIPT_LIBRARIES[name])
+      html + javascript_include_tag(JAVASCRIPT_LIBRARIES[name], defer: true)
     end)
   end
   

app/views/closet_hangers/index.html.haml

@@ -153,7 +153,10 @@
 - content_for :javascripts do
   = include_javascript_libraries :jquery, :jquery_tmpl
   = javascript_include_tag 'ajax_auth', 'lib/jquery.ui', 'lib/jquery.jgrowl',
-    'closet_hangers/index'
+    defer: true
+
+- content_for :javascripts_body do
+  = javascript_include_tag 'closet_hangers/index', defer: true
 
 - if public_perspective? && user_signed_in?
   - content_for :meta do

app/views/fundraising/campaigns/show.html.haml

@@ -123,9 +123,5 @@
     #{mail_to 'webmaster@openneo.net', "Please email us for more information."}
     Thank you!!
 
-- content_for :javascripts do
-  = javascript_include_tag 'https://checkout.stripe.com/checkout.js',
-      'fundraising/campaigns/show'
-
 - content_for :stylesheets do
   = stylesheet_link_tag 'fundraising/campaigns/show'

app/views/fundraising/donations/show.html.haml

@@ -43,7 +43,9 @@
 
 - content_for :javascripts do
   = include_javascript_libraries :jquery
-  = javascript_include_tag 'fundraising/donations/show'
+
+- content_for :javascripts_body do
+  = javascript_include_tag 'fundraising/donations/show', defer: true
 
 - content_for :stylesheets do
   = stylesheet_link_tag 'fundraising/donations/show'

app/views/items/_item_header.html.haml

@@ -96,4 +96,4 @@
             'data-is-current' => current_subpage == 'trades_seeking'
 
 - content_for :javascripts do
-  = javascript_include_tag 'items/item_header'
+  = javascript_include_tag 'items/item_header', defer: true

app/views/items/show.html.haml

@@ -23,6 +23,6 @@
         %li= link_to(contributor.name, user_contributions_path(contributor)) + format_contribution_count(count)
     %footer= t '.contributors.footer'
 
-- content_for :javascripts do
+- content_for :javascripts_body do
   = javascript_include_tag 'item-page', defer: true
 

app/views/layouts/application.html.haml

@@ -21,6 +21,8 @@
     = signed_in_meta_tag
     - if user_signed_in?
       = current_user_id_meta_tag
+    = javascript_include_tag 'application', defer: true
+    = yield :javascripts
     = yield :head
   %body{:class => body_class}
     #container
@@ -73,7 +75,9 @@
             %li= mail_to contact_email, t('.footer.email')
         
         %p= t '.footer.copyright', :year => Date.today.year
-      
-      = javascript_include_tag 'application'
-      = yield(:javascripts)
 
+    -# For scripts that expect to get to just execute once every time the page
+    -# loads. For future JS, it would be advisable to write it such that it's
+    -# okay for Turbo to run it once at the start of the page, then listen to
+    -# `turbo:load` events or use inline scripts to actually _do_ things.
+    = yield :javascripts_body

app/views/outfits/index.html.haml

@@ -6,8 +6,3 @@
   %ul#outfits= render @outfits
 - else
   %p= twl '.no_outfits', :start_link_url => root_path
-
-- content_for :javascripts do
-  = include_javascript_libraries :jquery
-  = javascript_include_tag 'outfits/index'
-

app/views/outfits/new.html.haml

@@ -124,4 +124,7 @@
 
 - content_for :javascripts do
   = include_javascript_libraries :jquery20, :jquery_tmpl
-  = javascript_include_tag 'ajax_auth', 'lib/jquery.timeago', 'outfits/new'
+  = javascript_include_tag 'ajax_auth', 'lib/jquery.timeago', defer: true
+
+- content_for :javascripts_body do
+  = javascript_include_tag 'outfits/new', defer: true

app/views/pets/bulk.html.haml

@@ -79,4 +79,7 @@
 
 - content_for :javascripts do
   = include_javascript_libraries :jquery, :jquery_tmpl
-  = javascript_include_tag 'ajax_auth', 'pets/bulk'
+  = javascript_include_tag 'ajax_auth', defer: true
+
+- content_for :javascripts_body do
+  = javascript_include_tag 'pets/bulk', defer: true