@mixd-id/web-scaffold 0.1.230406206 → 0.1.230406208

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406206",
+  "version": "0.1.230406208",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Carousel.vue

@@ -102,14 +102,20 @@ export default{
       index: 0,
 			timeoutId: null,
       scrollPosition: null,
+      swiping: false,
     }
   },
 
   mounted(){
+    window.addEventListener('touchmove', this.onTouchMove, { passive: false });
 		if(this.autoPlay > 0)
 			this.play()
   },
 
+  unmounted() {
+    window.removeEventListener('touchmove', this.onTouchMove, { passive: false });
+  },
+
   watch:{
 
 		index(to){
@@ -125,6 +131,14 @@ export default{
 
   methods:{
 
+    onTouchMove(e){
+      if(this.swiping && e.cancelable) {
+        e.preventDefault();
+        e.returnValue = false;
+        return false;
+      }
+    },
+
 		setPosition(noAnimation) {
 			if(!this.$refs.inner) return
 
@@ -202,7 +216,6 @@ export default{
       const sy = typeof e.touches !== 'undefined' ? e.touches[0].clientY : e.clientY
       const dx = sx - this._props['sx']
       const dy = sy - this._props['sy']
-      const ix = parseInt(this._props['ix'] + dx)
 
       if(!this._props['direction']){
         if(Math.abs(dy) > 3){
@@ -210,10 +223,19 @@ export default{
         }
         else if(Math.abs(dx) > 3){
           this._props['direction'] = 'horizontal'
-          this.disableBodyScroll()
+          this.swiping = true
         }
       }
       else if(this._props['direction'] === 'horizontal'){
+        let ix
+        if((this.index === this.items.length - 1 && dx < 0) ||
+            (this.index === 0 && dx > 0)){
+          ix = parseInt(this._props['ix'] + (dx * .23812))
+        }
+        else{
+          ix = parseInt(this._props['ix'] + dx)
+        }
+
         this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
       }
 
@@ -237,7 +259,7 @@ export default{
           this.setPosition()
         }
 
-        this.enableBodyScroll()
+        this.swiping = false
       }
 
       window.removeEventListener('mousemove', this.mouseMove)
@@ -250,24 +272,6 @@ export default{
 				this.play()
     },
 
-    disableBodyScroll(){
-      if(this.$isTouchSupported()){
-        this.scrollPosition = window.pageYOffset || document.documentElement.offsetTop
-        document.body.classList.add(this.$style.htmlNoScroll)
-        document.body.classList.add(this.$style.bodyNoScroll)
-        document.body.style.top = `-${this.scrollPosition}px`;
-      }
-    },
-
-    enableBodyScroll(){
-      if(this.$isTouchSupported()){
-        document.body.style.removeProperty('top');
-        document.body.classList.remove(this.$style.bodyNoScroll)
-        document.body.classList.remove(this.$style.htmlNoScroll)
-        window.scrollTo(0, this.scrollPosition);
-      }
-    },
-
     mouseDown(e){
 			if(!this.items || this.items.length <= 1)
 				return
@@ -364,22 +368,5 @@ export default{
 	@apply bg-primary-500;
 }
 
-.htmlNoScroll{
-  min-height: 100.3%;
-  overscroll-behavior-y: none;
-  height: 100%;
-  overflow: hidden;
-}
-.bodyNoScroll{
-  overscroll-behavior: none;
-  overscroll-behavior-y: none;
-  overflow: hidden;
-  position: fixed;
-  width: 100%;
-  margin: 0;
-  max-height: 100%;
-  -webkit-overflow-scrolling: touch;
-}
-
 
 </style>