feat: teaser preview

.github/workflows/tests.yml

@@ -20,7 +20,7 @@ env:
   DRUPAL_TESTING_HTTP_PORT: 8888
   DRUPAL_TESTING_VERBOSE: false
   DRUPAL_TESTING_VERSION: "^1.0.33"
-  THUNDER_ADMIN_BRANCH: 4.x
+  THUNDER_ADMIN_BRANCH: feat/teaser_preview
   PHPSTAN_MEMORY_LIMIT: 4G
   DRUPAL_TESTING_PARALLEL_TESTING: true
   SIMPLETEST_BASE_URL: http://thunder-testing:8888

config/optional/core.entity_form_display.node.article.bulk_edit.yml

@@ -58,6 +58,7 @@ content:
       match_limit: 10
     third_party_settings: {  }
 hidden:
+  article_teaser_preview: true
   created: true
   field_meta_tags: true
   field_paragraphs: true

config/optional/core.entity_form_display.node.article.default.yml

@@ -28,12 +28,14 @@ third_party_settings:
   field_group:
     group_teaser:
       children:
+        - field_seo_title
         - field_teaser_media
         - field_teaser_text
+        - article_teaser_preview
       label: Teaser
       region: content
       parent_name: ''
-      weight: 4
+      weight: 5
       format_type: fieldset
       format_settings:
         classes: 'content-form__form-section article-teaser'
@@ -46,7 +48,7 @@ third_party_settings:
       label: Paragraphs
       region: content
       parent_name: ''
-      weight: 6
+      weight: 7
       format_type: fieldset
       format_settings:
         classes: 'content-form__form-section paragraphs-container'
@@ -57,7 +59,6 @@ third_party_settings:
       children:
         - field_channel
         - title
-        - field_seo_title
         - field_tags
       label: Basis
       region: content
@@ -74,6 +75,11 @@ targetEntityType: node
 bundle: article
 mode: default
 content:
+  article_teaser_preview:
+    weight: 7
+    region: content
+    settings: {  }
+    third_party_settings: {  }
   created:
     type: datetime_timestamp
     weight: 1
@@ -153,7 +159,7 @@ content:
     third_party_settings: {  }
   field_teaser_media:
     type: entity_browser_entity_reference
-    weight: 4
+    weight: 5
     region: content
     settings:
       entity_browser: image_browser
@@ -189,7 +195,7 @@ content:
     third_party_settings: {  }
   path:
     type: path
-    weight: 8
+    weight: 9
     region: content
     settings: {  }
     third_party_settings: {  }
@@ -208,7 +214,7 @@ content:
     third_party_settings: {  }
   publish_state:
     type: scheduler_moderation
-    weight: 30
+    weight: 14
     region: content
     settings: {  }
     third_party_settings: {  }
@@ -257,12 +263,12 @@ content:
     third_party_settings: {  }
   unpublish_state:
     type: scheduler_moderation
-    weight: 30
+    weight: 15
     region: content
     settings: {  }
     third_party_settings: {  }
   url_redirects:
-    weight: 50
+    weight: 16
     region: content
     settings: {  }
     third_party_settings: {  }

modules/thunder_article/js/teaser_preview.js

@@ -0,0 +1,63 @@
+((Drupal) => {
+  /**
+   * Define teaser preview template.
+   *
+   * @param {object} config
+   *   Configuration options for teaser preview template.
+   *
+   * @return {string}
+   *   Returns markup string for teaser preview.
+   */
+  Drupal.theme.thunderArticleTeaserPreview = (config) => {
+    return (
+      `<img src="${config.image}"/>` +
+      `<h1>${config.title}</h1>` +
+      `<p>${config.text}</p>`
+    );
+  };
+
+  Drupal.behaviors.teaserPreview = {
+    attach() {
+      const title = document.querySelector(
+        '[data-drupal-selector="edit-field-seo-title-0-value"]',
+      );
+      const text = document.querySelector(
+        '[data-drupal-selector="edit-field-teaser-text-0-value"]',
+      );
+
+      title.addEventListener('input', (e) => {
+        const titleField = document.querySelector('article.teaser-preview h1');
+        titleField.textContent = this.trimText(e.target.value, 100);
+      });
+
+      text.addEventListener('input', (e) => {
+        const textField = document.querySelector('article.teaser-preview p');
+        textField.innerHTML = this.trimText(e.target.value, 155).replace(
+          /(?:\r\n|\r|\n)/g,
+          '<br>',
+        );
+      });
+
+      let imageSrc = '';
+      const imageField = document.querySelector(
+        '[data-drupal-selector="edit-field-teaser-media-wrapper"] img',
+      );
+      if (imageField) {
+        imageSrc = imageField.src;
+      }
+
+      const container = document.querySelector('article.teaser-preview');
+      container.innerHTML = Drupal.theme('thunderArticleTeaserPreview', {
+        image: imageSrc,
+        title: this.trimText(title.value, 100),
+        text: this.trimText(text.value, 155).replace(/(?:\r\n|\r|\n)/g, '<br>'),
+      });
+    },
+
+    trimText: (string, length) => {
+      return string.length > length
+        ? `${string.substring(0, length - 3)}...`
+        : string;
+    },
+  };
+})(Drupal);

modules/thunder_article/src/Form/ThunderNodeForm.php

@@ -125,6 +125,24 @@ public function formAlter(array &$form, FormStateInterface $form_state): array {
 
     $form['actions'] = array_merge($form['actions'], $this->actions($entity));
 
+    if ($field = $form_state->get('form_display')->getComponent('article_teaser_preview')) {
+      $form['article_teaser_preview'] = [
+        '#type' => 'container',
+        '#weight' => $field['weight'],
+
+      ];
+      $form['article_teaser_preview']['article'] = [
+        '#type' => 'html_tag',
+        '#tag' => 'article',
+        '#attributes' => [
+          'class' => ['teaser-preview'],
+        ],
+        '#attached' => [
+          'library' => ['thunder_article/teaser_preview'],
+        ],
+      ];
+    }
+
     return $form;
   }
 

modules/thunder_article/thunder_article.libraries.yml

@@ -0,0 +1,6 @@
+teaser_preview:
+  version: VERSION
+  js:
+    js/teaser_preview.js: {}
+  dependencies:
+    - core/drupal

modules/thunder_article/thunder_article.module

@@ -16,3 +16,26 @@ function thunder_article_form_node_form_alter(array &$form, FormStateInterface $
     ->getInstanceFromDefinition(ThunderNodeForm::class)
     ->formAlter($form, $form_state);
 }
+
+/**
+ * Implements hook_entity_extra_field_info().
+ */
+function thunder_article_entity_extra_field_info() {
+  /** @var \Drupal\Core\Entity\EntityFieldManagerInterface $field_manager */
+  $field_manager = \Drupal::service('entity_field.manager');
+  $fields = $field_manager->getFieldDefinitions('node', 'article');
+  $required_fields = [
+    'field_seo_title',
+    'field_teaser_text',
+    'field_teaser_media',
+  ];
+  if (!empty(array_diff($required_fields, array_keys($fields)))) {
+    return [];
+  }
+  $extra['node']['article']['form']['article_teaser_preview'] = [
+    'label' => t('Teaser Preview'),
+    'weight' => 100,
+    'visible' => TRUE,
+  ];
+  return $extra;
+}