public function TimelineJS::buildOptionsForm in Views TimelineJS integration 8.3
Provide a form to edit options for this plugin.
Overrides StylePluginBase::buildOptionsForm
File
- src/
Plugin/ views/ style/ TimelineJS.php, line 135
Class
- TimelineJS
- Style plugin to render items as TimelineJS3 slides.
Namespace
Drupal\views_timelinejs\Plugin\views\styleCode
public function buildOptionsForm(&$form, FormStateInterface $form_state) {
$initial_labels = [
'' => $this
->t('- None -'),
];
$view_fields_labels = $this->displayHandler
->getFieldLabels();
$view_fields_labels = array_merge($initial_labels, $view_fields_labels);
// Timeline general configuration. Values within this fieldset will be
// passed directly to the TimelineJS settings object. As a result, form
// element keys should be given the same ID as TimelineJS settings, e.g.
// $form['timeline_config']['id_of_timelinejs_option']. See the list of
// options at https://timeline.knightlab.com/docs/options.html.
$form['timeline_config'] = [
'#type' => 'details',
'#title' => $this
->t('TimelineJS Options'),
'#description' => $this
->t('Each of these settings maps directly to one of the TimelineJS presentation options. See the <a href="@options-doc">options documentation page</a> for additional information.', [
'@options-doc' => 'https://timeline.knightlab.com/docs/options.html',
]),
'#open' => TRUE,
];
$form['timeline_config']['width'] = [
'#type' => 'textfield',
'#title' => $this
->t('Timeline width'),
'#description' => $this
->t('The width of the timeline, e.g. "100%" or "650px".'),
'#default_value' => $this->options['timeline_config']['width'],
'#size' => 10,
'#maxlength' => 10,
];
$form['timeline_config']['height'] = [
'#type' => 'textfield',
'#title' => $this
->t('Timeline height'),
'#description' => $this
->t('The height of the timeline, e.g. "40em" or "650px". Percent values are not recommended for the height.'),
'#default_value' => $this->options['timeline_config']['height'],
'#size' => 10,
'#maxlength' => 10,
];
$form['timeline_config']['hash_bookmark'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Add hash bookmarks'),
'#description' => $this
->t('On each slide, a # will be added to the end of the url in the url bar. These urls are bookmarkable, so you can share or return to the same place in the timeline later.'),
'#default_value' => $this->options['timeline_config']['hash_bookmark'],
];
$form['timeline_config']['scale_factor'] = [
'#type' => 'number',
'#title' => $this
->t('Scale factor'),
'#description' => $this
->t('How many screen widths wide the timeline should be at first presentation.'),
'#default_value' => $this->options['timeline_config']['scale_factor'],
'#min' => 0,
'#max' => 10,
'#step' => 0.25,
];
$form['timeline_config']['timenav_position'] = [
'#type' => 'select',
'#title' => $this
->t('Timeline navigation position'),
'#options' => [
'bottom' => $this
->t('Bottom'),
'top' => $this
->t('Top'),
],
'#default_value' => $this->options['timeline_config']['timenav_position'],
];
$form['timeline_config']['timenav_height'] = [
'#type' => 'textfield',
'#title' => $this
->t('Timeline navigation height'),
'#description' => $this
->t('The height of the timeline navigation, in pixels. Enter an integer value.'),
'#default_value' => $this->options['timeline_config']['timenav_height'],
'#size' => 10,
'#maxlength' => 10,
];
$form['timeline_config']['timenav_height_percentage'] = [
'#type' => 'textfield',
'#title' => $this
->t('Timeline navigation height percentage'),
'#description' => $this
->t('The height of the timeline navigation, in percent. Enter an integer value. Overridden by the Timeline navigation height setting.'),
'#default_value' => $this->options['timeline_config']['timenav_height_percentage'],
'#size' => 10,
'#maxlength' => 10,
];
$form['timeline_config']['timenav_mobile_height_percentage'] = [
'#type' => 'textfield',
'#title' => $this
->t('Timeline navigation mobile height percentage'),
'#description' => $this
->t('The height of the timeline navigation on mobile device screens, in percent. Enter an integer value.'),
'#default_value' => $this->options['timeline_config']['timenav_mobile_height_percentage'],
'#size' => 10,
'#maxlength' => 10,
];
$form['timeline_config']['timenav_height_min'] = [
'#type' => 'textfield',
'#title' => $this
->t('Timeline navigation height minimum'),
'#description' => $this
->t('The minimum height of the timeline navigation, in pixels. Enter an integer value.'),
'#default_value' => $this->options['timeline_config']['timenav_height_min'],
'#size' => 10,
'#maxlength' => 10,
];
$form['timeline_config']['start_at_end'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Start at the end'),
'#description' => $this
->t('Loads the timeline on the last slide.'),
'#default_value' => $this->options['timeline_config']['start_at_end'],
];
$form['timeline_config']['language'] = [
'#type' => 'select',
'#title' => $this
->t('Language'),
'#description' => $this
->t("By default, the timeline will be displayed in the site's current language if it is supported by TimelineJS. Selecting a language in this setting will force the timeline to always be displayed in the chosen language."),
'#options' => array_merge($initial_labels, _views_timelinejs_list_languages()),
'#default_value' => $this->options['timeline_config']['language'],
];
// Timeline additional configuration.
$form['additional_config'] = [
'#type' => 'details',
'#title' => $this
->t('Additional Options'),
'#description' => $this
->t('These settings include extra options to control the TimelineJS presentation or options unique to this plugin.'),
'#open' => TRUE,
];
$form['additional_config']['font'] = [
'#type' => 'select',
'#title' => $this
->t('Font set'),
'#description' => $this
->t('TimelineJS3 offers several pre-selected font sets. If a set is selected its CSS file will be downloaded from the CDN.'),
'#options' => array_merge($initial_labels, _views_timelinejs_list_font_sets()),
'#default_value' => $this->options['additional_config']['font'],
];
$form['additional_config']['start_at_current'] = [
'#type' => 'checkbox',
'#title' => $this
->t('Start at Current'),
'#description' => $this
->t('Loads the timeline on the slide closest to the current time. Overrides the "Start at the End" setting.'),
'#default_value' => $this->options['additional_config']['start_at_current'],
];
// Field mapping.
$form['timeline_fields'] = [
'#type' => 'details',
'#title' => $this
->t('Field mappings'),
'#description' => $this
->t('Map your Views data fields to TimelineJS slide object properties.'),
'#open' => TRUE,
];
$form['timeline_fields']['headline'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Headline'),
'#description' => $this
->t('The selected field may contain any text, including HTML markup.'),
'#default_value' => $this->options['timeline_fields']['headline'],
];
$form['timeline_fields']['text'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Body text'),
'#description' => $this
->t('The selected field may contain any text, including HTML markup.'),
'#default_value' => $this->options['timeline_fields']['text'],
];
$form['timeline_fields']['start_date'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Start date'),
'#required' => TRUE,
'#description' => $this
->t('The selected field should contain a string representing a date conforming to a <a href="@php-manual">PHP supported date and time format</a>. Start dates are required by event slides and eras. If this mapping is not configured or if the field does not output dates in a valid format, then the slides or eras will not be added to the timeline.', [
'@php-manual' => 'http://php.net/manual/en/datetime.formats.php',
]),
'#default_value' => $this->options['timeline_fields']['start_date'],
];
$form['timeline_fields']['end_date'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('End date'),
'#description' => $this
->t('The selected field should contain a string representing a date conforming to a <a href="@php-manual">PHP supported date and time format</a>. End dates are required by eras. If this mapping is not configured or if the field does not output dates in a valid format, then the eras will not be added to the timeline.', [
'@php-manual' => 'http://php.net/manual/en/datetime.formats.php',
]),
'#default_value' => $this->options['timeline_fields']['end_date'],
];
$form['timeline_fields']['display_date'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Display date'),
'#description' => $this
->t('The selected field should contain a string. TimelineJS will display this value instead of the values of the start and end date fields.'),
'#default_value' => $this->options['timeline_fields']['display_date'],
];
$form['timeline_fields']['background'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Background image'),
'#description' => $this
->t('The selected field should contain a raw URL to an image. Special handling is included for Image fields because they have no raw URL formatter.'),
'#default_value' => $this->options['timeline_fields']['background'],
];
$form['timeline_fields']['background_color'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Background color'),
'#description' => $this
->t('The selected field should contain a string representing a CSS color, in hexadecimal (e.g. #0f9bd1) or a valid <a href="@color-keywords">CSS color keyword</a>.', [
'@color-keywords' => 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords',
]),
'#default_value' => $this->options['timeline_fields']['background_color'],
];
$form['timeline_fields']['media'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Media'),
'#description' => $this
->t('The selected field should contain a raw URL to a media resource, an HTML blockquote, or an HTML iframe. See the <a href="@media-documentation">media types documentation</a> for a list of supported types. Special handling is included for Image fields because they have no raw URL formatter.', [
'@media-documentation' => 'https://timeline.knightlab.com/docs/media-types.html',
]),
'#default_value' => $this->options['timeline_fields']['media'],
];
$form['timeline_fields']['credit'] = [
'#type' => 'select',
'#title' => $this
->t('Media Credit'),
'#description' => $this
->t('The selected field may contain any text, including HTML markup.'),
'#options' => $view_fields_labels,
'#default_value' => $this->options['timeline_fields']['credit'],
];
$form['timeline_fields']['caption'] = [
'#type' => 'select',
'#title' => $this
->t('Media Caption'),
'#description' => $this
->t('The selected field may contain any text, including HTML markup.'),
'#options' => $view_fields_labels,
'#default_value' => $this->options['timeline_fields']['caption'],
];
$form['timeline_fields']['thumbnail'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Media thumbnail'),
'#description' => $this
->t('The selected field should contain a raw URL for an image to use in the timenav marker for this event. If omitted, TimelineJS will use an icon based on the type of media. Special handling is included for Image fields because they have no raw URL formatter.'),
'#default_value' => $this->options['timeline_fields']['thumbnail'],
];
$form['timeline_fields']['group'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Group'),
'#description' => $this
->t('The selected field may contain any text. If present, TimelineJS will organize events with the same value for group to be in the same row or adjacent rows, separate from events in other groups. The common value for the group will be shown as a label at the left edge of the navigation.'),
'#default_value' => $this->options['timeline_fields']['group'],
];
$form['timeline_fields']['type'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Type'),
'#description' => $this
->t('Determines the type of timeline entity that is rendered: event, title slide, or era. This plugin recognizes a limited set of string values to determine the type. "title" or "timeline_title_slide" will cause a views data row to be rendered as a TimelineJS title slide. Only one title slide can be created per timeline. Additional title slides will overwrite previous slides. "era" or "timeline_era" rows will be rendered as TimelineJS eras. By default, a row with an empty value or any other input will be rendered as a regular event slide.'),
'#default_value' => $this->options['timeline_fields']['type'],
];
$form['timeline_fields']['unique_id'] = [
'#type' => 'select',
'#options' => $view_fields_labels,
'#title' => $this
->t('Unique ID'),
'#description' => $this
->t('The selected field should contain a string value which is unique among all slides in your timeline, e.g. a node ID. If not specified, TimelineJS will construct an ID based on the headline, but if you later edit your headline, the ID will change. Unique IDs are used when the hash_bookmark option is used.'),
'#default_value' => $this->options['timeline_fields']['unique_id'],
];
}