diff --git a/assets/js/theme/blocks/draggableBlocks.js b/assets/js/theme/blocks/draggableBlocks.js
index 661ad5ce4b483e5b15a4182d60e8ee816b28f6d5..8b1c9de8f678432253fd107206ab4e7a1a9420af 100644
--- a/assets/js/theme/blocks/draggableBlocks.js
+++ b/assets/js/theme/blocks/draggableBlocks.js
@@ -3,11 +3,12 @@ const draggableBlocks = document.querySelectorAll('.block-timeline--horizontal,
class DraggableBlock {
constructor (block) {
this.block = block;
- this.content = this.block.querySelector('.grab-container');
+ this.content = this.block.querySelector('.draggable-container');
this.list = this.block.querySelector('ol, ul');
- this.items = this.list.querySelectorAll('.grab-item');
+ this.items = this.list.querySelectorAll('.draggable-item');
this.previous = this.block.querySelector('.previous');
this.next = this.block.querySelector('.next');
+ this.clicOnBtn = false;
this.index = 0;
@@ -54,9 +55,11 @@ class DraggableBlock {
handleArrows () {
this.previous.addEventListener('click', () => {
+ this.clicOnBtn = true;
this.goTo(this.index-1);
});
this.next.addEventListener('click', () => {
+ this.clicOnBtn = true;
this.goTo(this.index+1);
});
}
@@ -71,23 +74,26 @@ class DraggableBlock {
this.content.style.touchAction = 'pan-y';
this.block.addEventListener('pointerdown', (event) => {
- this.content.classList.add('is-grabbing');
-
+ if (!this.clicOnBtn) {
+ this.content.classList.add('is-grabbing');
+ isPointerDown = true;
+ }
startX = event.clientX;
- isPointerDown = true;
});
this.block.addEventListener('pointermove', (event) => {
- this.isManipulated = isPointerDown;
- endX = event.clientX;
-
- if (this.isManipulated) {
- this.items.forEach((item) => {
- item.style.pointerEvents = "none";
- });
+ if (!this.clicOnBtn) {
+ this.isManipulated = isPointerDown;
+ endX = event.clientX;
+
+ if (this.isManipulated) {
+ this.items.forEach((item) => {
+ item.style.pointerEvents = "none";
+ });
+ }
}
});
-
+
endEvents.forEach(event => {
this.block.addEventListener(event, (event) => {
isPointerDown = false;
@@ -95,7 +101,7 @@ class DraggableBlock {
});
});
}
-
+
handleScroll() {
this.content.addEventListener('wheel', (event) => {
const deltaX = event.deltaX;
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 31e3213d9a055de44967646be0825a70d5f5fed1..591f96143c3c6b8e52a341f9732e3798eab45bb8 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -10,14 +10,14 @@
@import utils/shame
-@mixin block-with-grab
+@mixin draggable-block
overflow: hidden
- .grab-container
+ .draggable-container
&:hover
cursor: grab
&.is-grabbing
cursor: grabbing
- .grab-content
+ .draggable-content
margin-left: calc(var(--grid-gutter-negative) / 2)
margin-right: calc(var(--grid-gutter-negative) / 2)
> ul,
@@ -28,10 +28,27 @@
padding-left: 0
transition: margin 0.4s ease-in-out
width: 100%
- .grab-item
+ .draggable-item
flex: none
scroll-snap-align: start
transition: 0.3s opacity
&.is-passed
opacity: 0.15
- pointer-events: none
\ No newline at end of file
+ pointer-events: none
+ .actions-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
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/posts.sass b/assets/sass/_theme/blocks/posts.sass
index 3fe58c32a1e2ec47a2a263dcbd773045fe8aac45..9b27127375172a3109f12a547ba575a6ecde6886 100644
--- a/assets/sass/_theme/blocks/posts.sass
+++ b/assets/sass/_theme/blocks/posts.sass
@@ -286,7 +286,7 @@
.post
width: columns(4)
&--scrollable
- @include block-with-grab
+ @include draggable-block
.container
padding-right: 0
.scrollable
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index 692f016ad7cc61e4f1b17fc4f630eeae54c52906..8354f5b3fa9b8ef2131ca36f3c524826791584c4 100644
--- a/assets/sass/_theme/blocks/timeline.sass
+++ b/assets/sass/_theme/blocks/timeline.sass
@@ -61,7 +61,7 @@
margin-left: columns(3)
&--horizontal
- @include block-with-grab
+ @include draggable-block
--min-title-height: 0px
background: $block-timeline-horizontal-background
color: $block-timeline-horizontal-color
@@ -69,23 +69,6 @@
padding-top: var(--grid-gutter)
&::before
display: none
- .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-event
padding: 0 calc(var(--grid-gutter) / 2)
width: columns(4)
diff --git a/layouts/partials/blocks/templates/posts/scrollable.html b/layouts/partials/blocks/templates/posts/scrollable.html
index 4ef4edfffed13649473df738045ab5186ee5e3c2..c36e1226db1dc2c046c0255a49465efc4f74548c 100644
--- a/layouts/partials/blocks/templates/posts/scrollable.html
+++ b/layouts/partials/blocks/templates/posts/scrollable.html
@@ -1,12 +1,12 @@
{{ $heading_level := .heading_level | default 3 }}
{{ $heading := printf "h%d" $heading_level }}
-<div class="scrollable grab-container">
- <div class="scrollable-posts grab-content">
+<div class="scrollable draggable-container">
+ <div class="scrollable-posts draggable-content">
<ul class="posts">
{{ range $post := .posts -}}
{{ with site.GetPage (printf "/posts/%s" $post) }}
- <li class="grab-item">
+ <li class="draggable-item">
{{ partial "posts/post.html" (dict
"post" .
"heading" $heading) }}
@@ -14,5 +14,11 @@
{{ 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>
diff --git a/layouts/partials/blocks/templates/timeline/horizontal.html b/layouts/partials/blocks/templates/timeline/horizontal.html
index 19eabb80280f24fed3b10dd43ed2e62954498c39..f01f6a60a07b1f03aa4858cce20e5d0dd9165299 100644
--- a/layouts/partials/blocks/templates/timeline/horizontal.html
+++ b/layouts/partials/blocks/templates/timeline/horizontal.html
@@ -4,12 +4,12 @@
"attributes" "class='title'"
) -}}
-<div class="timeline grab-container">
+<div class="timeline draggable-container">
{{ with .block.data }}
- <div class="timeline-events grab-content">
+ <div class="timeline-events draggable-content">
<ol>
{{ range .events }}
- <li class="timeline-event grab-item">
+ <li class="timeline-event draggable-item">
{{ $heading_tag.open -}}
{{ .title | safeHTML }}
{{ $heading_tag.close -}}
@@ -19,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>