Merge branch 'next-38259/remove-minifier' into 'trunk'

NEXT-38259 - Fix image slider mobile behaviour See merge request shopware/6/product/platform!15010
pweyck · Oct 15, 2024 · d9ff6c7 · d9ff6c7
2 parents 9343fbd + 4ba4328
commit d9ff6c7
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 99 deletions.
diff --git a/changelog/_unreleased/2024-10-14-fix-image-slider-on-mobile.md b/changelog/_unreleased/2024-10-14-fix-image-slider-on-mobile.md
@@ -0,0 +1,9 @@
+---
+title: Fix image slider on mobile
+issue: NEXT-38259
+author: Marcel Brode
+author_email: [email protected]
+author_github: @Marcel Brode
+---
+# Storefront
+* Changed `src/Storefront/Resources/app/storefront/patches/tiny-slider+2.9.4.patch` to fix a touch navigation issue because of faulty minification in dependency
diff --git a/src/Storefront/Resources/app/storefront/patches/tiny-slider+2.9.4.patch b/src/Storefront/Resources/app/storefront/patches/tiny-slider+2.9.4.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/tiny-slider/dist/tiny-slider.js b/node_modules/tiny-slider/dist/tiny-slider.js
-index 1b5d912..d9c52b6 100644
+index 1b5d912..8a167a1 100644
 --- a/node_modules/tiny-slider/dist/tiny-slider.js
 +++ b/node_modules/tiny-slider/dist/tiny-slider.js
 @@ -563,7 +563,8 @@ var tns = function (options) {
@@ -92,3 +92,21 @@ index 1b5d912..d9c52b6 100644
          addClass(navCurrent, navActiveClass);
          navCurrentIndexCached = navCurrentIndex;
        }
+@@ -3483,14 +3492,14 @@ var tns = function (options) {
+
+       if (!horizontal || fixedWidth || autoWidth) {
+         x += dist;
+-        x += 'px';
++        var xUnit = x + 'px';
+       } else {
+         var percentageX = TRANSFORM ? dist * items * 100 / ((viewport + gutter) * slideCountNew) : dist * 100 / (viewport + gutter);
+         x += percentageX;
+-        x += '%';
++        var xUnit = x + '%';
+       }
+
+-      container.style[transformAttr] = transformPrefix + x + transformPostfix;
++      container.style[transformAttr] = transformPrefix + xUnit + transformPostfix;
+     }
+   }
+
diff --git a/src/Storefront/Resources/app/storefront/src/plugin/slider/base-slider.plugin.js b/src/Storefront/Resources/app/storefront/src/plugin/slider/base-slider.plugin.js
@@ -4,11 +4,6 @@ import ViewportDetection from 'src/helper/viewport-detection.helper';
 import SliderSettingsHelper from 'src/plugin/slider/helper/slider-settings.helper';
 
 export default class BaseSliderPlugin extends Plugin {
-    /**
-     * default slider options
-     *
-     * @type {*}
-     */
     static options = {
         initializedCls: 'js-slider-initialized',
         containerSelector: '[data-base-slider-container=true]',
@@ -40,21 +35,6 @@ export default class BaseSliderPlugin extends Plugin {
         }
     }
 
-    /**
-     * since the tns slider indexes internally with 0
-     * but the setting starts at 1 we have to subtract 1
-     * to have the correct index
-     *
-     * @private
-     */
-    _correctIndexSettings() {
-        this.options.slider.startIndex -= 1;
-        this.options.slider.startIndex = (this.options.slider.startIndex < 0) ? 0 : this.options.slider.startIndex;
-    }
-
-    /**
-     * destroys the slider
-     */
     destroy() {
         if (this._slider && typeof this._slider.destroy === 'function') {
             try {
@@ -68,19 +48,7 @@ export default class BaseSliderPlugin extends Plugin {
     }
 
     /**
-     * register all needed events
-     *
-     * @private
-     */
-    _registerEvents() {
-        if (this._slider) {
-            document.addEventListener('Viewport/hasChanged', () => this.rebuild(ViewportDetection.getCurrentViewport()));
-        }
-    }
-
-    /**
-     * reinitialise the slider
-     * with the options for our viewport
+     * Re-initialise the slider with options for the current viewport
      *
      * @param viewport
      * @param resetIndex
@@ -105,20 +73,32 @@ export default class BaseSliderPlugin extends Plugin {
     }
 
     /**
-     * returns the slider settings for the current viewport
-     *
-     * @param viewport
      * @private
      */
-    _getSettings(viewport) {
-        this._sliderSettings = SliderSettingsHelper.getViewportSettings(this.options.slider, viewport);
+    _registerEvents() {
+        if (this._slider) {
+            document.addEventListener('Viewport/hasChanged', () => this.rebuild(ViewportDetection.getCurrentViewport()));
+        }
     }
 
     /**
-     * returns the current slider index
+     * @private
+     */
+    _correctIndexSettings() {
+        this.options.slider.startIndex -= 1;
+        this.options.slider.startIndex = (this.options.slider.startIndex < 0) ? 0 : this.options.slider.startIndex;
+    }
+
+    /**
+     * Returns the slider settings for the current viewport
      *
-     * @return {*}
+     * @param {String} viewport
+     * @private
      */
+    _getSettings(viewport) {
+        this._sliderSettings = SliderSettingsHelper.getViewportSettings(this.options.slider, viewport);
+    }
+
     getCurrentSliderIndex() {
         if (!this._slider) {
             return;
@@ -132,20 +112,13 @@ export default class BaseSliderPlugin extends Plugin {
         return currentIndex - 1;
     }
 
-    /**
-     * returns the active slider item
-     *
-     * @return {*}
-     */
     getActiveSlideElement() {
         const info = this._slider.getInfo();
 
         return info.slideItems[info.index];
     }
 
     /**
-     * initialize the slider
-     *
      * @private
      */
     _initSlider() {
@@ -244,8 +217,6 @@ export default class BaseSliderPlugin extends Plugin {
     }
 
     /**
-     * returns the current index of the main slider
-     *
      * @return {number}
      * @private
      */

diff --git a/src/Storefront/Resources/app/storefront/src/plugin/slider/gallery-slider.plugin.js b/src/Storefront/Resources/app/storefront/src/plugin/slider/gallery-slider.plugin.js
@@ -7,12 +7,6 @@ import BaseSliderPlugin from 'src/plugin/slider/base-slider.plugin';
 import DomAccess from 'src/helper/dom-access.helper';
 
 export default class GallerySliderPlugin extends BaseSliderPlugin {
-
-    /**
-     * default slider options
-     *
-     * @type {*}
-     */
     static options = deepmerge(BaseSliderPlugin.options, {
         containerSelector: '[data-gallery-slider-container=true]',
         thumbnailsSelector: '[data-gallery-slider-thumbnails=true]',
@@ -70,23 +64,6 @@ export default class GallerySliderPlugin extends BaseSliderPlugin {
         }
     }
 
-    /**
-     * since the tns slider indexes internally with 0
-     * but the setting starts at 1 we have to subtract 1
-     * to have the correct index
-     *
-     * @private
-     */
-    _correctIndexSettings() {
-        super._correctIndexSettings();
-
-        this.options.thumbnailSlider.startIndex -= 1;
-        this.options.thumbnailSlider.startIndex = (this.options.thumbnailSlider.startIndex < 0) ? 0 : this.options.thumbnailSlider.startIndex;
-    }
-
-    /**
-     * destroys the slider
-     */
     destroy() {
         if (this._slider && typeof this._slider.destroy === 'function') {
             try {
@@ -108,8 +85,7 @@ export default class GallerySliderPlugin extends BaseSliderPlugin {
     }
 
     /**
-     * reinitialise the slider
-     * with the options for our viewport
+     * Re-initialise the slider with options for the current viewport
      *
      * @param viewport
      */
@@ -134,7 +110,17 @@ export default class GallerySliderPlugin extends BaseSliderPlugin {
     }
 
     /**
-     * returns the slider settings for the current viewport
+     * @private
+     */
+    _correctIndexSettings() {
+        super._correctIndexSettings();
+
+        this.options.thumbnailSlider.startIndex -= 1;
+        this.options.thumbnailSlider.startIndex = (this.options.thumbnailSlider.startIndex < 0) ? 0 : this.options.thumbnailSlider.startIndex;
+    }
+
+    /**
+     * Returns the slider settings for the current viewport
      *
      * @param viewport
      * @private
@@ -146,7 +132,7 @@ export default class GallerySliderPlugin extends BaseSliderPlugin {
     }
 
     /**
-     * sets the active dot depending on the slider index
+     * Sets the active dot depending on the current slider index
      *
      * @private
      */
@@ -156,21 +142,21 @@ export default class GallerySliderPlugin extends BaseSliderPlugin {
         Iterator.iterate(this._dots, dot => dot.classList.remove(this.options.dotActiveClass));
 
         const currentDot = this._dots[currentIndex];
-
-        if (!currentDot) return;
+        if (!currentDot) {
+            return;
+        }
 
         currentDot.classList.add(this.options.dotActiveClass);
     }
 
     /**
-     * initializes the dot navigation for the gallery slider
-     *
      * @private
      */
     _initDots() {
         this._dots = this.el.querySelectorAll('[' + this.options.navDotDataAttr + ']');
-
-        if (!this._dots) return;
+        if (!this._dots) {
+            return;
+        }
 
         Iterator.iterate(this._dots, dot => {
             dot.addEventListener('click', this._onDotClick.bind(this));
@@ -186,7 +172,7 @@ export default class GallerySliderPlugin extends BaseSliderPlugin {
     }
 
     /**
-     * navigates the gallery slider on dot click
+     * Navigfates to image on dot click
      *
      * @private
      */
@@ -197,8 +183,6 @@ export default class GallerySliderPlugin extends BaseSliderPlugin {
     }
 
     /**
-     * initialize the slider
-     *
      * @private
      */
     _initSlider() {
@@ -277,10 +261,10 @@ export default class GallerySliderPlugin extends BaseSliderPlugin {
     }
 
     /**
-     * navigate thumbnail slider automatically if the selected slider image is hidden
+     * Navigates through the thumbnail slider automatically, if the selected slider image is hidden
      *
      * @private
-     * */
+     */
     _navigateThumbnailSlider() {
         const thumbnailSlideInfo = this._thumbnailSlider && this._thumbnailSlider.getInfo();
 

diff --git a/src/Storefront/Resources/app/storefront/src/plugin/slider/helper/slider-settings.helper.js b/src/Storefront/Resources/app/storefront/src/plugin/slider/helper/slider-settings.helper.js
@@ -4,11 +4,10 @@ import Iterator from 'src/helper/iterator.helper';
 export default class SliderSettingsHelper {
 
     /**
-     * returns the merged object between the base options
-     * and the responsive viewport options of a slider
+     * Returns the merged object between the base options and the responsive viewport options of the slider
      *
-     * @param options
-     * @param viewport
+     * @param {Object} options
+     * @param {String} viewport
      */
     static getViewportSettings(options, viewport) {
         const settings = Object.assign({}, options);
@@ -26,11 +25,9 @@ export default class SliderSettingsHelper {
     }
 
     /**
-     * converts the responsive slider options keys
-     * from a viewport string into a viewport px value
+     * Converts the responsive slider options keys from a viewport string into a viewport px value
      *
-     * @param options
-     * @return {*}
+     * @param {Object} options
      */
     static prepareBreakpointPxValues(options) {
         Iterator.iterate(options.responsive, (viewportOptions,viewport) => {

diff --git a/src/Storefront/Resources/app/storefront/src/scss/component/_base-slider.scss b/src/Storefront/Resources/app/storefront/src/scss/component/_base-slider.scss
@@ -10,7 +10,6 @@ based on: https://github.com/ganlanyuan/tiny-slider
     position: relative;
     overflow: hidden;
 
-    // styling works both for auto generated markup by the tiny-slider and normal template markup
     .tns-nav,
     .base-slider-dots {
         position: absolute;
@@ -44,9 +43,9 @@ based on: https://github.com/ganlanyuan/tiny-slider
         }
     }
 
-    // moves navigation dots outside the slider item
+    // Moves navigation dots outside the slider item
     &.has-dots-outside {
-        padding-bottom: 35px;
+        padding-bottom: 40px;
 
         .tns-nav,
         .base-slider-dots {