fixed double clic on buttons

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;

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

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

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)

layouts/partials/blocks/templates/posts/scrollable.html

 {{ $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>

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>