@egjs/flicking-plugins 4.8.0-beta.1 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +42 -51
  2. package/css/all.css +2 -0
  3. package/css/arrow.css +2 -2
  4. package/css/pagination.css +5 -3
  5. package/declaration/Arrow.d.ts +106 -51
  6. package/declaration/AutoPlay.d.ts +104 -44
  7. package/declaration/Fade.d.ts +41 -16
  8. package/declaration/Parallax.d.ts +41 -16
  9. package/declaration/Perspective.d.ts +71 -28
  10. package/declaration/Sync.d.ts +93 -37
  11. package/declaration/const.d.ts +31 -31
  12. package/declaration/event.d.ts +5 -5
  13. package/declaration/index.d.ts +13 -10
  14. package/declaration/pagination/Pagination.d.ts +141 -61
  15. package/declaration/pagination/index.d.ts +3 -3
  16. package/declaration/pagination/renderer/BulletRenderer.d.ts +11 -11
  17. package/declaration/pagination/renderer/FractionRenderer.d.ts +9 -9
  18. package/declaration/pagination/renderer/Renderer.d.ts +19 -19
  19. package/declaration/pagination/renderer/ScrollBulletRenderer.d.ts +12 -12
  20. package/declaration/tsdoc-metadata.json +11 -0
  21. package/declaration/type.d.ts +9 -9
  22. package/declaration/utils.d.ts +3 -3
  23. package/dist/arrow.css +2 -2
  24. package/dist/flicking-plugins.css +23 -8
  25. package/dist/flicking-plugins.min.css +1 -1
  26. package/dist/pagination.css +21 -6
  27. package/dist/pagination.min.css +1 -1
  28. package/dist/plugins.esm.js +1029 -1591
  29. package/dist/plugins.esm.js.map +1 -1
  30. package/dist/plugins.js +1046 -1620
  31. package/dist/plugins.js.map +1 -1
  32. package/dist/plugins.min.js +1 -9
  33. package/dist/plugins.min.js.map +1 -1
  34. package/package.json +49 -105
  35. package/src/Arrow.ts +133 -82
  36. package/src/AutoPlay.ts +105 -35
  37. package/src/Fade.ts +31 -11
  38. package/src/Parallax.ts +31 -11
  39. package/src/Perspective.ts +69 -22
  40. package/src/Sync.ts +69 -25
  41. package/src/index.ts +9 -22
  42. package/src/pagination/Pagination.ts +163 -40
  43. package/src/pagination/index.ts +2 -6
  44. package/src/pagination/renderer/BulletRenderer.ts +1 -4
  45. package/src/pagination/renderer/FractionRenderer.ts +1 -3
  46. package/src/pagination/renderer/Renderer.ts +14 -13
  47. package/src/pagination/renderer/ScrollBulletRenderer.ts +5 -12
  48. package/CONTRIBUTING +0 -58
  49. package/rollup.config.dev.js +0 -17
  50. package/rollup.config.js +0 -33
  51. package/tsconfig.declaration.json +0 -10
  52. package/tsconfig.eslint.json +0 -8
  53. package/tsconfig.json +0 -17
  54. package/tsconfig.test.json +0 -21
package/declaration/tsdoc-metadata.json ADDED
@@ -0,0 +1,11 @@
1
+ // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
+ // It should be published with your NPM package. It should not be tracked by Git.
3
+ {
4
+ "tsdocVersion": "0.12",
5
+ "toolPackages": [
6
+ {
7
+ "packageName": "@microsoft/api-extractor",
8
+ "packageVersion": "7.55.2"
9
+ }
10
+ ]
11
+ }
package/declaration/type.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- interface ScrollContext {
2
- total: number;
3
- prevIndex: number;
4
- sliderIndex: number;
5
- direction: "NEXT" | "PREV";
6
- bullets: HTMLElement[];
7
- moveTo: (index: number) => void;
8
- }
9
- export default ScrollContext;
1
+ interface ScrollContext {
2
+ total: number;
3
+ prevIndex: number;
4
+ sliderIndex: number;
5
+ direction: "NEXT" | "PREV";
6
+ bullets: HTMLElement[];
7
+ moveTo: (index: number) => void;
8
+ }
9
+ export default ScrollContext;
package/declaration/utils.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export declare const addClass: (el: HTMLElement, className: string) => void;
2
- export declare const removeClass: (el: HTMLElement, className: string) => void;
3
- export declare const getElement: (selector: string, parent: HTMLElement, pluginName: string) => HTMLElement;
1
+ export declare const addClass: (el: HTMLElement, className: string) => void;
2
+ export declare const removeClass: (el: HTMLElement, className: string) => void;
3
+ export declare const getElement: (selector: string, parent: HTMLElement, pluginName: string) => HTMLElement;
package/dist/arrow.css CHANGED
@@ -108,11 +108,11 @@
108
108
  .flicking-arrow-prev.is-thin::before,
109
109
  .flicking-arrow-prev.is-thin::after,
110
110
  .flicking-arrow-next.is-thin::before,
111
- .flicking-arrow-next.is-thin::after{
111
+ .flicking-arrow-next.is-thin::after {
112
112
  height: 3px;
113
113
  }
114
114
 
115
115
  .flicking-arrow-prev.is-thin::after,
116
- .flicking-arrow-next.is-thin::after{
116
+ .flicking-arrow-next.is-thin::after {
117
117
  top: calc(50% - 2px);
118
118
  }
package/dist/flicking-plugins.css CHANGED
@@ -108,12 +108,12 @@
108
108
  .flicking-arrow-prev.is-thin::before,
109
109
  .flicking-arrow-prev.is-thin::after,
110
110
  .flicking-arrow-next.is-thin::before,
111
- .flicking-arrow-next.is-thin::after{
111
+ .flicking-arrow-next.is-thin::after {
112
112
  height: 3px;
113
113
  }
114
114
 
115
115
  .flicking-arrow-prev.is-thin::after,
116
- .flicking-arrow-next.is-thin::after{
116
+ .flicking-arrow-next.is-thin::after {
117
117
  top: calc(50% - 2px);
118
118
  }
119
119
  .flicking-pagination {
@@ -140,8 +140,10 @@
140
140
  }
141
141
 
142
142
  .flicking-pagination-scroll .flicking-pagination-slider {
143
- -webkit-transition: .2s transform;
144
- transition: .2s transform;
143
+ -webkit-transition: 0.2s -webkit-transform;
144
+ transition: 0.2s -webkit-transform;
145
+ transition: 0.2s transform;
146
+ transition: 0.2s transform, 0.2s -webkit-transform;
145
147
  }
146
148
  .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider,
147
149
  .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet {
@@ -163,8 +165,10 @@
163
165
  .flicking-pagination-scroll .flicking-pagination-bullet {
164
166
  vertical-align: middle;
165
167
  position: relative;
166
- -webkit-transition: .2s transform;
167
- transition: .2s transform;
168
+ -webkit-transition: 0.2s -webkit-transform;
169
+ transition: 0.2s -webkit-transform;
170
+ transition: 0.2s transform;
171
+ transition: 0.2s transform, 0.2s -webkit-transform;
168
172
  }
169
173
 
170
174
  .flicking-pagination-bullet-active {
@@ -174,8 +178,19 @@
174
178
  .flicking-pagination-scroll .flicking-pagination-bullet {
175
179
  vertical-align: middle;
176
180
  position: relative;
177
- -webkit-transition: .2s transform,.2s left;
178
- transition: .2s transform,.2s left;
181
+ -webkit-transition:
182
+ 0.2s left,
183
+ 0.2s -webkit-transform;
184
+ transition:
185
+ 0.2s left,
186
+ 0.2s -webkit-transform;
187
+ transition:
188
+ 0.2s transform,
189
+ 0.2s left;
190
+ transition:
191
+ 0.2s transform,
192
+ 0.2s left,
193
+ 0.2s -webkit-transform;
179
194
  -webkit-transform: scale(0);
180
195
  -ms-transform: scale(0);
181
196
  transform: scale(0);
package/dist/flicking-plugins.min.css CHANGED
@@ -1 +1 @@
1
- .flicking-arrow-next,.flicking-arrow-prev{position:absolute;top:50%;width:64px;height:64px;cursor:pointer;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2}.flicking-arrow-next.is-circle,.flicking-arrow-prev.is-circle{background-color:#f2a65e;border-radius:50%}.flicking-arrow-disabled.is-circle{background-color:rgb(10 10 10 / 10%)}.flicking-arrow-next.is-circle::after,.flicking-arrow-next.is-circle::before,.flicking-arrow-prev.is-circle::after,.flicking-arrow-prev.is-circle::before{background-color:#fff}.flicking-arrow-prev{left:10px}.flicking-arrow-next{right:10px}.flicking-arrow-prev.is-outside{left:-74px}.flicking-arrow-next.is-outside{right:-74px}.flicking-arrow-next::after,.flicking-arrow-next::before,.flicking-arrow-prev::after,.flicking-arrow-prev::before{content:"";width:24px;height:6px;position:absolute;background-color:#f2a65e}.flicking-arrow-prev::before{top:50%;left:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-prev::after{top:calc(50% - 4px);left:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-next::before{top:50%;right:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-next::after{top:calc(50% - 4px);right:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-disabled{cursor:default}.flicking-arrow-disabled::after,.flicking-arrow-disabled::before{background-color:#e6e6e6}.flicking-arrow-next.is-thin::after,.flicking-arrow-next.is-thin::before,.flicking-arrow-prev.is-thin::after,.flicking-arrow-prev.is-thin::before{height:3px}.flicking-arrow-next.is-thin::after,.flicking-arrow-prev.is-thin::after{top:calc(50% - 2px)}.flicking-pagination{position:absolute;left:0;bottom:10px;width:100%;text-align:center;z-index:2}.flicking-pagination-bullets,.flicking-pagination-scroll{font-size:0}.flicking-pagination-scroll{left:50%;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);white-space:nowrap;overflow:hidden}.flicking-pagination-scroll .flicking-pagination-slider{-webkit-transition:.2s transform;transition:.2s transform}.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet,.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider{-webkit-transition:none;transition:none}.flicking-pagination-bullet{display:inline-block;width:8px;height:8px;margin:0 4px;border-radius:50%;background-color:rgb(10 10 10 / 10%);cursor:pointer;font-size:1rem}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s transform;transition:.2s transform}.flicking-pagination-bullet-active{background-color:#f2a65e}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s transform,.2s left;transition:.2s transform,.2s left;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.flicking-pagination-scroll .flicking-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.flicking-pagination-scroll .flicking-pagination-bullet-next,.flicking-pagination-scroll .flicking-pagination-bullet-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.flicking-pagination-scroll .flicking-pagination-bullet-next2,.flicking-pagination-scroll .flicking-pagination-bullet-prev2{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}
1
+ .flicking-arrow-next,.flicking-arrow-prev{position:absolute;top:50%;width:64px;height:64px;cursor:pointer;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2}.flicking-arrow-next.is-circle,.flicking-arrow-prev.is-circle{background-color:#f2a65e;border-radius:50%}.flicking-arrow-disabled.is-circle{background-color:rgb(10 10 10 / 10%)}.flicking-arrow-next.is-circle::after,.flicking-arrow-next.is-circle::before,.flicking-arrow-prev.is-circle::after,.flicking-arrow-prev.is-circle::before{background-color:#fff}.flicking-arrow-prev{left:10px}.flicking-arrow-next{right:10px}.flicking-arrow-prev.is-outside{left:-74px}.flicking-arrow-next.is-outside{right:-74px}.flicking-arrow-next::after,.flicking-arrow-next::before,.flicking-arrow-prev::after,.flicking-arrow-prev::before{content:"";width:24px;height:6px;position:absolute;background-color:#f2a65e}.flicking-arrow-prev::before{top:50%;left:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-prev::after{top:calc(50% - 4px);left:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-next::before{top:50%;right:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-next::after{top:calc(50% - 4px);right:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-disabled{cursor:default}.flicking-arrow-disabled::after,.flicking-arrow-disabled::before{background-color:#e6e6e6}.flicking-arrow-next.is-thin::after,.flicking-arrow-next.is-thin::before,.flicking-arrow-prev.is-thin::after,.flicking-arrow-prev.is-thin::before{height:3px}.flicking-arrow-next.is-thin::after,.flicking-arrow-prev.is-thin::after{top:calc(50% - 2px)}.flicking-pagination{position:absolute;left:0;bottom:10px;width:100%;text-align:center;z-index:2}.flicking-pagination-bullets,.flicking-pagination-scroll{font-size:0}.flicking-pagination-scroll{left:50%;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);white-space:nowrap;overflow:hidden}.flicking-pagination-scroll .flicking-pagination-slider{-webkit-transition:.2s -webkit-transform;transition:.2s -webkit-transform;transition:.2s transform;transition:.2s transform,.2s -webkit-transform}.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet,.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider{-webkit-transition:none;transition:none}.flicking-pagination-bullet{display:inline-block;width:8px;height:8px;margin:0 4px;border-radius:50%;background-color:rgb(10 10 10 / 10%);cursor:pointer;font-size:1rem}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s -webkit-transform;transition:.2s -webkit-transform;transition:.2s transform;transition:.2s transform,.2s -webkit-transform}.flicking-pagination-bullet-active{background-color:#f2a65e}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.flicking-pagination-scroll .flicking-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.flicking-pagination-scroll .flicking-pagination-bullet-next,.flicking-pagination-scroll .flicking-pagination-bullet-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.flicking-pagination-scroll .flicking-pagination-bullet-next2,.flicking-pagination-scroll .flicking-pagination-bullet-prev2{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}
package/dist/pagination.css CHANGED
@@ -22,8 +22,10 @@
22
22
  }
23
23
 
24
24
  .flicking-pagination-scroll .flicking-pagination-slider {
25
- -webkit-transition: .2s transform;
26
- transition: .2s transform;
25
+ -webkit-transition: 0.2s -webkit-transform;
26
+ transition: 0.2s -webkit-transform;
27
+ transition: 0.2s transform;
28
+ transition: 0.2s transform, 0.2s -webkit-transform;
27
29
  }
28
30
  .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider,
29
31
  .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet {
@@ -45,8 +47,10 @@
45
47
  .flicking-pagination-scroll .flicking-pagination-bullet {
46
48
  vertical-align: middle;
47
49
  position: relative;
48
- -webkit-transition: .2s transform;
49
- transition: .2s transform;
50
+ -webkit-transition: 0.2s -webkit-transform;
51
+ transition: 0.2s -webkit-transform;
52
+ transition: 0.2s transform;
53
+ transition: 0.2s transform, 0.2s -webkit-transform;
50
54
  }
51
55
 
52
56
  .flicking-pagination-bullet-active {
@@ -56,8 +60,19 @@
56
60
  .flicking-pagination-scroll .flicking-pagination-bullet {
57
61
  vertical-align: middle;
58
62
  position: relative;
59
- -webkit-transition: .2s transform,.2s left;
60
- transition: .2s transform,.2s left;
63
+ -webkit-transition:
64
+ 0.2s left,
65
+ 0.2s -webkit-transform;
66
+ transition:
67
+ 0.2s left,
68
+ 0.2s -webkit-transform;
69
+ transition:
70
+ 0.2s transform,
71
+ 0.2s left;
72
+ transition:
73
+ 0.2s transform,
74
+ 0.2s left,
75
+ 0.2s -webkit-transform;
61
76
  -webkit-transform: scale(0);
62
77
  -ms-transform: scale(0);
63
78
  transform: scale(0);
package/dist/pagination.min.css CHANGED
@@ -1 +1 @@
1
- .flicking-pagination{position:absolute;left:0;bottom:10px;width:100%;text-align:center;z-index:2}.flicking-pagination-bullets,.flicking-pagination-scroll{font-size:0}.flicking-pagination-scroll{left:50%;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);white-space:nowrap;overflow:hidden}.flicking-pagination-scroll .flicking-pagination-slider{-webkit-transition:.2s transform;transition:.2s transform}.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet,.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider{-webkit-transition:none;transition:none}.flicking-pagination-bullet{display:inline-block;width:8px;height:8px;margin:0 4px;border-radius:50%;background-color:rgb(10 10 10 / 10%);cursor:pointer;font-size:1rem}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s transform;transition:.2s transform}.flicking-pagination-bullet-active{background-color:#f2a65e}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s transform,.2s left;transition:.2s transform,.2s left;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.flicking-pagination-scroll .flicking-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.flicking-pagination-scroll .flicking-pagination-bullet-next,.flicking-pagination-scroll .flicking-pagination-bullet-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.flicking-pagination-scroll .flicking-pagination-bullet-next2,.flicking-pagination-scroll .flicking-pagination-bullet-prev2{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}
1
+ .flicking-pagination{position:absolute;left:0;bottom:10px;width:100%;text-align:center;z-index:2}.flicking-pagination-bullets,.flicking-pagination-scroll{font-size:0}.flicking-pagination-scroll{left:50%;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);white-space:nowrap;overflow:hidden}.flicking-pagination-scroll .flicking-pagination-slider{-webkit-transition:.2s -webkit-transform;transition:.2s -webkit-transform;transition:.2s transform;transition:.2s transform,.2s -webkit-transform}.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet,.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider{-webkit-transition:none;transition:none}.flicking-pagination-bullet{display:inline-block;width:8px;height:8px;margin:0 4px;border-radius:50%;background-color:rgb(10 10 10 / 10%);cursor:pointer;font-size:1rem}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s -webkit-transform;transition:.2s -webkit-transform;transition:.2s transform;transition:.2s transform,.2s -webkit-transform}.flicking-pagination-bullet-active{background-color:#f2a65e}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.flicking-pagination-scroll .flicking-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.flicking-pagination-scroll .flicking-pagination-bullet-next,.flicking-pagination-scroll .flicking-pagination-bullet-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.flicking-pagination-scroll .flicking-pagination-bullet-next2,.flicking-pagination-scroll .flicking-pagination-bullet-prev2{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}