Added modals for radar/externals on front.

Daveiano · Nov 19, 2023 · 028c826 · 028c826
1 parent 092f564
commit 028c826
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 4 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,5 @@
 # Ignore artifacts:
 dist
-skins/weewx-wdc/includes/stat-tile.inc
+skins/weewx-wdc/includes/stat-tile.inc
+*.inc
+*.html.tmpl
diff --git a/skins/weewx-wdc/index.html.tmpl b/skins/weewx-wdc/index.html.tmpl
@@ -80,7 +80,7 @@
         #set $skin_obs_key = $get_custom_data_binding_obs_key($skin_obs)
 
         #if $render_modal
-          <cds-modal id="modal-example-$skin_obs_key" size="lg" fullWidth>
+          <cds-modal id="modal-$skin_obs_key" size="lg" fullWidth>
             <cds-modal-header>
               <cds-modal-close-button></cds-modal-close-button>
               <!-- <cds-modal-label>Label (Optional)</cds-modal-label> -->
@@ -95,14 +95,14 @@
             document
               .querySelector(".stat-tile[data-observation='$skin_obs_key']")
               .addEventListener("click", () => {
-                document.getElementById("modal-example-$skin_obs_key").open = true;
+                document.getElementById("modal-$skin_obs_key").open = true;
               });
           </script>
           <style>
             .stat-tile[data-observation='$skin_obs_key'] {
               cursor: pointer;
             }
-            #modal-example-$skin_obs_key cds-modal-body {
+            #modal-$skin_obs_key cds-modal-body {
               min-height: 65vh;
               overflow: hidden;
             }
@@ -112,6 +112,72 @@
     #end if
 
     <!--Externals Modals-->
+    #set $externals_list = []
+    #if 'externals' in $Extras and $len($Extras['externals']) > 0
+      #for $external in $Extras['externals']
+        #if $external == 'description'
+          #continue
+        #end if
+        #if $to_bool($Extras['externals'][$external].show_on_front)
+          #silent $externals_list.append($external)
+        #end if
+      #end for
+    #end if
+
+    #if ('radar_html' in $Extras or $len($externals_list) > 0) and 'open_radar_and_externals_modal' in $Extras and $to_bool($Extras['open_radar_and_externals_modal'])
+      #if 'radar_html' in $Extras
+        <cds-modal id="modal-radar-default" size="md" fullWidth>
+          <cds-modal-header>
+            <cds-modal-close-button></cds-modal-close-button>
+            <!-- <cds-modal-label>Label (Optional)</cds-modal-label> -->
+            <cds-modal-heading>$gettext("Recent radar")</cds-modal-heading>
+          </cds-modal-header>
+          <cds-modal-body>
+            $Extras.radar_html
+          </cds-modal-body>
+        </cds-modal>
+
+        <script type="text/javascript">
+          document
+            .getElementById("panel-radar")
+            .addEventListener("click", () => {
+              document.getElementById("modal-radar-default").open = true;
+            });
+          document
+            .querySelector("#panel-radar a")
+            .addEventListener("click", (event) => {
+              event.preventDefault();
+            });
+        </script>
+      #end if
+
+      #for $external in externals_list
+        <cds-modal id="modal-$external" size="md" fullWidth>
+          <cds-modal-header>
+            <cds-modal-close-button></cds-modal-close-button>
+            <cds-modal-label>$Extras['externals'][$external].title_long</cds-modal-label>
+            <cds-modal-heading>$Extras['externals'][$external].title</cds-modal-heading>
+          </cds-modal-header>
+          <cds-modal-body>
+            $Extras['externals'][$external].source
+          </cds-modal-body>
+        </cds-modal>
+
+        <script type="text/javascript">
+          document
+            .getElementById("panel-$external")
+            .addEventListener("click", () => {
+              document.getElementById("modal-$external").open = true;
+            });
+
+          document
+            .querySelector("#panel-$external a")
+            .addEventListener("click", (event) => {
+              event.preventDefault();
+            });
+        </script>
+      #end for
+    #end if
 
     #include "includes/footer.inc"
 

diff --git a/skins/weewx-wdc/skin.conf b/skins/weewx-wdc/skin.conf
@@ -32,6 +32,8 @@ SKIN_VERSION = 3.4.0
     #radar_html = ''
     # The Foreacst/Radar/Webcam section heading.
     #forecast_radar_heading = "Forecast & Recent radar"
+    # Open the radar and external images/videos in a modal.
+    open_radar_and_externals_modal = False
 
     # Set to True to have the Forecast tile and the radar/externals tile to have the same width.
     # Default is forecast = 2/3 and radar tile = 1/3.

diff --git a/skins/weewx-wdc/src/scss/index.scss b/skins/weewx-wdc/src/scss/index.scss
@@ -21,6 +21,18 @@ cds-modal {
   @include carbon--theme($carbon--theme--g10, true);
 }
 
+cds-modal cds-modal-body {
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
+    width: auto;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
 html.dark {
   @include carbon--theme($carbon--theme--g90, true);