enso-carousel - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

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,9 +23,9 @@ },
     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;
@@ -44,12 +44,15 @@ this.allowShift = true;
     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");
 
@@ -59,4 +62,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();
@@ -66,12 +69,41 @@ });
 
-    window.addEventListener('resize', this.onResize);
+    Array.from(document.querySelectorAll(".enso-carousel__slide *")).forEach(
+      el => {
+        el.addEventListener("click", e => {
+          e.preventDefault();
+        });
+      }
+    );
 
-    this.$emit('ready', this.slides[0]);
+    window.addEventListener("resize", this.onResize);
+
+    this.$emit("ready", this.slides[0]);
   },
 
   methods: {
+    isTargetWithinSlide(target) {
+      for (let i = 0; i < this.slidesEls.length; i++) {
+        const slide = this.slidesEls[i];
+
+        if (slide.contains(target)) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+
     onClick(e) {
       // If a link was clicked and not dragged, navigate to the link's href
-      if (e.originalTarget.tagName === 'A' && !this.linkDragging) {
-        window.location = e.originalTarget.href;
+      if (!this.linkDragging) {
+        if (e.originalTarget.tagName === "A") {
+          window.location = e.originalTarget.href;
+        }
+
+        // This is also handles, e.g. clicking an image within a link.
+        let closest_link = e.originalTarget.closest("a");
+
+        if (closest_link) {
+          window.location = e.originalTarget.parentElement.href;
+        }
       }
@@ -104,3 +136,3 @@ },
       // drag didn't pass the threshold.
-      if (e.originalTarget.tagName === 'A') {
+      if (this.isTargetWithinSlide(e.originalTarget)) {
         this.linkDragging = true;
@@ -113,3 +145,3 @@ }
 
-      if (e.type === 'touchstart') {
+      if (e.type === "touchstart") {
         this.posX1 = e.touches[0].clientX;
@@ -122,3 +154,3 @@ } else {
 
-      this.$emit('drag-start');
+      this.$emit("drag-start");
     },
@@ -129,3 +161,3 @@
 
-      if (e.type === 'touchmove') {
+      if (e.type === "touchmove") {
         this.posX2 = this.posX1 - e.touches[0].clientX;
@@ -138,5 +170,6 @@ 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");
     },
@@ -149,6 +182,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 {
@@ -165,7 +198,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");
 
@@ -180,6 +213,8 @@ 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;
@@ -196,6 +231,8 @@ }
     onTransitionEnd() {
-      this.containerEl.classList.remove('enso-carousel__slides--sliding');
+      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;
@@ -209,3 +246,3 @@ }
 
-      this.$emit('change', this.slides[this.currentIndex]);
+      this.$emit("change", this.slides[this.currentIndex]);
 
@@ -220,3 +257,6 @@ 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;
@@ -226,3 +266,3 @@ } else {
       }
-    },
+    }
   },
@@ -236,5 +276,5 @@
       isCurrentIndex: this.isCurrentIndex,
-      slides: this.slides,
+      slides: this.slides
     });
-  },
+  }
 };

package.json

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

readme.md

@@ -7,3 +7,4 @@ # Enso Carousel
 
-The carousel and its slides must be 100vw wide.
+* The carousel and its slides must be 100vw wide.
+* Slides must not be `<a>` elements. If you want to use an `<a>` then put it _inside_ the slide.
 
@@ -127,11 +128,13 @@ ## Installation
       <div class="enso-carousel__slides">
-        <a
-          :href="slide.url"
-          class="enso-carousel__slide"
+        <div
           v-for="(slide, index) in slides"
           :key="index"
-          v-bind="slide"
         >
-          {{ slide.content }}
-        </a>
+          <a
+            :href="slide.url"
+            class="enso-carousel__slide"
+          >
+            {{ slide.content }}
+          </a>
+        </div>
       </div>
@@ -138,0 +141,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11362

increased by8.69%

Lines of code

218

increased by18.48%

Number of lines in readme file

163

increased by1.88%

No dependency changes