OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Persist item user lists form open/closed state across pageloads

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/assets/javascripts/items/item_header.js
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");
for (const header of headers) {
try {
const form = header.querySelector(".user-lists-form");
const opener = header.querySelector(".user-lists-form-opener");
opener.addEventListener("click", (event) => {
form.toggleAttribute("hidden");
if (form.hasAttribute("hidden")) {
form.removeAttribute("hidden");
setFormStateCookie("open");
} else {
form.setAttribute("hidden", "");
setFormStateCookie("closed");
}
event.preventDefault();
});
} catch (error) {

4
app/helpers/items_helper.rb
View file

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

59
app/views/items/_item_header.haml
View file

@ -36,37 +36,38 @@
user_closet_hangers_path(current_user),
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
%h3
= t 'items.show.closet_hangers.header_html',
user_items_link: link_to(t('your_items'),
user_closet_hangers_path(current_user))
.closet-hangers-ownership-groups
- [true, false].each do |owned|
- lists = current_user_lists[owned]
%div
%h4= closet_lists_group_name(:you, owned)
%ul
- lists.each_with_index do |list, index|
- if user_signed_in?
= 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
%h3
= t 'items.show.closet_hangers.header_html',
user_items_link: link_to(t('your_items'),
user_closet_hangers_path(current_user))
.closet-hangers-ownership-groups
- [true, false].each do |owned|
- lists = current_user_lists[owned]
%div
%h4= closet_lists_group_name(:you, owned)
%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
= number_field_tag "quantity[#{list.id}]",
current_user_quantities[list.id], min: 0,
autofocus: owned && index == 0
= label_tag "quantity[#{list.id}]", list.name
= number_field_tag "quantity[#{owned}]",
current_user_quantities[owned], min: 0,
autofocus: owned && lists.empty?
%li
= number_field_tag "quantity[#{owned}]",
current_user_quantities[owned], min: 0,
autofocus: owned && lists.empty?
- unless lists.empty?
= label_tag "quantity[#{owned}]",
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')
- unless lists.empty?
= label_tag "quantity[#{owned}]",
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