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`).
This commit is contained in:
Emi Matchu 2024-03-13 21:26:22 -07:00
parent 40804c1543
commit c011e99819
15 changed files with 38 additions and 116 deletions

View file

@ -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 Closet list droppable

View file

@ -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();
}
});
})();

View file

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

View file

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

View file

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

View file

@ -114,7 +114,7 @@ module ApplicationHelper
def include_javascript_libraries(*library_names) def include_javascript_libraries(*library_names)
raw(library_names.inject('') do |html, name| 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)
end end

View file

@ -153,7 +153,10 @@
- content_for :javascripts do - content_for :javascripts do
= include_javascript_libraries :jquery, :jquery_tmpl = include_javascript_libraries :jquery, :jquery_tmpl
= javascript_include_tag 'ajax_auth', 'lib/jquery.ui', 'lib/jquery.jgrowl', = 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? - if public_perspective? && user_signed_in?
- content_for :meta do - content_for :meta do

View file

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

View file

@ -43,7 +43,9 @@
- content_for :javascripts do - content_for :javascripts do
= include_javascript_libraries :jquery = 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 - content_for :stylesheets do
= stylesheet_link_tag 'fundraising/donations/show' = stylesheet_link_tag 'fundraising/donations/show'

View file

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

View file

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

View file

@ -21,6 +21,8 @@
= signed_in_meta_tag = signed_in_meta_tag
- if user_signed_in? - if user_signed_in?
= current_user_id_meta_tag = current_user_id_meta_tag
= javascript_include_tag 'application', defer: true
= yield :javascripts
= yield :head = yield :head
%body{:class => body_class} %body{:class => body_class}
#container #container
@ -73,7 +75,9 @@
%li= mail_to contact_email, t('.footer.email') %li= mail_to contact_email, t('.footer.email')
%p= t '.footer.copyright', :year => Date.today.year %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

View file

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

View file

@ -124,4 +124,7 @@
- content_for :javascripts do - content_for :javascripts do
= include_javascript_libraries :jquery20, :jquery_tmpl = 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

View file

@ -79,4 +79,7 @@
- content_for :javascripts do - content_for :javascripts do
= include_javascript_libraries :jquery, :jquery_tmpl = 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