@mixd-id/web-scaffold 0.1.230406188 → 0.1.230406191

package/package.json

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

package/src/components/Carousel.vue

@@ -97,7 +97,8 @@ export default{
   data(){
     return {
       index: 0,
-			timeoutId: null
+			timeoutId: null,
+      scrollPosition: null,
     }
   },
 
@@ -115,7 +116,7 @@ export default{
 
 		items(){
 			this.index = 0
-		}
+		},
 
   },
 
@@ -195,27 +196,45 @@ export default{
 
     mouseMove(e){
       const sx = typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX
+      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)
 
-      this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
+      if(!this._props['direction']){
+        if(Math.abs(dy) > 10){
+          this._props['direction'] = 'vertical'
+        }
+        else if(Math.abs(dx) > 15){
+          this._props['direction'] = 'horizontal'
+          this.disableBodyScroll()
+        }
+      }
+      else if(this._props['direction'] === 'horizontal'){
+        this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
+      }
+
     },
 
     mouseUp(e){
-      const tn = e.timeStamp - this._props['t0']
-      const sx = typeof e.changedTouches !== 'undefined' ? e.changedTouches[0].clientX : e.clientX
-      const dx = sx - this._props['sx']
-
-      if (Math.abs(dx) > 10) {
-        if (tn < 1200){
-          dx < 0 ? this.next(true) : this.prev(true)
+      if(this._props['direction'] === 'horizontal'){
+        const tn = e.timeStamp - this._props['t0']
+        const sx = typeof e.changedTouches !== 'undefined' ? e.changedTouches[0].clientX : e.clientX
+        const dx = sx - this._props['sx']
+
+        if (Math.abs(dx) > 10) {
+          if (tn < 1200){
+            dx < 0 ? this.next(true) : this.prev(true)
+          }
+          else{
+            this.setPosition()
+          }
         }
         else{
           this.setPosition()
         }
-      }
-      else{
-        this.setPosition()
+
+        this.enableBodyScroll()
       }
 
       window.removeEventListener('mousemove', this.mouseMove)
@@ -228,6 +247,22 @@ export default{
 				this.play()
     },
 
+    disableBodyScroll(){
+      this.scrollPosition = window.pageYOffset || document.documentElement.offsetTop
+      document.body.style.overflow = 'hidden';
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${this.scrollPosition}px`;
+      document.body.style.width = '100%';
+    },
+
+    enableBodyScroll(){
+      document.body.style.removeProperty('overflow');
+      document.body.style.removeProperty('position');
+      document.body.style.removeProperty('top');
+      document.body.style.removeProperty('width');
+      window.scrollTo(0, this.scrollPosition);
+    },
+
     mouseDown(e){
 			if(!this.items || this.items.length <= 1)
 				return
@@ -239,8 +274,10 @@ export default{
 
       this._props = {
         sx:typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX,
+        sy:typeof e.touches !== 'undefined' ? e.touches[0].clientY : e.clientY,
         ix:ix,
-        t0:e.timeStamp
+        t0:e.timeStamp,
+        direction: null
       }
 
       window.addEventListener('mousemove', this.mouseMove)
@@ -281,10 +318,11 @@ export default{
 	overflow: hidden;
 	position: relative;
 	background-image: v-bind(bgImages[0]);
+  /*touch-action: none;*/
 }
 
 .comp.noTouchAction{
-  touch-action: none;
+  /*touch-action: none;*/
 }
 
 .comp img{
@@ -302,14 +340,12 @@ export default{
 .inner{
 	white-space: nowrap;
 	will-change: transform;
-	//touch-action: none;
 	@apply flex flex-row items-stretch;
 }
 .inner>*{
 	display: inline-block;
 	width: 100%;
 	min-width: 100%;
-	//touch-action: none;
 	vertical-align: top;
 }
 
@@ -329,6 +365,9 @@ export default{
 	@apply bg-primary-500;
 }
 
+.bodyNoScroll{
+}
+
 @media screen(md){
 	.comp{
 		background-image: v-bind(bgImages[1]);