uikit 3.13.8-dev.fd15ccb29 → 3.13.10-dev.4de12886e

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 (73) hide show
  1. package/CHANGELOG.md +33 -3
  2. package/build/build.js +4 -1
  3. package/dist/css/uikit-core-rtl.css +11 -2
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +11 -2
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +11 -2
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +11 -2
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +7 -3
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +7 -3
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +6 -2
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +6 -2
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +6 -2
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +2 -2
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +4 -2
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +203 -134
  38. package/dist/js/uikit-core.min.js +1 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +209 -136
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +1 -1
  44. package/src/js/components/sortable.js +2 -3
  45. package/src/js/core/drop.js +19 -12
  46. package/src/js/core/height-match.js +1 -2
  47. package/src/js/core/margin.js +1 -1
  48. package/src/js/core/navbar.js +17 -7
  49. package/src/js/core/scrollspy-nav.js +4 -9
  50. package/src/js/core/sticky.js +26 -13
  51. package/src/js/core/toggle.js +8 -8
  52. package/src/js/mixin/modal.js +6 -2
  53. package/src/js/mixin/parallax.js +5 -1
  54. package/src/js/mixin/position.js +2 -0
  55. package/src/js/uikit-core.js +0 -4
  56. package/src/js/util/lang.js +0 -4
  57. package/src/js/util/position.js +80 -24
  58. package/src/js/util/viewport.js +42 -22
  59. package/src/less/components/drop.less +0 -1
  60. package/src/less/components/navbar.less +11 -0
  61. package/src/less/components/search.less +2 -0
  62. package/src/less/theme/search.less +6 -0
  63. package/src/scss/components/drop.scss +0 -1
  64. package/src/scss/components/navbar.scss +11 -0
  65. package/src/scss/components/search.scss +2 -0
  66. package/src/scss/mixins-theme.scss +1 -0
  67. package/src/scss/mixins.scss +1 -0
  68. package/src/scss/theme/search.scss +6 -0
  69. package/tests/animation.html +216 -214
  70. package/tests/navbar.html +37 -0
  71. package/tests/sticky-parallax.html +16 -0
  72. package/tests/sticky.html +212 -36
  73. package/src/js/core/core.js +0 -25
package/src/js/util/viewport.js CHANGED
@@ -8,8 +8,10 @@ import {
8
8
  isDocument,
9
9
  isUndefined,
10
10
  isWindow,
11
+ toFloat,
11
12
  toNode,
12
13
  toWindow,
14
+ ucfirst,
13
15
  } from './lang';
14
16
 
15
17
  export function isInView(element, offsetTop = 0, offsetLeft = 0) {
@@ -20,7 +22,7 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
20
22
  return intersectRect(
21
23
  ...scrollParents(element)
22
24
  .map((parent) => {
23
- const { top, left, bottom, right } = offset(getViewport(parent));
25
+ const { top, left, bottom, right } = offsetViewport(parent);
24
26
 
25
27
  return {
26
28
  top: top - offsetTop,
@@ -35,7 +37,7 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
35
37
 
36
38
  export function scrollTop(element, top) {
37
39
  if (isWindow(element) || isDocument(element)) {
38
- element = getScrollingElement(element);
40
+ element = scrollingElement(element);
39
41
  } else {
40
42
  element = toNode(element);
41
43
  }
@@ -52,12 +54,13 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
52
54
  return parents.reduce(
53
55
  (fn, scrollElement, i) => {
54
56
  const { scrollTop, scrollHeight, offsetHeight } = scrollElement;
55
- const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
56
- const { height: elHeight, top: elTop } = offset(parents[i - 1] || element);
57
+ const viewport = offsetViewport(scrollElement);
58
+ const maxScroll = scrollHeight - viewport.height;
59
+ const { height: elHeight, top: elTop } = parents[i - 1]
60
+ ? offsetViewport(parents[i - 1])
61
+ : offset(element);
57
62
 
58
- let top = Math.ceil(
59
- elTop - offset(getViewport(scrollElement)).top - offsetBy + scrollTop
60
- );
63
+ let top = Math.ceil(elTop - viewport.top - offsetBy + scrollTop);
61
64
 
62
65
  if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
63
66
  top += offsetBy;
@@ -115,7 +118,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
115
118
 
116
119
  const [scrollElement] = scrollParents(element, /auto|scroll/, true);
117
120
  const { scrollHeight, scrollTop } = scrollElement;
118
- const viewportHeight = getViewportClientHeight(scrollElement);
121
+ const { height: viewportHeight } = offsetViewport(scrollElement);
119
122
  const maxScroll = scrollHeight - viewportHeight;
120
123
  const elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
121
124
 
@@ -126,7 +129,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
126
129
  }
127
130
 
128
131
  export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scrollable = false) {
129
- const scrollEl = getScrollingElement(element);
132
+ const scrollEl = scrollingElement(element);
130
133
 
131
134
  let ancestors = parents(element).reverse();
132
135
  ancestors = ancestors.slice(ancestors.indexOf(scrollEl) + 1);
@@ -141,26 +144,43 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scroll
141
144
  ancestors.filter(
142
145
  (parent) =>
143
146
  overflowRe.test(css(parent, 'overflow')) &&
144
- (!scrollable || parent.scrollHeight > getViewportClientHeight(parent))
147
+ (!scrollable || parent.scrollHeight > offsetViewport(parent).height)
145
148
  )
146
149
  )
147
150
  .reverse();
148
151
  }
149
152
 
150
- export function getViewport(scrollElement) {
151
- return scrollElement === getScrollingElement(scrollElement) ? window : scrollElement;
153
+ export function offsetViewport(scrollElement) {
154
+ let viewportElement = getViewport(scrollElement);
155
+
156
+ // iOS 12 returns <body> as scrollingElement
157
+ if (viewportElement === scrollingElement(viewportElement)) {
158
+ viewportElement = document.documentElement;
159
+ }
160
+
161
+ let rect = offset(viewportElement);
162
+ for (let [prop, dir, start, end] of [
163
+ ['width', 'x', 'left', 'right'],
164
+ ['height', 'y', 'top', 'bottom'],
165
+ ]) {
166
+ if (!isWindow(getViewport(viewportElement))) {
167
+ rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
168
+ }
169
+ rect[prop] = rect[dir] = (
170
+ isWindow(viewportElement) ? scrollingElement(viewportElement) : viewportElement
171
+ )[`client${ucfirst(prop)}`];
172
+ rect[end] = rect[prop] + rect[start];
173
+ }
174
+ return rect;
152
175
  }
153
176
 
154
- // iOS 12 returns <body> as scrollingElement
155
- export function getViewportClientHeight(scrollElement) {
156
- return (
157
- scrollElement === getScrollingElement(scrollElement)
158
- ? document.documentElement
159
- : scrollElement
160
- ).clientHeight;
177
+ function scrollingElement(element) {
178
+ const {
179
+ document: { scrollingElement },
180
+ } = toWindow(element);
181
+ return scrollingElement;
161
182
  }
162
183
 
163
- export function getScrollingElement(element) {
164
- const { document } = toWindow(element);
165
- return document.scrollingElement || document.documentElement;
184
+ function getViewport(scrollElement) {
185
+ return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
166
186
  }
package/src/less/components/drop.less CHANGED
@@ -45,7 +45,6 @@
45
45
  /* 3 */
46
46
  box-sizing: border-box;
47
47
  width: @drop-width;
48
- max-width: 100vw;
49
48
  }
50
49
 
51
50
  /* Show */
package/src/less/components/navbar.less CHANGED
@@ -317,6 +317,17 @@
317
317
  }
318
318
 
319
319
 
320
+ /* Justify modifier
321
+ ========================================================================== */
322
+
323
+ .uk-navbar-justify .uk-navbar-left,
324
+ .uk-navbar-justify .uk-navbar-right,
325
+ .uk-navbar-justify .uk-navbar-nav,
326
+ .uk-navbar-justify .uk-navbar-nav > li, // Nav item
327
+ .uk-navbar-justify .uk-navbar-item, // Content item
328
+ .uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
329
+
330
+
320
331
  /* Style modifiers
321
332
  ========================================================================== */
322
333
 
package/src/less/components/search.less CHANGED
@@ -154,6 +154,7 @@
154
154
  align-items: center;
155
155
  /* 3 */
156
156
  color: @search-icon-color;
157
+ .hook-search-icon();
157
158
  }
158
159
 
159
160
  /*
@@ -294,6 +295,7 @@
294
295
  .hook-search-misc();
295
296
 
296
297
  .hook-search-input() {}
298
+ .hook-search-icon() {}
297
299
  .hook-search-default-input() {}
298
300
  .hook-search-default-input-focus() {}
299
301
  .hook-search-navbar-input() {}
package/src/less/theme/search.less CHANGED
@@ -25,6 +25,12 @@
25
25
  .hook-search-input() {}
26
26
 
27
27
 
28
+ // Icon
29
+ // ========================================================================
30
+
31
+ .hook-search-icon() {}
32
+
33
+
28
34
  // Default modifiers
29
35
  // ========================================================================
30
36
 
package/src/scss/components/drop.scss CHANGED
@@ -45,7 +45,6 @@ $drop-width: 300px !default;
45
45
  /* 3 */
46
46
  box-sizing: border-box;
47
47
  width: $drop-width;
48
- max-width: 100vw;
49
48
  }
50
49
 
51
50
  /* Show */
package/src/scss/components/navbar.scss CHANGED
@@ -317,6 +317,17 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
317
317
  }
318
318
 
319
319
 
320
+ /* Justify modifier
321
+ ========================================================================== */
322
+
323
+ .uk-navbar-justify .uk-navbar-left,
324
+ .uk-navbar-justify .uk-navbar-right,
325
+ .uk-navbar-justify .uk-navbar-nav,
326
+ .uk-navbar-justify .uk-navbar-nav > li, // Nav item
327
+ .uk-navbar-justify .uk-navbar-item, // Content item
328
+ .uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
329
+
330
+
320
331
  /* Style modifiers
321
332
  ========================================================================== */
322
333
 
package/src/scss/components/search.scss CHANGED
@@ -154,6 +154,7 @@ $search-toggle-hover-color: $global-color !default;
154
154
  align-items: center;
155
155
  /* 3 */
156
156
  color: $search-icon-color;
157
+ @if(mixin-exists(hook-search-icon)) {@include hook-search-icon();}
157
158
  }
158
159
 
159
160
  /*
@@ -294,6 +295,7 @@ $search-toggle-hover-color: $global-color !default;
294
295
  @if(mixin-exists(hook-search-misc)) {@include hook-search-misc();}
295
296
 
296
297
  // @mixin hook-search-input(){}
298
+ // @mixin hook-search-icon(){}
297
299
  // @mixin hook-search-default-input(){}
298
300
  // @mixin hook-search-default-input-focus(){}
299
301
  // @mixin hook-search-navbar-input(){}
package/src/scss/mixins-theme.scss CHANGED
@@ -1843,6 +1843,7 @@
1843
1843
  @mixin hook-progress-bar(){}
1844
1844
  @mixin hook-progress-misc(){}
1845
1845
  @mixin hook-search-input(){}
1846
+ @mixin hook-search-icon(){}
1846
1847
  @mixin hook-search-default-input(){ border: $search-default-border-width solid $search-default-border; }
1847
1848
  @mixin hook-search-default-input-focus(){ border-color: $search-default-focus-border; }
1848
1849
  @mixin hook-search-navbar-input(){}
package/src/scss/mixins.scss CHANGED
@@ -1529,6 +1529,7 @@
1529
1529
  @mixin hook-progress-bar(){}
1530
1530
  @mixin hook-progress-misc(){}
1531
1531
  @mixin hook-search-input(){}
1532
+ @mixin hook-search-icon(){}
1532
1533
  @mixin hook-search-default-input(){}
1533
1534
  @mixin hook-search-default-input-focus(){}
1534
1535
  @mixin hook-search-navbar-input(){}
package/src/scss/theme/search.scss CHANGED
@@ -25,6 +25,12 @@ $search-default-focus-border: $global-primary-background
25
25
  // @mixin hook-search-input(){}
26
26
 
27
27
 
28
+ // Icon
29
+ // ========================================================================
30
+
31
+ // @mixin hook-search-icon(){}
32
+
33
+
28
34
  // Default modifiers
29
35
  // ========================================================================
30
36