Downgrade jQuery on homepage to be the same version as everywhere else

I noticed an issue where Turbo-loading between the Your Items page and
the homepage would clobber each other's copy of jQuery, breaking things
sometimes. e.g. go to Your Items, then go to home, then go to Your
Items, and the page's JS fails because `$.fn.live` isn't defined.

I briefly tested the homepage and it didn't seem to actually depend on
any features from the later version of jQuery? At least not that I
noticed! So I'll just downgrade for consistency. (I also tried
upgrading the Your Items page, but there's too much usage of
`$.fn.live`, which is replaced with a notably different syntax in
jQuery 2.0+.)

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

@@ -108,13 +108,12 @@ module ApplicationHelper
 
   JAVASCRIPT_LIBRARIES = {
     :jquery => 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js',
-    :jquery20 => 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js',
     :jquery_tmpl => 'https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js',
   }
 
   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/javascript/wardrobe-2020/AppProvider.js

@@ -1,16 +1,29 @@
 import React from "react";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
-import { ChakraProvider, Box, useColorModeValue } from "@chakra-ui/react";
+import {
+  ChakraProvider,
+  Box,
+  theme as defaultTheme,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import { ApolloProvider } from "@apollo/client";
 import { BrowserRouter } from "react-router-dom";
 import { Global } from "@emotion/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import produce from "immer";
 
 import apolloClient from "./apolloClient";
 
 const reactQueryClient = new QueryClient();
 
+// Use Chakra's default theme, but with the global styles removed. (We've
+// copied them into our `ScopedCSSReset` component, to apply in only the places
+// we actually want them!)
+const theme = produce(defaultTheme, (theme) => {
+  theme.styles.global = {};
+});
+
 export default function AppProvider({ children }) {
   React.useEffect(() => setupLogging(), []);
 
@@ -18,7 +31,7 @@ export default function AppProvider({ children }) {
     <BrowserRouter>
       <QueryClientProvider client={reactQueryClient}>
         <ApolloProvider client={apolloClient}>
-          <ChakraProvider resetCSS={false}>
+          <ChakraProvider resetCSS={false} theme={theme}>
             <ScopedCSSReset>{children}</ScopedCSSReset>
           </ChakraProvider>
         </ApolloProvider>
@@ -91,6 +104,16 @@ function ScopedCSSReset({ children }) {
       <Global
         styles={`
           :where(.chakra-css-reset, .chakra-portal) {
+            /* Chakra's default global styles, placed here so we can override
+             * the actual _global_ styles in the theme to be empty. That way,
+             * it only affects Chakra stuff, not all elements! */
+            font-family: var(--chakra-fonts-body);
+            color: var(--chakra-colors-gray-800);
+            background: var(--chakra-colors-white);
+            transition-property: background-color;
+            transition-duration: var(--chakra-transition-duration-normal);
+            line-height: var(--chakra-lineHeights-base);
+
             *,
             *::before,
             *::after {

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

@@ -123,5 +123,8 @@
     = t '.preview.pet_not_found'
 
 - content_for :javascripts do
-  = include_javascript_libraries :jquery20, :jquery_tmpl
-  = javascript_include_tag 'ajax_auth', 'lib/jquery.timeago', 'outfits/new'
+  = include_javascript_libraries :jquery, :jquery_tmpl
+  = 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