@asd20/ui 3.2.944 → 3.2.945

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.944",
+  "version": "3.2.945",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/templates/Asd20DetailAlternateTemplate/index.vue

@@ -180,6 +180,56 @@ export default {
     Asd20QuicklinksMenu,
     Asd20MediaSection,
   },
+  mounted() {
+    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
+    this.$nextTick(() => {
+      const accordionButtons = document.querySelectorAll('.accordion-button')
+
+      accordionButtons.forEach(button => {
+        button.addEventListener('click', () => {
+          const contentId = button.getAttribute('aria-controls')
+          const content = document.getElementById(contentId)
+          const expanded = button.getAttribute('aria-expanded') === 'true'
+
+          button.setAttribute('aria-expanded', !expanded)
+          button.querySelector('.toggle-icon').textContent = expanded
+            ? '+'
+            : '-'
+
+          if (!expanded) {
+            content.style.display = 'block'
+
+            // Reset maxHeight before calculating scrollHeight (force reflow)
+            content.style.maxHeight = '0'
+            content.style.padding = '0 var(--space-1, 1em)'
+
+            requestAnimationFrame(() => {
+              content.style.transition =
+                'max-height 0.4s ease, padding 0.4s ease'
+              content.style.maxHeight = content.scrollHeight + 'px'
+              content.style.padding = 'var(--space-1, 1em)'
+            })
+          } else {
+            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
+
+            requestAnimationFrame(() => {
+              content.style.transition =
+                'max-height 0.4s ease, padding 0.4s ease'
+              content.style.maxHeight = '0'
+              content.style.padding = '0 var(--space-1, 1em)'
+            })
+
+            // Optionally hide the content after animation
+            setTimeout(() => {
+              if (content.style.maxHeight === '0px') {
+                content.style.display = 'none'
+              }
+            }, 400) // Match transition duration
+          }
+        })
+      })
+    })
+  },
 }
 </script>
 

package/src/components/templates/Asd20DetailImageFullTemplate/index.vue

@@ -172,6 +172,56 @@ export default {
     Asd20QuicklinksMenu,
     Asd20MediaSection,
   },
+  mounted() {
+    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
+    this.$nextTick(() => {
+      const accordionButtons = document.querySelectorAll('.accordion-button')
+
+      accordionButtons.forEach(button => {
+        button.addEventListener('click', () => {
+          const contentId = button.getAttribute('aria-controls')
+          const content = document.getElementById(contentId)
+          const expanded = button.getAttribute('aria-expanded') === 'true'
+
+          button.setAttribute('aria-expanded', !expanded)
+          button.querySelector('.toggle-icon').textContent = expanded
+            ? '+'
+            : '-'
+
+          if (!expanded) {
+            content.style.display = 'block'
+
+            // Reset maxHeight before calculating scrollHeight (force reflow)
+            content.style.maxHeight = '0'
+            content.style.padding = '0 var(--space-1, 1em)'
+
+            requestAnimationFrame(() => {
+              content.style.transition =
+                'max-height 0.4s ease, padding 0.4s ease'
+              content.style.maxHeight = content.scrollHeight + 'px'
+              content.style.padding = 'var(--space-1, 1em)'
+            })
+          } else {
+            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
+
+            requestAnimationFrame(() => {
+              content.style.transition =
+                'max-height 0.4s ease, padding 0.4s ease'
+              content.style.maxHeight = '0'
+              content.style.padding = '0 var(--space-1, 1em)'
+            })
+
+            // Optionally hide the content after animation
+            setTimeout(() => {
+              if (content.style.maxHeight === '0px') {
+                content.style.display = 'none'
+              }
+            }, 400) // Match transition duration
+          }
+        })
+      })
+    })
+  },
 }
 </script>
 

package/src/components/templates/Asd20DetailImageTemplate/index.vue

@@ -165,6 +165,56 @@ export default {
     Asd20QuicklinksMenu,
     Asd20MediaSection,
   },
+  mounted() {
+    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
+    this.$nextTick(() => {
+      const accordionButtons = document.querySelectorAll('.accordion-button')
+
+      accordionButtons.forEach(button => {
+        button.addEventListener('click', () => {
+          const contentId = button.getAttribute('aria-controls')
+          const content = document.getElementById(contentId)
+          const expanded = button.getAttribute('aria-expanded') === 'true'
+
+          button.setAttribute('aria-expanded', !expanded)
+          button.querySelector('.toggle-icon').textContent = expanded
+            ? '+'
+            : '-'
+
+          if (!expanded) {
+            content.style.display = 'block'
+
+            // Reset maxHeight before calculating scrollHeight (force reflow)
+            content.style.maxHeight = '0'
+            content.style.padding = '0 var(--space-1, 1em)'
+
+            requestAnimationFrame(() => {
+              content.style.transition =
+                'max-height 0.4s ease, padding 0.4s ease'
+              content.style.maxHeight = content.scrollHeight + 'px'
+              content.style.padding = 'var(--space-1, 1em)'
+            })
+          } else {
+            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
+
+            requestAnimationFrame(() => {
+              content.style.transition =
+                'max-height 0.4s ease, padding 0.4s ease'
+              content.style.maxHeight = '0'
+              content.style.padding = '0 var(--space-1, 1em)'
+            })
+
+            // Optionally hide the content after animation
+            setTimeout(() => {
+              if (content.style.maxHeight === '0px') {
+                content.style.display = 'none'
+              }
+            }, 400) // Match transition duration
+          }
+        })
+      })
+    })
+  },
 }
 </script>
 

package/src/components/templates/Asd20DetailTemplate/index.vue

@@ -168,6 +168,56 @@ export default {
   props: {
     languageCode: { type: String, default: 'en' },
   },
+  mounted() {
+    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
+    this.$nextTick(() => {
+      const accordionButtons = document.querySelectorAll('.accordion-button')
+
+      accordionButtons.forEach(button => {
+        button.addEventListener('click', () => {
+          const contentId = button.getAttribute('aria-controls')
+          const content = document.getElementById(contentId)
+          const expanded = button.getAttribute('aria-expanded') === 'true'
+
+          button.setAttribute('aria-expanded', !expanded)
+          button.querySelector('.toggle-icon').textContent = expanded
+            ? '+'
+            : '-'
+
+          if (!expanded) {
+            content.style.display = 'block'
+
+            // Reset maxHeight before calculating scrollHeight (force reflow)
+            content.style.maxHeight = '0'
+            content.style.padding = '0 var(--space-1, 1em)'
+
+            requestAnimationFrame(() => {
+              content.style.transition =
+                'max-height 0.4s ease, padding 0.4s ease'
+              content.style.maxHeight = content.scrollHeight + 'px'
+              content.style.padding = 'var(--space-1, 1em)'
+            })
+          } else {
+            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
+
+            requestAnimationFrame(() => {
+              content.style.transition =
+                'max-height 0.4s ease, padding 0.4s ease'
+              content.style.maxHeight = '0'
+              content.style.padding = '0 var(--space-1, 1em)'
+            })
+
+            // Optionally hide the content after animation
+            setTimeout(() => {
+              if (content.style.maxHeight === '0px') {
+                content.style.display = 'none'
+              }
+            }, 400) // Match transition duration
+          }
+        })
+      })
+    })
+  },
 }
 </script>
 
@@ -254,7 +304,6 @@ export default {
         // max-width: 50vw;
       }
     }
-
   }
 }
 </style>