Scale the preview result and add some basic layout and theming

compose.libraries.yml

@@ -18,6 +18,11 @@ compose-entity-widget:
   version: 1.x
   js:
     js/compose-entity-widget.js: {}
+  css:
+    layout:
+      css/entity-widget.layout.css: {}
+    theme:
+      css/entity-widget.theme.css: {}
   dependencies:
     - core/drupal
     - core/drupalSettings

compose.module

@@ -28,6 +28,7 @@ function compose_preprocess_compose_entity_widget(&$variables) {
   $field_name = $variables['entities']['#field_name'];
 
   $variables['attributes']['data-compose-entity-widget'] = '';
+  $variables['attributes']['class'][] = 'compose-entity-widget';
 
   // If the cache contexts is not set, set it to an empty array.
   if (!isset($variables['entities']['#cache']['context'])) {
@@ -74,14 +75,21 @@ function compose_preprocess_compose_entity_widget(&$variables) {
         'data-compose-field-name' => $field_name,
         'data-compose-entity-id' => $entity_id,
         'data-compose-entity-type' => $entity_type,
+        'class' => ['compose-entity-preview'],
       ],
+      "#prefix" => '<div class="compose-preview-wrapper">',
+      '#suffix' => '</div>',
       '#value' => '<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>',
       '#weight' => 0
     ];
 
+
     // Give the delta the highest weight so it will appear below its siblings.
     $variables['entities'][$delta]['delta']['#weight'] = 1;
-     
+    // And give it a wrapper
+    $variables['entities'][$delta]['delta']['#prefix'] = '<div class="compose-delta-wrapper">';
+    $variables['entities'][$delta]['delta']['#suffix'] = '</div>';
+
     // Pass the cache tags and contexts to the actual element being rendered.
     $variables['entities']['#cache']['tags'] = Cache::mergeTags($variables['entities']['#cache']['tags'], $variables['entities'][$delta]['#entity']->getCacheTags());
     $variables['entities']['#cache']['contexts'] = Cache::mergeContexts($variables['entities']['#cache']['contexts'], $variables['entities'][$delta]['#entity']->getCacheContexts());

css/entity-widget.layout.css

+.compose-entity-widget > div {
+    position: relative;
+    margin-bottom: 40px;
+}
+
+.compose-preview-meta {
+    position: absolute;
+    left: 90px;
+    top: 40px;
+    z-index: 1;
+    display: grid;
+}
+
+.compose-preview-meta h2 {
+    grid-column-start: 2;
+}
+.compose-preview-meta .ief-entity-operations {
+    grid-row-start: 1;
+}
+
+.compose-preview-wrapper {
+    margin-left: 90px;
+    display: block;
+    transform: scale(0.7);
+    transform-origin: top left;
+}
+
+.compose-delta-wrapper {
+    position: absolute;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    width: 90px;
+}
\ No newline at end of file

css/entity-widget.theme.css

+.compose-entity-preview {
+    border: 1px solid #ccc;
+    padding: 28px;
+}
+
+.compose-preview-meta {
+    background: rgba(255,255,255,0.75);
+    padding: 20px;
+}

js/compose-entity-widget.js

@@ -22,10 +22,10 @@
             // With each entity reference, create a shadowDOM under the div(s)
             // we created above and insert the markup, styles and scripts
             // returned in the AJAX call to these shadowDOM(s).
-            var entityPlaceholder = document.querySelector(`[data-compose-delta="${delta}"][data-compose-field-name="${fieldName}"]`);
+            var entityPlaceholder = $(`[data-compose-delta="${delta}"][data-compose-field-name="${fieldName}"]`);
             entityPlaceholder.innerHTML = '';
-            entityPlaceholder.setAttribute('style', "display: block;");
-            var shadow = entityPlaceholder.attachShadow({ mode: 'open' });
+            entityPlaceholder.css({ "display": "block" });
+            var shadow = entityPlaceholder.get(0).attachShadow({ mode: 'open' });
             shadow.innerHTML = "<style>:host { all: initial;}";
 
             $.each(responseData, function (index, value) {
@@ -33,6 +33,9 @@
                 shadow.innerHTML += value.data;
               }
             });
+            window.setTimeout(function () {
+              entityPlaceholder.parent().css({ "height": (entityPlaceholder.outerHeight() * 0.7) + 'px' });
+            }, 100);
           });
         });
       });