uikit 3.11.1-dev.fbcf9eec9 → 3.11.2-dev.31cd2ba38

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 (62) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/css/uikit-core-rtl.css +1 -1
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +1 -1
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +1 -1
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +1 -1
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +1 -1
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +1 -1
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +37 -41
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +32 -25
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +2 -2
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +32 -25
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +2 -3
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +1 -1
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +224 -195
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +287 -263
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/api/state.js +4 -4
  44. package/src/js/components/parallax.js +5 -16
  45. package/src/js/components/slider.js +1 -1
  46. package/src/js/components/sortable.js +1 -2
  47. package/src/js/core/core.js +2 -2
  48. package/src/js/core/drop.js +1 -1
  49. package/src/js/core/height-viewport.js +2 -2
  50. package/src/js/core/img.js +68 -92
  51. package/src/js/core/navbar.js +6 -2
  52. package/src/js/core/sticky.js +82 -50
  53. package/src/js/mixin/parallax.js +32 -21
  54. package/src/js/util/dimensions.js +28 -12
  55. package/src/js/util/fastdom.js +2 -2
  56. package/src/js/util/options.js +5 -5
  57. package/src/js/util/viewport.js +7 -3
  58. package/tests/image.html +22 -38
  59. package/tests/images/test.avif +0 -0
  60. package/tests/images/test.webp +0 -0
  61. package/tests/sticky-parallax.html +44 -41
  62. package/tests/sticky.html +56 -24
package/tests/sticky.html CHANGED
@@ -8,54 +8,80 @@
8
8
  <script src="js/test.js"></script>
9
9
  <style>
10
10
 
11
- #viewport { border: 1px dashed rgba(0,0,0,0.2); }
11
+ .viewport { border: 1px dashed rgba(0,0,0,0.2); }
12
12
 
13
13
  </style>
14
14
  </head>
15
15
 
16
16
  <body>
17
17
 
18
- <div class="uk-container" style="height: 3500px;">
18
+ <div class="uk-container">
19
19
 
20
20
  <h1>Sticky</h1>
21
21
 
22
- <div id="viewport" class="uk-margin">
23
- <div class="uk-grid uk-child-width-1-6" uk-height-viewport="offset-top: true">
24
- <div>
22
+ <div class="uk-grid">
23
+ <div class="uk-width-5-6">
24
+ <div class="viewport uk-margin">
25
+ <div class="uk-grid uk-child-width-1-6" uk-height-viewport="offset-top: true">
26
+ <div>
25
27
 
26
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="offset: 50; bottom: #viewport">Stick to container; 50px offset</div>
28
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="offset: 50; bottom: !.viewport">Stick to container; 50px offset</div>
27
29
 
28
- </div>
29
- <div>
30
+ </div>
31
+ <div>
30
32
 
31
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 50vh; target-offset: 10">Sticky after 50vh; Scroll up if initially above paragraph below</div>
33
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 50vh; target-offset: 10">Sticky after 50vh; Scroll up if initially above paragraph below</div>
32
34
 
33
- </div>
34
- <div>
35
+ </div>
36
+ <div>
35
37
 
36
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: #viewport; animation: uk-animation-slide-top">Stick below container; animation</div>
38
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: !.viewport; animation: uk-animation-slide-top">Stick below container; animation</div>
37
39
 
38
- </div>
39
- <div>
40
+ </div>
41
+ <div>
40
42
 
41
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: #hash">Stick until next paragraph</div>
43
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: #hash">Stick until next paragraph</div>
42
44
 
43
- </div>
44
- <div>
45
+ </div>
46
+ <div>
45
47
 
46
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="show-on-up: true; animation: uk-animation-slide-top">Sticky on scroll up; animation</div>
48
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="show-on-up: true; animation: uk-animation-slide-top">Sticky on scroll up; animation</div>
47
49
 
50
+ </div>
51
+ <div>
52
+
53
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 300; animation: uk-animation-slide-top; media: 640">Sticky after 300px scrolling; @media 640px</div>
54
+
55
+ </div>
56
+ </div>
48
57
  </div>
49
- <div>
50
58
 
51
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 300; animation: uk-animation-slide-top; media: 640">Sticky after 300px scrolling; @media 640px</div>
59
+ <p id="hash" class="uk-margin-large">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
60
+
61
+ <div class="viewport uk-margin">
62
+ <div class="uk-grid uk-child-width-1-6" uk-height-viewport>
63
+ <div>
52
64
 
65
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="position: bottom; bottom: !.viewport">Sticky bottom</div>
66
+
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ </div>
72
+ <div class="uk-width-1-6">
73
+ <div class="viewport" style="min-height: 200vh;">
74
+ <div>
75
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: !.viewport">
76
+ <p>Oversized Content</p>
77
+
78
+ <p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
79
+ </div>
80
+ </div>
53
81
  </div>
54
82
  </div>
55
83
  </div>
56
84
 
57
- <p id="hash" class="uk-margin-large">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
58
-
59
85
  <h2>JavaScript Options</h2>
60
86
 
61
87
  <div class="uk-overflow-auto">
@@ -69,11 +95,17 @@
69
95
  </tr>
70
96
  </thead>
71
97
  <tbody>
98
+ <tr>
99
+ <td><code>position</code></td>
100
+ <td>`top`|`bottom`|`auto`</td>
101
+ <td>`top`</td>
102
+ <td>The position the element should be stuck to. With position `auto` the element sticks to the top of the viewport if it's smaller than the viewport, otherwise it sticks to the top.</td>
103
+ </tr>
72
104
  <tr>
73
105
  <td><code>top</code></td>
74
106
  <td>Number|Viewport Height|CSS Selector</td>
75
107
  <td>0</td>
76
- <td>The top offset from where the element should be stick.</td>
108
+ <td>The top offset from where the element should stick.</td>
77
109
  </tr>
78
110
  <tr>
79
111
  <td><code>bottom</code></td>
@@ -85,7 +117,7 @@
85
117
  <td><code>offset</code></td>
86
118
  <td>String</td>
87
119
  <td>0</td>
88
- <td>The offset the Sticky should be fixed to.</td>
120
+ <td>The offset the Sticky should be fixed to. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
89
121
  </tr>
90
122
  <tr>
91
123
  <td><code>animation</code></td>