button to collapse/expand attributes and attribute groups

module/helper.js

@@ -127,6 +127,27 @@ export class EntitySheetHelper {
 
   /* -------------------------------------------- */
 
+  /**
+   * Toggle whether a list of attributes are collapsed or expanded
+   * @param {object} element      The element containing the group list
+   * @param {boolean=} collapsed  Force the group collapsed to true or false
+   */ 
+  static toggleAttributeCollapse(el, collapsed) {
+    const cb = el.querySelector('.attribute-collapsed');
+    const i = el.querySelector('a.attribute-control > i');
+    if(cb.checked = collapsed !== undefined ? collapsed : !cb.checked){
+      i.classList.remove('fa-caret-down')
+      i.classList.add('fa-caret-right')
+      el.parentElement.querySelector('section.attributes-group').style.display = 'none';
+    } else {
+      i.classList.remove('fa-caret-right')
+      i.classList.add('fa-caret-down')
+      el.parentElement.querySelector('section.attributes-group').style.display = 'block';
+    }
+  }
+
+  /* -------------------------------------------- */
+
   /**
    * Listen for click events on an attribute control to modify the composition of attributes in the sheet
    * @param {MouseEvent} event    The originating left click event
@@ -140,6 +161,8 @@ export class EntitySheetHelper {
         return EntitySheetHelper.createAttribute(event, this);
       case "delete":
         return EntitySheetHelper.deleteAttribute(event, this);
+      case "collapse":
+        return EntitySheetHelper.collapseAttributes(event, this);
     }
   }
 
@@ -158,6 +181,8 @@ export class EntitySheetHelper {
         return EntitySheetHelper.createAttributeGroup(event, this);
       case "delete-group":
         return EntitySheetHelper.deleteAttributeGroup(event, this);
+      case "collapse":
+        return EntitySheetHelper.collapseAttributes(event, this);
     }
   }
 
@@ -273,6 +298,9 @@ export class EntitySheetHelper {
     const groups = app.object.system.groups;
     const form = app.form;
 
+    // force group attributes not to be collapsed
+    EntitySheetHelper.toggleAttributeCollapse(a.parentElement, false);
+
     // Determine the new attribute key for ungrouped attributes.
     let objKeys = Object.keys(attrs).filter(k => !Object.keys(groups).includes(k));
     let nk = Object.keys(attrs).length + 1;
@@ -351,6 +379,19 @@ export class EntitySheetHelper {
 
   /* -------------------------------------------- */
 
+  /**
+   * Collapse or expand attributes.
+   * @param {MouseEvent} event    The originating left click event
+   * @param {Object} app          The form application object.
+   */ 
+  static async collapseAttributes(event, app) {
+    const a = event.currentTarget;
+    EntitySheetHelper.toggleAttributeCollapse(a.parentElement);
+    await app._onSubmit(event);
+  }
+
+  /* -------------------------------------------- */
+
   /**
    * Create new attribute groups.
    * @param {MouseEvent} event    The originating left click event
@@ -418,7 +459,8 @@ export class EntitySheetHelper {
     let groupKeys = [];
 
     // Handle the free-form attributes list
-    const formAttrs = foundry.utils.expandObject(formData)?.system?.attributes || {};
+    const expanded = foundry.utils.expandObject(formData);
+    const formAttrs = expanded?.system?.attributes || {};
     const attributes = Object.values(formAttrs).reduce((obj, v) => {
       let attrs = [];
       let group = null;
@@ -464,8 +506,11 @@ export class EntitySheetHelper {
       }
     }
 
+    // Copy across collapsed flag for attributes
+    formAttrs.attributesCollapsed = expanded?.attributesCollapsed;
+
     // Re-combine formData
-    formData = Object.entries(formData).filter(e => !e[0].startsWith("system.attributes")).reduce((obj, e) => {
+    formData = Object.entries(formData).filter(e => !e[0].startsWith("system.attributes.")).reduce((obj, e) => {
       obj[e[0]] = e[1];
       return obj;
     }, {_id: document.id, "system.attributes": attributes});

styles/simple.css

@@ -215,6 +215,10 @@
   border-radius: 2px;
   padding: 2px 5px;
 }
+.worldbuilding .attributes-header .attribute-control:first-child,
+.worldbuilding .group-header .attribute-control:first-child {
+  flex: none;
+}
 .worldbuilding .group-key,
 .worldbuilding .group-label {
   font-weight: bold;
@@ -235,6 +239,9 @@
   flex: 0 0 116px;
   margin: 0 5px;
 }
+.worldbuilding .attribute-collapsed {
+  display: none;
+}
 .worldbuilding.sheet.actor {
   min-width: 560px;
   min-height: 420px;

template.json

@@ -14,6 +14,7 @@
       "min": 0,
       "max": 5
     },
+    "attributesCollapsed": false,
     "attributes": {},
     "groups": {}
   }
@@ -25,6 +26,7 @@
     "description": "",
     "quantity": 1,
     "weight": 0,
+    "attributesCollapsed": false,
     "attributes": {},
     "groups": {}
   }

templates/actor-sheet.html

@@ -91,15 +91,17 @@ <h4 class="item-name">{{item.name}}</h4>
         {{!-- Attributes Tab --}}
         <div class="tab attributes" data-group="primary" data-tab="attributes">
             <header class="attributes-header flexrow">
+                <a class="attribute-control" data-action="collapse"><i class="fas {{#if systemData.attributesCollapsed}}fa-caret-right{{else}}fa-caret-down{{/if}}"></i></a>
                 <span class="attribute-key">{{localize "SIMPLE.AttributeKey"}}</span>
                 <span class="attribute-value">{{localize "SIMPLE.AttributeValue"}}</span>
                 <span class="attribute-label">{{localize "SIMPLE.AttributeLabel"}}</span>
                 <span class="attribute-dtype">{{localize "SIMPLE.AttributeDtype"}}</span>
                 <a class="attribute-control" data-action="create" data-group="{{group}}"><i class="fas fa-plus"></i></a>
+                <input class="attribute-collapsed" type="checkbox" name="system.attributesCollapsed" {{#if systemData.attributesCollapsed}}checked{{/if}} />
             </header>
 
             {{!-- Render the attribute list partial. --}}
-            {{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=systemData.ungroupedAttributes dtypes=dtypes}}
+            {{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=systemData.ungroupedAttributes dtypes=dtypes collapsed=systemData.attributesCollapsed}}
 
             {{!-- Render the grouped attributes partial and control. --}}
             <div class="groups">

templates/item-sheet.html

@@ -33,15 +33,17 @@ <h1 class="charname">
         {{!-- Attributes Tab --}}
         <div class="tab attributes" data-group="primary" data-tab="attributes">
             <header class="attributes-header flexrow">
+                <a class="attribute-control" data-action="collapse"><i class="fas {{#if systemData.attributesCollapsed}}fa-caret-right{{else}}fa-caret-down{{/if}}"></i></a>
                 <span class="attribute-key">{{localize "SIMPLE.AttributeKey"}}</span>
                 <span class="attribute-value">{{localize "SIMPLE.AttributeValue"}}</span>
                 <span class="attribute-label">{{localize "SIMPLE.AttributeLabel"}}</span>
                 <span class="attribute-dtype">{{localize "SIMPLE.AttributeDtype"}}</span>
                 <a class="attribute-control" data-action="create" data-group="{{group}}"><i class="fas fa-plus"></i></a>
+                <input class="attribute-collapsed" type="checkbox" name="system.attributesCollapsed" {{#if systemData.attributesCollapsed}}checked{{/if}} />
             </header>
 
             {{!-- Render the attribute list partial. --}}
-            {{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=systemData.ungroupedAttributes dtypes=dtypes}}
+            {{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=systemData.ungroupedAttributes dtypes=dtypes collapsed=systemData.attributesCollapsed}}
 
             {{!-- Render the grouped attributes partial and control. --}}
             <div class="groups">

templates/parts/sheet-attributes.html

@@ -1,4 +1,4 @@
-<section class="attributes-group">
+<section class="attributes-group" style="display: {{#if collapsed}}none{{else}}block{{/if}}">
     <ol class="attributes-list">
         {{#each attributes as |attr key|}}
         <li class="attribute flexrow" data-attribute="{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}">

templates/parts/sheet-groups.html

@@ -2,6 +2,7 @@
     {{#each groups as |group groupKey|}}
     <li class="group" data-group="{{groupKey}}">
         <div class="group-header flexrow">
+            <a class="attribute-control" data-action="collapse"><i class="fas {{#if group.collapsed}}fa-caret-right{{else}}fa-caret-down{{/if}}"></i></a>
             <input class="group-key" type="text" readonly name="system.groups.{{groupKey}}.key" value="{{groupKey}}" />
             <input class="group-label" type="text" name="system.groups.{{groupKey}}.label" value="{{group.label}}" placeholder="Group Label" />
             <select class="group-dtype" name="system.groups.{{groupKey}}.dtype">
@@ -13,9 +14,10 @@
             </select>
             <a class="attribute-control" data-action="create" data-group="{{groupKey}}" data-dtype="{{group.dtype}}"><i class="fas fa-plus"></i></a>
             <a class="group-control" data-action="delete-group"><i class="fas fa-trash"></i></a>
+            <input class="attribute-collapsed" type="checkbox" name="system.groups.{{groupKey}}.collapsed" {{#if group.collapsed}}checked{{/if}} />
         </div>
 
-        {{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=group.attributes group=groupKey dtypes=../dtypes}}
+        {{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=group.attributes group=groupKey dtypes=../dtypes collapsed=group.collapsed}}
     </li>
     {{/each}}
 </ol>