Browse code

Refactor and rewrite as contao bundle

Benjamin Roth authored on04/11/2022 22:32:32
Showing1 changed files
1 1
deleted file mode 100644
... ...
@@ -1,108 +0,0 @@
1
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
-import $ from '../../utils/dom';
4
-import { bindModuleMethods } from '../../utils/utils';
5
-var Coverflow = {
6
-  setTranslate: function setTranslate() {
7
-    var swiper = this;
8
-    var swiperWidth = swiper.width,
9
-        swiperHeight = swiper.height,
10
-        slides = swiper.slides,
11
-        slidesSizesGrid = swiper.slidesSizesGrid;
12
-    var params = swiper.params.coverflowEffect;
13
-    var isHorizontal = swiper.isHorizontal();
14
-    var transform = swiper.translate;
15
-    var center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
16
-    var rotate = isHorizontal ? params.rotate : -params.rotate;
17
-    var translate = params.depth; // Each slide offset from center
18
-
19
-    for (var i = 0, length = slides.length; i < length; i += 1) {
20
-      var $slideEl = slides.eq(i);
21
-      var slideSize = slidesSizesGrid[i];
22
-      var slideOffset = $slideEl[0].swiperSlideOffset;
23
-      var offsetMultiplier = (center - slideOffset - slideSize / 2) / slideSize * params.modifier;
24
-      var rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
25
-      var rotateX = isHorizontal ? 0 : rotate * offsetMultiplier; // var rotateZ = 0
26
-
27
-      var translateZ = -translate * Math.abs(offsetMultiplier);
28
-      var stretch = params.stretch; // Allow percentage to make a relative stretch for responsive sliders
29
-
30
-      if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
31
-        stretch = parseFloat(params.stretch) / 100 * slideSize;
32
-      }
33
-
34
-      var translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
35
-      var translateX = isHorizontal ? stretch * offsetMultiplier : 0;
36
-      var scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier); // Fix for ultra small values
37
-
38
-      if (Math.abs(translateX) < 0.001) translateX = 0;
39
-      if (Math.abs(translateY) < 0.001) translateY = 0;
40
-      if (Math.abs(translateZ) < 0.001) translateZ = 0;
41
-      if (Math.abs(rotateY) < 0.001) rotateY = 0;
42
-      if (Math.abs(rotateX) < 0.001) rotateX = 0;
43
-      if (Math.abs(scale) < 0.001) scale = 0;
44
-      var slideTransform = "translate3d(" + translateX + "px," + translateY + "px," + translateZ + "px)  rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg) scale(" + scale + ")";
45
-      $slideEl.transform(slideTransform);
46
-      $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
47
-
48
-      if (params.slideShadows) {
49
-        // Set shadows
50
-        var $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
51
-        var $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
52
-
53
-        if ($shadowBeforeEl.length === 0) {
54
-          $shadowBeforeEl = $("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'left' : 'top') + "\"></div>");
55
-          $slideEl.append($shadowBeforeEl);
56
-        }
57
-
58
-        if ($shadowAfterEl.length === 0) {
59
-          $shadowAfterEl = $("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'right' : 'bottom') + "\"></div>");
60
-          $slideEl.append($shadowAfterEl);
61
-        }
62
-
63
-        if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
64
-        if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
65
-      }
66
-    }
67
-  },
68
-  setTransition: function setTransition(duration) {
69
-    var swiper = this;
70
-    swiper.slides.transition(duration).find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').transition(duration);
71
-  }
72
-};
73
-export default {
74
-  name: 'effect-coverflow',
75
-  params: {
76
-    coverflowEffect: {
77
-      rotate: 50,
78
-      stretch: 0,
79
-      depth: 100,
80
-      scale: 1,
81
-      modifier: 1,
82
-      slideShadows: true
83
-    }
84
-  },
85
-  create: function create() {
86
-    var swiper = this;
87
-    bindModuleMethods(swiper, {
88
-      coverflowEffect: _extends({}, Coverflow)
89
-    });
90
-  },
91
-  on: {
92
-    beforeInit: function beforeInit(swiper) {
93
-      if (swiper.params.effect !== 'coverflow') return;
94
-      swiper.classNames.push(swiper.params.containerModifierClass + "coverflow");
95
-      swiper.classNames.push(swiper.params.containerModifierClass + "3d");
96
-      swiper.params.watchSlidesProgress = true;
97
-      swiper.originalParams.watchSlidesProgress = true;
98
-    },
99
-    setTranslate: function setTranslate(swiper) {
100
-      if (swiper.params.effect !== 'coverflow') return;
101
-      swiper.coverflowEffect.setTranslate();
102
-    },
103
-    setTransition: function setTransition(swiper, duration) {
104
-      if (swiper.params.effect !== 'coverflow') return;
105
-      swiper.coverflowEffect.setTransition(duration);
106
-    }
107
-  }
108
-};
109 0
\ No newline at end of file
Browse code

swiper.js version 6.4.5

Benjamin Roth authored on17/01/2021 16:24:34
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,108 @@
1
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
3
+import $ from '../../utils/dom';
4
+import { bindModuleMethods } from '../../utils/utils';
5
+var Coverflow = {
6
+  setTranslate: function setTranslate() {
7
+    var swiper = this;
8
+    var swiperWidth = swiper.width,
9
+        swiperHeight = swiper.height,
10
+        slides = swiper.slides,
11
+        slidesSizesGrid = swiper.slidesSizesGrid;
12
+    var params = swiper.params.coverflowEffect;
13
+    var isHorizontal = swiper.isHorizontal();
14
+    var transform = swiper.translate;
15
+    var center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
16
+    var rotate = isHorizontal ? params.rotate : -params.rotate;
17
+    var translate = params.depth; // Each slide offset from center
18
+
19
+    for (var i = 0, length = slides.length; i < length; i += 1) {
20
+      var $slideEl = slides.eq(i);
21
+      var slideSize = slidesSizesGrid[i];
22
+      var slideOffset = $slideEl[0].swiperSlideOffset;
23
+      var offsetMultiplier = (center - slideOffset - slideSize / 2) / slideSize * params.modifier;
24
+      var rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
25
+      var rotateX = isHorizontal ? 0 : rotate * offsetMultiplier; // var rotateZ = 0
26
+
27
+      var translateZ = -translate * Math.abs(offsetMultiplier);
28
+      var stretch = params.stretch; // Allow percentage to make a relative stretch for responsive sliders
29
+
30
+      if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
31
+        stretch = parseFloat(params.stretch) / 100 * slideSize;
32
+      }
33
+
34
+      var translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
35
+      var translateX = isHorizontal ? stretch * offsetMultiplier : 0;
36
+      var scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier); // Fix for ultra small values
37
+
38
+      if (Math.abs(translateX) < 0.001) translateX = 0;
39
+      if (Math.abs(translateY) < 0.001) translateY = 0;
40
+      if (Math.abs(translateZ) < 0.001) translateZ = 0;
41
+      if (Math.abs(rotateY) < 0.001) rotateY = 0;
42
+      if (Math.abs(rotateX) < 0.001) rotateX = 0;
43
+      if (Math.abs(scale) < 0.001) scale = 0;
44
+      var slideTransform = "translate3d(" + translateX + "px," + translateY + "px," + translateZ + "px)  rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg) scale(" + scale + ")";
45
+      $slideEl.transform(slideTransform);
46
+      $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
47
+
48
+      if (params.slideShadows) {
49
+        // Set shadows
50
+        var $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
51
+        var $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
52
+
53
+        if ($shadowBeforeEl.length === 0) {
54
+          $shadowBeforeEl = $("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'left' : 'top') + "\"></div>");
55
+          $slideEl.append($shadowBeforeEl);
56
+        }
57
+
58
+        if ($shadowAfterEl.length === 0) {
59
+          $shadowAfterEl = $("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'right' : 'bottom') + "\"></div>");
60
+          $slideEl.append($shadowAfterEl);
61
+        }
62
+
63
+        if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
64
+        if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
65
+      }
66
+    }
67
+  },
68
+  setTransition: function setTransition(duration) {
69
+    var swiper = this;
70
+    swiper.slides.transition(duration).find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').transition(duration);
71
+  }
72
+};
73
+export default {
74
+  name: 'effect-coverflow',
75
+  params: {
76
+    coverflowEffect: {
77
+      rotate: 50,
78
+      stretch: 0,
79
+      depth: 100,
80
+      scale: 1,
81
+      modifier: 1,
82
+      slideShadows: true
83
+    }
84
+  },
85
+  create: function create() {
86
+    var swiper = this;
87
+    bindModuleMethods(swiper, {
88
+      coverflowEffect: _extends({}, Coverflow)
89
+    });
90
+  },
91
+  on: {
92
+    beforeInit: function beforeInit(swiper) {
93
+      if (swiper.params.effect !== 'coverflow') return;
94
+      swiper.classNames.push(swiper.params.containerModifierClass + "coverflow");
95
+      swiper.classNames.push(swiper.params.containerModifierClass + "3d");
96
+      swiper.params.watchSlidesProgress = true;
97
+      swiper.originalParams.watchSlidesProgress = true;
98
+    },
99
+    setTranslate: function setTranslate(swiper) {
100
+      if (swiper.params.effect !== 'coverflow') return;
101
+      swiper.coverflowEffect.setTranslate();
102
+    },
103
+    setTransition: function setTransition(swiper, duration) {
104
+      if (swiper.params.effect !== 'coverflow') return;
105
+      swiper.coverflowEffect.setTransition(duration);
106
+    }
107
+  }
108
+};
0 109
\ No newline at end of file