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:
parent
40804c1543
commit
c011e99819
15 changed files with 38 additions and 116 deletions
|
@ -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
|
||||||
|
|
|
@ -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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})();
|
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
$("form.button_to input[type=submit]").click(function (e) {
|
|
||||||
if (!confirm(this.getAttribute("data-confirm"))) e.preventDefault();
|
|
||||||
});
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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'
|
|
||||||
|
|
||||||
|
|
|
@ -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
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue