HPC-9945: Allow 3 column interactive content widgets

config/core.entity_form_display.paragraph.interactive_content_2_columns.default.yml

@@ -0,0 +1,25 @@
+uuid: 8c961a0e-f545-4bc8-b05c-d1bfd797eb46
+langcode: en
+status: true
+dependencies:
+  config:
+    - paragraphs.paragraphs_type.interactive_content_2_columns
+id: paragraph.interactive_content_2_columns.default
+targetEntityType: paragraph
+bundle: interactive_content_2_columns
+mode: default
+content:
+  layout_paragraphs_fields:
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  status:
+    type: boolean_checkbox
+    weight: 1
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+hidden:
+  created: true

config/core.entity_view_display.paragraph.interactive_content.default.yml

@@ -35,6 +35,16 @@ content:
     third_party_settings: {  }
     weight: 3
     region: content
+  field_full_width:
+    type: boolean
+    label: hidden
+    settings:
+      format: true-false
+      format_custom_false: ''
+      format_custom_true: ''
+    third_party_settings: {  }
+    weight: 5
+    region: content
   field_image:
     type: linked_responsive_image_media_formatter
     label: hidden
@@ -65,7 +75,6 @@ content:
     weight: 0
     region: content
 hidden:
-  field_full_width: true
   field_link: true
   field_show_datawrapper: true
   field_show_interactive_content: true

config/layout_paragraphs_limit.settings.yml

@@ -1,12 +1,14 @@
 disallowed_types:
-  layout_twocol_section:
+  layout_twocol_interactive:
     first:
       negate: true
-      paragraph_types: {  }
+      paragraph_types:
+        interactive_content: interactive_content
     second:
       negate: true
-      paragraph_types: {  }
-  layout_twocol_interactive:
+      paragraph_types:
+        interactive_content: interactive_content
+  layout_threecol_interactive:
     first:
       negate: true
       paragraph_types:
@@ -15,3 +17,7 @@ disallowed_types:
       negate: true
       paragraph_types:
         interactive_content: interactive_content
+    third:
+      negate: true
+      paragraph_types:
+        interactive_content: interactive_content

config/paragraphs.paragraphs_type.interactive_content_2_columns.yml

@@ -10,12 +10,13 @@ third_party_settings:
     category: widget
     disabled: false
 id: interactive_content_2_columns
-label: 'Interactive content (2 columns)'
+label: 'Interactive content (multiple columns)'
 icon_uuid: null
 icon_default: null
-description: 'Allows to embed 2 interactive content widgets side by side'
+description: 'Allows to embed multiple interactive content widgets side by side'
 behavior_plugins:
   layout_paragraphs:
     enabled: true
     available_layouts:
       layout_twocol_interactive: 'Two column (interactive content)'
+      layout_threecol_interactive: 'Three column (interactive content)'

html/modules/custom/gho_fields/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);

html/modules/custom/gho_layouts/css/layout-select.css

@@ -0,0 +1,24 @@
+.layout-select.form-radios {
+  gap: 1rem;
+}
+.layout-select.form-radios > div {
+  margin: 0;
+}
+.layout-select.form-radios .layout-select__item {
+  flex-basis: 11rem;
+}
+.layout-select.form-radios .layout-select__item.form-item--disabled {
+  opacity: 0.6;
+}
+.layout-select.form-radios .layout-select__item label.option,
+.layout-select.form-radios .layout-select__item input:checked + label.option {
+  font-weight: 500;
+}
+#layout-paragraphs-element > fieldset[data-drupal-selector="edit-layout-paragraphs-layout"] {
+  margin-bottom: 0.5rem;
+}
+#layout-paragraphs-element .disabled-message {
+  font-size: 0.9rem;
+  margin-bottom: 2rem;
+  color: gray;
+}

html/modules/custom/gho_layouts/gho_layouts.layouts.yml

@@ -55,3 +55,21 @@ layout_twocol_interactive:
       label: First
     second:
       label: Second
+
+layout_threecol_interactive:
+  label: 'Three column (interactive content)'
+  path: layouts/threecol
+  template: layout--threecol--interactive-content
+  library: gho_layouts/threecol
+  class: '\Drupal\gho_layouts\Plugin\Layout\ThreeColumnInteractiveContentLayout'
+  category: 'Columns: 3'
+  default_region: first
+  icon_map:
+    - [first, second, third]
+  regions:
+    first:
+      label: First
+    second:
+      label: Second
+    third:
+      label: Third

html/modules/custom/gho_layouts/gho_layouts.libraries.yml

@@ -1,3 +1,8 @@
+layout_select:
+  version: VERSION
+  css:
+    theme:
+      css/layout-select.css: {}
 grid:
   version: VERSION
   css:
@@ -8,4 +13,9 @@ twocol:
   version: VERSION
   css:
     theme:
-      layouts/twocol/twocol.css: {}
+      layouts/twocol/twocol.css: {}
+threecol:
+  version: VERSION
+  css:
+    theme:
+      layouts/threecol/threecol.css: {}

html/modules/custom/gho_layouts/gho_layouts.module

@@ -5,6 +5,9 @@
  * GHO Layouts module file.
  */
 
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\gho_layouts\LayoutSelectHelper;
+
 /**
  * Implements hook_entity_view_mode_alter().
  */
@@ -14,3 +17,28 @@ function gho_layouts_entity_view_mode_alter(&$view_mode, $entity) {
     $view_mode = 'home_page';
   }
 }
+
+/**
+ * Implements hook_element_info_alter().
+ */
+function gho_layouts_element_info_alter(array &$info) {
+  if (isset($info['layout_select'])) {
+    $info['layout_select']['#process'][] = [
+      LayoutSelectHelper::class,
+      'processLayoutSelect',
+    ];
+  }
+}
+
+/**
+ * Implements hook_form_FORM_ID_alter().
+ */
+function gho_layouts_form_layout_paragraphs_component_form_alter(array &$form, FormStateInterface $form_state) {
+  /** @var \Drupal\layout_paragraphs\Form\EditComponentForm $form_object */
+  $form_object = $form_state->getFormObject();
+  $paragraph = $form_object->getParagraph();
+  if ($paragraph->bundle() == 'interactive_content_2_columns') {
+    // See LayoutSelectHelper::processLayoutSelect().
+    $form['#region_component_restrict'] = TRUE;
+  }
+}

html/modules/custom/gho_layouts/layouts/threecol/layout--threecol--interactive-content.html.twig

@@ -0,0 +1,36 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a three-column layout.
+ *
+ * Available variables:
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{% if content %}
+  <div{{ attributes }}>
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+  </div>
+{% endif %}

html/modules/custom/gho_layouts/layouts/threecol/threecol.css

@@ -0,0 +1,69 @@
+/*
+ * @file
+ * Provides the layout styles for two-column layout section.
+ */
+
+ .layout--threecol--interactive-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.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--third {
+    flex: 0 1 33%;
+    flex-basis: calc(33% - 1rem);
+    max-width: 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);
+    max-width: calc(34% - 1rem);
+  }
+
+  .layout--threecol--interactive-content.layout--threecol--interactive-content--50-25-25 > .layout__region--first {
+    flex: 0 1 50%;
+    flex-basis: calc(50% - 1rem);
+    max-width: calc(50% - 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);
+    max-width: 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);
+    max-width: 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);
+    max-width: 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);
+    max-width: 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);
+    max-width: calc(25% - 1rem);
+  }
+
+}

html/modules/custom/gho_layouts/layouts/twocol/twocol.css

@@ -21,29 +21,34 @@
   .layout--twocol--interactive-content.layout--twocol--interactive-content--50-50 > .layout__region--second {
     flex: 0 1 50%;
     flex-basis: calc(50% - 1rem);
+    max-width: calc(50% - 1rem);
   }
 
   .layout--twocol--interactive-content.layout--twocol--interactive-content--33-67 > .layout__region--first,
   .layout--twocol--interactive-content.layout--twocol--interactive-content--67-33 > .layout__region--second {
     flex: 0 1 33%;
     flex-basis: calc(33% - 1rem);
+    max-width: calc(33% - 1rem);
   }
 
   .layout--twocol--interactive-content.layout--twocol--interactive-content--33-67 > .layout__region--second,
   .layout--twocol--interactive-content.layout--twocol--interactive-content--67-33 > .layout__region--first {
     flex: 0 1 67%;
     flex-basis: calc(67% - 1rem);
+    max-width: calc(67% - 1rem);
   }
 
   .layout--twocol--interactive-content.layout--twocol--interactive-content--25-75 > .layout__region--first,
   .layout--twocol--interactive-content.layout--twocol--interactive-content--75-25 > .layout__region--second {
     flex: 0 1 25%;
     flex-basis: calc(25% - 1rem);
+    max-width: calc(25% - 1rem);
   }
 
   .layout--twocol--interactive-content.layout--twocol--interactive-content--25-75 > .layout__region--second,
   .layout--twocol--interactive-content.layout--twocol--interactive-content--75-25 > .layout__region--first {
     flex: 0 1 75%;
     flex-basis: calc(75% - 1rem);
+    max-width: calc(75% - 1rem);
   }
 }