Added modal colorbox image display choices in the wysiwyg (#826)

SU-SWS · Oct 31, 2024 · ca9e29e · ca9e29e
1 parent 9c3b933
commit ca9e29e
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 0 deletions.
diff --git a/config/sync/core.entity_view_display.media.image.large_modal.yml b/config/sync/core.entity_view_display.media.image.large_modal.yml
@@ -0,0 +1,54 @@
+uuid: 2b2c0e22-8ee7-4d00-840e-2eed9afa61c6
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.large_modal
+    - field.field.media.image.field_media_image
+    - field.field.media.image.su_media_category
+    - image.style.breakpoint_2xl_1x
+    - image.style.large
+    - media.type.image
+  module:
+    - colorbox
+    - empty_fields
+    - field_formatter_class
+    - field_label
+    - layout_builder
+third_party_settings:
+  layout_builder:
+    enabled: false
+    allow_custom: false
+id: media.image.large_modal
+targetEntityType: media
+bundle: image
+mode: large_modal
+content:
+  field_media_image:
+    type: colorbox
+    label: hidden
+    settings:
+      colorbox_image_style: breakpoint_2xl_1x
+      colorbox_gallery: page
+      colorbox_gallery_custom: ''
+      colorbox_caption: auto
+      colorbox_caption_custom: ''
+      colorbox_node_style: large
+      colorbox_node_style_first: large
+    third_party_settings:
+      empty_fields:
+        handler: ''
+      field_formatter_class:
+        class: ''
+      field_label:
+        label_value: ''
+        label_tag: ''
+    weight: 6
+    region: content
+hidden:
+  created: true
+  name: true
+  search_api_excerpt: true
+  su_media_category: true
+  thumbnail: true
+  uid: true
diff --git a/config/sync/core.entity_view_display.media.image.medium_modal.yml b/config/sync/core.entity_view_display.media.image.medium_modal.yml
@@ -0,0 +1,54 @@
+uuid: f98966ea-7adf-47c2-ad3f-85055ea24ea7
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.medium_modal
+    - field.field.media.image.field_media_image
+    - field.field.media.image.su_media_category
+    - image.style.breakpoint_2xl_1x
+    - image.style.medium
+    - media.type.image
+  module:
+    - colorbox
+    - empty_fields
+    - field_formatter_class
+    - field_label
+    - layout_builder
+third_party_settings:
+  layout_builder:
+    enabled: false
+    allow_custom: false
+id: media.image.medium_modal
+targetEntityType: media
+bundle: image
+mode: medium_modal
+content:
+  field_media_image:
+    type: colorbox
+    label: hidden
+    settings:
+      colorbox_image_style: breakpoint_2xl_1x
+      colorbox_gallery: page
+      colorbox_gallery_custom: ''
+      colorbox_caption: auto
+      colorbox_caption_custom: ''
+      colorbox_node_style: medium
+      colorbox_node_style_first: medium
+    third_party_settings:
+      empty_fields:
+        handler: ''
+      field_formatter_class:
+        class: ''
+      field_label:
+        label_value: ''
+        label_tag: ''
+    weight: 6
+    region: content
+hidden:
+  created: true
+  name: true
+  search_api_excerpt: true
+  su_media_category: true
+  thumbnail: true
+  uid: true
diff --git a/config/sync/core.entity_view_display.media.image.small_modal.yml b/config/sync/core.entity_view_display.media.image.small_modal.yml
@@ -0,0 +1,56 @@
+uuid: a4111c63-41f9-42ab-a8f1-70a8726911d1
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.small_modal
+    - field.field.media.image.field_media_image
+    - field.field.media.image.su_media_category
+    - image.style.breakpoint_2xl_1x
+    - image.style.thumbnail
+    - media.type.image
+  module:
+    - colorbox
+    - empty_fields
+    - field_formatter_class
+    - field_label
+    - layout_builder
+third_party_settings:
+  layout_builder:
+    enabled: false
+    allow_custom: false
+_core:
+  default_config_hash: hSk8HhFOQGFB36lnn_tEKB38YVOq1uNpB-cdzzq5vMo
+id: media.image.small_modal
+targetEntityType: media
+bundle: image
+mode: small_modal
+content:
+  field_media_image:
+    type: colorbox
+    label: hidden
+    settings:
+      colorbox_image_style: breakpoint_2xl_1x
+      colorbox_gallery: page
+      colorbox_gallery_custom: ''
+      colorbox_caption: auto
+      colorbox_caption_custom: ''
+      colorbox_node_style: thumbnail
+      colorbox_node_style_first: thumbnail
+    third_party_settings:
+      empty_fields:
+        handler: ''
+      field_formatter_class:
+        class: ''
+      field_label:
+        label_value: ''
+        label_tag: ''
+    weight: 0
+    region: content
+hidden:
+  created: true
+  name: true
+  search_api_excerpt: true
+  su_media_category: true
+  thumbnail: true
+  uid: true
diff --git a/config/sync/core.entity_view_mode.media.large_modal.yml b/config/sync/core.entity_view_mode.media.large_modal.yml
@@ -0,0 +1,11 @@
+uuid: f192f9f4-716f-40fd-be1d-66739d311c5a
+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.large_modal
+label: 'Large Modal'
+description: ''
+targetEntityType: media
+cache: true
diff --git a/config/sync/core.entity_view_mode.media.medium_modal.yml b/config/sync/core.entity_view_mode.media.medium_modal.yml
@@ -0,0 +1,11 @@
+uuid: 437a171d-2c27-48e1-b3ad-a8b55c1b0c37
+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.medium_modal
+label: 'Medium Modal'
+description: ''
+targetEntityType: media
+cache: true
diff --git a/config/sync/core.entity_view_mode.media.small_modal.yml b/config/sync/core.entity_view_mode.media.small_modal.yml
@@ -0,0 +1,11 @@
+uuid: a9df3242-e117-4b91-bd80-df6098ea4081
+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.small_modal
+label: 'Thumb Modal'
+description: ''
+targetEntityType: media
+cache: true
diff --git a/config/sync/filter.format.stanford_html.yml b/config/sync/filter.format.stanford_html.yml
@@ -3,6 +3,9 @@ langcode: en
 status: true
 dependencies:
   config:
+    - core.entity_view_mode.media.large_modal
+    - core.entity_view_mode.media.medium_modal
+    - core.entity_view_mode.media.small_modal
     - core.entity_view_mode.media.stanford_image_large
     - core.entity_view_mode.media.stanford_image_large_square
     - core.entity_view_mode.media.stanford_image_medium
@@ -115,6 +118,9 @@ filters:
       default_view_mode: default
       allowed_view_modes:
         default: default
+        large_modal: large_modal
+        medium_modal: medium_modal
+        small_modal: small_modal
         stanford_image_large: stanford_image_large
         stanford_image_large_square: stanford_image_large_square
         stanford_image_medium: stanford_image_medium

diff --git a/tests/codeception/functional/Paragraphs/WYSIWYGCest.php b/tests/codeception/functional/Paragraphs/WYSIWYGCest.php
@@ -298,6 +298,50 @@ public function testEmbeddedDocument(FunctionalTester $I) {
     $I->canSeeElement('.su-wysiwyg-text a[href*="test"]');
   }
 
+  /**
+   * Image modal test.
+   *
+   * @group wysiwyg-modal
+   */
+  public function testWysiwygModal(FunctionalTester $I) {
+    $file_system = \Drupal::service('file_system');
+    $image_path = $file_system->copy(__DIR__ . '/logo.jpg', 'public://' . $this->faker->word . '.jpg');
+    $image_name = basename($image_path);
+
+    $file = $I->createEntity(['uri' => $image_path], 'file');
+    $media = $I->createEntity([
+      'bundle' => 'image',
+      'field_media_image' => ['target_id' => $file->id(), 'alt' => 'alt text'],
+    ], 'media');
+
+    $text = '<drupal-media data-entity-type="media" data-entity-uuid="' . $media->uuid() . '" data-view-mode="large_modal" data-align="right">&nbsp;</drupal-media>';
+    $page = $this->getNodeWithParagraph($I, $text);
+    $I->amOnPage($page->toUrl()->toString());
+    $I->canSee($page->label(), 'h1');
+    $I->canSeeElement('img[alt="alt text"][src*="' . $image_name . '"][src*="/large/"]');
+    $I->clickWithLeftButton('a.colorbox');
+    $I->waitForElementVisible('#cboxLoadedContent img');
+    $I->canSee('alt text', '#cboxTitle');
+
+    $text = '<drupal-media data-entity-type="media" data-entity-uuid="' . $media->uuid() . '" data-view-mode="medium_modal" data-align="right">&nbsp;</drupal-media>';
+    $page = $this->getNodeWithParagraph($I, $text);
+    $I->amOnPage($page->toUrl()->toString());
+    $I->canSee($page->label(), 'h1');
+    $I->canSeeElement('img[alt="alt text"][src*="' . $image_name . '"][src*="/medium/"]');
+    $I->clickWithLeftButton('a.colorbox');
+    $I->waitForElementVisible('#cboxLoadedContent img');
+    $I->canSee('alt text', '#cboxTitle');
+
+    $text = '<drupal-media data-entity-type="media" data-entity-uuid="' . $media->uuid() . '" data-view-mode="small_modal" data-align="right">&nbsp;</drupal-media>';
+    $page = $this->getNodeWithParagraph($I, $text);
+    $I->amOnPage($page->toUrl()->toString());
+    $I->canSee($page->label(), 'h1');
+    $I->canSeeElement('img[alt="alt text"][src*="' . $image_name . '"][src*="/thumbnail/"]');
+    $I->clickWithLeftButton('a.colorbox');
+    $I->waitForElementVisible('#cboxLoadedContent img');
+    $I->canSee('alt text', '#cboxTitle');
+  }
+
   /**
    * Get a node with a wysiwyg paragraph on it.
    *