From d13a77e6d1d3f975ba77298efc296b422a90f3a5 Mon Sep 17 00:00:00 2001
From: Alexander Shpindler <shpindler.ar@gmail.com>
Date: Wed, 1 Nov 2023 10:34:14 +0400
Subject: [PATCH 1/4] feat: TouchSlider for Modals

---
 src/js/components/UiModal.vue       | 68 +++++++++++++---------
 src/js/components/UiTouchSlider.vue | 90 +++++++++++++++++++++++++++++
 2 files changed, 130 insertions(+), 28 deletions(-)
 create mode 100644 src/js/components/UiTouchSlider.vue

diff --git a/src/js/components/UiModal.vue b/src/js/components/UiModal.vue
index 1deedfc..e16662a 100644
--- a/src/js/components/UiModal.vue
+++ b/src/js/components/UiModal.vue
@@ -3,39 +3,41 @@
         <div class="modal-wrap"
             v-if="isOpen || keepMarkup"
             v-on:click="handleModalClick">
-
-            <div class="modal" tabindex="-1" role="dialog"
-                v-show="isOpen || !keepMarkup"
-                v-bind:class="modalClasses"
-                v-on:keydown="handleModalKeydown"
-                v-bind:style="{ width: `${width}px` }"
-                v-on:click.prevent.stop>
-                <header class="modal__header" v-bind:class="{
-                    'modal__header--has-title': $slots.header !== undefined,
-                }">
-                    <section v-if="$slots.header" class="modal__header__title">
-                        <slot name="header"/>
-                    </section>
-                    <button class="modal__close" type="button"
-                        v-if="!hideCloseButton"
-                        v-on:click="handleModalClick">
-                        <span class="modal__close-icon">
-                            <icon-close/> Close
-                        </span>
-                    </button>
-                </header>
-                <div class="modal__wrap">
-                    <div class="modal__container" ref="modalContainer" v-bind:class="modalContainerClass">
-                        <slot/>
+            <Component :is="ModalWrapCmp" class="modal-wrap__container">
+                <div class="modal" tabindex="-1" role="dialog"
+                    v-show="isOpen || !keepMarkup"
+                    v-bind:class="modalClasses"
+                    v-on:keydown="handleModalKeydown"
+                    v-bind:style="{ width: `${width}px` }"
+                    v-on:click.prevent.stop>
+                    <header class="modal__header" v-bind:class="{
+                        'modal__header--has-title': $slots.header !== undefined,
+                    }">
+                        <section v-if="$slots.header" class="modal__header__title">
+                            <slot name="header"/>
+                        </section>
+                        <button class="modal__close" type="button"
+                            v-if="!hideCloseButton"
+                            v-on:click="handleModalClick">
+                            <span class="modal__close-icon">
+                                <icon-close/> Close
+                            </span>
+                        </button>
+                    </header>
+                    <div class="modal__wrap">
+                        <div class="modal__container" ref="modalContainer" v-bind:class="modalContainerClass">
+                            <slot/>
+                        </div>
                     </div>
                 </div>
-            </div>
+            </Component>
         </div>
     </transition>
 </template>
 
 <script>
 import IconClose from '@primer/octicons/build/svg/x-24.svg?inline';
+import UiTouchSlider from './UiTouchSlider.vue';
 
 export default {
     props: {
@@ -81,6 +83,9 @@ export default {
 
             return classnames;
         },
+        ModalWrapCmp() {
+            return this.isMobile ? UiTouchSlider : 'div';
+        },
     },
 
     methods: {
@@ -115,6 +120,7 @@ export default {
 
     components: {
         IconClose,
+        UiTouchSlider,
     },
 };
 </script>
@@ -134,6 +140,9 @@ export default {
     left: 0;
     transform: translate3d(0);
 }
+.modal-wrap__container {
+    margin: auto;
+}
 .modal {
     display: flex;
     flex-direction: column;
@@ -141,7 +150,6 @@ export default {
     color: var(--body-text-color);
     -webkit-tap-highlight-color: transparent;
     outline: none;
-    margin: auto;
     &--align-top {
         margin-top: 72px;
     }
@@ -224,7 +232,6 @@ export default {
     display: flex;
     width: 100%;
     overflow: auto;
-    margin: auto;
     justify-content: center;
     border-radius: 12px;
 }
@@ -315,11 +322,16 @@ export default {
         transition: 0.2s background ease, 0.4s bottom cubic-bezier(.08,.82,.17,1);
         opacity: 1;
     }
+
+    .modal-wrap__container {
+        margin: 0;
+    }
+
     .modal {
         width: 100% !important; // override hard-set width
+        height: 100vh;
         margin-top: auto;
         margin-bottom: 0;
-        max-height: 100%;
         background: var(--body-background);
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;
diff --git a/src/js/components/UiTouchSlider.vue b/src/js/components/UiTouchSlider.vue
new file mode 100644
index 0000000..698537d
--- /dev/null
+++ b/src/js/components/UiTouchSlider.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="ui-touch-slider" :style="{ top: this.top + 'vh' }">
+    <div
+      :class="[
+        'ui-touch-slider__holder',
+        {
+          'ui-touch-slider__holder_hidden': this.top === this.fullScreenBreakpoint,
+        },
+      ]"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+    ></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      lowestBreakpoint: 90,
+      averageBreakpoint: 50,
+      fullScreenBreakpoint: 0,
+      startY: 0,
+      currentY: 0,
+      top: 50,
+      dragDirection: null,
+    };
+  },
+  methods: {
+    onTouchStart(e) {
+      this.startY = e.touches[0].clientY;
+    },
+    onTouchMove(e) {
+      this.currentY = e.touches[0].clientY;
+      const diff = ((this.startY - this.currentY) / window.innerHeight) * 100;
+      this.top = Math.min(Math.max(this.top - diff, this.fullScreenBreakpoint), this.lowestBreakpoint);
+      this.dragDirection = this.currentY - this.startY < 0 ? "top" : "bottom";
+      this.startY = this.currentY;
+    },
+    onTouchEnd() {
+      if (this.dragDirection === "bottom") {
+        if (this.top < this.averageBreakpoint) {
+          this.top = this.averageBreakpoint;
+        } else {
+          this.top = this.lowestBreakpoint;
+        }
+      } else {
+        if (this.top > this.averageBreakpoint) {
+          this.top = this.averageBreakpoint;
+        } else {
+          this.top = this.fullScreenBreakpoint;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.ui-touch-slider {
+  position: fixed;
+  left: 0;
+  right: 0;
+  transition: top 0.3s ease-out;
+}
+
+.ui-touch-slider__holder {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  z-index: 20;
+  transform: translateX(-50%);
+  width: 40px;
+  height: 5px;
+  background-color: #bdbdbd;
+  border-radius: 2.5px;
+  cursor: grab;
+  cursor: grab;
+}
+
+.ui-touch-slider__holder:active {
+  cursor: grabbing;
+}
+
+.ui-touch-slider__holder_hidden {
+  opacity: 0;
+}
+</style>

From cd71d2984df7884694582dc58c901ea2195265b1 Mon Sep 17 00:00:00 2001
From: Alexander Shpindler <shpindler.ar@gmail.com>
Date: Wed, 1 Nov 2023 22:43:40 +0400
Subject: [PATCH 2/4] fix: preventDefault, stopPropagation, lowestBreakpoint to
 80

---
 src/js/components/UiTouchSlider.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/js/components/UiTouchSlider.vue b/src/js/components/UiTouchSlider.vue
index 698537d..b4e04cb 100644
--- a/src/js/components/UiTouchSlider.vue
+++ b/src/js/components/UiTouchSlider.vue
@@ -19,7 +19,7 @@
 export default {
   data() {
     return {
-      lowestBreakpoint: 90,
+      lowestBreakpoint: 80,
       averageBreakpoint: 50,
       fullScreenBreakpoint: 0,
       startY: 0,
@@ -30,16 +30,22 @@ export default {
   },
   methods: {
     onTouchStart(e) {
+      e.preventDefault();
+      e.stopPropagation();
       this.startY = e.touches[0].clientY;
     },
     onTouchMove(e) {
+      e.preventDefault();
+      e.stopPropagation();
       this.currentY = e.touches[0].clientY;
       const diff = ((this.startY - this.currentY) / window.innerHeight) * 100;
       this.top = Math.min(Math.max(this.top - diff, this.fullScreenBreakpoint), this.lowestBreakpoint);
       this.dragDirection = this.currentY - this.startY < 0 ? "top" : "bottom";
       this.startY = this.currentY;
     },
-    onTouchEnd() {
+    onTouchEnd(e) {
+      e.preventDefault();
+      e.stopPropagation();
       if (this.dragDirection === "bottom") {
         if (this.top < this.averageBreakpoint) {
           this.top = this.averageBreakpoint;

From 89e2c84cf3107d2be7caee8b6db0936628d0b00f Mon Sep 17 00:00:00 2001
From: Alexander Shpindler <shpindler.ar@gmail.com>
Date: Sat, 4 Nov 2023 03:48:31 +0400
Subject: [PATCH 3/4] fix: Dynamic import of UiTouchSlider.

---
 src/js/components/UiModal.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/js/components/UiModal.vue b/src/js/components/UiModal.vue
index e16662a..c116322 100644
--- a/src/js/components/UiModal.vue
+++ b/src/js/components/UiModal.vue
@@ -37,7 +37,6 @@
 
 <script>
 import IconClose from '@primer/octicons/build/svg/x-24.svg?inline';
-import UiTouchSlider from './UiTouchSlider.vue';
 
 export default {
     props: {
@@ -84,7 +83,7 @@ export default {
             return classnames;
         },
         ModalWrapCmp() {
-            return this.isMobile ? UiTouchSlider : 'div';
+            return this.isMobile ? 'ui-touch-slider' : 'div';
         },
     },
 
@@ -120,7 +119,7 @@ export default {
 
     components: {
         IconClose,
-        UiTouchSlider,
+        UiTouchSlider: () => import('./UiTouchSlider'),
     },
 };
 </script>

From 26a2c070cf68f68bcce94981162731ad4f7f586e Mon Sep 17 00:00:00 2001
From: Alexander Shpindler <shpindler.ar@gmail.com>
Date: Sun, 26 Nov 2023 17:00:33 +0400
Subject: [PATCH 4/4] fix: mobile screen width increased to 599px, drag area
 increased.

---
 src/js/components/UiModal.vue       |  6 +++---
 src/js/components/UiTouchSlider.vue | 20 ++++++++++++++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/js/components/UiModal.vue b/src/js/components/UiModal.vue
index c116322..5cc4b0b 100644
--- a/src/js/components/UiModal.vue
+++ b/src/js/components/UiModal.vue
@@ -215,7 +215,7 @@ export default {
     backdrop-filter: none;
 }
 
-@media all and (max-width: 480px) {
+@media all and (max-width: 599px) {
     .v-transition-modal-enter-to, .v-transition-modal-leave {
         opacity: 1;
         bottom: 0;
@@ -265,7 +265,7 @@ export default {
     margin-bottom: 10px;
 }
 .modal__text {
-    max-width: 480px;
+    max-width: 599px;
     margin: 0 auto 20px;
     &:last-child {
         margin-bottom: 0;
@@ -310,7 +310,7 @@ export default {
         }
     }
 }
-@media all and (max-width: 480px) {
+@media all and (max-width: 599px) {
     .modal-wrap {
         display: flex;
         align-content: flex-end;
diff --git a/src/js/components/UiTouchSlider.vue b/src/js/components/UiTouchSlider.vue
index b4e04cb..bf74c39 100644
--- a/src/js/components/UiTouchSlider.vue
+++ b/src/js/components/UiTouchSlider.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="ui-touch-slider" :style="{ top: this.top + 'vh' }">
+  <div
+    class="ui-touch-slider"
+    :style="{ top: this.top + 'vh' }"
+  >
     <div
       :class="[
         'ui-touch-slider__holder',
@@ -30,7 +33,6 @@ export default {
   },
   methods: {
     onTouchStart(e) {
-      e.preventDefault();
       e.stopPropagation();
       this.startY = e.touches[0].clientY;
     },
@@ -74,16 +76,26 @@ export default {
 
 .ui-touch-slider__holder {
   position: absolute;
-  top: 8px;
+  top: 0;
   left: 50%;
+  transform: translateX(-50%);
+  right: 0;
   z-index: 20;
+  width: 100px;
+  height: 50px;
+}
+
+.ui-touch-slider__holder::after {
+  content: "";
+  position: absolute;
+  top: 8px;
+  left: 50%;
   transform: translateX(-50%);
   width: 40px;
   height: 5px;
   background-color: #bdbdbd;
   border-radius: 2.5px;
   cursor: grab;
-  cursor: grab;
 }
 
 .ui-touch-slider__holder:active {