Merge pull request #2 from ErikPham/feat/support-adjust-slide

feat: support adjust slide

Author: jambonn

demo/App.vue

@@ -85,6 +85,7 @@
       <example-basic />
       <example-responsive />
       <example-scroll-per-page />
+      <example-adjust />
     </div>
     <div id="license" class="container">
       <h2 style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em">
@@ -106,9 +107,15 @@
 import ExampleBasic from './ExampleBasic.vue';
 import ExampleResponsive from './ExampleResponsive.vue';
 import ExampleScrollPerPage from './ExampleScrollPerPage.vue';
+import ExampleAdjust from './ExampleAdjust.vue';
 export default {
   name: 'App',
-  components: { ExampleBasic, ExampleResponsive, ExampleScrollPerPage },
+  components: {
+    ExampleBasic,
+    ExampleResponsive,
+    ExampleScrollPerPage,
+    ExampleAdjust,
+  },
   setup() {
     return { slideCount: 6 };
   },

demo/ExampleAdjust.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="content">
+    <h3 style="border-bottom: 1px solid #eaecef; padding-bottom: 0.3em">
+      4. Adjust
+    </h3>
+    <p>
+      Sometimes we need to show not the first slide. And do not want to reduce
+      the score of page speed.
+    </p>
+    <div class="example-basic" style="margin-bottom: 50px">
+      <div class="preview">
+        <carousel :per-page="1" :navigate-to="1" :navigationEnabled="true">
+          <slide :adjust="true">
+            <img src="https://via.placeholder.com/1211x300.png/09f/fff" />
+          </slide>
+          <slide>
+            <img src="https://via.placeholder.com/1210x300.png/09f/fff" />
+          </slide>
+          <slide>
+            <img src="https://via.placeholder.com/1211x300.png/09f/fff" />
+          </slide>
+          <slide>
+            <img src="https://via.placeholder.com/1212x300.png/09f/fff" />
+          </slide>
+        </carousel>
+      </div>
+      <div class="template">
+        <pre
+          class="language-html"
+        ><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>carousel</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide <span class="token attr-name">:adjust</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slide</span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slide</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>carousel</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ExampleBasic',
+};
+</script>

src/Carousel.vue

@@ -72,6 +72,7 @@ import {
   watch,
 } from 'vue';
 import debounce from './utils/debounce';
+import delay from './utils/delay';
 import Navigation from './Navigation.vue';
 import Pagination from './Pagination.vue';
 
@@ -403,6 +404,7 @@ export default {
     const startTime = ref(null);
     const autoplayInterval = ref(null);
     const slotSlides = ref([]);
+    const isFinishSlideAdjust = ref(false);
 
     // Ref template
     const vueConciseCarousel = ref(null);
@@ -694,8 +696,8 @@ export default {
      */
     const getSlideCount = () => {
       if (vueConciseCarousel.value) {
-        const carouselInnerElements = vueConciseCarousel.value.getElementsByClassName(
-          'VueCarousel-slide'
+        const carouselInnerElements = vueConciseCarousel.value.querySelectorAll(
+          '.VueCarousel-slide:not(.VueCarousel-slide-adjust)'
         );
         slotSlides.value = carouselInnerElements;
         slideCount.value = carouselInnerElements.length;
@@ -715,8 +717,20 @@ export default {
      * @param  {Number} page The value of the new page number
      * @param  {string|undefined} advanceType An optional value describing the type of page advance
      */
-    const goToPage = (page, advanceType) => {
+    const goToPage = async (page, advanceType) => {
       if (page >= 0 && page <= pageCount.value) {
+        if (hasVueCarouselSlideAdjust.value && !isFinishSlideAdjust.value) {
+          if (page === navigateTo.value) {
+            currentPage.value = navigateTo.value;
+            return;
+          }
+
+          dragging.value = true;
+          handleVueCarouselSlideAdjust();
+          await delay(refreshRate.value);
+          dragging.value = false;
+        }
+
         offset.value = props.scrollPerPage
           ? Math.min(
               slideWidth.value * currentPerPage.value * page,
@@ -810,6 +824,15 @@ export default {
      * @param  {Object} e The event object
      */
     const onDrag = (e) => {
+      if (
+        hasVueCarouselSlideAdjust.value &&
+        !isFinishSlideAdjust.value &&
+        currentPage.value > 0
+      ) {
+        handleVueCarouselSlideAdjust();
+        return;
+      }
+
       const eventPosX = isTouch ? e.touches[0].clientX : e.clientX;
       const eventPosY = isTouch ? e.touches[0].clientY : e.clientY;
       const newOffsetX = dragStartX.value - eventPosX;
@@ -934,6 +957,39 @@ export default {
       }
     };
 
+    const hasVueCarouselSlideAdjust = computed(() => {
+      if (vueConciseCarousel.value) {
+        return (
+          vueConciseCarousel.value.querySelector(
+            '.VueCarousel-slide-adjust'
+          ) !== null
+        );
+      }
+
+      return false;
+    });
+
+    const handleVueCarouselSlideAdjust = () => {
+      if (hasVueCarouselSlideAdjust.value && !isFinishSlideAdjust.value) {
+        if (currentPage.value > 0) {
+          offset.value = props.scrollPerPage
+            ? Math.min(
+                slideWidth.value * currentPerPage.value * currentPage.value,
+                maxOffset.value
+              )
+            : slideWidth.value * currentPage.value;
+        }
+
+        const element = vueConciseCarousel.value.querySelector(
+          '.VueCarousel-slide-adjust'
+        );
+        if (element) {
+          element.parentElement.removeChild(element);
+        }
+        isFinishSlideAdjust.value = true;
+      }
+    };
+
     provide('carousel', {
       isTouch,
       dragStartX,
@@ -947,6 +1003,7 @@ export default {
         render();
       }
     });
+
     watch(
       navigateTo,
       (val) => {
@@ -981,6 +1038,9 @@ export default {
     watch(currentPage, (val) => {
       ctx.emit('page-change', val);
       ctx.emit('input', val);
+      if (currentPage.value !== navigateTo.value) {
+        handleVueCarouselSlideAdjust();
+      }
     });
     onMounted(() => {
       startAutoplay();

src/Slide.vue

@@ -7,6 +7,7 @@
       'VueCarousel-slide',
       {
         'VueCarousel-slide-adjustableHeight': isAdjustableHeight,
+        'VueCarousel-slide-adjust': adjust,
       },
     ]"
   >
@@ -27,6 +28,12 @@ import {
 export default {
   name: 'Slide',
   emits: ['slide-click'],
+  props: {
+    adjust: {
+      type: Boolean,
+      default: false,
+    },
+  },
   setup(props, ctx) {
     const carousel = inject('carousel');
 

src/utils/delay.js

@@ -0,0 +1,12 @@
+/**
+ * Delay time
+ * @param ms
+ * @returns {Promise<unknown>}
+ */
+const delay = (ms) => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(), ms);
+  });
+};
+
+export default delay;