enso-carousel - npm Package Compare versions

Comparing version 2.0.6 to 2.0.7

js/EnsoCarousel.js

@@ -5,8 +5,8 @@ export default {
       type: Number,
-      default: 100
+      default: 100,
     },
     slides: {
       type: Array,
-      required: []
-    }
+      required: [],
+    },
   },
@@ -16,3 +16,3 @@
     return {
-      currentIndex: 0
+      currentIndex: 0,
     };
@@ -23,10 +23,11 @@ },
     totalSlideWidth() {
-      return (this.slides.length + 2) * 100 + "vw";
-    }
+      return (this.slides.length + 2) * 100 + 'vw';
+    },
   },
 
   mounted() {
-    this.containerEl = this.$el.querySelector(".enso-carousel__slides");
-    this.slidesEls = this.$el.querySelectorAll(".enso-carousel__slide");
+    this.containerEl = this.$el.querySelector('.enso-carousel__slides');
+    this.slidesEls = this.$el.querySelectorAll('.enso-carousel__slide');
     this.linkDragging = false;
+    this.dragging = false;
     this.allowShift = true;
@@ -44,15 +45,12 @@ this.posX1 = 0;
     this.containerEl.onmousedown = this.dragStart;
-    this.containerEl.addEventListener("touchstart", this.dragStart);
-    this.containerEl.addEventListener("touchend", this.dragEnd);
-    this.containerEl.addEventListener("touchmove", this.dragMove);
-    this.containerEl.addEventListener("transitionend", this.onTransitionEnd);
-    this.containerEl.addEventListener(
-      "webkitTransitionEnd",
-      this.onTransitionEnd
-    );
-    this.containerEl.addEventListener("click", this.onClick);
+    this.containerEl.addEventListener('touchstart', this.dragStart);
+    this.containerEl.addEventListener('touchend', this.dragEnd);
+    this.containerEl.addEventListener('touchmove', this.dragMove);
+    this.containerEl.addEventListener('transitionend', this.onTransitionEnd);
+    this.containerEl.addEventListener('webkitTransitionEnd', this.onTransitionEnd);
+    this.containerEl.addEventListener('click', this.onClick);
     this.containerEl.style.width = this.totalSlideWidth;
 
     this.slideWidth = this.slidesEls[0].offsetWidth;
-    this.links = this.containerEl.getElementsByTagName("a");
+    this.links = this.containerEl.getElementsByTagName('a');
 
@@ -62,4 +60,4 @@ // Add a click handler to all links. Instead we will handle click events
     // This way we can have slides with links be draggable.
-    Array.from(this.links).forEach(link => {
-      link.addEventListener("click", e => {
+    Array.from(this.links).forEach((link) => {
+      link.addEventListener('click', (e) => {
         e.preventDefault();
@@ -69,13 +67,11 @@ });
 
-    Array.from(document.querySelectorAll(".enso-carousel__slide *")).forEach(
-      el => {
-        el.addEventListener("click", e => {
-          e.preventDefault();
-        });
-      }
-    );
+    Array.from(document.querySelectorAll('.enso-carousel__slide *')).forEach((el) => {
+      el.addEventListener('click', (e) => {
+        e.preventDefault();
+      });
+    });
 
-    window.addEventListener("resize", this.onResize);
+    window.addEventListener('resize', this.onResize);
 
-    this.$emit("ready", this.slides[0]);
+    this.$emit('ready', this.slides[0]);
   },
@@ -99,3 +95,3 @@
       if (!this.linkDragging) {
-        if (e.target.tagName === "A") {
+        if (e.target.tagName === 'A') {
           window.location = e.target.href;
@@ -106,3 +102,3 @@ return;
         // This is also handles, e.g. clicking an image within a link.
-        let closest_link = e.target.closest("a");
+        let closest_link = e.target.closest('a');
 
@@ -129,2 +125,11 @@ if (closest_link) {
     dragStart(e) {
+      if (this.dragging) {
+        return;
+      }
+
+      // This is to prevent multiple dragstart events being called before
+      // a drag has completed. If that happens then the posInitial gets out of
+      // whack and we end up half on one slide and half on another
+      this.dragging = true;
+
       // By deafult links and images can be dragged around into a
@@ -148,5 +153,6 @@ // file browser or into the address bar. Instead of this we
       e.preventDefault;
+
       this.posInitial = this.containerEl.offsetLeft;
 
-      if (e.type === "touchstart") {
+      if (e.type === 'touchstart') {
         this.posX1 = e.touches[0].clientX;
@@ -159,3 +165,3 @@ } else {
 
-      this.$emit("drag-start");
+      this.$emit('drag-start');
     },
@@ -166,3 +172,3 @@
 
-      if (e.type === "touchmove") {
+      if (e.type === 'touchmove') {
         this.posX2 = this.posX1 - e.touches[0].clientX;
@@ -175,6 +181,5 @@ this.posX1 = e.touches[0].clientX;
 
-      this.containerEl.style.left = `${this.containerEl.offsetLeft -
-        this.posX2}px`;
+      this.containerEl.style.left = `${this.containerEl.offsetLeft - this.posX2}px`;
 
-      this.$emit("drag-move");
+      this.$emit('drag-move');
     },
@@ -187,6 +192,6 @@
         // We dragged to the left
-        this.slideTo(1, "drag");
+        this.slideTo(1, 'drag');
       } else if (this.posFinal - this.posInitial > this.threshold) {
         // We dragged to the right
-        this.slideTo(-1, "drag");
+        this.slideTo(-1, 'drag');
       } else {
@@ -203,7 +208,7 @@ // We didn't actually drag. Treat this as a click
 
-      this.$emit("drag-end");
+      this.$emit('drag-end');
     },
 
     slideTo(direction, action) {
-      this.containerEl.classList.add("enso-carousel__slides--sliding");
+      this.containerEl.classList.add('enso-carousel__slides--sliding');
 
@@ -218,8 +223,6 @@ if (this.allowShift) {
         if (direction > 0) {
-          this.containerEl.style.left =
-            this.posInitial - this.slideWidth * direction + "px";
+          this.containerEl.style.left = this.posInitial - this.slideWidth * direction + 'px';
           this.currentIndex = this.currentIndex + direction;
         } else if (direction < 0) {
-          this.containerEl.style.left =
-            this.posInitial - this.slideWidth * direction + "px";
+          this.containerEl.style.left = this.posInitial - this.slideWidth * direction + 'px';
           this.currentIndex = this.currentIndex + direction;
@@ -236,8 +239,7 @@ }
     onTransitionEnd() {
-      this.containerEl.classList.remove("enso-carousel__slides--sliding");
+      this.dragging = false;
+      this.containerEl.classList.remove('enso-carousel__slides--sliding');
 
       if (this.currentIndex === -1) {
-        this.containerEl.style.left = `${-(
-          this.slides.length * this.slideWidth
-        )}px`;
+        this.containerEl.style.left = `${-(this.slides.length * this.slideWidth)}px`;
         this.currentIndex = this.slides.length - 1;
@@ -251,3 +253,3 @@ }
 
-      this.$emit("change", this.slides[this.currentIndex]);
+      this.$emit('change', this.slides[this.currentIndex]);
 
@@ -262,6 +264,3 @@ this.allowShift = true;
         return true;
-      } else if (
-        index === this.slides.length - 1 &&
-        this.currentIndex === this.slides.length
-      ) {
+      } else if (index === this.slides.length - 1 && this.currentIndex === this.slides.length) {
         return true;
@@ -271,3 +270,3 @@ } else {
       }
-    }
+    },
   },
@@ -281,5 +280,5 @@
       isCurrentIndex: this.isCurrentIndex,
-      slides: this.slides
+      slides: this.slides,
     });
-  }
+  },
 };

package.json

 {
   "name": "enso-carousel",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "A renderless Vue component carousel.",
@@ -5,0 +5,0 @@ "main": "js/EnsoCarousel.js",

No alert changes

Improved metrics

Total package byte prevSize

11648

increased by2.28%

Worsened metrics

Lines of code

217

decreased by-1.81%

No dependency changes