V0.16.0 (#331)

* feat(standard): adding touchDrag prop to block touch dragging (#296) * feat(standard): adding touchDrag prop to block dragging on mobile devices * feat(standard): adding touchDrag prop to block dragging on mobile devices - removing package-lock.json * adding line-break space to end of file * chore(build): release for rc1 * v0.16.0-rc1 * Fix carousel failing to lock to remainder slides (#303) * Update Carousel.vue fix carousel bug * Added a looping autoplay to the Story page. (#305) * docs(readme): updated README configuration section (#304) * v0.16.0-rc2 * fix: rename event slideClick to slideclick in Slide.vue (#311) * fix: rename event slideClick to slideclick * fix(slide): disable tap highlight in Mobile Safari (#326) * fix(slide): disable tap highlight in Mobile Safari * feat: add correct calculation for pageCount (#329) * chore: build
SSENSE · Nov 29, 2018 · 401278a · 401278a
1 parent d8eed6a
commit 401278a
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 32 deletions.
diff --git a/.gitignore b/.gitignore
@@ -51,3 +51,6 @@ jspm_packages/
 
 # vuepress build output
 .vuepress/dist
+
+# npm package lock file
+./package-lock.json
diff --git a/README.md b/README.md
@@ -92,6 +92,7 @@ export default {
 | speed                       | Number  | 500     | Slide transition speed. Number of milliseconds accepted.                                                                                                                                                                                                                              |
 | value                       | Number  |         | Support for v-model functionality. Setting this value will change the current page to the number inputted (if between 0 and pageCount).                                                                                                                                               |
 
+
 ### Events
 | Event                     | Type    | Emitter  | Description                                                                                                                                                                                                                                                                           |
 |:--------------------------|:--------|:---------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

diff --git a/dist/vue-carousel.min.js b/dist/vue-carousel.min.js
diff --git a/docs/db.json b/docs/db.json
diff --git a/docs/public/api/index.html b/docs/public/api/index.html
diff --git a/docs/public/js/vue-carousel.min.js b/docs/public/js/vue-carousel.min.js
diff --git a/docs/themes/vue/source/js/vue-carousel.min.js b/docs/themes/vue/source/js/vue-carousel.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-carousel",
-  "version": "0.15.0",
+  "version": "0.16.0-rc2",
   "description": "A flexible, responsive, touch-friendly carousel for Vue.js",
   "main": "dist/vue-carousel.min.js",
   "scripts": {

diff --git a/src/Carousel.vue b/src/Carousel.vue
@@ -164,6 +164,13 @@ export default {
       type: Boolean,
       default: true
     },
+    /*
+     * Flag to toggle touch dragging
+     */
+    touchDrag: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Listen for an external navigation request using this prop.
      */
@@ -418,7 +425,7 @@ export default {
     pageCount() {
       return this.scrollPerPage
         ? Math.ceil(this.slideCount / this.currentPerPage)
-        : this.slideCount - 2;
+        : this.slideCount - this.currentPerPage + 1;
     },
     /**
      * Calculate the width of each slide
@@ -763,7 +770,16 @@ export default {
       const width = this.scrollPerPage
         ? this.slideWidth * this.currentPerPage
         : this.slideWidth;
-      this.offset = width * Math.round(this.offset / width);
+      
+      // lock offset to either the nearest page, or to the last slide
+      const lastFullPageOffset = width * Math.floor(this.slideCount / this.currentPerPage - 1)
+      const remainderOffset = lastFullPageOffset + this.slideWidth * (this.slideCount % this.currentPerPage)
+      if (this.offset > (lastFullPageOffset + remainderOffset) / 2) {
+        this.offset = remainderOffset
+      }
+      else {
+        this.offset = width * Math.round(this.offset / width);
+      }
 
       // clamp the offset between 0 -> maxOffset
       this.offset = Math.max(0, Math.min(this.offset, this.maxOffset));
@@ -812,7 +828,7 @@ export default {
     );
 
     // setup the start event only if touch device or mousedrag activated
-    if (this.isTouch || this.mouseDrag) {
+    if ((this.isTouch && this.touchDrag) || this.mouseDrag) {
       this.$refs["VueCarousel-wrapper"].addEventListener(
         this.isTouch ? "touchstart" : "mousedown",
         this.onStart

diff --git a/src/Pagination.vue b/src/Pagination.vue
@@ -41,8 +41,8 @@ export default {
     paginationCount() {
       return this.carousel && this.carousel.scrollPerPage
         ? this.carousel.pageCount
-        : this.carousel.slideCount
-          ? this.carousel.slideCount - 2
+        : this.carousel.slideCount && this.carousel.currentPerPage
+          ? this.carousel.slideCount - this.carousel.currentPerPage + 1
           : 0;
     }
   },

diff --git a/src/Slide.vue b/src/Slide.vue
@@ -89,7 +89,7 @@ export default {
         this.carousel.minSwipeDistance === 0 ||
         Math.abs(deltaX) < this.carousel.minSwipeDistance
       ) {
-        this.$emit("slideClick", Object.assign({}, e.currentTarget.dataset));
+        this.$emit("slideclick", Object.assign({}, e.currentTarget.dataset));
       }
     }
   }
@@ -104,6 +104,7 @@ export default {
   user-select: none;
   backface-visibility: hidden;
   -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   outline: none;
 }
 

diff --git a/tests/client/components/__snapshots__/carousel.spec.js.snap b/tests/client/components/__snapshots__/carousel.spec.js.snap
@@ -86,6 +86,10 @@ exports[`Carousel should decrease current slide number by 1 when advance slide b
       button.VueCarousel-dot-button(type='button', role='button', aria-label='\`Item \${index}\`', title='Item 0', tabindex='0', style='width: 10px; height: 10px; background: rgb(239, 239, 239);')
     li.VueCarousel-dot.VueCarousel-dot--active(aria-hidden='false', role='presentation', aria-selected='true', style='margin-top: 20px; padding: 10px;')
       button.VueCarousel-dot-button(type='button', role='button', aria-label='\`Item \${index}\`', title='Item 1', tabindex='0', style='width: 10px; height: 10px; background: rgb(0, 0, 0);')
+    li.VueCarousel-dot(aria-hidden='false', role='presentation', aria-selected='false', style='margin-top: 20px; padding: 10px;')
+      button.VueCarousel-dot-button(type='button', role='button', aria-label='\`Item \${index}\`', title='Item 2', tabindex='0', style='width: 10px; height: 10px; background: rgb(239, 239, 239);')
+    li.VueCarousel-dot(aria-hidden='false', role='presentation', aria-selected='false', style='margin-top: 20px; padding: 10px;')
+      button.VueCarousel-dot-button(type='button', role='button', aria-label='\`Item \${index}\`', title='Item 3', tabindex='0', style='width: 10px; height: 10px; background: rgb(239, 239, 239);')
 // 
 "
 `;