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.

app/assets/javascripts/items/item_header.js

@@ -1,21 +1,23 @@
-const userListSections = document.querySelectorAll(
+function setFormStateCookie(value) {
-	".item-header .user-lists-section");
+	const thirtyDays = 60 * 60 * 24 * 30;
-for (const section of userListSections) {
+	document.cookie = `DTIItemPageUserListsFormState=open;max-age=${thirtyDays}`;
+}
+
+const headers = document.querySelectorAll(".item-header");
+for (const header of headers) {
 	try {
-		const dialog = section.querySelector("dialog");
+		const form = header.querySelector(".user-lists-form");
-		const opener = section.querySelector(".dialog-opener");
+		const opener = header.querySelector(".user-lists-form-opener");
-		const closer = section.querySelector(".dialog-closer");
+		opener.addEventListener("click", (event) => {
-		if (dialog.showModal) { // check browser support
+			if (form.hasAttribute("hidden")) {
-			opener.addEventListener("click", (event) => {
+				form.removeAttribute("hidden");
-				dialog.show();
+				setFormStateCookie("open");
-				event.preventDefault();
+			} else {
-			});
+				form.setAttribute("hidden", "");
-			document.body.addEventListener("click", (event) => {
+				setFormStateCookie("closed");
-				if (dialog.open && !section.contains(event.target)) {
+			}
-					dialog.close();
+			event.preventDefault();
-				}
+		});
-			});
-		}
 	} catch (error) {
 		console.error(`Error applying dialog behavior to item header:`, error);
 	}

app/assets/stylesheets/partials/_item_header.sass

@@ -59,57 +59,59 @@
           background: #E2E8F0
           color: #1A202C
 
-    .user-lists-section
+    .user-lists-info
       grid-area: lists
       font-size: 85%
       text-align: left
 
-      .dialog-opener
+      .user-lists-form-opener
         &::after
           content: " ›"
 
-      dialog
+  .user-lists-form
-        background: $background-color
+    background: $background-color
-        border: 1px solid $module-border-color
+    border: 1px solid $module-border-color
-        border-radius: .5em
+    border-radius: .5em
-        padding: 1em
+    padding: 1em
-        width: 30em
+    width: 30em
-        text-align: center
+    text-align: center
-        z-index: 2
+    z-index: 2
-        margin-top: .5em
+    margin-top: .5em
-        box-shadow: 0px 1px 4px #666
+    margin-inline: auto
+    margin-bottom: 1.5em
+    font-size: 85%
 
-        h3
+    h3
-          font-size: 150%
+      font-size: 150%
-          font-weight: bold
+      font-weight: bold
-          margin-bottom: .25em
+      margin-bottom: .75em
+    
+    .closet-hangers-ownership-groups
+      +clearfix
+      margin-bottom: .5em
+    
+      div
+        float: left
+        margin: 0 5%
+        text-align: left
+        width: 40%
         
-        .closet-hangers-ownership-groups
+        li
-          +clearfix
+          list-style: none
-          margin-bottom: .5em
+          word-wrap: break-word
-        
+          
-          div
+          label.unlisted
-            float: left
+            font-style: italic
-            margin: 0 5%
-            text-align: left
-            width: 40%
-            
-            li
-              list-style: none
-              word-wrap: break-word
-              
-              label.unlisted
-                font-style: italic
 
-        form
+    form
-          padding: .5em 0
+      padding: .5em 0
 
-        select
+    select
-          width: 9em
+      width: 9em
 
-        input[type=number]
+    input[type=number]
-          margin-right: .5em
+      margin-right: .5em
-          width: 3em
+      width: 3em
 
   .item-description
     margin-top: .5em

app/helpers/items_helper.rb

@@ -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
 

app/views/items/_item_header.haml

@@ -31,42 +31,43 @@
         = link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)
 
     - if user_signed_in?
-      .user-lists-section
+      .user-lists-info
         = link_to t('items.show.closet_hangers.button'),
           user_closet_hangers_path(current_user),
-          class: 'dialog-opener'
+          class: 'user-lists-form-opener'
-        %dialog
+
-          %h3
+  - if user_signed_in?
-            = t 'items.show.closet_hangers.header_html',
+    = 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
-              user_items_link: link_to(t('your_items'),
+      %h3
-              user_closet_hangers_path(current_user))
+        = t 'items.show.closet_hangers.header_html',
-          = form_tag update_quantities_user_item_closet_hangers_path(:user_id => current_user, :item_id => item), :method => :put do
+          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
-                      %li
+              - lists.each_with_index do |list, index|
-                        = number_field_tag "quantity[#{list.id}]",
+                %li
-                          current_user_quantities[list.id], min: 0,
+                  = number_field_tag "quantity[#{list.id}]",
-                          autofocus: owned && index == 0
+                    current_user_quantities[list.id], min: 0,
-                        = label_tag "quantity[#{list.id}]", list.name
+                    autofocus: owned && index == 0
+                  = label_tag "quantity[#{list.id}]", list.name
+              
+              %li
+                = number_field_tag "quantity[#{owned}]",
+                  current_user_quantities[owned], min: 0,
+                  autofocus: owned && lists.empty?
                     
-                    %li
+                - unless lists.empty?
-                      = number_field_tag "quantity[#{owned}]",
+                  = label_tag "quantity[#{owned}]",
-                        current_user_quantities[owned], min: 0,
+                              t('closet_lists.unlisted_name'),
-                        autofocus: owned && lists.empty?
+                              :class => 'unlisted'
-                          
+                - else
-                      - unless lists.empty?
+                  = label_tag "quantity[#{owned}]",
-                        = label_tag "quantity[#{owned}]",
+                              t('items.show.closet_hangers.quantity_label')
-                                    t('closet_lists.unlisted_name'),
+      = submit_tag t('items.show.closet_hangers.submit')
-                                    :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