SSENSE / vue-carousel / 259

pending completion

Build # 259

Build Type

push

travis-ci

Committed by

web-flow

Commit Message

<a href="https://github.com/SSENSE/vue-carousel/commit/<a class=hub.com/SSENSE/vue-carousel/commit/<a class="double-link" href="https://git"><a class=hub.com/SSENSE/vue-carousel/commit/<a class="double-link" href="https://git"><a class=hub.com/SSENSE/vue-carousel/commit/<a class="double-link" href="https://git"><a class=hub.com/SSENSE/vue-carousel/commit/a272137ad61043eff616d1d1f76bf93429c9f8a7">a272137ad">&lt;a href=&quot;https://github.com/SSENSE/vue-carousel/commit/</a><a class="double-link" href="https://github.com/SSENSE/vue-carousel/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/SSENSE/vue-carousel/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/SSENSE/vue-carousel/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/SSENSE/vue-carousel/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/SSENSE/vue-carousel/commit/a272137ad61043eff616d1d1f76bf93429c9f8a7">a272137ad</a><a href="https://github.com/SSENSE/vue-carousel/commit/a272137ad61043eff616d1d1f76bf93429c9f8a7">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/SSENSE/vue-carousel/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/SSENSE/vue-carousel/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/SSENSE/vue-carousel/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/SSENSE/vue-carousel/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/SSENSE/vue-carousel/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/SSENSE/vue-carousel/commit/a272137ad61043eff616d1d1f76bf93429c9f8a7&quot;&gt;a272137ad&lt;/a&gt;&lt;a href=&quot;https://github.com/SSENSE/vue-carousel/commit/a272137ad61043eff616d1d1f76bf93429c9f8a7&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/SSENSE/vue-carousel/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/SSENSE/... (continued)

Run Details

36 of 36 new or added lines in 1 file covered. (100.0%)

132 of 210 relevant lines covered (62.86%)

8.71 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

53.09

/src/Carousel.vue

<template>
  <div class="VueCarousel">
    <div class="VueCarousel-wrapper" ref="VueCarousel-wrapper">
      <div
        class="VueCarousel-inner"
        v-bind:style="`
          transform: translate3d(${currentOffset}px, 0, 0);
          transition: ${!dragging ? transitionStyle : 'none'};
          flex-basis: ${slideWidth}px;
          visibility: ${slideWidth ? 'visible' : 'hidden'};
          padding-left: ${padding}px;
          padding-right: ${padding}px;
        `"
      >
        <slot></slot>
      </div>
    </div>
    <pagination
      v-if="paginationEnabled && pageCount > 0"
      @paginationclick="goToPage($event, 'pagination')"
    ></pagination>
    <navigation
      v-if="navigationEnabled"
      :clickTargetSize="navigationClickTargetSize"
      :nextLabel="navigationNextLabel"
      :prevLabel="navigationPrevLabel"
      @navigationclick="handleNavigation"
    ></navigation>
  </div>
</template>

<script>
import autoplay from "./mixins/autoplay";
import debounce from "./utils/debounce";
import Navigation from "./Navigation.vue";
import Pagination from "./Pagination.vue";
import Slide from "./Slide.vue";

export default {
  name: "carousel",
  beforeUpdate() {
    this.computeCarouselWidth();
  },
  components: {
    Navigation,
    Pagination,
    Slide
  },
  data() {
    return {
      browserWidth: null,
      carouselWidth: null,
      currentPage: 0,
      dragging: false,
      dragMomentum: 0,
      dragOffset: 0,
      dragStartY: 0,
      dragStartX: 0,
      isTouch: typeof window !== "undefined" && "ontouchstart" in window,
      offset: 0,
      refreshRate: 16,
      slideCount: 0
    };
  },
  mixins: [autoplay],
  props: {
    /**
     * Slide transition easing
     * Any valid CSS transition easing accepted
     */
    easing: {
      type: String,
      default: "ease"
    },
    /**
     * Minimum distance for the swipe to trigger
     * a slide advance
     */
    minSwipeDistance: {
      type: Number,
      default: 8
    },
    /**
     * Amount of padding to apply around the label in pixels
     */
    navigationClickTargetSize: {
      type: Number,
      default: 8
    },
    /*
       * Flag to toggle mouse dragging
       */
    mouseDrag: {
      type: Boolean,
      default: true
    },
    /**
     * Flag to render the navigation component
     * (next/prev buttons)
     */
    navigationEnabled: {
      type: Boolean,
      default: false
    },
    /**
     * Text content of the navigation next button
     */
    navigationNextLabel: {
      type: String,
      default: "▶"
    },
    /**
     * Text content of the navigation prev button
     */
    navigationPrevLabel: {
      type: String,
      default: "◀"
    },
    /**
     * The fill color of the active pagination dot
     * Any valid CSS color is accepted
     */
    paginationActiveColor: {
      type: String,
      default: "#000000"
    },
    /**
     * The fill color of pagination dots
     * Any valid CSS color is accepted
     */
    paginationColor: {
      type: String,
      default: "#efefef"
    },
    /**
     * Flag to render pagination component
     */
    paginationEnabled: {
      type: Boolean,
      default: true
    },
    /**
     * The padding inside each pagination dot
     * Pixel values are accepted
     */
    paginationPadding: {
      type: Number,
      default: 10
    },
    /**
     * The size of each pagination dot
     * Pixel values are accepted
     */
    paginationSize: {
      type: Number,
      default: 10
    },
    /**
     * Maximum number of slides displayed on each page
     */
    perPage: {
      type: Number,
      default: 2
    },
    /**
     * Configure the number of visible slides with a particular browser width.
     * This will be an array of arrays, ex. [[320, 2], [1199, 4]]
     * Formatted as [x, y] where x=browser width, and y=number of slides displayed.
     * ex. [1199, 4] means if (window <= 1199) then show 4 slides per page
     */
    perPageCustom: {
      type: Array
    },
    /**
     * Resistance coefficient to dragging on the edge of the carousel
     * This dictates the effect of the pull as you move towards the boundaries
     */
    resistanceCoef: {
      type: Number,
      default: 20
    },
    /**
     * Scroll per page, not per item
     */
    scrollPerPage: {
      type: Boolean,
      default: false
    },
    /**
     * Slide transition speed
     * Number of milliseconds accepted
     */
    speed: {
      type: Number,
      default: 500
    },
    /**
     * Flag to make the carousel loop around when it reaches the end
     */
    loop: {
      type: Boolean,
      default: false
    },
    /**
     * Listen for an external navigation request using this prop.
     */
    navigateTo: {
      type: Number,
      default: 0
    },
    /*
       *  Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.
       */
    spacePadding: {
      type: Number,
      default: 0
    }
  },

  watch: {
    navigateTo(val) {
      if (val !== this.currentPage) this.goToPage(val);
    }
  },

  computed: {
    /**
     * Given a viewport width, find the number of slides to display
     * @param  {Number} width Current viewport width in pixels
     * @return {Number} Number of slides to display
     */
    breakpointSlidesPerPage() {
      if (!this.perPageCustom) {
        return this.perPage;
      }

      const breakpointArray = this.perPageCustom;
      const width = this.browserWidth;

      const breakpoints = breakpointArray.sort(
        (a, b) => (a[0] > b[0] ? -1 : 1)
      );

      // Reduce the breakpoints to entries where the width is in range
      // The breakpoint arrays are formatted as [widthToMatch, numberOfSlides]
      const matches = breakpoints.filter(breakpoint => width >= breakpoint[0]);

      // If there is a match, the result should return only
      // the slide count from the first matching breakpoint
      const match = matches[0] && matches[0][1];

      return match || this.perPage;
    },
    /**
     * @return {Boolean} Can the slider move forward?
     */
    canAdvanceForward() {
      return this.loop || this.currentPage < this.pageCount - 1;
    },
    /**
     * @return {Boolean} Can the slider move backward?
     */
    canAdvanceBackward() {
      return this.loop || this.currentPage > 0;
    },
    /**
     * Number of slides to display per page in the current context.
     * This is constant unless responsive perPage option is set.
     * @return {Number} The number of slides per page to display
     */
    currentPerPage() {
      return !this.perPageCustom || this.$isServer
        ? this.perPage
        : this.breakpointSlidesPerPage;
    },
    /**
     * The horizontal distance the inner wrapper is offset while navigating.
     * @return {Number} Pixel value of offset to apply
     */
    currentOffset() {
      return (this.offset + this.dragOffset) * -1;
    },
    isHidden() {
      return this.carouselWidth <= 0;
    },
    maxOffset() {
      return this.slideWidth * this.slideCount - this.carouselWidth;
    },
    /**
     * Calculate the number of pages of slides
     * @return {Number} Number of pages
     */
    pageCount() {
      return Math.ceil(this.slideCount / this.currentPerPage);
    },
    /**
     * Calculate the width of each slide
     * @return {Number} Slide width
     */
    slideWidth() {
      const width = this.carouselWidth - this.spacePadding * 2;
      const perPage = this.currentPerPage;

      return width / perPage;
    },
    transitionStyle() {
      return `${this.speed / 1000}s ${this.easing} transform`;
    },
    padding() {
      const padding = this.spacePadding;
      return padding > 0 ? padding : false;
    }
  },
  methods: {
    /**
     * @return {Number} The index of the next page
     * */
    getNextPage() {
      if (this.currentPage < this.pageCount - 1) {
        return this.currentPage + 1;
      }
      return this.loop ? 0 : this.currentPage;
    },
    /**
     * @return {Number} The index of the previous page
     * */
    getPreviousPage() {
      if (this.currentPage > 0) {
        return this.currentPage - 1;
      }
      return this.loop ? this.pageCount - 1 : this.currentPage;
    },
    /**
     * Increase/decrease the current page value
     * @param  {String} direction (Optional) The direction to advance
     */
    advancePage(direction) {
      if (direction && direction === "backward" && this.canAdvanceBackward) {
        this.goToPage(this.getPreviousPage(), "navigation");
      } else if (
        (!direction || (direction && direction !== "backward")) &&
        this.canAdvanceForward
      ) {
        this.goToPage(this.getNextPage(), "navigation");
      }
    },
    /**
     * A mutation observer is used to detect changes to the containing node
     * in order to keep the magnet container in sync with the height its reference node.
     */
    attachMutationObserver() {
      const MutationObserver =
        window.MutationObserver ||
        window.WebKitMutationObserver ||
        window.MozMutationObserver;

      if (MutationObserver) {
        const config = { attributes: true, data: true };
        this.mutationObserver = new MutationObserver(() => {
          this.$nextTick(() => {
            this.computeCarouselWidth();
          });
        });
        if (this.$parent.$el) {
          this.mutationObserver.observe(this.$parent.$el, config);
        }
      }
    },
    /**
     * Stop listening to mutation changes
     */
    detachMutationObserver() {
      if (this.mutationObserver) {
        this.mutationObserver.disconnect();
      }
    },
    /**
     * Get the current browser viewport width
     * @return {Number} Browser"s width in pixels
     */
    getBrowserWidth() {
      this.browserWidth = window.innerWidth;
      return this.browserWidth;
    },
    /**
     * Get the width of the carousel DOM element
     * @return {Number} Width of the carousel in pixels
     */
    getCarouselWidth() {
      this.carouselWidth = (this.$el && this.$el.clientWidth) || 0; // Assign globally
      return this.carouselWidth;
    },
    /**
     * Filter slot contents to slide instances and return length
     * @return {Number} The number of slides
     */
    getSlideCount() {
      this.slideCount =
        (this.$slots &&
          this.$slots.default &&
          this.$slots.default.filter(
            slot => slot.tag && slot.tag.indexOf("slide") > -1
          ).length) ||
        0;
    },
    /**
     * Set the current page to a specific value
     * This function will only apply the change if the value is within the carousel bounds
     * @param  {Number} page The value of the new page number
     * @param {String} componentName Either navigation or pagination
     */
    goToPage(page, componentName) {
      if (page >= 0 && page <= this.pageCount) {
        this.offset = Math.min(
          this.slideWidth * this.currentPerPage * page,
          this.maxOffset
        );
        this.currentPage = page;
        this.$emit("pagechange", { page: this.currentPage, componentName });
      }
    },
    handleNavigation(direction) {
      this.$emit("navigationclick", direction);
    },
    /**
     * Trigger actions when mouse is pressed
     * @param  {Object} e The event object
     */
    /* istanbul ignore next */
    onStart(e) {
      document.addEventListener(
        this.isTouch ? "touchend" : "mouseup",
        this.onEnd,
        true
      );
      if (MutationObserver) {
        const config = { attributes: true, data: true };
        this.mutationObserver = new MutationObserver(() => {
          this.$nextTick(() => {
            this.computeCarouselWidth();
          });
        });
        if (this.$parent.$el) {
          this.mutationObserver.observe(this.$parent.$el, config);
        }
      }
    },
    /**
     * Stop listening to mutation changes
     */
    detachMutationObserver() {
      if (this.mutationObserver) {
        this.mutationObserver.disconnect();
      }
    },
    /**
     * Get the current browser viewport width
     * @return {Number} Browser"s width in pixels
     */
    getBrowserWidth() {
      this.browserWidth = window.innerWidth;
      return this.browserWidth;
    },
    /**
     * Get the width of the carousel DOM element
     * @return {Number} Width of the carousel in pixels
     */
    getCarouselWidth() {
      this.carouselWidth = (this.$el && this.$el.clientWidth) || 0; // Assign globally
      return this.carouselWidth;
    },
    /**
     * Filter slot contents to slide instances and return length
     * @return {Number} The number of slides
     */
    getSlideCount() {
      this.slideCount =
        (this.$slots &&
          this.$slots.default &&
          this.$slots.default.filter(
            slot => slot.tag && slot.tag.indexOf("slide") > -1
          ).length) ||
        0;
    },
    /**
     * Set the current page to a specific value
     * This function will only apply the change if the value is within the carousel bounds
     * @param  {Number} page The value of the new page number
     */
    goToPage(page) {
      if (page >= 0 && page <= this.pageCount) {
        this.offset = Math.min(
          this.slideWidth * this.currentPerPage * page,
          this.maxOffset
        );
        this.currentPage = page;
        this.$emit("pageChange", this.currentPage);
      }
    },
    /**
     * Trigger actions when mouse is pressed
     * @param  {Object} e The event object
     */
    /* istanbul ignore next */
    onStart(e) {
      document.addEventListener(
        this.isTouch ? "touchend" : "mouseup",
        this.onEnd,
        true
      );

      document.addEventListener(
        this.isTouch ? "touchmove" : "mousemove",
        this.onDrag,
        true
      );

      this.startTime = e.timeStamp;
      this.dragging = true;
      this.dragStartX = this.isTouch ? e.touches[0].clientX : e.clientX;
      this.dragStartY = this.isTouch ? e.touches[0].clientY : e.clientY;
    },
    /**
     * Trigger actions when mouse is released
     * @param  {Object} e The event object
     */

    onEnd(e) {
      // compute the momemtum speed
      const eventPosX = this.isTouch ? e.changedTouches[0].clientX : e.clientX;
      const deltaX = this.dragStartX - eventPosX;
      this.dragMomentum = deltaX / (e.timeStamp - this.startTime);

      // take care of the minSwipteDistance prop, if not 0 and delta is bigger than delta
      if (
        this.minSwipeDistance !== 0 &&
        Math.abs(deltaX) >= this.minSwipeDistance
      ) {
        const width = this.scrollPerPage
          ? this.slideWidth * this.currentPerPage
          : this.slideWidth;
        this.dragOffset = this.dragOffset + Math.sign(deltaX) * (width / 2);
      }

      this.offset += this.dragOffset;
      this.dragOffset = 0;
      this.dragging = false;

      this.render();

      // clear events listeners
      document.removeEventListener(
        this.isTouch ? "touchend" : "mouseup",
        this.onEnd,
        true
      );
      document.removeEventListener(
        this.isTouch ? "touchmove" : "mousemove",
        this.onDrag,
        true
      );
    },
    /**
     * Trigger actions when mouse is pressed and then moved (mouse drag)
     * @param  {Object} e The event object
     */
    onDrag(e) {
      const eventPosX = this.isTouch ? e.touches[0].clientX : e.clientX;
      const eventPosY = this.isTouch ? e.touches[0].clientY : e.clientY;
      const newOffsetX = this.dragStartX - eventPosX;
      const newOffsetY = this.dragStartY - eventPosY;

      // if it is a touch device, check if we are below the min swipe threshold
      // (if user scroll the page on the component)
      if (this.isTouch && Math.abs(newOffsetX) < Math.abs(newOffsetY)) {
        return;
      }

      // we are good to prevent the move and handle the translation
      e.preventDefault();
      e.stopImmediatePropagation();

      this.dragOffset = newOffsetX;
      const nextOffset = this.offset + this.dragOffset;
      if (nextOffset < 0) {
        this.dragOffset = -Math.sqrt(-this.resistanceCoef * this.dragOffset);
      } else if (nextOffset > this.maxOffset) {
        this.dragOffset = Math.sqrt(this.resistanceCoef * this.dragOffset);
      }
    },
    onResize() {
      this.computeCarouselWidth();

      this.dragging = true; // force a dragging to disable animation
      this.render();
      // clear dragging after refresh rate
      setTimeout(() => {
        this.dragging = false;
      }, this.refreshRate);
    },
    render() {
      // add extra slides depending on the momemtum speed
      this.offset +=
        Math.max(
          -this.currentPerPage + 1,
          Math.min(Math.round(this.dragMomentum), this.currentPerPage - 1)
        ) * this.slideWidth;

      // & snap the new offset on a slide or page if scrollPerPage
      const width = this.scrollPerPage
        ? this.slideWidth * this.currentPerPage
        : this.slideWidth;
      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));

      // update the current page
      this.currentPage = Math.round(
        this.offset / this.slideWidth / this.currentPerPage
      );
    },
    /**
     * Re-compute the width of the carousel and its slides
     */
    computeCarouselWidth() {
      this.getSlideCount();
      this.getBrowserWidth();
      this.getCarouselWidth();
      this.setCurrentPageInBounds();
    },
    /**
     * When the current page exceeds the carousel bounds, reset it to the maximum allowed
     */
    setCurrentPageInBounds() {
      if (!this.canAdvanceForward) {
        const setPage = this.pageCount - 1;
        this.currentPage = setPage >= 0 ? setPage : 0;
        this.offset = Math.max(0, Math.min(this.offset, this.maxOffset));
      }
    }
  },
  mounted() {
    if (!this.$isServer) {
      window.addEventListener(
        "resize",
        debounce(this.onResize, this.refreshRate)
      );

      // setup the start event only if touch device or mousedrag activated
      if (this.isTouch || this.mouseDrag) {
        this.$refs["VueCarousel-wrapper"].addEventListener(
          this.isTouch ? "touchstart" : "mousedown",
          this.onStart
        );
      }
    }

    this.attachMutationObserver();
    this.computeCarouselWidth();
  },
  beforeDestroy() {
    if (!this.$isServer) {
      this.detachMutationObserver();
      window.removeEventListener("resize", this.getBrowserWidth);
      this.$refs["VueCarousel-wrapper"].removeEventListener(
        this.isTouch ? "touchstart" : "mousedown",
        this.onStart
      );
    }
  }
};
</script>

<style>
.VueCarousel {
  position: relative;
}

.VueCarousel-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.VueCarousel-inner {
  display: flex;
  flex-direction: row;
  backface-visibility: hidden;
}
</style>

1	<template>	3✔
2	<div class="VueCarousel">
3	<div class="VueCarousel-wrapper" ref="VueCarousel-wrapper">
4	<div	3✔
5	class="VueCarousel-inner"
6	v-bind:style="`
7	transform: translate3d(${currentOffset}px, 0, 0);
8	transition: ${!dragging ? transitionStyle : 'none'};	3✔
9	flex-basis: ${slideWidth}px;
10	visibility: ${slideWidth ? 'visible' : 'hidden'};	3✔
11	padding-left: ${padding}px;
12	padding-right: ${padding}px;	3✔
13	`"
14	>	3✔
15	<slot></slot>
16	</div>
17	</div>
18	<pagination	3✔
19	v-if="paginationEnabled && pageCount > 0"
20	@paginationclick="goToPage($event, 'pagination')"	3✔
21	></pagination>
22	<navigation	3✔
23	v-if="navigationEnabled"
24	:clickTargetSize="navigationClickTargetSize"	3✔
25	:nextLabel="navigationNextLabel"
26	:prevLabel="navigationPrevLabel"	3✔
27	@navigationclick="handleNavigation"
28	></navigation>	3✔
29	</div>
30	</template>	3✔
31
32	<script>	3✔
33	import autoplay from "./mixins/autoplay";
34	import debounce from "./utils/debounce";	3✔
35	import Navigation from "./Navigation.vue";
36	import Pagination from "./Pagination.vue";	3✔
37	import Slide from "./Slide.vue";
38		21✔
39	export default {
40	name: "carousel",	3✔
41	beforeUpdate() {
42	this.computeCarouselWidth();
43	},	24✔
44	components: {
45	Navigation,
46	Pagination,
47	Slide
48	},
49	data() {
50	return {
51	browserWidth: null,
52	carouselWidth: null,	22✔
53	currentPage: 0,
54	dragging: false,
55	dragMomentum: 0,
56	dragOffset: 0,
57	dragStartY: 0,
58	dragStartX: 0,
59	isTouch: typeof window !== "undefined" && "ontouchstart" in window,
60	offset: 0,
61	refreshRate: 16,
62	slideCount: 0
63	};
64	},
65	mixins: [autoplay],
66	props: {
67	/**
68	* Slide transition easing
69	* Any valid CSS transition easing accepted
70	*/
71	easing: {
72	type: String,
73	default: "ease"
74	},
75	/**
76	* Minimum distance for the swipe to trigger
77	* a slide advance
78	*/
79	minSwipeDistance: {
80	type: Number,
81	default: 8
82	},
83	/**
84	* Amount of padding to apply around the label in pixels
85	*/
86	navigationClickTargetSize: {
87	type: Number,
88	default: 8
89	},
90	/*
91	* Flag to toggle mouse dragging
92	*/
93	mouseDrag: {
94	type: Boolean,
95	default: true
96	},
97	/**
98	* Flag to render the navigation component
99	* (next/prev buttons)
100	*/
101	navigationEnabled: {
102	type: Boolean,
103	default: false
104	},
105	/**
106	* Text content of the navigation next button
107	*/
108	navigationNextLabel: {
109	type: String,
110	default: "▶"
111	},
112	/**
113	* Text content of the navigation prev button
114	*/
115	navigationPrevLabel: {
116	type: String,
117	default: "◀"
118	},
119	/**
120	* The fill color of the active pagination dot
121	* Any valid CSS color is accepted
122	*/
123	paginationActiveColor: {
124	type: String,
125	default: "#000000"
126	},
127	/**
128	* The fill color of pagination dots
129	* Any valid CSS color is accepted
130	*/
131	paginationColor: {
132	type: String,
133	default: "#efefef"
134	},
135	/**
136	* Flag to render pagination component
137	*/
138	paginationEnabled: {
139	type: Boolean,
140	default: true
141	},
142	/**
143	* The padding inside each pagination dot
144	* Pixel values are accepted
145	*/
146	paginationPadding: {
147	type: Number,
148	default: 10
149	},
150	/**
151	* The size of each pagination dot
152	* Pixel values are accepted
153	*/
154	paginationSize: {
155	type: Number,
156	default: 10
157	},
158	/**
159	* Maximum number of slides displayed on each page
160	*/
161	perPage: {
162	type: Number,
163	default: 2
164	},
165	/**
166	* Configure the number of visible slides with a particular browser width.
167	* This will be an array of arrays, ex. [[320, 2], [1199, 4]]
168	* Formatted as [x, y] where x=browser width, and y=number of slides displayed.
169	* ex. [1199, 4] means if (window <= 1199) then show 4 slides per page
170	*/
171	perPageCustom: {
172	type: Array	×
173	},
174	/**
175	* Resistance coefficient to dragging on the edge of the carousel
176	* This dictates the effect of the pull as you move towards the boundaries
177	*/
178	resistanceCoef: {	4✔
179	type: Number,	×
180	default: 20
181	},
182	/**	4✔
183	* Scroll per page, not per item	4✔
184	*/
185	scrollPerPage: {	4✔
186	type: Boolean,	×
187	default: false
188	},
189	/**	4✔
190	* Slide transition speed	4✔
191	* Number of milliseconds accepted
192	*/
193	speed: {	4✔
194	type: Number,
195	default: 500	4✔
196	},
197	/**
198	* Flag to make the carousel loop around when it reaches the end	32✔
199	*/
200	loop: {
201	type: Boolean,	11✔
202	default: false
203	},
204	/**	24✔
205	* Listen for an external navigation request using this prop.
206	*/
207	navigateTo: {	22✔
208	type: Number,
209	default: 0
210	},	×
211	/*
212	* Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.
213	*/	15✔
214	spacePadding: {
215	type: Number,
216	default: 0	38✔
217	}
218	},
219		44✔
220	watch: {	44✔
221	navigateTo(val) {
222	if (val !== this.currentPage) this.goToPage(val);	44✔
223	}
224	},
225		22✔
226	computed: {
227	/**
228	* Given a viewport width, find the number of slides to display	22✔
229	* @param {Number} width Current viewport width in pixels	22✔
230	* @return {Number} Number of slides to display
231	*/
232	breakpointSlidesPerPage() {
233	if (!this.perPageCustom) {
234	return this.perPage;	4✔
235	}	3✔
236
237	const breakpointArray = this.perPageCustom;	1✔
238	const width = this.browserWidth;
239
240	const breakpoints = breakpointArray.sort(	3✔
241	(a, b) => (a[0] > b[0] ? -1 : 1)	2✔
242	);
243		1✔
244	// Reduce the breakpoints to entries where the width is in range
245	// The breakpoint arrays are formatted as [widthToMatch, numberOfSlides]
246	const matches = breakpoints.filter(breakpoint => width >= breakpoint[0]);	7✔
247		3✔
248	// If there is a match, the result should return only	4✔
249	// the slide count from the first matching breakpoint	4✔
250	const match = matches[0] && matches[0][1];
251
252	return match \|\| this.perPage;
253	},	22✔
254	/**
255	* @return {Boolean} Can the slider move forward?	22✔
256	*/
257	canAdvanceForward() {	22✔
258	return this.loop \|\| this.currentPage < this.pageCount - 1;	×
259	},	×
260	/**	×
261	* @return {Boolean} Can the slider move backward?	×
262	*/
263	canAdvanceBackward() {
264	return this.loop \|\| this.currentPage > 0;	×
265	},	×
266	/**
267	* Number of slides to display per page in the current context.
268	* This is constant unless responsive perPage option is set.
269	* @return {Number} The number of slides per page to display
270	*/	×
271	currentPerPage() {	×
272	return !this.perPageCustom \|\| this.$isServer
273	? this.perPage
274	: this.breakpointSlidesPerPage;
275	},	×
276	/**	×
277	* The horizontal distance the inner wrapper is offset while navigating.
278	* @return {Number} Pixel value of offset to apply
279	*/	×
280	currentOffset() {	×
281	return (this.offset + this.dragOffset) * -1;
282	},
283	isHidden() {	×
284	return this.carouselWidth <= 0;	×
285	},
286	maxOffset() {
287	return this.slideWidth * this.slideCount - this.carouselWidth;
288	},	×
289	/**	×
290	* Calculate the number of pages of slides	×
291	* @return {Number} Number of pages	×
292	*/
293	pageCount() {
294	return Math.ceil(this.slideCount / this.currentPerPage);
295	},	×
296	/**
297	* Calculate the width of each slide
298	* @return {Number} Slide width	×
299	*/
300	slideWidth() {	×
301	const width = this.carouselWidth - this.spacePadding * 2;	×
302	const perPage = this.currentPerPage;	×
303		×
304	return width / perPage;	×
305	},	×
306	transitionStyle() {
307	return `${this.speed / 1000}s ${this.easing} transform`;
308	},	×
309	padding() {	×
310	const padding = this.spacePadding;
311	return padding > 0 ? padding : false;
312	}
313	},
314	methods: {	1✔
315	/**	×
316	* @return {Number} The index of the next page
317	* */
318	getNextPage() {	46✔
319	if (this.currentPage < this.pageCount - 1) {	46✔
320	return this.currentPage + 1;
321	}	46✔
322	return this.loop ? 0 : this.currentPage;	46✔
323	},
324	/**	46✔
325	* @return {Number} The index of the previous page	70✔
326	* */
327	getPreviousPage() {
328	if (this.currentPage > 0) {	10✔
329	return this.currentPage - 1;	10✔
330	}	10✔
331	return this.loop ? this.pageCount - 1 : this.currentPage;	10✔
332	},
333	/**
334	* Increase/decrease the current page value	×
335	* @param {String} direction (Optional) The direction to advance
336	*/	×
337	advancePage(direction) {
338	if (direction && direction === "backward" && this.canAdvanceBackward) {	×
339	this.goToPage(this.getPreviousPage(), "navigation");	×
340	} else if (	×
341	(!direction \|\| (direction && direction !== "backward")) &&	×
342	this.canAdvanceForward
343	) {	×
344	this.goToPage(this.getNextPage(), "navigation");	×
345	}	×
346	},
347	/**	×
348	* A mutation observer is used to detect changes to the containing node	×
349	* in order to keep the magnet container in sync with the height its reference node.	×
350	*/
351	attachMutationObserver() {
352	const MutationObserver =	×
353	window.MutationObserver \|\|	×
354	window.WebKitMutationObserver \|\|	×
355	window.MozMutationObserver;
356		×
357	if (MutationObserver) {
358	const config = { attributes: true, data: true };	×
359	this.mutationObserver = new MutationObserver(() => {	×
360	this.$nextTick(() => {
361	this.computeCarouselWidth();	×
362	});	×
363	});	×
364	if (this.$parent.$el) {	×
365	this.mutationObserver.observe(this.$parent.$el, config);
366	}	×
367	}	×
368	},
369	/**
370	* Stop listening to mutation changes	×
371	*/	×
372	detachMutationObserver() {
373	if (this.mutationObserver) {	×
374	this.mutationObserver.disconnect();	×
375	}	×
376	},	×
377	/**	×
378	* Get the current browser viewport width	×
379	* @return {Number} Browser"s width in pixels
380	*/
381	getBrowserWidth() {	×
382	this.browserWidth = window.innerWidth;
383	return this.browserWidth;	×
384	},
385	/**	×
386	* Get the width of the carousel DOM element	×
387	* @return {Number} Width of the carousel in pixels
388	*/	×
389	getCarouselWidth() {	×
390	this.carouselWidth = (this.$el && this.$el.clientWidth) \|\| 0; // Assign globally
391	return this.carouselWidth;
392	},	×
393	/**
394	* Filter slot contents to slide instances and return length	×
395	* @return {Number} The number of slides	×
396	*/
397	getSlideCount() {	×
398	this.slideCount =
399	(this.$slots &&	×
400	this.$slots.default &&
401	this.$slots.default.filter(	46✔
402	slot => slot.tag && slot.tag.indexOf("slide") > -1	46✔
403	).length) \|\|	46✔
404	0;	46✔
405	},
406	/**	46✔
407	* Set the current page to a specific value	20✔
408	* This function will only apply the change if the value is within the carousel bounds	20✔
409	* @param {Number} page The value of the new page number	20✔
410	* @param {String} componentName Either navigation or pagination
411	*/
412	goToPage(page, componentName) {
413	if (page >= 0 && page <= this.pageCount) {	22✔
414	this.offset = Math.min(	22✔
415	this.slideWidth * this.currentPerPage * page,
416	this.maxOffset	22✔
417	);	22✔
418	this.currentPage = page;
419	this.$emit("pagechange", { page: this.currentPage, componentName });
420	}
421	},	22✔
422	handleNavigation(direction) {	22✔
423	this.$emit("navigationclick", direction);
424	},
425	/**	1✔
426	* Trigger actions when mouse is pressed	1✔
427	* @param {Object} e The event object	1✔
428	*/	1✔
429	/* istanbul ignore next */
430	onStart(e) {
431	document.addEventListener(
432	this.isTouch ? "touchend" : "mouseup",
433	this.onEnd,	3✔
434	true	3✔
435	);	46✔
436	if (MutationObserver) {	3✔
437	const config = { attributes: true, data: true };
438	this.mutationObserver = new MutationObserver(() => {
439	this.$nextTick(() => {
440	this.computeCarouselWidth();
441	});
442	});
443	if (this.$parent.$el) {
444	this.mutationObserver.observe(this.$parent.$el, config);
445	}
446	}
447	},
448	/**
449	* Stop listening to mutation changes
450	*/
451	detachMutationObserver() {
452	if (this.mutationObserver) {
453	this.mutationObserver.disconnect();
454	}
455	},
456	/**
457	* Get the current browser viewport width
458	* @return {Number} Browser"s width in pixels
459	*/
460	getBrowserWidth() {
461	this.browserWidth = window.innerWidth;
462	return this.browserWidth;
463	},
464	/**
465	* Get the width of the carousel DOM element
466	* @return {Number} Width of the carousel in pixels
467	*/
468	getCarouselWidth() {
469	this.carouselWidth = (this.$el && this.$el.clientWidth) \|\| 0; // Assign globally
470	return this.carouselWidth;
471	},
472	/**
473	* Filter slot contents to slide instances and return length
474	* @return {Number} The number of slides
475	*/
476	getSlideCount() {
477	this.slideCount =
478	(this.$slots &&
479	this.$slots.default &&
480	this.$slots.default.filter(
481	slot => slot.tag && slot.tag.indexOf("slide") > -1
482	).length) \|\|
483	0;
484	},
485	/**
486	* Set the current page to a specific value
487	* This function will only apply the change if the value is within the carousel bounds
488	* @param {Number} page The value of the new page number
489	*/
490	goToPage(page) {
491	if (page >= 0 && page <= this.pageCount) {
492	this.offset = Math.min(
493	this.slideWidth * this.currentPerPage * page,
494	this.maxOffset
495	);
496	this.currentPage = page;
497	this.$emit("pageChange", this.currentPage);
498	}
499	},
500	/**
501	* Trigger actions when mouse is pressed
502	* @param {Object} e The event object
503	*/
504	/* istanbul ignore next */
505	onStart(e) {
506	document.addEventListener(
507	this.isTouch ? "touchend" : "mouseup",
508	this.onEnd,
509	true
510	);
511
512	document.addEventListener(
513	this.isTouch ? "touchmove" : "mousemove",
514	this.onDrag,
515	true
516	);
517
518	this.startTime = e.timeStamp;
519	this.dragging = true;
520	this.dragStartX = this.isTouch ? e.touches[0].clientX : e.clientX;
521	this.dragStartY = this.isTouch ? e.touches[0].clientY : e.clientY;
522	},
523	/**
524	* Trigger actions when mouse is released
525	* @param {Object} e The event object
526	*/
527
528	onEnd(e) {
529	// compute the momemtum speed
530	const eventPosX = this.isTouch ? e.changedTouches[0].clientX : e.clientX;
531	const deltaX = this.dragStartX - eventPosX;
532	this.dragMomentum = deltaX / (e.timeStamp - this.startTime);
533
534	// take care of the minSwipteDistance prop, if not 0 and delta is bigger than delta
535	if (
536	this.minSwipeDistance !== 0 &&
537	Math.abs(deltaX) >= this.minSwipeDistance
538	) {
539	const width = this.scrollPerPage
540	? this.slideWidth * this.currentPerPage
541	: this.slideWidth;
542	this.dragOffset = this.dragOffset + Math.sign(deltaX) * (width / 2);
543	}
544
545	this.offset += this.dragOffset;
546	this.dragOffset = 0;
547	this.dragging = false;
548
549	this.render();
550
551	// clear events listeners
552	document.removeEventListener(
553	this.isTouch ? "touchend" : "mouseup",
554	this.onEnd,
555	true
556	);
557	document.removeEventListener(
558	this.isTouch ? "touchmove" : "mousemove",
559	this.onDrag,
560	true
561	);
562	},
563	/**
564	* Trigger actions when mouse is pressed and then moved (mouse drag)
565	* @param {Object} e The event object
566	*/
567	onDrag(e) {
568	const eventPosX = this.isTouch ? e.touches[0].clientX : e.clientX;
569	const eventPosY = this.isTouch ? e.touches[0].clientY : e.clientY;
570	const newOffsetX = this.dragStartX - eventPosX;
571	const newOffsetY = this.dragStartY - eventPosY;
572
573	// if it is a touch device, check if we are below the min swipe threshold
574	// (if user scroll the page on the component)
575	if (this.isTouch && Math.abs(newOffsetX) < Math.abs(newOffsetY)) {
576	return;
577	}
578
579	// we are good to prevent the move and handle the translation
580	e.preventDefault();
581	e.stopImmediatePropagation();
582
583	this.dragOffset = newOffsetX;
584	const nextOffset = this.offset + this.dragOffset;
585	if (nextOffset < 0) {
586	this.dragOffset = -Math.sqrt(-this.resistanceCoef * this.dragOffset);
587	} else if (nextOffset > this.maxOffset) {
588	this.dragOffset = Math.sqrt(this.resistanceCoef * this.dragOffset);
589	}
590	},
591	onResize() {
592	this.computeCarouselWidth();
593
594	this.dragging = true; // force a dragging to disable animation
595	this.render();
596	// clear dragging after refresh rate
597	setTimeout(() => {
598	this.dragging = false;
599	}, this.refreshRate);
600	},
601	render() {
602	// add extra slides depending on the momemtum speed
603	this.offset +=
604	Math.max(
605	-this.currentPerPage + 1,
606	Math.min(Math.round(this.dragMomentum), this.currentPerPage - 1)
607	) * this.slideWidth;
608
609	// & snap the new offset on a slide or page if scrollPerPage
610	const width = this.scrollPerPage
611	? this.slideWidth * this.currentPerPage
612	: this.slideWidth;
613	this.offset = width * Math.round(this.offset / width);
614
615	// clamp the offset between 0 -> maxOffset
616	this.offset = Math.max(0, Math.min(this.offset, this.maxOffset));
617
618	// update the current page
619	this.currentPage = Math.round(
620	this.offset / this.slideWidth / this.currentPerPage
621	);
622	},
623	/**
624	* Re-compute the width of the carousel and its slides
625	*/
626	computeCarouselWidth() {
627	this.getSlideCount();
628	this.getBrowserWidth();
629	this.getCarouselWidth();
630	this.setCurrentPageInBounds();
631	},
632	/**
633	* When the current page exceeds the carousel bounds, reset it to the maximum allowed
634	*/
635	setCurrentPageInBounds() {
636	if (!this.canAdvanceForward) {
637	const setPage = this.pageCount - 1;
638	this.currentPage = setPage >= 0 ? setPage : 0;
639	this.offset = Math.max(0, Math.min(this.offset, this.maxOffset));
640	}
641	}
642	},
643	mounted() {
644	if (!this.$isServer) {
645	window.addEventListener(
646	"resize",
647	debounce(this.onResize, this.refreshRate)
648	);
649
650	// setup the start event only if touch device or mousedrag activated
651	if (this.isTouch \|\| this.mouseDrag) {
652	this.$refs["VueCarousel-wrapper"].addEventListener(
653	this.isTouch ? "touchstart" : "mousedown",
654	this.onStart
655	);
656	}
657	}
658
659	this.attachMutationObserver();
660	this.computeCarouselWidth();
661	},
662	beforeDestroy() {
663	if (!this.$isServer) {
664	this.detachMutationObserver();
665	window.removeEventListener("resize", this.getBrowserWidth);
666	this.$refs["VueCarousel-wrapper"].removeEventListener(
667	this.isTouch ? "touchstart" : "mousedown",
668	this.onStart
669	);
670	}
671	}
672	};
673	</script>
674
675	<style>
676	.VueCarousel {
677	position: relative;
678	}
679
680	.VueCarousel-wrapper {
681	width: 100%;
682	position: relative;
683	overflow: hidden;
684	}
685
686	.VueCarousel-inner {
687	display: flex;
688	flex-direction: row;
689	backface-visibility: hidden;
690	}
691	</style>

SSENSE / vue-carousel / 259

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous