Skip to content
Snippets Groups Projects
Commit 468b11a4 authored by Andrey Vitushkin's avatar Andrey Vitushkin
Browse files

Issue #3471618: Only affected date field highlight

parent 348382e6
No related branches found
No related tags found
No related merge requests found
......@@ -11,6 +11,7 @@
return;
}
const highlightType = settings['views_highlight_past_events']['highlight_type'];
const color = settings['views_highlight_past_events']['color'];
const customClass = settings['views_highlight_past_events']['custom_class'];
if (color === '' && customClass === '') {
......@@ -37,13 +38,12 @@
}
/**
* If the "Add a custom class to the view row if the date is in the
* past" option is set, then add a custom CSS class to the view row
* so that a user can highlight it with CSS. The CSS class is added to
* the parent element of the date field.
* If the "Highlight the view row if the date is in the past" option is
* checked then set the background-color of the view row to gighlight it.
* The background-color is set on the parent element of the date field.
* If the "Add a custom class to date fields or to view rows if dates are
* in the past" option is set, then add a custom CSS class to the view
* field or to the row (depend on the settings) so that a user can
* highlight it with CSS. If the "Highlight past dates" option is checked
* then set the background-color of the view field or the view row
* (depend on the settings) to highlight it.
*/
function highLightPastEvents() {
// The timestamp of the current time in seconds.
......@@ -51,10 +51,24 @@
for (let i = 0; i < eventTimestamps.length; i++) {
if (eventTimestamps[i] && eventTimestamps[i] <= currentTimestamp) {
if (color) {
dateElements[i].parentElement.style.backgroundColor = color;
// Highlight only the date field.
if (highlightType === 'highlight_field') {
dateElements[i].setAttribute('style', 'background-color: ' + color);
}
// Highlight the entire row
else if (highlightType === 'highlight_row') {
dateElements[i].parentElement.style.backgroundColor = color;
}
}
if (customClass) {
dateElements[i].parentElement.classList.add(customClass);
// Add a custom class to the date field.
if (highlightType === 'highlight_field') {
dateElements[i].classList.add(customClass);
}
// Add a custom class to the entire row.
else if (highlightType === 'highlight_row') {
dateElements[i].parentElement.classList.add(customClass);
}
}
}
}
......
......@@ -2,6 +2,6 @@ name: Views highlight past events
type: module
description: Provides a user interface that enables to highlight past events displayed with the Views module.
package: Views
core_version_requirement: ^9 || ^10
core_version_requirement: ">=9"
dependencies:
- drupal:views
......@@ -5,10 +5,10 @@
* Primary module hooks for Views highlight past events module.
*/
use Drupal\views\ViewExecutable;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Component\Utility\Xss;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\views\ViewExecutable;
/**
* Implements hook_form_FORM_ID_alter() for views_ui_config_item_form.
......@@ -22,6 +22,7 @@ function views_highlight_past_events_form_views_ui_config_item_form_alter(&$form
}
$view = $form_state->getStorage()['view']->get('storage');
$highlight_type = $view->getThirdPartySetting('views_highlight_past_events', 'highlight_type', 'highlight_field');
$highlight_enabled = $view->getThirdPartySetting('views_highlight_past_events', 'highlight_enabled', 0);
$add_custom_class_enabled = $view->getThirdPartySetting('views_highlight_past_events', 'add_custom_class_enabled');
$custom_class = $view->getThirdPartySetting('views_highlight_past_events', 'custom_class');
......@@ -34,9 +35,18 @@ function views_highlight_past_events_form_views_ui_config_item_form_alter(&$form
'#title' => t('Highlight past events'),
];
$form['options']['settings']['highlight_past_events']['highlight_type'] = [
'#type' => 'radios',
'#options' => [
'highlight_field' => t('Highlight only the field'),
'highlight_row' => t('Highlight the entire row'),
],
'#default_value' => $highlight_type,
];
$form['options']['settings']['highlight_past_events']['add_custom_class_enabled'] = [
'#type' => 'checkbox',
'#title' => t('Add a custom class to the view row if the date is in the past'),
'#title' => t('Add a custom class to date fields or to view rows if dates are in the past'),
'#default_value' => Xss::filter($add_custom_class_enabled),
];
......@@ -55,7 +65,7 @@ function views_highlight_past_events_form_views_ui_config_item_form_alter(&$form
$form['options']['settings']['highlight_past_events']['highlight_enabled'] = [
'#type' => 'checkbox',
'#title' => t('Highlight the view row if the date is in the past'),
'#title' => t('Highlight past dates'),
'#default_value' => Xss::filter($highlight_enabled),
];
......@@ -123,6 +133,9 @@ function _views_highlight_past_events_validate_form($form, FormStateInterface $f
*/
function _views_highlight_past_events_submit_form($form, FormStateInterface $form_state) {
$view = $form_state->getStorage()['view']->get('storage');
$highlight_type = $form_state->getValue('options')['settings']['highlight_past_events']['highlight_type'];
$view->setThirdPartySetting('views_highlight_past_events', 'highlight_type', $highlight_type);
$highlight_enabled = $form_state->getValue('options')['settings']['highlight_past_events']['highlight_enabled'];
if ($highlight_enabled) {
......@@ -167,6 +180,8 @@ function views_highlight_past_events_views_pre_render(ViewExecutable $view) {
if ($view->current_display !== $settings['display_id']) {
return;
}
$view->element['#attached']['drupalSettings']['views_highlight_past_events']['highlight_type'] = $settings['highlight_type'];
$highlight_color = Xss::filter($settings['highlight_color']);
$view->element['#attached']['drupalSettings']['views_highlight_past_events']['color'] = $highlight_color;
// Create the selector of the HTML element of the date field. We will use it
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment