bachir/drupal-leshed
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

integrated evenements in drupal and front

Browse Source
This commit is contained in:
bachir
2026-09-11 19:14:00 +02:00
parent 32319f19bd
commit 4efafd0e22
22 changed files with 1457 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/leshed/assets/dist/main.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/leshed/assets/dist/main.js
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
web/themes/custom/leshed/assets/js/main.js
+19 -10
View File
@@ -91,7 +91,16 @@ gsap.registerPlugin(ScrollTrigger);
};
function initTitles() {
const titles = document.querySelectorAll('#block-leshed-identitedusite>a, article.node-type-projet>header>h2, article.node-type-projet>.cols>.left>h2, article.node-type-projet.view-mode-full h2.node-title');
const titles = document.querySelectorAll('\
#block-leshed-identitedusite>a, \
article.node-type-projet>header>h2,\
article.node-type-projet>.cols>.left>h2,\
article.node-type-projet.view-mode-full h2.node-title,\
article.node-type-evenement>header>h2,\
article.node-type-evenement>header>.field_dates>time,\
article.node-type-evenement.view-mode-full h2.node-title,\
article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part\
');
for (const txt of titles) {
txt.classList.add("variable-title");
const splitted = Splitting({ target: txt, by: 'chars' });
@@ -313,23 +322,23 @@ gsap.registerPlugin(ScrollTrigger);
console.log('initPageFull');
// PAGE TITLE SCALING DOWN
const pageTitle = document.querySelector('article.node-type-projet.view-mode-full h2.node-title');
console.log('pageTitle', pageTitle);
const pageHeader = document.querySelector('article.node-type-projet.view-mode-full .cols>.col.left>header, article.node-type-evenement.view-mode-full>.cols>.col.left>header');
console.log('pageHeader', pageHeader);
if (pageTitle) {
if (pageHeader) {
// needs requestAnimationFrame to get the real titleHeight after splitting
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const initTitleH = pageTitle.offsetHeight;
// console.log(`initTitleH: ${initTitleH}`);
const titleScaleTarget = 0.4;
const end = initTitleH - initTitleH * titleScaleTarget;
const initheaderH = pageHeader.offsetHeight;
// console.log(`initheaderH: ${initheaderH}`);
const headerScaleTarget = 0.4;
const end = initheaderH - initheaderH * headerScaleTarget;
// console.log(`end: ${end}`);
gsap_mm.add('(min-width: 768px)', () => {
gsap.to(pageTitle, {
scale: titleScaleTarget,
gsap.to(pageHeader, {
scale: headerScaleTarget,
y: end,
ease: 'none',
scrollTrigger: {
web/themes/custom/leshed/assets/scss/main.scss
+152 -43
View File
@@ -214,6 +214,12 @@ header[role="banner"]{
} // end of header[role="banner"]{
// ____ _ _ _
// / ___| | ___ | |__ __ _| |___
// | | _| |/ _ \| '_ \ / _` | / __|
// | |_| | | (_) | |_) | (_| | \__ \
// \____|_|\___/|_.__/ \__,_|_|___/
.variable-title{
margin: 0;
font-weight: 200;
@@ -231,23 +237,14 @@ header[role="banner"]{
// }
}
@mixin projetListe{
@mixin nodeListe{
>header{
>h2{
font-size: 5em;
}
}
// only with images, title overlap the image
div.field_artiste_s_invite_s.field-items.multiple{
// display: flex;
// flex-direction: row;
.field-item{
display: inline-block;
&:not(:last-of-type):after{
content: ", ";
}
}
}
&.has-image{
>header{
>h2{
@@ -275,6 +272,33 @@ header[role="banner"]{
}
}
@mixin projetListe{
@include nodeListe();
div.field_artiste_s_invite_s.field-items.multiple{
// display: flex;
// flex-direction: row;
.field-item{
display: inline-block;
&:not(:last-of-type):after{
content: ", ";
}
}
}
}
@mixin evenementListe{
@include nodeListe();
>header{
.field_dates{
font-size: 3em;
}
}
}
// _____ _____ __ ____ ___ _ ____
// |_ _/ _ \ \ / / / ___/ _ \| | / ___|
// | || | | \ \ /\ / / | | | | | | | \___ \
@@ -300,18 +324,15 @@ div.layout.layout--twocol-section--50-50{
article.node-type-projet{
@include projetListe();
}
article.node-type-evenement{
@include evenementListe();
}
}
}
}
// ____ _ _
// | _ \ _ __ ___ (_) ___| |_
// | |_) | '__/ _ \| |/ _ \ __|
// | __/| | | (_) | | __/ |_
// |_| |_| \___// |\___|\__|
// |__/
article.node-type-projet.view-mode-full{
@mixin nodefull{
div.cols{
display: flex;
flex-direction: row;
@@ -325,17 +346,20 @@ article.node-type-projet.view-mode-full{
z-index: 10;
// padding-bottom: 5em;
// box-sizing: border-box;
>h2.node-title{
position: relative;
font-size: 12em;
margin: 0;
z-index: 100;
width: 205%;//calc(50% - $colsgap / 2);
pointer-events: none;
&.leshed-svg-export-target{
pointer-events: painted;
}
>header{
transform-origin: 0 0;
width: 205%;//calc(50% - $colsgap / 2);
z-index: 100;
pointer-events: none;
>h2.node-title{
position: relative;
font-size: 12em;
margin: 0;
&.leshed-svg-export-target{
pointer-events: painted;
}
}
}
.field_artiste_s_invite_s{
@@ -459,7 +483,78 @@ article.node-type-projet.view-mode-full{
}
}
}
}
// ____ _ _
// | _ \ _ __ ___ (_) ___| |_
// | |_) | '__/ _ \| |/ _ \ __|
// | __/| | | (_) | | __/ |_
// |_| |_| \___// |\___|\__|
// |__/
article.node-type-projet.view-mode-full{
@include nodefull();
}
// _____ _
// | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_
// | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __|
// | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_
// |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|
article.node-type-evenement.view-mode-full{
@include nodefull();
.field_dates.digit-dates{
transform-origin: 0 0;
time{
display: grid;
grid-template-columns: 18em 7em;
grid-template-rows: auto auto;
grid-template-areas:
"day month"
"day year";
// align-items: baseline;
span.date-day{
grid-area: day;
font-size: 18em;
}
span.date-month{
grid-area: month;
align-self: end;
}
span.date-year{
grid-area: year;
}
span.date-month,
span.date-year{
font-size: 6em;
}
}
}
}
// __ ___ _ _ _
// \ \ / (_) _____ __ / \ _ __ ___| |__ (_)_ _____ ___
// \ \ / /| |/ _ \ \ /\ / / / _ \ | '__/ __| '_ \| \ \ / / _ \/ __|
// \ V / | | __/\ V V / / ___ \| | | (__| | | | |\ V / __/\__ \
// \_/ |_|\___| \_/\_/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/
@mixin views-archives{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2em;
gap: $colsgap;
div.views-row{
flex: 1 0 calc(25% - $colsgap);
width: calc(25% - $colsgap);
}
}
// __ ___ _ _ _ ____ _ _
@@ -469,22 +564,36 @@ article.node-type-projet.view-mode-full{
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_| |_| \___// |\___|\__|
// |__/
div.views-archives-projets{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2em;
gap: $colsgap;
div.views-row{
flex: 1 0 calc(25% - $colsgap);
width: calc(25% - $colsgap);
article.node-type-projet.view-mode-tableau_liste{
@include views-archives();
@include projetListe();
>header{
>h2{
font-size: 3em;
}
article.node-type-projet.view-mode-tableau_liste{
@include projetListe();
>header{
>h2{
font-size: 3em;
}
}
}
}
// __ ___ _ _ _ _____ _
// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_ ___
// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __/ __|
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_\__ \
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
div.views-archives-evenementskorganizer {
@include views-archives();
article.node-type-evenement.view-mode-tableau_liste{
@include evenementListe();
>header{
>h2{
font-size: 3em;
}
}
}
}
web/themes/custom/leshed/leshed.theme
+24
View File
@@ -111,6 +111,26 @@ function leshed_preprocess_field(&$variables) {
$variables["attributes"]['class'] = [];
}
$variables['attributes']['class'][] = $variables['field_name'];
if ($variables['field_name'] === 'field_dates') {
$field_items = $variables['element']['#items'];
foreach ($variables['items'] as $delta => &$item) {
$field_item = $field_items[$delta];
foreach (['start_date', 'end_date'] as $key) {
/** @var \Drupal\Core\Datetime\DrupalDateTime|null $date */
$date = $field_item->{$key};
if ($date instanceof \Drupal\Core\Datetime\DrupalDateTime) {
$item[$key] = [
'year' => $date->format('y'),
'month' => $date->format('m'),
'month_name' => $date->format('F'),
'day' => $date->format('d'),
'iso' => $date->format('Y-m-d\TH:i:s') . 'Z',
];
}
}
}
}
}
function leshed_preprocess_links__language_block(&$variables){
@@ -119,3 +139,7 @@ function leshed_preprocess_links__language_block(&$variables){
$variables['links'][$langcode]['link']['#title'] = $langcode;
}
}
function leshed_preprocess_time(&$variables){
}
web/themes/custom/leshed/templates/field--node--field-dates--evenement.html.twig
+62
View File
@@ -0,0 +1,62 @@
{#
/**
* @file
* Theme override for field_dates on "evenement" nodes.
*
* Splits the daterange value into separate year/month/day parts (see
* leshed_preprocess_field() in leshed.theme) so start/end can be styled
* independently instead of relying on the default <time> rendering.
*
* Available on each item, in addition to the default `content`/`attributes`:
* - item.start_date: { year, month, month_name, day } or unset if empty.
* - item.end_date: { year, month, month_name, day } or unset if empty.
*
* @see template_preprocess_field()
* @see leshed_preprocess_field()
*
* @ingroup themeable
*/
#}
{%
set title_classes = [
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{% macro date_parts(date) %}
<time datetime="{{ date.iso }}">
<span class="date-part date-day">{{ date.day }}</span>
<span class="date-part date-month">{{ date.month }}</span>
<span class="date-part date-year">{{ date.year }}</span>
</time>
{% endmacro %}
{% import _self as dates %}
{% if label_hidden %}
{% for item in items %}
<div{{ attributes.addClass("field-item", "digit-dates") }}>
{% if item.start_date %}
{{ dates.date_parts(item.start_date) }}
{% endif %}
{% if item.end_date and (item.end_date.year != item.start_date.year or item.end_date.day != item.start_date.day) %}
<span class="date-sep">–</span>
{{ dates.date_parts(item.end_date) }}
{% endif %}
</div>
{% endfor %}
{% else %}
<div{{ attributes }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% for item in items %}
<div{{ item.attributes.addClass("field-item", "field-dates") }}>
{% if item.start_date %}
{{ dates.date_parts(item.start_date) }}
{% endif %}
{% if item.end_date and (item.end_date.year != item.start_date.year or item.end_date.day != item.start_date.day) %}
<span class="date-sep">–</span>
{{ dates.date_parts(item.end_date) }}
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
web/themes/custom/leshed/templates/node--evenement--full.html.twig
+83
View File
@@ -0,0 +1,83 @@
{#
/**
* @file
* Default theme implementation to display a node.
*
* Available variables:
* - node: The node entity with limited access to object properties and methods.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - node.getCreatedTime() will return the node creation timestamp.
* - node.hasField('field_example') returns TRUE if the node bundle includes
* field_example. (This does not indicate the presence of a value in this
* field.)
* - node.isPublished() will return whether the node is published or not.
* Calling other methods, such as node.delete(), will result in an exception.
* See \Drupal\node\Entity\Node for a full list of public properties and
* methods for the node object.
* - label: (optional) The title of the node.
* - content: All node items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the printing
* of a given child element.
* - author_picture: The node author user entity, rendered using the "compact"
* view mode.
* - metadata: Metadata for this node.
* - date: (optional) Themed creation date field.
* - author_name: (optional) Themed author name field.
* - url: Direct URL of the current node.
* - display_submitted: Whether submission information should be displayed.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - node: The current template type (also known as a "theming hook").
* - node--type-[type]: The current node type. For example, if the node is an
* "Article" it would result in "node--type-article". Note that the machine
* name will often be in a short form of the human readable label.
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
* teaser would result in: "node--view-mode-teaser", and
* full: "node--view-mode-full".
* The following are controlled through the node publishing options.
* - node--promoted: Appears on nodes promoted to the front page.
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
* teaser listings.
* - node--unpublished: Appears on unpublished nodes visible only to site
* admins.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main
* content tag that appears in the template.
* - author_attributes: Same as attributes, except applied to the author of
* the node tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
* - view_mode: View mode; for example, "teaser" or "full".
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
*
* @see template_preprocess_node()
*
* @ingroup themeable
*/
#}
<article{{ attributes }}>
<div class="cols">
<div class="col left">
<header>
<h2{{ title_attributes.addClass('node-title') }}>
{{ label }}
</h2>
{{ content.field_dates }}
</header>
{{ content|without('field_images')|without('field_dates') }}
<div class="spacer"></div>
</div>
<div class="col right">
{{ content.field_images }}
</div>
</div>
</article>
web/themes/custom/leshed/templates/node--evenement--tableau-liste.html.twig
+90
View File
@@ -0,0 +1,90 @@
{#
/**
* @file
* Default theme implementation to display a node.
*
* Available variables:
* - node: The node entity with limited access to object properties and methods.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - node.getCreatedTime() will return the node creation timestamp.
* - node.hasField('field_example') returns TRUE if the node bundle includes
* field_example. (This does not indicate the presence of a value in this
* field.)
* - node.isPublished() will return whether the node is published or not.
* Calling other methods, such as node.delete(), will result in an exception.
* See \Drupal\node\Entity\Node for a full list of public properties and
* methods for the node object.
* - label: (optional) The title of the node.
* - content: All node items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the printing
* of a given child element.
* - author_picture: The node author user entity, rendered using the "compact"
* view mode.
* - metadata: Metadata for this node.
* - date: (optional) Themed creation date field.
* - author_name: (optional) Themed author name field.
* - url: Direct URL of the current node.
* - display_submitted: Whether submission information should be displayed.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - node: The current template type (also known as a "theming hook").
* - node--type-[type]: The current node type. For example, if the node is an
* "Article" it would result in "node--type-article". Note that the machine
* name will often be in a short form of the human readable label.
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
* teaser would result in: "node--view-mode-teaser", and
* full: "node--view-mode-full".
* The following are controlled through the node publishing options.
* - node--promoted: Appears on nodes promoted to the front page.
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
* teaser listings.
* - node--unpublished: Appears on unpublished nodes visible only to site
* admins.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main
* content tag that appears in the template.
* - author_attributes: Same as attributes, except applied to the author of
* the node tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
* - view_mode: View mode; for example, "teaser" or "full".
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
*
* @see template_preprocess_node()
*
* @ingroup themeable
*/
#}
{#
{% if content.field_images.getvalue|length %}
{% set attributes = attributes.addClass('has-image') %}
{% endif %} #}
<article{{ attributes }}>
{# {{ title_prefix }} #}
{# {% if label and not page %} #}
<header>
{{ content.field_dates }}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{{ content.field_images }}
</header>
{# {% endif %} #}
{# {{ title_suffix }} #}
<div{{ content_attributes }}>
{{ content|without('field_images')|without('field_dates') }}
</div>
</article>
web/themes/custom/leshed/templates/node--evenement--teaser.html.twig
+90
View File
@@ -0,0 +1,90 @@
{#
/**
* @file
* Default theme implementation to display a node.
*
* Available variables:
* - node: The node entity with limited access to object properties and methods.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - node.getCreatedTime() will return the node creation timestamp.
* - node.hasField('field_example') returns TRUE if the node bundle includes
* field_example. (This does not indicate the presence of a value in this
* field.)
* - node.isPublished() will return whether the node is published or not.
* Calling other methods, such as node.delete(), will result in an exception.
* See \Drupal\node\Entity\Node for a full list of public properties and
* methods for the node object.
* - label: (optional) The title of the node.
* - content: All node items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the printing
* of a given child element.
* - author_picture: The node author user entity, rendered using the "compact"
* view mode.
* - metadata: Metadata for this node.
* - date: (optional) Themed creation date field.
* - author_name: (optional) Themed author name field.
* - url: Direct URL of the current node.
* - display_submitted: Whether submission information should be displayed.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - node: The current template type (also known as a "theming hook").
* - node--type-[type]: The current node type. For example, if the node is an
* "Article" it would result in "node--type-article". Note that the machine
* name will often be in a short form of the human readable label.
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
* teaser would result in: "node--view-mode-teaser", and
* full: "node--view-mode-full".
* The following are controlled through the node publishing options.
* - node--promoted: Appears on nodes promoted to the front page.
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
* teaser listings.
* - node--unpublished: Appears on unpublished nodes visible only to site
* admins.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main
* content tag that appears in the template.
* - author_attributes: Same as attributes, except applied to the author of
* the node tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
* - view_mode: View mode; for example, "teaser" or "full".
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
*
* @see template_preprocess_node()
*
* @ingroup themeable
*/
#}
{#
{% if content.field_images.getvalue|length %}
{% set attributes = attributes.addClass('has-image') %}
{% endif %} #}
<article{{ attributes }}>
{# {{ title_prefix }} #}
{# {% if label and not page %} #}
<header>
{{ content.field_dates }}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{{ content.field_images }}
</header>
{# {% endif %} #}
{# {{ title_suffix }} #}
<div{{ content_attributes }}>
{{ content|without('field_images')|without('field_dates') }}
</div>
</article>
web/themes/custom/leshed/templates/node--projet--full.html.twig
+5 -3
View File
@@ -66,9 +66,11 @@
<div class="cols">
<div class="col left">
<h2{{ title_attributes.addClass('node-title') }}>
{{ label }}
</h2>
<header>
<h2{{ title_attributes.addClass('node-title') }}>
{{ label }}
</h2>
</header>
{{ content|without('field_images') }}
<div class="spacer"></div>
</div>
web/themes/custom/leshed/templates/time.html.twig
+22
View File
@@ -0,0 +1,22 @@
{#
/**
* @file
* Default theme implementation for a date / time element.
*
* Available variables
* - timestamp: (optional) A UNIX timestamp for the datetime attribute. If the
* datetime cannot be represented as a UNIX timestamp, use a valid datetime
* attribute value in attributes.datetime.
* - text: (optional) The content to display within the <time> element.
* Defaults to a human-readable representation of the timestamp value or the
* datetime attribute value using DateFormatter::format().
* - attributes: (optional) HTML attributes to apply to the <time> element.
* A datetime attribute in 'attributes' overrides the 'timestamp'. To
* create a valid datetime attribute value from a UNIX timestamp, use
* DateFormatter::format() with one of the predefined 'html_*' formats.
*
* @see template_preprocess_time()
* @see https://www.w3.org/TR/html5-author/the-time-element.html#attr-time-datetime
*/
#}
<time{{ attributes }}>{{ text }}</time>