Unverified Commit aeac2967 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #2632750 by Wim Leers, bnjmnm, krlucas, ronaldtebrake, zaporylie,... 

Issue #2632750 by Wim Leers, bnjmnm, krlucas, ronaldtebrake, zaporylie, mherchel, Fabianx, webchick, yogeshchaugule8, catch, darol100, yoroy, Bojhan, Gábor Hojtsy: Interface previews/skeleton screens through optional "preview" or "placeholder" templates
parent 56923991

core/lib/Drupal/Core/Render/PlaceholderGenerator.php

+4 −0
Original line number Diff line number Diff line
@@ -77,6 +77,10 @@ public function createPlaceholder(array $element) { 
      '#cache' => TRUE,

    ]);



    if (isset($element['#lazy_builder_preview'])) {

      $placeholder_render_array['#preview'] = $element['#lazy_builder_preview'];

    }



    // Be sure cache contexts and tags are sorted before serializing them and

    // making hash. Issue #3225328 removes sort from contexts and tags arrays

    // for performances reasons.

core/lib/Drupal/Core/Render/Renderer.php

+1 −0
Original line number Diff line number Diff line
@@ -325,6 +325,7 @@ protected function doRender(&$elements, $is_root_call = FALSE) { 
        '#lazy_builder',

        '#cache',

        '#create_placeholder',

        '#lazy_builder_preview',

        // The keys below are not actually supported, but these are added

        // automatically by the Renderer. Adding them as though they are

        // supported allows us to avoid throwing an exception 100% of the time.

core/modules/big_pipe/big_pipe.module

+54 −0
Original line number Diff line number Diff line
@@ -76,3 +76,57 @@ function big_pipe_page_attachments(array &$page) { 
    }

  }

}



/**

 * Implements hook_theme().

 */

function big_pipe_theme() {

  return [

    'big_pipe_interface_preview' => [

      'variables' => [

        'callback' => NULL,

        'arguments' => NULL,

        'preview' => NULL,

      ],

    ],

  ];

}



/**

 * Implements hook_theme_suggestions_HOOK().

 */

function big_pipe_theme_suggestions_big_pipe_interface_preview(array $variables) {

  $common_callbacks_simplified_suggestions = [

    'Drupal_block_BlockViewBuilder__lazyBuilder' => 'block',

  ];



  $suggestions = [];

  $suggestion = 'big_pipe_interface_preview';

  if ($variables['callback']) {

    $callback = preg_replace('/[^a-zA-Z0-9]/', '_', $variables['callback']);

    if (is_array($callback)) {

      $callback = implode('__', $callback);

    }



    // Use simplified template suggestion, if any.

    // For example, this simplifies

    // big-pipe-interface-preview--Drupal-block-BlockViewBuilder--lazyBuilder--<BLOCK ID>.html.twig

    // to

    // big-pipe-interface-preview--block--<BLOCK ID>.html.twig

    if (isset($common_callbacks_simplified_suggestions[$callback])) {

      $callback = $common_callbacks_simplified_suggestions[$callback];

    }



    $suggestions[] = $suggestion .= '__' . $callback;

    if (is_array($variables['arguments'])) {

      $arguments = preg_replace('/[^a-zA-Z0-9]/', '_', $variables['arguments']);

      foreach ($arguments as $argument) {

        if (empty($argument)) {

          continue;

        }

        $suggestions[] = $suggestion . '__' . $argument;

      }

    }

  }

  return $suggestions;

}

core/modules/big_pipe/src/Render/BigPipe.php

+4 −7
Original line number Diff line number Diff line
@@ -711,14 +711,11 @@ protected function renderPlaceholder($placeholder, array $placeholder_render_arr 
   *   only keep the first occurrence.

   */

  protected function getPlaceholderOrder($html, $placeholders) {

    $fragments = explode('<span data-big-pipe-placeholder-id="', $html);

    array_shift($fragments);

    $placeholder_ids = [];



    foreach ($fragments as $fragment) {

      $t = explode('"></span>', $fragment, 2);

      $placeholder_id = $t[0];

      $placeholder_ids[] = $placeholder_id;

    $dom = Html::load($html);

    $xpath = new \DOMXPath($dom);

    foreach ($xpath->query('//span[@data-big-pipe-placeholder-id]') as $node) {

      $placeholder_ids[] = Html::escape($node->getAttribute('data-big-pipe-placeholder-id'));

    }

    $placeholder_ids = array_unique($placeholder_ids);

core/modules/big_pipe/src/Render/Placeholder/BigPipeStrategy.php

+16 −1
Original line number Diff line number Diff line
@@ -198,8 +198,23 @@ protected static function placeholderIsAttributeSafe($placeholder) { 
  protected static function createBigPipeJsPlaceholder($original_placeholder, array $placeholder_render_array) {

    $big_pipe_placeholder_id = static::generateBigPipePlaceholderId($original_placeholder, $placeholder_render_array);



    $interface_preview = [];

    if (isset($placeholder_render_array['#lazy_builder'])) {

      $interface_preview = [

        '#theme' => 'big_pipe_interface_preview',

        '#callback' => $placeholder_render_array['#lazy_builder'][0],

        '#arguments' => $placeholder_render_array['#lazy_builder'][1],

      ];

      if (isset($placeholder_render_array['#preview'])) {

        $interface_preview['#preview'] = $placeholder_render_array['#preview'];

        unset($placeholder_render_array['#preview']);

      }

    }



    return [

      '#markup' => '<span data-big-pipe-placeholder-id="' . Html::escape($big_pipe_placeholder_id) . '"></span>',

      '#prefix' => '<span data-big-pipe-placeholder-id="' . Html::escape($big_pipe_placeholder_id) . '">',

      'interface_preview' => $interface_preview,

      '#suffix' => '</span>',

      '#cache' => [

        'max-age' => 0,

        'contexts' => [