1
0
Fork 0
forked from OpenNeo/impress

Persist item user lists form open/closed state across pageloads

Using good ol'-fashioned cookies! The JS sets it, and then Rails reads
it on pageload. That way, there's no flash of content for it to load in
after JS loads.
This commit is contained in:
Emi Matchu 2024-01-23 04:30:23 -08:00
parent 0011fdf76a
commit 0c615043f2
3 changed files with 47 additions and 31 deletions

View file

@ -1,10 +1,21 @@
function setFormStateCookie(value) {
const thirtyDays = 60 * 60 * 24 * 30;
document.cookie = `DTIItemPageUserListsFormState=open;max-age=${thirtyDays}`;
}
const headers = document.querySelectorAll(".item-header"); const headers = document.querySelectorAll(".item-header");
for (const header of headers) { for (const header of headers) {
try { try {
const form = header.querySelector(".user-lists-form"); const form = header.querySelector(".user-lists-form");
const opener = header.querySelector(".user-lists-form-opener"); const opener = header.querySelector(".user-lists-form-opener");
opener.addEventListener("click", (event) => { opener.addEventListener("click", (event) => {
form.toggleAttribute("hidden"); if (form.hasAttribute("hidden")) {
form.removeAttribute("hidden");
setFormStateCookie("open");
} else {
form.setAttribute("hidden", "");
setFormStateCookie("closed");
}
event.preventDefault(); event.preventDefault();
}); });
} catch (error) { } catch (error) {

View file

@ -118,5 +118,9 @@ module ItemsHelper
human_name = pet_type.species.name.humanize human_name = pet_type.species.name.humanize
image_tag(src, :alt => human_name, :title => human_name) image_tag(src, :alt => human_name, :title => human_name)
end end
def item_header_user_lists_form_state
cookies.fetch("DTIItemPageUserListsFormState", "closed")
end
end end

View file

@ -36,37 +36,38 @@
user_closet_hangers_path(current_user), user_closet_hangers_path(current_user),
class: 'user-lists-form-opener' class: 'user-lists-form-opener'
= form_tag update_quantities_user_item_closet_hangers_path(user_id: current_user, item_id: item), method: :put, class: 'user-lists-form', hidden: true do - if user_signed_in?
%h3 = form_tag update_quantities_user_item_closet_hangers_path(user_id: current_user, item_id: item), method: :put, class: 'user-lists-form', hidden: item_header_user_lists_form_state != "open" do
= t 'items.show.closet_hangers.header_html', %h3
user_items_link: link_to(t('your_items'), = t 'items.show.closet_hangers.header_html',
user_closet_hangers_path(current_user)) user_items_link: link_to(t('your_items'),
.closet-hangers-ownership-groups user_closet_hangers_path(current_user))
- [true, false].each do |owned| .closet-hangers-ownership-groups
- lists = current_user_lists[owned] - [true, false].each do |owned|
%div - lists = current_user_lists[owned]
%h4= closet_lists_group_name(:you, owned) %div
%ul %h4= closet_lists_group_name(:you, owned)
- lists.each_with_index do |list, index| %ul
- lists.each_with_index do |list, index|
%li
= number_field_tag "quantity[#{list.id}]",
current_user_quantities[list.id], min: 0,
autofocus: owned && index == 0
= label_tag "quantity[#{list.id}]", list.name
%li %li
= number_field_tag "quantity[#{list.id}]", = number_field_tag "quantity[#{owned}]",
current_user_quantities[list.id], min: 0, current_user_quantities[owned], min: 0,
autofocus: owned && index == 0 autofocus: owned && lists.empty?
= label_tag "quantity[#{list.id}]", list.name
- unless lists.empty?
%li = label_tag "quantity[#{owned}]",
= number_field_tag "quantity[#{owned}]", t('closet_lists.unlisted_name'),
current_user_quantities[owned], min: 0, :class => 'unlisted'
autofocus: owned && lists.empty? - else
= label_tag "quantity[#{owned}]",
- unless lists.empty? t('items.show.closet_hangers.quantity_label')
= label_tag "quantity[#{owned}]", = submit_tag t('items.show.closet_hangers.submit')
t('closet_lists.unlisted_name'),
:class => 'unlisted'
- else
= label_tag "quantity[#{owned}]",
t('items.show.closet_hangers.quantity_label')
= submit_tag t('items.show.closet_hangers.submit')
%p.item-description= item.description %p.item-description= item.description