You are here

function template_preprocess_views_timelinejs_view_timelinejs in Views TimelineJS integration 8.3

Prepares variables for the TimelineJS style template.

Default template: views-timelinejs-view-timelinejs.html.twig.

Parameters

array $vars: An associative array containing:

  • view: A ViewExecutable object.
  • rows: The raw row data.
  • timeline_options: TimelineJS presentation options.
  • timeline_font: The name of a TimelineJS font set.

File

./views_timelinejs.module, line 250
Views TimelineJS API, theming, libraries, etc.

Code

function template_preprocess_views_timelinejs_view_timelinejs(array &$vars) {
  $config = \Drupal::config('views_timelinejs.settings');
  $library_location = $config
    ->get('library_location');
  $view = $vars['view'];

  // Set a unique id attribute for the timeline embed div.  Also set a width and
  // height for the div.  This is required for proper styling of the timeline.
  // See https://timeline.knightlab.com/docs/instantiate-a-timeline.html.
  $id = Html::getId('timelinejs_' . $view->storage
    ->id() . '_' . $view->current_display);
  $style = 'width: ' . $vars['options']['timeline_options']['width'] . '; height: ' . $vars['options']['timeline_options']['height'] . ';';
  $vars['attributes'] = new Attribute([
    'id' => $id,
    'style' => $style,
  ]);

  // Load required libraries and styles.
  $vars['#attached']['library'][] = 'views_timelinejs/timelinejs.' . $library_location;
  $vars['#attached']['library'][] = 'views_timelinejs/create_timeline';
  $vars['#attached']['drupalSettings']['TimelineJS'][] = [
    'options' => _sanitize_timeline_options($vars['options']['timeline_options']),
    'source' => $vars['rows'],
    'embed_id' => $id,
    'processed' => FALSE,
  ];

  // Add alternate font CSS.
  if ($vars['options']['timeline_font']) {
    $vars['#attached']['library'][] = 'views_timelinejs/timelinejs.' . $vars['options']['timeline_font'] . '.' . $library_location;
  }
}