Skip to content
Snippets Groups Projects
Unverified Commit 760a78ea authored by Alexis BENOIT's avatar Alexis BENOIT Committed by GitHub
Browse files

Merge pull request #304 from osunyorg/6.0-block-posts-scrollable 

6.0 block posts scrollable
parents f7d13429 480ebda4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 301 additions and 50 deletions
assets/js/theme/blocks/timeline.js → assets/js/theme/blocks/draggableBlocks.js
+ 170
− 0
View file @ 760a78ea
const timelines = document.querySelectorAll('.block-timeline--horizontal');
const draggableBlocks = document.querySelectorAll('.block-timeline--horizontal, .block-posts--carousel');
class BlockTimeline {
class DraggableBlock {
constructor (block) {
this.block = block;
this.content = this.block.querySelector('.timeline');
this.list = this.block.querySelector('.timeline-events ol');
this.items = this.list.querySelectorAll('.timeline-event');
this.content = this.block.querySelector('.draggable-container');
this.list = this.block.querySelector('ol, ul');
this.items = this.list.querySelectorAll('.draggable-item');
this.previous = this.block.querySelector('.previous');
this.next = this.block.querySelector('.next');
this.isManipulated = false;
this.isPointerDown = false;
this.index = 0;
......@@ -29,6 +29,7 @@ class BlockTimeline {
}
this.handlePointers();
this.handleScroll();
}
resize () {
......@@ -39,7 +40,7 @@ class BlockTimeline {
this.itemWidth = this.items[0].offsetWidth;
this.items.forEach((item) => {
maxTitleHeight = Math.max(item.querySelector('.title').offsetHeight, maxTitleHeight);
maxTitleHeight = Math.max(item.querySelector('.title, [itemprop="headline"]').offsetHeight, maxTitleHeight);
});
this.block.style.setProperty('--min-title-height', maxTitleHeight + 'px');
......@@ -56,36 +57,70 @@ class BlockTimeline {
this.previous.addEventListener('click', () => {
this.goTo(this.index-1);
});
this.next.addEventListener('click', () => {
this.goTo(this.index+1);
});
}
handlePointers () {
let endEvents = ['pointerup'],
startX,
let startX,
endX,
threshold = 30,
isPointerDown = false;
threshold = 30;
// j'ai initialisé isPointerDown au début du code : this.isPointerDown
// j'ai enlevé endEvents = ['pointerup'] parce qu'il était seul ?
this.block.style.touchAction = 'pan-y';
// on passe de this.content à this.block sur chaque événement pour grab sur tout le bloc
this.block.addEventListener('pointerdown', (event) => {
this.content.classList.add('is-grabbing');
startX = event.clientX;
isPointerDown = true;
// On vérifie que l'on ne soit pas en train de cliquer sur les boutons (car on cible tout le bloc pour le grab)
if (event.target !== this.next && event.target !== this.previous) {
// on utilise partout this.isPointerDown car la navigation avec les arrow buguait
// parfois ça naviguait de 2 items
this.isPointerDown = true;
this.content.classList.add('is-grabbing');
startX = event.clientX;
}
});
this.block.addEventListener('pointermove', (event) => {
this.isManipulated = isPointerDown;
endX = event.clientX;
// On vérifie que l'événement pointerdown a été activé
if (this.isPointerDown) {
event.preventDefault();
this.items.forEach((item) => {
// on enlève le pointerevents pour que les liens ne soient pas cliquable au drag
item.style.pointerEvents = "none";
});
}
});
endEvents.forEach(event => {
this.block.addEventListener(event, (event) => {
isPointerDown = false;
// anciennement géré avec endEvents = ['pointerup'] (j'enlève le forEach)
this.block.addEventListener('pointerup', (event) => {
endX = event.clientX;
// on vérifie encore isPointerDown pour éviter le pb des arrows
if (this.isPointerDown) {
this.isPointerDown = false;
this.onManipulationEnd(startX, endX, threshold);
});
}
});
}
handleScroll() {
// On écoute le scroll sur le contenu du bloc
this.content.addEventListener('wheel', (event) => {
const deltaX = event.deltaX;
const deltaY = event.deltaY;
// navigation entre les items (comme onManipulationEnd)
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX !== 0) {
if (deltaX > 0) {
this.goTo(this.index + 1);
} else {
this.goTo(this.index - 1);
}
}
}
});
}
......@@ -95,10 +130,13 @@ class BlockTimeline {
} else if (start < end - threshold) {
this.goTo(this.index-1);
}
this.content.classList.remove('is-grabbing');
this.items.forEach((item) => {
// On rend le pointervents pour pouvoir cliquer sur le lien si on drag pas
item.style.pointerEvents = "all";
});
// Add delay to avoid conflict with item clicked
setTimeout(() => {
this.isManipulated = false;
}, 100);
......@@ -127,6 +165,6 @@ class BlockTimeline {
}
}
timelines.forEach((timeline) => {
new BlockTimeline(timeline);
draggableBlocks.forEach((block) => {
new DraggableBlock(block);
});
assets/js/theme/index.js
+ 1
− 1
View file @ 760a78ea
......@@ -8,5 +8,5 @@ import './design-system/search';
import './design-system/toc';
import './blocks/keyFigures';
import './blocks/organizations';
import './blocks/timeline';
import './blocks/draggableBlocks.js';
import './blocks/videos.js';
assets/sass/_theme/_configuration.sass
+ 1
− 1
View file @ 760a78ea
......@@ -491,5 +491,5 @@ $arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default
$icon-burger-margin-right: -12px
$icon-close-margin-right: -12px
$icon-toc-margin-right: -14px
$icon-arrow-previous-margin-left: -22px // cf. testimonial
$icon-arrow-previous-margin-left: -18px // cf. testimonial
$icon-social-margin-right: -14px
assets/sass/_theme/_utils.sass
+ 2
− 1
View file @ 760a78ea
......@@ -7,5 +7,6 @@
@import utils/normalize
@import utils/sidebar
@import utils/sizes
@import utils/blocks
@import utils/shame
@import utils/shame
\ No newline at end of file
assets/sass/_theme/blocks/posts.sass
+ 52
− 0
View file @ 760a78ea
......@@ -289,6 +289,58 @@
margin-right: auto
.post
width: columns(4)
&--carousel
@include draggable-block
.container
padding-right: 0
.carousel
padding-bottom: $spacing-3
&:hover
cursor: grab
&.is-grabbing
cursor: grabbing
li
list-style: none
.posts
display: flex
gap: unset
.post
margin: 0 calc(var(--grid-gutter) / 2)
.actions-arrows
justify-content: space-between
@include media-breakpoint-down(desktop)
.carousel
gap: half(var(--grid-gutter))
.post
width: columns(10)
.grab-item:last-of-type
margin-right: half(var(--grid-gutter))
.actions-arrows
margin-right: var(--grid-gutter)
@include media-breakpoint-up(desktop)
.next
margin-right: pxToRem(-27) // Marge négative pour aligner correctement le picto à la colonne
@include in-page-with-sidebar
.post
width: columns(3)
[itemprop="headline"]
@include h4
.carousel
.actions-arrows
width: offset(6)
@include in-page-without-sidebar
.block-content
display: flex
gap: var(--grid-gutter)
.top
width: columns(3)
.carousel
width: columns(9)
.post
width: columns(4)
.carousel
.actions-arrows
width: offset(8)
// Move this part to blocks/categories when categories block is ready
.block-posts
......
assets/sass/_theme/blocks/timeline.sass
+ 4
− 42
View file @ 760a78ea
......@@ -61,54 +61,17 @@
margin-left: columns(3)
&--horizontal
@include draggable-block
--min-title-height: 0px
background: $block-timeline-horizontal-background
color: $block-timeline-horizontal-color
overflow: hidden
padding-bottom: var(--block-space-y)
padding-top: var(--block-space-y)
&::before
display: none
.timeline
&:hover
cursor: grab
&.is-grabbing
cursor: grabbing
.timeline-arrows
display: flex
padding-left: calc(var(--grid-gutter) / 2)
> button
@include button-reset
background: none
border: none
color: $block-timeline-horizontal-color
cursor: pointer
&:first-child
@include icon-block(arrow-previous, before)
margin-left: $icon-arrow-previous-margin-left
&:last-child
@include icon-block(arrow-next, before)
&:disabled
cursor: default
opacity: 0.3
.timeline-events
margin-left: calc(var(--grid-gutter-negative) / 2)
margin-right: calc(var(--grid-gutter-negative) / 2)
ol
display: flex
flex-flow: row nowrap
list-style: none
padding-left: 0
margin-top: $spacing-2
transition: margin 0.4s ease-in-out
width: 100%
.timeline-event
flex: none
padding: 0 calc(var(--grid-gutter) / 2)
scroll-snap-align: start
transition: 0.3s opacity
width: 50%
width: columns(4)
.title
display: block
min-height: var(--min-title-height)
......@@ -133,8 +96,6 @@
position: relative
top: -4px
width: 9px
&.is-passed
opacity: 0.15
&:last-child
.line
background: transparent
......@@ -147,11 +108,12 @@
@include media-breakpoint-down(desktop)
.timeline-events
position: relative
.timeline-arrows
.actions-arrows
left: 0
position: absolute
top: calc(#{$spacing-2} + var(--min-title-height))
.timeline-event
margin-right: 0
padding-right: 0
width: 75%
.line
......
assets/sass/_theme/utils/blocks.sass 0 → 100644
+ 43
− 0
View file @ 760a78ea
@mixin draggable-block
overflow: hidden
.draggable-container
&:hover
cursor: grab
&.is-grabbing
cursor: grabbing
.draggable-content
margin-left: calc(var(--grid-gutter-negative) / 2)
margin-right: calc(var(--grid-gutter-negative) / 2)
> ul,
> ol
display: flex
flex-flow: row nowrap
list-style: none
padding-left: 0
transition: margin 0.4s ease-in-out
width: 100%
.draggable-item
flex: none
scroll-snap-align: start
transition: 0.3s opacity
&.is-passed
opacity: 0.15
pointer-events: none
.actions-arrows
display: flex
margin-left: calc(var(--grid-gutter) / 2)
> button
@include button-reset
background: none
border: none
color: $block-timeline-horizontal-color
cursor: pointer
padding: 0
&:first-child
@include icon-block(arrow-previous, before)
margin-left: $icon-arrow-previous-margin-left
&:last-child
@include icon-block(arrow-next, before)
&:disabled
cursor: default
opacity: 0.3
\ No newline at end of file
layouts/partials/blocks/templates/posts/carousel.html 0 → 100644
+ 24
− 0
View file @ 760a78ea
{{ $heading_level := .heading_level | default 3 }}
{{ $heading := printf "h%d" $heading_level }}
<div class="carousel draggable-container">
<div class="carousel-posts draggable-content">
<ul class="posts">
{{ range $post := .posts -}}
{{ with site.GetPage (printf "/posts/%s" $post) }}
<li class="draggable-item">
{{ partial "posts/post.html" (dict
"post" .
"heading" $heading) }}
</li>
{{ end }}
{{ end }}
</ul>
{{ if (gt (len .posts) 0) }}
<div class="actions-arrows">
<button class="previous" disabled title="{{ i18n "blocks.timeline.previous"}}"></button>
<button class="next" title="{{ i18n "blocks.timeline.next"}}"></button>
</div>
{{ end }}
</div>
</div>
layouts/partials/blocks/templates/timeline/horizontal.html
+ 4
− 5
View file @ 760a78ea
......@@ -4,13 +4,12 @@
"attributes" "class='title'"
) -}}
<div class="timeline">
<div class="timeline draggable-container">
{{ with .block.data }}
<div class="timeline-events">
<div class="timeline-events draggable-content">
<ol>
{{ range .events }}
<li class="timeline-event">
<li class="timeline-event draggable-item">
{{ $heading_tag.open -}}
{{ .title | safeHTML }}
{{ $heading_tag.close -}}
......@@ -20,7 +19,7 @@
{{ end }}
</ol>
{{ if (gt (len .events) 0) }}
<div class="timeline-arrows">
<div class="actions-arrows">
<button class="previous" disabled title="{{ i18n "blocks.timeline.previous"}}"></button>
<button class="next" title="{{ i18n "blocks.timeline.next"}}"></button>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment