fix drawer-slider carousel function && convert to pointer logic (fixes #9366 AND #9638) (#9711)

* fix drawer-slider carousel function && convert to pointer logic

* refactor conditional logic

* get rid of absolute value

website/client/components/inventory/stable/index.vue

@@ -186,6 +186,7 @@
           slot="drawer-slider",
           :itemWidth=94,
           :itemMargin=24,
+          :itemType="selectedDrawerTab"
         )
           template(slot="item", slot-scope="context")
             foodItem(

website/client/components/shops/market/index.vue

@@ -194,6 +194,7 @@
           slot="drawer-slider",
           :itemWidth=94,
           :itemMargin=24,
+          :itemType="selectedDrawerTab"
         )
           template(slot="item", slot-scope="ctx")
             item(

website/client/components/ui/drawerSlider.vue

@@ -4,13 +4,13 @@
   )
     div.slider-button-area.left-button(
       v-if="scrollButtonsVisible",
-      @mousedown.left="lastPage"
+      @mousedown.left="shiftLeft"
     )
       a.slider-button
         .svg-icon(v-html="icons.previous")
     div.slider-button-area.right-button(
       v-if="scrollButtonsVisible",
-      @mousedown.left="nextPage"
+      @mousedown.left="shiftRight"
     )
       a.slider-button
         .svg-icon(v-html="icons.next")
@@ -18,8 +18,11 @@
     // 120 = width of the left/right buttons
     div.sliding-content(v-resize="500", @resized="currentWidth = $event.width - 120")
       .items.items-one-line
-        template(v-for="item in pages[currentPage]")
-          div.vertical-divider(v-if="item.ofNextPage")
+        template(v-for="item in showItems")
+          div.vertical-divider(
+            v-if="shouldAddVerticalLine(item)"
+            v-bind:style="dividerMargins"
+          )
 
           slot(
             name="item",
@@ -80,12 +83,13 @@
   }
 
   .sliding-content .items {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
     padding-top: 10px;
     margin-left: $buttonAreaWidth+ px;
-
-    & > div:last-of-type {
-      margin-right: $buttonAreaWidth + 20px;
-    }
+    margin-right: $buttonAreaWidth+ px;
   }
 
   .vertical-divider {
@@ -102,8 +106,6 @@
   import next from 'assets/svg/next.svg';
   import ResizeDirective from 'client/directives/resize.directive';
 
-  import _chunk from 'lodash/chunk';
-
   export default {
     directives: {
       resize: ResizeDirective,
@@ -115,45 +117,58 @@
           next,
         }),
         currentWidth: 0,
-        currentPage: 0,
+        pointer: 0,
       };
     },
     computed: {
-      pages () {
-        return _chunk(this.items, this.itemsPerPage() - 1).map((content, index, array) => {
-          let resultData = [...content];
+      showItems () {
+        let items = this.items;
+        let pointer = this.pointer;
+        let itemsPerPage = this.itemsPerPage();
+        let firstSlice = items.slice(pointer, pointer + itemsPerPage);
 
-          if (array[index + 1]) {
-            resultData.push({
-              ...array[index + 1][0],
-              ofNextPage: true,
-            });
-          }
+        if (firstSlice.length === itemsPerPage) {
+          return firstSlice;
+        } else {
+          let getRemainderItems = itemsPerPage - firstSlice.length;
+          let secondSlice = items.slice(0, getRemainderItems);
 
-          return resultData;
-        });
+          return firstSlice.concat(secondSlice);
+        }
+      },
+      dividerMargins () {
+        return {
+          marginLeft: `${-this.itemMargin / 2}px`,
+          marginRight: `${this.itemMargin / 2}px`,
+        };
+      },
+    },
+    watch: {
+      itemType () {
+        this.pointer = 0;
       },
     },
     methods: {
-      lastPage () {
-        if (this.currentPage > 0) {
-          this.currentPage--;
+      shiftLeft () {
+        if (this.pointer < this.items.length - 1) {
+          this.pointer++;
         } else {
-          this.currentPage = this.pages.length - 1;
+          this.pointer = 0;
         }
       },
-
-      nextPage () {
-        if (this.currentPage < this.pages.length - 1) {
-          this.currentPage++;
+      shiftRight () {
+        if (this.pointer > 0) {
+          this.pointer--;
         } else {
-          this.currentPage = 0;
+          this.pointer = this.items.length - 1;
         }
       },
-
       itemsPerPage () {
         return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
       },
+      shouldAddVerticalLine (item) {
+        return this.items[this.itemsPerPage() - 1] === item && this.pointer !== 5;
+      },
     },
     props: {
       scrollButtonsVisible: {
@@ -163,6 +178,9 @@
       items: {
         type: Array,
       },
+      itemType: {
+        type: Number,
+      },
       itemWidth: {
         type: Number,
       },