Merge pull request #1249 from UN-OCHA/berliner/HPC-9945

HPC-9945: Allow 3 column interactive content widgets
UN-OCHA · Dec 9, 2024 · 2a99770 · 2a99770
2 parents 8e72f43 + 3990e81
commit 2a99770
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 15 deletions.
diff --git a/html/modules/custom/ghi_content/src/Plugin/Block/Paragraph.php b/html/modules/custom/ghi_content/src/Plugin/Block/Paragraph.php
@@ -177,6 +177,13 @@ private function buildParagraph(RemoteParagraphInterface $paragraph, $title = NU
           // out of the content area, so we add that here.
           $block_attributes['class'][] = 'content-width';
         }
+        if (in_array('gho-interactive-content--full-width', $gho_classes)) {
+          // Remove the full width classes from the content, but don't add the
+          // content-width class. This will lead to the paragraph to take as
+          // much place as the hero image.
+          $gho_classes = array_diff($gho_classes, ['gho-interactive-content--full-width']);
+          $classes = array_diff($classes, ['gho-interactive-content--full-width']);
+        }
 
         $wrapper_attributes['class'] += $gho_classes;
         $attributes->getNamedItem('class')->nodeValue = implode(' ', array_diff($classes, $gho_classes));

diff --git a/...tom/common_design_subtheme/components/gho-interactive-content/gho-interactive-content.css b/...tom/common_design_subtheme/components/gho-interactive-content/gho-interactive-content.css
@@ -12,6 +12,16 @@
   margin-left: calc(-50vw + (var(--scrollbar-width, 15px) / 2));
 }
 
+.paragraph--type--interactive-content-2-columns .gho-interactive-content--full-width {
+  position: relative;
+  right: unset;
+  left: unset;
+  width: inherit;
+  max-width: inherit;
+  margin-right: inherit;
+  margin-left: inherit;
+}
+
 .gho-interactive-content .field--name-field-image {
   margin-bottom: 1.5rem;
 }
@@ -78,3 +88,75 @@
     flex-basis: calc(75% - 1rem);
   }
 }
+
+/**
+ * Support for 3-col interactive content.
+ */
+ .layout--threecol--interactive-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.layout--threecol--interactive-content > .layout__region {
+  flex: 0 1 100%;
+}
+
+@media screen and (min-width: 1024px) {
+  .layout--threecol--interactive-content {
+    gap: 1rem;
+  }
+
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--33-34-33
+    > .layout__region--first,
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--33-34-33
+    > .layout__region--second,
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--33-34-33
+    > .layout__region--third {
+    flex: 0 1 33%;
+    flex-basis: calc(33% - 1rem);
+  }
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--33-34-33
+    > .layout__region--second {
+    flex: 0 1 34%;
+    flex-basis: calc(34% - 1rem);
+  }
+
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--50-25-25
+    > .layout__region--second,
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--50-25-25
+    > .layout__region--third {
+    flex: 0 1 25%;
+    flex-basis: calc(25% - 1rem);
+  }
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--50-25-25
+    > .layout__region--first {
+    flex: 0 1 50%;
+    flex-basis: calc(50% - 1rem);
+  }
+
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--25-50-25
+    > .layout__region--first,
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--25-50-25
+    > .layout__region--third {
+    flex: 0 1 25%;
+    flex-basis: calc(25% - 1rem);
+  }
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--25-50-25
+    > .layout__region--second {
+    flex: 0 1 50%;
+    flex-basis: calc(50% - 1rem);
+  }
+
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--25-25-50
+    > .layout__region--first,
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--25-25-50
+    > .layout__region--second {
+    flex: 0 1 25%;
+    flex-basis: calc(25% - 1rem);
+  }
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--25-25-50
+    > .layout__region--third {
+    flex: 0 1 50%;
+    flex-basis: calc(50% - 1rem);
+  }
+}
diff --git a/html/themes/custom/common_design_subtheme/js/datawrapper-responsive-iframe.js b/html/themes/custom/common_design_subtheme/js/datawrapper-responsive-iframe.js
@@ -1,16 +1,24 @@
-/*
- * Datawrapper script to handle responsive iframe.
- *
- * @see https://developer.datawrapper.de/docs/responsive-iframe
- */
-window.addEventListener('message', function(event) {
-  if (typeof event.data['datawrapper-height'] !== 'undefined') {
-    for (var chartId in event.data['datawrapper-height']) {
-      var iframe =
-        document.getElementById('datawrapper-chart-' + chartId) ||
-        document.querySelector("iframe[src*='" + chartId + "']");
-      if (!iframe) continue;
-      iframe.style.height = event.data['datawrapper-height'][chartId] + 'px';
+((window) => {
+
+  'use strict';
+
+  /*
+  * Datawrapper script to handle responsive iframe.
+  *
+  * @see https://developer.datawrapper.de/docs/responsive-iframe
+  */
+  window.addEventListener('message', function (event) {
+    if (typeof event.data['datawrapper-height'] !== 'undefined') {
+      var iframes = document.querySelectorAll('iframe');
+      for (var chartId in event.data['datawrapper-height']) {
+        for (var i = 0; i < iframes.length; i++) {
+          if (iframes[i].contentWindow === event.source) {
+            var iframe = iframes[i]
+            iframe.style.height = event.data['datawrapper-height'][chartId] + 'px';
+          }
+        }
+      }
     }
-  }
-});
+  });
+
+})(window);