From e8aa62d508b64468d357ea075f981696f53121b3 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Fri, 15 Dec 2023 12:18:21 -0500
Subject: [PATCH 1/3] intial text

---
 radwave/src/Radwave.vue | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/radwave/src/Radwave.vue b/radwave/src/Radwave.vue
index 9e61f3a1..e2f80429 100644
--- a/radwave/src/Radwave.vue
+++ b/radwave/src/Radwave.vue
@@ -258,7 +258,28 @@
           <v-window-item>
             <v-card class="no-bottom-border-radius scrollable">
               <v-card-text class="info-text no-bottom-border-radius">
-                Information goes here
+                <h2>General</h2>
+                <p>
+                  The night sky is littered with stars; however, for thousands of years we did not know how far these stars were. 
+                  It wasn&rsquo;t until the 20th century that we developed the tools to measure the distances to stars. 
+                  By studying the distances to stars astronomers have learned a great deal about the structure of our galaxy. 
+                  In and amongst the stars are star forming regions - clouds of gas and dust where stars form. 
+                  Because dust is between us and the stars we can also measure the distance to these star forming regions. 
+                  It was by looking at the distances to nearby star forming regions that astronomers discovered that large structure which they called 
+                    the <a href="https://sites.google.com/cfa.harvard.edu/radcliffewave/">Radcliffe Wave</a>. 
+                  However, at this point the question remained - Was the wave actually waving?
+                </p>
+                <p>After a great deal of work, the answer is yes. 
+                  By analyzing the velocities of young star clusters associated with the star forming regions,
+                  they determined that their motions match what one would expect if they were riding on a wave as it travels through the galaxy.
+                  The wave goes up and down every 95 million years or so! This is actually commensurate with the lifetime of star forming cloud, 
+                    so these clouds will likely dissipate before the wave completes a full cycle.&nbsp;</p>
+                <h2>The Radcliffe Wave</h2>
+                <p>The Radcliffe Wave is a structure 1000+ lightyears away with a length of about 9000 lightyears. 
+                  The wave is composed of ~100 star forming regions. 
+                  Star forming regions are regions filled with dense gas and dust where stars are forming. 
+                  On the sky, the Radcliffe wave spans from the constellation of Cygnus to just past Orion (approximately 100&deg;).
+                </p>
               </v-card-text>
             </v-card>
           </v-window-item>

From d2094c72f9794a5919dadc934209bb4c555375bd Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Mon, 18 Dec 2023 11:41:57 -0500
Subject: [PATCH 2/3] update text and add gif

---
 radwave/src/GifPlayPause.vue          | 177 ++++++++++++++++++++++++++
 radwave/src/Radwave.vue               |  88 ++++++++++---
 radwave/src/assets/traveling_wave.gif | Bin 0 -> 9877 bytes
 radwave/src/main.ts                   |   3 +
 4 files changed, 252 insertions(+), 16 deletions(-)
 create mode 100644 radwave/src/GifPlayPause.vue
 create mode 100644 radwave/src/assets/traveling_wave.gif

diff --git a/radwave/src/GifPlayPause.vue b/radwave/src/GifPlayPause.vue
new file mode 100644
index 00000000..2856b2de
--- /dev/null
+++ b/radwave/src/GifPlayPause.vue
@@ -0,0 +1,177 @@
+<template>
+  <!-- WCAG (Web Accessability compliant GIF display) -->
+  <div 
+    :id="id"
+    class="wcag-gif-container"
+    >
+    <img 
+      :src="still" 
+      :alt="alt" 
+      loading="lazy">
+    <details v-if="!(stayPaused || stillOnly)">
+      <summary  role="button" aria-label="static image" v-on:click="onClick">
+        <v-icon 
+          color="black"
+        >
+          {{ pause ? 'mdi-play' : 'mdi-pause' }}
+        </v-icon>
+      </summary>
+      <div class="wcag-gif-container1">
+        <img 
+        :src="gif" 
+        :alt="'Animated: ' + alt"
+        loading="lazy"
+        >
+      </div>
+    </details>
+    
+    <cite style="display: none"> <!--  in the markup but not visible  -->
+      Adapted from <a href="https://css-tricks.com/pause-gif-details-summary/">CSS Tricks</a> and <a href="https://codepen.io/chriscoyier/pen/pogQJER">CodePen</a>
+    </cite>
+  </div>
+  
+  
+</template>
+  
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+import { VIcon } from "vuetify/components/VIcon";
+
+
+export default defineComponent({
+  name: "GifPlayPause",
+
+  components: {
+    'v-icon': VIcon,
+  },
+  
+
+  props: {
+    stillOnly : {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+
+    startPaused: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+
+    id: {
+      type: String,
+      default: "wcag-gif",
+      required: false,
+    },
+    still: {
+      type: String,
+      required: true,
+    },
+    gif: {
+      type: String,
+      required: true,
+    },
+    alt: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      stayPaused: this.stillOnly,
+      pause: this.stillOnly || this.startPaused,
+    };
+  },
+
+  mounted() {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce))");
+    const details = document.querySelector(".wcag-gif-container > details") as HTMLDetailsElement;
+
+    if (mediaQuery.matches && details) {
+      this.stayPaused = true;
+      details.removeAttribute("open");
+      return;
+    } else if (details) {
+      details.open = ! (this.startPaused || this.stillOnly);
+    }
+  },
+
+  methods: {
+
+    onClick(): void {
+      if (this.stayPaused) {
+        return;
+      } 
+
+      this.pause = !this.pause;
+      
+    },
+  }
+
+});
+
+</script>
+
+<style scoped>
+
+
+.wcag-gif-container {
+  /* display: inline-block; */
+  display: flex;
+  position: relative;
+  width: 100%;
+  
+}
+
+.wcag-gif-container summary {
+  color: #fff;
+  background: transparent;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  z-index: 2;
+  border-radius: 50%;
+  background-color: white;
+}
+
+.wcag-gif-container details[open] summary {
+  background-color: white;
+}
+
+/* for blink/webkit */
+.wcag-gif-container details summary::-webkit-details-marker {
+  display: none;
+}
+/* for firefox */
+.wcag-gif-container details > summary:first-of-type {
+  list-style: none;
+}
+
+.wcag-gif-container summary > .v-icon {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* .wcag-gif-container summary:focus {
+  box-shadow: 0 0 0 0.25rem #aade87;
+  outline: transparent;
+} */
+
+.wcag-gif-container .wcag-gif-container1 img {
+  display: inline-block;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  overflow: visible;
+}
+
+.wcag-gif-container img {
+  width: 100%;
+}
+
+</style>
diff --git a/radwave/src/Radwave.vue b/radwave/src/Radwave.vue
index e2f80429..04ff7367 100644
--- a/radwave/src/Radwave.vue
+++ b/radwave/src/Radwave.vue
@@ -257,29 +257,45 @@
         <v-window v-model="tab" id="tab-items" class="pb-2 no-bottom-border-radius">
           <v-window-item>
             <v-card class="no-bottom-border-radius scrollable">
-              <v-card-text class="info-text no-bottom-border-radius">
-                <h2>General</h2>
+              <v-card-text class="info-text no-bottom-border-radius d-flex-column">
+                <h2>Seeing a Wave in the Milky Way</h2>
+                <p>
+                  For most of human history, we have not known how far the stars are from us.
+                  It wasn't until the 20<sup>th</sup> century that we developed the tools to measure distances to stars. 
+                  By studying the distances to stars astronomers can learn a great deal about the structure of our galaxy. 
+                </p>
                 <p>
-                  The night sky is littered with stars; however, for thousands of years we did not know how far these stars were. 
-                  It wasn&rsquo;t until the 20th century that we developed the tools to measure the distances to stars. 
-                  By studying the distances to stars astronomers have learned a great deal about the structure of our galaxy. 
                   In and amongst the stars are star forming regions - clouds of gas and dust where stars form. 
-                  Because dust is between us and the stars we can also measure the distance to these star forming regions. 
-                  It was by looking at the distances to nearby star forming regions that astronomers discovered that large structure which they called 
-                    the <a href="https://sites.google.com/cfa.harvard.edu/radcliffewave/">Radcliffe Wave</a>. 
-                  However, at this point the question remained - Was the wave actually waving?
+                  Because dust is between us and the stars, astronomers can also measure the distances to these star forming regions. 
+                  It was by looking at the distances to nearby star forming regions that astronomers discovered a large structure which they called 
+                    the <a href="https://sites.google.com/cfa.harvard.edu/radcliffewave/"><strong>Radcliffe Wave</strong></a>. 
+                  While shaped like a wave, the question remained&hellip;phot
                 </p>
+                  <h2>Is the &ldquo;wave&rdquo; actually waving?</h2>
+                
                 <p>After a great deal of work, the answer is yes. 
                   By analyzing the velocities of young star clusters associated with the star forming regions,
                   they determined that their motions match what one would expect if they were riding on a wave as it travels through the galaxy.
-                  The wave goes up and down every 95 million years or so! This is actually commensurate with the lifetime of star forming cloud, 
-                    so these clouds will likely dissipate before the wave completes a full cycle.&nbsp;</p>
-                <h2>The Radcliffe Wave</h2>
-                <p>The Radcliffe Wave is a structure 1000+ lightyears away with a length of about 9000 lightyears. 
-                  The wave is composed of ~100 star forming regions. 
-                  Star forming regions are regions filled with dense gas and dust where stars are forming. 
-                  On the sky, the Radcliffe wave spans from the constellation of Cygnus to just past Orion (approximately 100&deg;).
+                  The wave goes up and down every 95 million years or so! 
+                  However, the clusters and star forming clouds we see surfing the wave right now will dispers before a full cycle is complete
                 </p>
+                  The clusters follow a "damped traveling wave" pattern. This type of wave motion is practically visualized below by two of the astronomers involved in this discovery, 
+                  Catherine Zucker and Ralf Konietzka.
+                  <figure>
+                    <gif-play-pause
+                      :still="require('./assets/traveling_wave.gif')"
+                      :gif="require('./assets/traveling_wave.gif')"
+                      alt="Image of two scientists demonstrating a damped traveling wave. A traveling wave is like a wave on the ocean, where in the crests and troughs move forward, but the water itself (and also a boat in the water) does not. In a damped traveling wave the height of the waves decreases from one end to the other"
+                      />
+                  </figure>
+                <h2>Where is the Radcliffe Wave</h2>
+                <p>
+                  The Radcliffe Wave spans about 100&deg; of the sky between the constellations of Cygnus (The Swan) and Orion (The Hunter).
+                  It is about 1000 lightyears away at it's closest point, with a length of about 9000 lightyears. 
+                  Despite ~100 clusters and star forming regions being associated with the wave, their connection is not obvious from the view point on Earth.
+                  It was not until astronomers looked at the positions and distances in 3D that the structure became apparent. 
+                </p>
+                <p>&nbsp;</p>
               </v-card-text>
             </v-card>
           </v-window-item>
@@ -1044,6 +1060,46 @@ export default defineComponent({
   gap: 5px;
 }
 
+#text-bottom-sheet {
+  
+  overflow-y: scroll;
+  
+  h2 {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    font-style: italic;
+  }
+  
+  h2 {
+    font-weight: bold;
+    margin-inline: auto;
+    width: fit-content;
+    
+  }
+  
+  
+  figure {
+    position: relative;
+    padding-top: 1rem;
+    width: fit-content;
+    margin-inline: auto;
+    
+    #wcag-gif {
+      width: fit-content;
+      
+      img {
+        max-height: 400px;
+        width: 50vw;
+      }
+    
+    }
+    
+  }
+  
+}
+
 #left-buttons, #right-buttons {
   display: flex;
   flex-direction: column;
diff --git a/radwave/src/assets/traveling_wave.gif b/radwave/src/assets/traveling_wave.gif
new file mode 100644
index 0000000000000000000000000000000000000000..dddb73d29d3f5e2fa45a83f27ae1c43780b14fa3
GIT binary patch
literal 9877
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
Ris~<$>@QaeAp`)i{{;rE_f-G@

literal 0
HcmV?d00001

diff --git a/radwave/src/main.ts b/radwave/src/main.ts
index 3f0ebf36..adaac683 100644
--- a/radwave/src/main.ts
+++ b/radwave/src/main.ts
@@ -4,6 +4,8 @@ import { FundingAcknowledgment, IconButton, CreditLogos, wwtHUD } from "@minids/
 import Radwave from "./Radwave.vue";
 import "../../assets/common.less";
 
+import GifPlayPause from "./GifPlayPause.vue";
+
 import vuetify from "../plugins/vuetify";
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -60,6 +62,7 @@ createApp(Radwave, {
   .component('funding-acknowledgement', FundingAcknowledgment)
   .component('credit-logos', CreditLogos)
   .component('wwt-hud', wwtHUD)
+  .component('gif-play-pause', GifPlayPause)
 
   // Mount
   .mount("#app");

From c4a80d7f138b231165ff49bb97a53a3d337925eb Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Mon, 18 Dec 2023 12:08:20 -0500
Subject: [PATCH 3/3] update video formatting

---
 assets/common.less      | 34 +++++++++++++++++++++++++++++++---
 radwave/src/Radwave.vue |  4 +++-
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/assets/common.less b/assets/common.less
index 17bbe0f9..cd897d55 100644
--- a/assets/common.less
+++ b/assets/common.less
@@ -336,18 +336,24 @@ body {
 }
 
 /* Video and text dialogs */
-.video-wrapper {
+
+.video-wrapper {  
+  display: flex;
   height: 100%;
-  background: black;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
   text-align: center;
   z-index: 1000;
 }
 
 video {
-  height: 100%;
+  margin: auto;
+  height: 85%;
   width: auto;
   max-width: 100%;
   object-fit: contain;
+  // aspect-ratio: 9/17;
+  border: 5px solid white;
 }
 
 #video-container {
@@ -360,6 +366,28 @@ video {
   overflow: hidden;
   padding: 0px;
   z-index: 1000;
+  
+  #video-close-icon {
+    top: 2rem;
+    right: 2rem;
+    transform: scale(2);
+  }
+}
+
+.close-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 15;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    color: white;
+    border: 2px solid white;
+  }
 }
 
 .bottom-sheet {
diff --git a/radwave/src/Radwave.vue b/radwave/src/Radwave.vue
index 04ff7367..14848688 100644
--- a/radwave/src/Radwave.vue
+++ b/radwave/src/Radwave.vue
@@ -195,6 +195,8 @@
       id="video-container"
       v-model="showVideoSheet"
       transition="slide-y-transition"
+      close-on-back
+      close-on-content-click
       fullscreen
     >
       <div class="video-wrapper">
@@ -202,7 +204,7 @@
           id="video-close-icon"
           class="close-icon"
           icon="times"
-          size="lg"
+          size="xlg"
           @click="showVideoSheet = false"
           @keyup.enter="showVideoSheet = false"
           tabindex="0"