Skip to content
Snippets Groups Projects
Commit 868e4f1f authored by Matthieu Scarset's avatar Matthieu Scarset
Browse files

fix(multiday): Move multiday library into separate module #3389065

parent 18e1efd8
No related branches found
Tags 8.7.0-beta2
No related merge requests found
Showing with 106 additions and 70 deletions
......@@ -4,11 +4,3 @@ calendar:
component:
css/calendar-view.css: {}
css/calendar-view.default.css: {}
multiday:
version: VERSION
js:
js/multiday.js: {}
dependencies:
- core/drupal
- core/once
......@@ -84,7 +84,6 @@ function template_preprocess_calendar_view_day(array &$variables) {
$list = [];
foreach ($elements['#children'] ?? [] as $timestamp => $results) {
foreach ($results as $result) {
$values = $result['#values'] ?? [];
unset($result['#values']);
......@@ -105,26 +104,9 @@ function template_preprocess_calendar_view_day(array &$variables) {
// Helpful information on hover.
$row['attributes']->setAttribute('title', $values['title'] ?? NULL);
// Helpful information for multiday events (e.g. multiday.js)
$row_instance = $values['instance'] ?? 0;
$row_instance_total = $values['instances'] ?? 0;
$row['attributes']->setAttribute('data-calendar-view-instance', $row_instance);
$row['attributes']->setAttribute('data-calendar-view-instances', $row_instance_total);
// Unique identifier for each event.
$row['attributes']->setAttribute('data-calendar-view-hash', $values['hash'] ?? NULL);
$row_instance_classes = [];
if ($row_instance_total > 0) {
$row_instance_classes[] = 'is-multi';
if ($row_instance == 0) {
$row_instance_classes[] = 'is-multi--first';
} elseif ($row_instance == $row_instance_total) {
$row_instance_classes[] = 'is-multi--last';
} else {
$row_instance_classes[] = 'is-multi--middle';
}
$row['attributes']->addClass($row_instance_classes);
}
$list[] = $row;
}
}
......@@ -139,6 +121,8 @@ function template_preprocess_calendar_view_day(array &$variables) {
}
// Expose ordered results to Twig now.
// Use this in your own template_preprocess_calendar_view_day().
// @see calendar_view_multiday_preprocess_calendar_view_day().
$variables['rows'] = $list;
}
......@@ -325,7 +309,7 @@ function calendar_view_theme_suggestions_table_alter(array &$suggestions, array
if (!empty($view_id)) {
$suggestions[] = $hook . '__' . $view_id;
}
if (!empty($view_display)) {
$suggestions[] = $hook . '__' . $view_id . '__' . $view_display;
}
......
......@@ -219,40 +219,6 @@
margin: 0;
}
/** Desktop (e.g. 48rem = 768px) **/
@media(min-width: 48rem) {
/** Multi-day events **/
.calendar-view-day__row.is-multi {
--calendar-view-day-multi-offset: calc(-1rem - 1px);
padding-left: calc(var(--calendar-view-day-multi-offset) * -1);
}
.calendar-view-day__row.is-multi:not(.is-multi--first) > * {
opacity: 0;
pointer-events: none;
}
.calendar-view-day__row.is-multi--first {
margin-right: var(--calendar-view-day-multi-offset);
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.calendar-view-day__row.is-multi--middle {
margin-right: var(--calendar-view-day-multi-offset);
margin-left: var(--calendar-view-day-multi-offset);
border-right: none;
border-left: none;
border-radius: 0;
}
.calendar-view-day__row.is-multi--last {
margin-left: var(--calendar-view-day-multi-offset);
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
/** Mobile (e.g. 48rem = 768px) **/
@media(max-width: 48rem) {
.calendar-view-table thead,
......
......@@ -15,7 +15,7 @@
*
* Create your own template views-view-calendar.html.twig
* and attach your library.
*
*
* @code
* {% extends "views-view-calendar.html.twig" %}
* {% block libraries %}
......
name: Calendar View (demo)
name: Calendar View - Demo Views
description: Create example calendar Views.
type: module
core_version_requirement: ^8 || ^9 || ^10
package: Calendar View
core_version_requirement: ^8.8 || ^9 || ^10
dependencies:
- calendar_view:calendar_view
name: Calendar View - Multiday
description: Improve rendering of events spanning on multiple days.
type: module
package: Calendar View
core_version_requirement: ^9.2 || ^10
dependencies:
- calendar_view:calendar_view
multiday:
version: VERSION
css:
component:
css/multiday.css: {}
js:
js/multiday.js: {}
dependencies:
- core/drupal
- core/once
<?php
/**
* @file
* Contains hooks and preprocess for the calendar_view_multiday module.
*/
/**
* Implements template_preprocess_views_view_calendar().
*/
function calendar_view_multiday_preprocess_views_view_calendar(array &$variables) {
$variables['#attached']['library'][] = 'calendar_view_multiday/multiday';
}
/**
* Implements template_preprocess_calendar_view_day().
*/
function calendar_view_multiday_preprocess_calendar_view_day(array &$variables) {
$rows = $variables['rows'] ?? [];
foreach ($rows as &$row) {
$values = $row['#values'] ?? [];
// Helpful information for multiday events (e.g. multiday.js)
$row_instance = $values['instance'] ?? 0;
$row_instance_total = $values['instances'] ?? 0;
$row['attributes']->setAttribute('data-calendar-view-instance', $row_instance);
$row['attributes']->setAttribute('data-calendar-view-instances', $row_instance_total);
$row_instance_classes = [];
if ($row_instance_total > 0) {
$row_instance_classes[] = 'is-multi';
if ($row_instance == 0) {
$row_instance_classes[] = 'is-multi--first';
} elseif ($row_instance == $row_instance_total) {
$row_instance_classes[] = 'is-multi--last';
} else {
$row_instance_classes[] = 'is-multi--middle';
}
$row['attributes']->addClass($row_instance_classes);
}
}
}
/**
* Multiple days event styling.
*/
/** Desktop (e.g. 48rem = 768px) **/
@media(min-width: 48rem) {
/** Multi-day events **/
.calendar-view-day__row.is-multi {
--calendar-view-day-multi-offset: calc(-1rem - 1px);
padding-left: calc(var(--calendar-view-day-multi-offset) * -1);
}
.calendar-view-day__row.is-multi:not(.is-multi--first) > * {
opacity: 0;
pointer-events: none;
}
.calendar-view-day__row.is-multi--first {
margin-right: var(--calendar-view-day-multi-offset);
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.calendar-view-day__row.is-multi--middle {
margin-right: var(--calendar-view-day-multi-offset);
margin-left: var(--calendar-view-day-multi-offset);
border-right: none;
border-left: none;
border-radius: 0;
}
.calendar-view-day__row.is-multi--last {
margin-left: var(--calendar-view-day-multi-offset);
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
File moved
......@@ -191,7 +191,7 @@ abstract class CalendarViewBase extends DefaultStyle implements CalendarViewInte
}
// Get field overridden timezone.
if ($field && isset($field->options['settings']['timezone_override'])) {
$timezone = $field->options['settings']['timezone_override'] ?: $timezone;
$timezone = $field->options['settings']['timezone_override'] ?: $timezone;
}
return $timezone;
......@@ -454,7 +454,7 @@ abstract class CalendarViewBase extends DefaultStyle implements CalendarViewInte
if (!isset($this->view->calendars)) {
$this->view->calendars = [];
}
$cache_tags = $this->view->getCacheTags() ?? [];
foreach (Element::children($this->view->calendars) as $i) {
......
......@@ -25,9 +25,6 @@
{# Default skin/styles. #}
{{ attach_library ('calendar_view/calendar') }}
{# Handle overlapping days. #}
{{ attach_library ('calendar_view/multiday') }}
{#
/**
* Use this block in your own theme to use your own library.
......
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