OPENEUROPA-2020: Add style for wysiwyg embed.

openeuropa · Aug 1, 2019 · 1fef819 · 1fef819
1 parent 9d4f112
commit 1fef819
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/modules/oe_media_embed/css/ckeditor_embed.css b/modules/oe_media_embed/css/ckeditor_embed.css
@@ -0,0 +1,8 @@
+[data-oembed] {
+    height: 8em;
+    width: 100%;
+    background-color: #E0E0E0;
+    text-align: center;
+    padding-bottom: 1.2em;
+    line-height: 8em;
+}
diff --git a/modules/oe_media_embed/js/plugins/embed_media/plugin.js b/modules/oe_media_embed/js/plugins/embed_media/plugin.js
@@ -68,7 +68,8 @@
         // Fetch the rendered entity.
         init: function () {
           /** @type {CKEDITOR.dom.element} */
-          var element = this.element;
+          // @todo: Use this code once we need to render the media with a defined display mode in WYSIWYG.
+          /**var element = this.element;
           // Use the Ajax framework to fetch the HTML, so that we can retrieve
           // out-of-band assets (JS, CSS...).
           var entityEmbedPreview = Drupal.ajax({
@@ -81,7 +82,7 @@
             // Use a custom event to trigger the call.
             event: 'entity_embed_dummy_event'
           });
-          entityEmbedPreview.execute();
+          entityEmbedPreview.execute();*/
         },
 
         // Downcast the element.

diff --git a/modules/oe_media_embed/oe_media_embed.module b/modules/oe_media_embed/oe_media_embed.module
@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * @file
+ * OpenEuropa Media Embed module.
+ */
+
+declare(strict_types = 1);
+
+/**
+ * Implements hook_ckeditor_css_alter().
+ */
+function oe_media_embed_ckeditor_css_alter(&$css, $editor) {
+  $css[] = drupal_get_path('module', 'oe_media_embed') . '/css/ckeditor_embed.css';
+}
diff --git a/modules/oe_media_embed/tests/FunctionalJavascript/CKEditorIntegrationTest.php b/modules/oe_media_embed/tests/FunctionalJavascript/CKEditorIntegrationTest.php
@@ -110,7 +110,6 @@ public function testIntegration(): void {
     // Embed the Remote video media.
     $this->assertSession()->elementExists('css', 'a.cke_button__' . $this->button->id())->click();
     $this->assertSession()->waitForId('drupal-modal');
-    $this->assertSession()->assertWaitOnAjaxRequest();
     $this->assertSession()->fieldExists('entity_id')->setValue('Digital Single Market: cheaper calls to other EU countries as of 15 May (2)');
     $this->assertSession()->elementExists('css', 'button.js-button-next')->click();
     $this->assertSession()->assertWaitOnAjaxRequest();
@@ -136,10 +135,10 @@ public function testIntegration(): void {
       ->getStorage('media')
       ->loadMultiple();
 
-    $element = new FormattableMarkup('<p data-oembed="https://oembed.ec.europa.eu?url=https%3A//data.ec.europa.eu/ewp/media/@uuid%3Fview_mode%3Dimage_teaser">', ['@uuid' => $media[1]->uuid(), '@title' => $media[1]->label()]);
+    $element = new FormattableMarkup('<p data-oembed="https://oembed.ec.europa.eu?url=https%3A//data.ec.europa.eu/ewp/media/@uuid%3Fview_mode%3Dimage_teaser"><a href="https://data.ec.europa.eu/ewp/media/@uuid">@title</a></p>', ['@uuid' => $media[1]->uuid(), '@title' => $media[1]->label()]);
     $this->assertContains($element->__toString(), $this->getSession()->getPage()->getHtml());
 
-    $element = new FormattableMarkup('<p data-oembed="https://oembed.ec.europa.eu?url=https%3A//data.ec.europa.eu/ewp/media/@uuid">', ['@uuid' => $media[2]->uuid(), '@title' => $media[2]->label()]);
+    $element = new FormattableMarkup('<p data-oembed="https://oembed.ec.europa.eu?url=https%3A//data.ec.europa.eu/ewp/media/@uuid"><a href="https://data.ec.europa.eu/ewp/media/@uuid">@title</a></p>', ['@uuid' => $media[2]->uuid(), '@title' => $media[2]->label()]);
     $this->assertContains($element->__toString(), $this->getSession()->getPage()->getHtml());
   }