docs(demo): tweak demo with the last features and behaviors

empathyco · Apr 3, 2020 · 3202bc0 · 3202bc0
1 parent 32388f0
commit 3202bc0
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 65 deletions.
diff --git a/demo/App.vue b/demo/App.vue
@@ -1,44 +1,126 @@
 <template>
   <div class="app-demo">
-    <Carousel v-bind="{ itemsPerSlide, itemMarginRightInPx, withArrows }">
-      <Item v-for="item in items" :key="item.id" :item="item" />
-    </Carousel>
-    <Carousel v-bind="{ itemMarginRightInPx, withArrows }" :itemsPerSlide="4">
-      <img
-        src="https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/iv4shrrdg6ls6a8vo9ij/nikecourt-tennis-t-shirt-v1BtBt.jpg"
-      />
-      <img
-        src="https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/wew3rrez4rfkaffl7pgj/aerolayer-running-jacket-Z02VhD.jpg"
-      />
-      <p>This a text</p>
-      <p>This a text</p>
-    </Carousel>
-
-    <Carousel v-bind="{ itemMarginRightInPx, withArrows }" :itemsPerSlide="4">
-      <p>This a text</p>
-      <p>This a text</p>
-      <p>This a text</p>
-      <p>This a text</p>
-      <p>This a text</p>
-      <p>This a text</p>
-    </Carousel>
-    <!--
-    <Carousel
-      v-bind="{ items, withArrows }"
-      :itemsPerSlide="10"
-      :itemMarginRightInPx="5"
-      :withPagination="false"
-      :slidingAnimationTimeInMs="1000"
-      :navigationButtonIcon="arrowIconComponent"
-    />
-    <Carousel
-      v-bind="{ items }"
-      :itemsPerSlide="3"
-      :itemMarginRightInPx="100"
-      :withArrows="false"
-      :slidingAnimationTimeInMs="200"
-    />
-    -->
+    <!-- Vue client component as carousel items -->
+    <div class="app-demo-container">
+      <h2 class="app-demo-container-title">Vue client component as carousel items</h2>
+      <Carousel v-bind="{ itemsPerSlide, itemMarginRightInPx, withArrows }">
+        <Item v-for="item in items" :key="item.id" :item="item" />
+      </Carousel>
+      <section class="app-demo-container-code">
+        <pre
+          class="hljs"
+          style="display: block; overflow-x: auto; padding: 0.5em; color: rgb(51, 51, 51); background: rgb(248, 248, 248);"
+        ><span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">Carousel</span> <span class="hljs-attr" style="color: teal;">v-bind</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"{ itemsPerSlide, itemMarginRightInPx, withArrows }"</span>&gt;</span>
+  <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">Item</span> <span class="hljs-attr" style="color: teal;">v-for</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"item in items"</span> <span class="hljs-attr" style="color: teal;">:key</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"item.id"</span> <span class="hljs-attr" style="color: teal;">:item</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"item"</span> /&gt;</span>
+<span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">Carousel</span>&gt;</span></pre>
+      </section>
+    </div>
+    <!-- Support to HTML anchor -->
+    <div class="app-demo-container">
+      <h2 class="app-demo-container-title">Support to HTML anchor</h2>
+      <Carousel
+        :itemsPerSlide="4"
+        :itemMarginRightInPx="5"
+        :withPagination="false"
+        :slidingAnimationTimeInMs="1000"
+        :minDraggingDisplacementInPx="20"
+      >
+        <article v-for="i in 15" :key="i">
+          <a href="https://empathy.co">
+            <img :src="`https://picsum.photos/id/1${i}/200/200`" alt="" style="width:100%" />
+            <p style="text-align: center">Image footer</p>
+          </a>
+        </article>
+      </Carousel>
+      <section class="app-demo-container-code">
+        <pre
+          class="hljs"
+          style="display: block; overflow-x: auto; padding: 0.5em; color: rgb(51, 51, 51); background: rgb(248, 248, 248);"
+        ><span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">Carousel</span>
+   <span class="hljs-attr" style="color: teal;">:itemsPerSlide</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"4"</span>
+   <span class="hljs-attr" style="color: teal;">:itemMarginRightInPx</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"5"</span>
+   <span class="hljs-attr" style="color: teal;">:withPagination</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"false"</span>
+   <span class="hljs-attr" style="color: teal;">:slidingAnimationTimeInMs</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"1000"</span>
+   <span class="hljs-attr" style="color: teal;">:minDraggingDisplacementInPx</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"20"</span>
+&gt;</span>
+   <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">article</span> <span class="hljs-attr" style="color: teal;">v-for</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"i in 15"</span> <span class="hljs-attr" style="color: teal;">:key</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"i"</span>&gt;</span>
+      <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">a</span> <span class="hljs-attr" style="color: teal;">href</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"https://empathy.co"</span>&gt;</span>
+        <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">img</span> <span class="hljs-attr" style="color: teal;">:src</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"`https://picsum.photos/id/1${i}/200/200`"</span> <span class="hljs-attr" style="color: teal;">alt</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">""</span> <span class="hljs-attr" style="color: teal;">style</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"width:100%"</span> /&gt;</span>
+        <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">p</span> <span class="hljs-attr" style="color: teal;">style</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"text-align: center"</span>&gt;</span>Image footer<span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">p</span>&gt;</span>
+      <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">a</span>&gt;</span>
+   <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">article</span>&gt;</span>
+<span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">Carousel</span>&gt;</span></pre>
+      </section>
+    </div>
+    <!-- HTML elements & Vue client components -->
+    <div class="app-demo-container">
+      <h2 class="app-demo-container-title">HTML elements & Vue client components</h2>
+      <Carousel
+        :itemsPerSlide="3"
+        :itemMarginRightInPx="3"
+        :withPagination="true"
+        :withArrows="true"
+        :slidingAnimationTimeInMs="100"
+        :minDraggingDisplacementInPx="60"
+        :navigationButtonIcon="arrowIconComponent"
+      >
+        <Item :item="items[3]" />
+        <p class="app-demo-container-text">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+        <Item :item="items[6]" />
+        <h3 class="app-demo-container-text">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua.
+        </h3>
+        <Item :item="items[12]" />
+        <span class="app-demo-container-text">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua.
+        </span>
+        <Item :item="items[15]" />
+        <h1 class="app-demo-container-text">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </h1>
+      </Carousel>
+      <section class="app-demo-container-code">
+        <pre
+          class="hljs"
+          style="display: block; overflow-x: auto; padding: 0.5em; color: rgb(51, 51, 51); background: rgb(248, 248, 248);"
+        ><span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">Carousel</span>
+   <span class="hljs-attr" style="color: teal;">:itemsPerSlide</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"3"</span>
+   <span class="hljs-attr" style="color: teal;">:itemMarginRightInPx</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"3"</span>
+   <span class="hljs-attr" style="color: teal;">:withPagination</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"true"</span>
+   <span class="hljs-attr" style="color: teal;">:withArrows</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"false"</span>
+   <span class="hljs-attr" style="color: teal;">:slidingAnimationTimeInMs</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"100"</span>
+   <span class="hljs-attr" style="color: teal;">:minDraggingDisplacementInPx</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"60"</span>
+   <span class="hljs-attr" style="color: teal;">:navigationButtonIcon</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"arrowIconComponent"</span>
+&gt;</span>
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">Item</span> <span class="hljs-attr" style="color: teal;">:item</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"items[3]"</span> /&gt;</span>
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">p</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"app-demo-container-text"</span>&gt;</span>
+       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+       ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+       ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">p</span>&gt;</span>
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">Item</span> <span class="hljs-attr" style="color: teal;">:item</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"items[6]"</span> /&gt;</span>
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">h3</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"app-demo-container-text"</span>&gt;</span>
+       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+       ut labore et dolore magna aliqua.
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">h3</span>&gt;</span>
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">Item</span> <span class="hljs-attr" style="color: teal;">:item</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"items[12]"</span> /&gt;</span>
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">span</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"app-demo-container-text"</span>&gt;</span>
+       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+       ut labore et dolore magna aliqua.
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">span</span>&gt;</span>
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">Item</span> <span class="hljs-attr" style="color: teal;">:item</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"items[15]"</span> /&gt;</span>
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;<span class="hljs-name" style="color: navy; font-weight: 400;">h1</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: rgb(221, 17, 68);">"app-demo-container-text"</span>&gt;</span>
+       Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    <span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">h1</span>&gt;</span>
+<span class="hljs-tag" style="color: navy; font-weight: 400;">&lt;/<span class="hljs-name" style="color: navy; font-weight: 400;">Carousel</span>&gt;</span></pre>
+      </section>
+    </div>
   </div>
 </template>
 
@@ -97,3 +179,42 @@
     }
   }
 </script>
+
+<style lang="scss">
+  @import './src/styles/theme';
+
+  .app-demo {
+    &-container {
+      width: 80%;
+      margin: 0 auto 50px;
+      border-top: 1px solid $pagination-default-color;
+      border-bottom: 1px solid $pagination-default-color;
+
+      &-title {
+        text-align: center;
+        padding: 0 20px;
+      }
+
+      &-code {
+        margin-top: 30px;
+        padding: 0 15px;
+
+        pre {
+          border-left: 3px solid $pagination-default-color;
+        }
+      }
+
+      &-text {
+        text-align: center;
+        margin: auto 0;
+      }
+    }
+
+    @media only screen and (max-width: 980px) {
+      &-container {
+        width: 100%;
+        margin: 0 0 20px;
+      }
+    }
+  }
+</style>
diff --git a/demo/components/item.vue b/demo/components/item.vue
@@ -1,10 +1,8 @@
 <template>
   <article class="client-item">
-    <a href="#">
-      <img class="client-item__image" :src="item.image" :alt="item.description" />
-      <p class="client-item__description">{{ item.description }}</p>
-      <p class="client-item__price">{{ item.price }}</p>
-    </a>
+    <img class="client-item__image" :src="item.image" :alt="item.description" />
+    <p class="client-item__description">{{ item.description }}</p>
+    <p class="client-item__price">{{ item.price }}</p>
   </article>
 </template>
 

diff --git a/public/style.css b/public/style.css
@@ -23,20 +23,5 @@ body {
 
 .demo-title {
   text-align: center;
-}
-
-.eco-carousel {
-  width: 80%;
-  margin: 0 auto 70px;
-  border-right: 2px solid #85abb3;
-  border-left: 2px solid #85abb3;
-}
-
-@media only screen and (max-width: 980px) {
-  .eco-carousel {
-    margin: 0;
-    padding: 10px;
-    width: calc(100% - 20px);
-    border: none;
-  }
+  margin-bottom: 50px;
 }
diff --git a/src/components/carousel.vue b/src/components/carousel.vue
@@ -9,7 +9,7 @@
         itemMarginRightInPx,
         withArrows,
         slidingAnimationTimeInMs,
-        minDraggingDisplacement,
+        minDraggingDisplacementInPx,
         navigationButtonIcon
       }"
     >
@@ -51,7 +51,7 @@
     slidingAnimationTimeInMs!: number;
 
     @Prop({ default: 50 })
-    minDraggingDisplacement!: number;
+    minDraggingDisplacementInPx!: number;
 
     // Object & Arrays prop defaults must be returned from a function https://vuejs.org/v2/guide/components-props.html
     @Prop({ default: () => ChevronIcon })

diff --git a/src/components/mixins/sliding.ts b/src/components/mixins/sliding.ts
@@ -14,7 +14,7 @@ export class SlidingMixin extends Mixins(MoveSlideMixin) {
   itemsPerSlide!: number;
 
   @Prop({ required: true })
-  minDraggingDisplacement!: number;
+  minDraggingDisplacementInPx!: number;
 
   @Prop({ required: true })
   slidingAnimationTimeInMs!: number;
@@ -147,7 +147,6 @@ export class SlidingMixin extends Mixins(MoveSlideMixin) {
     this.preventXMovement(event);
     const timeNow = new Date().getTime();
     if (timeNow - this.timeBetweenScrollEventsInMs > TIME_BETWEEN_SCROLL_EVENTS_IN_MS) {
-      // TODO - Assess to append support vertical scroll event.deltaY < 0 event.deltaY > 0
       if (event.deltaX > 0) {
         this.currentSliderPositionInPx = -this.itemWidth + this.baseSliderPositionInPx;
         this.moveSlideOnScrollAnimation(SlideDirection.RIGHT);
@@ -168,7 +167,7 @@ export class SlidingMixin extends Mixins(MoveSlideMixin) {
   }
 
   isMouseDisplacementGreaterThanMin(): boolean {
-    return Math.abs(this.mouseDisplacementInDraggingInPx) > this.minDraggingDisplacement;
+    return Math.abs(this.mouseDisplacementInDraggingInPx) > this.minDraggingDisplacementInPx;
   }
 
   isSliderLimit(displacementDirection: SlideDirection): boolean {

diff --git a/src/components/pagination.vue b/src/components/pagination.vue
@@ -32,6 +32,7 @@
 
   .eco-pagination {
     text-align: center;
+    margin-top: 10px;
 
     &-container {
       list-style-type: none;