@asd20/ui 3.2.943 → 3.2.945

package/package.json

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

package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue

@@ -15,7 +15,9 @@
     >
       <video
         v-if="videoUrl"
+        ref="backgroundVideo"
         class="background-video"
+        role="presentation"
         aria-hidden="true"
         autoplay
         loop
@@ -26,6 +28,17 @@
       >
         <source :src="videoUrl" type="video/mp4" />
       </video>
+      <button
+        v-if="videoUrl"
+        class="video-toggle-btn"
+        @click="toggleVideo"
+        :aria-label="isPaused ? 'Play video' : 'Pause video'"
+      >
+        <!-- Play icon (▶) -->
+        <span v-if="isPaused">&#9658;</span>
+        <!-- Pause icon (⏸) -->
+        <span v-else>&#10073;&#10073;</span>
+      </button>
       <img
         :class="videoUrl ? 'hide-background-image' : 'background-image'"
         :src="imageUrl"
@@ -91,6 +104,11 @@ export default {
     primaryMessages: { type: Array, default: () => [] },
     secondaryMessages: { type: Array, default: () => [] },
   },
+  data() {
+    return {
+      isPaused: false,
+    }
+  },
   computed: {
     mq() {
       return this.$mq || 'sm'
@@ -111,6 +129,20 @@ export default {
       )
     },
   },
+  methods: {
+    toggleVideo() {
+      const video = this.$refs.backgroundVideo
+      if (video) {
+        if (video.paused) {
+          video.play()
+          this.isPaused = false
+        } else {
+          video.pause()
+          this.isPaused = true
+        }
+      }
+    },
+  },
 }
 </script>
 
@@ -272,7 +304,12 @@ export default {
         );
         ::before {
           width: 25px; /* Arrow grows on hover */
-          background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
+          background-color: rgba(
+            255,
+            255,
+            255,
+            0.3
+          ); /* Darker arrow on hover */
           z-index: 0;
         }
       }
@@ -682,5 +719,30 @@ $max: 4rem;
       display: block;
     }
   }
+  .video-toggle-btn {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: lightgray;
+    border: none;
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .video-toggle-btn:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .video-toggle-btn span {
+    line-height: 1;
+  }
 }
 </style>

package/src/components/organisms/Asd20VideoHeader/index.vue

@@ -11,7 +11,9 @@
 
     <video
       v-if="videoUrl"
+      ref="backgroundVideo"
       class="background-video"
+      role="presentation"
       aria-hidden="true"
       autoplay
       loop
@@ -22,6 +24,17 @@
     >
       <source :src="videoUrl" type="video/mp4" />
     </video>
+    <button
+      v-if="videoUrl"
+      class="video-toggle-btn"
+      @click="toggleVideo"
+      :aria-label="isPaused ? 'Play video' : 'Pause video'"
+    >
+      <!-- Play icon (▶) -->
+      <span v-if="isPaused">&#9658;</span>
+      <!-- Pause icon (⏸) -->
+      <span v-else>&#10073;&#10073;</span>
+    </button>
 
     <img
       :class="videoUrl ? 'hide-background-image' : 'background-image'"
@@ -54,6 +67,11 @@ export default {
     primaryMessages: { type: Array, default: () => [] },
     secondaryMessages: { type: Array, default: () => [] },
   },
+  data() {
+    return {
+      isPaused: false,
+    }
+  },
   computed: {
     mq() {
       return this.$mq || 'sm'
@@ -72,6 +90,20 @@ export default {
       )
     },
   },
+  methods: {
+    toggleVideo() {
+      const video = this.$refs.backgroundVideo
+      if (video) {
+        if (video.paused) {
+          video.play()
+          this.isPaused = false
+        } else {
+          video.pause()
+          this.isPaused = true
+        }
+      }
+    },
+  },
 }
 </script>
 
@@ -281,5 +313,30 @@ export default {
       display: block;
     }
   }
+  .video-toggle-btn {
+    position: absolute;
+    bottom: 2rem;
+    right: 0.5rem;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: lightgray;
+    border: none;
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .video-toggle-btn:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .video-toggle-btn span {
+    line-height: 1;
+  }
 }
 </style>

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>