uikit 3.11.2-dev.ab82450f4 → 3.11.2-dev.b4d9c97d5
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.
- package/.eslintrc.json +4 -49
- package/.prettierignore +14 -0
- package/.prettierrc.json +13 -0
- package/.webstorm.js +3 -3
- package/CHANGELOG.md +52 -19
- package/build/.eslintrc.json +1 -3
- package/build/build.js +26 -28
- package/build/icons.js +7 -11
- package/build/less.js +48 -36
- package/build/package.json +2 -2
- package/build/prefix.js +21 -18
- package/build/publishDev.js +6 -8
- package/build/release.js +20 -17
- package/build/scope.js +21 -11
- package/build/scss.js +72 -39
- package/build/util.js +71 -62
- package/build/wrapper/icons.js +0 -2
- package/dist/css/uikit-core-rtl.css +121 -202
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +121 -202
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +123 -208
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +123 -208
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +88 -133
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +408 -439
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1098 -1316
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1144 -1393
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +94 -114
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +326 -364
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +324 -352
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +768 -852
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +324 -352
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +645 -793
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +587 -621
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +324 -356
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +155 -167
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +5410 -6698
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +7 -9
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +8101 -9800
- package/dist/js/uikit.min.js +1 -1
- package/jsconfig.json +1 -1
- package/package.json +64 -60
- package/src/js/api/boot.js +25 -32
- package/src/js/api/component.js +15 -28
- package/src/js/api/global.js +6 -12
- package/src/js/api/hooks.js +14 -33
- package/src/js/api/instance.js +7 -15
- package/src/js/api/state.js +79 -100
- package/src/js/components/countdown.js +24 -50
- package/src/js/components/filter.js +70 -66
- package/src/js/components/index.js +13 -13
- package/src/js/components/internal/lightbox-animations.js +14 -25
- package/src/js/components/internal/slider-preload.js +37 -0
- package/src/js/components/internal/slider-transitioner.js +66 -45
- package/src/js/components/internal/slideshow-animations.js +46 -64
- package/src/js/components/lightbox-panel.js +107 -105
- package/src/js/components/lightbox.js +17 -39
- package/src/js/components/notification.js +49 -43
- package/src/js/components/parallax.js +21 -46
- package/src/js/components/slider-parallax.js +13 -23
- package/src/js/components/slider.js +95 -73
- package/src/js/components/slideshow-parallax.js +1 -1
- package/src/js/components/slideshow.js +15 -13
- package/src/js/components/sortable.js +126 -108
- package/src/js/components/tooltip.js +41 -31
- package/src/js/components/upload.js +52 -63
- package/src/js/core/accordion.js +53 -48
- package/src/js/core/alert.js +9 -17
- package/src/js/core/core.js +74 -53
- package/src/js/core/cover.js +11 -15
- package/src/js/core/drop.js +107 -93
- package/src/js/core/form-custom.js +20 -25
- package/src/js/core/gif.js +3 -7
- package/src/js/core/grid.js +57 -58
- package/src/js/core/height-match.js +16 -29
- package/src/js/core/height-viewport.js +29 -36
- package/src/js/core/icon.js +38 -50
- package/src/js/core/img.js +154 -138
- package/src/js/core/index.js +39 -39
- package/src/js/core/leader.js +9 -18
- package/src/js/core/margin.js +21 -37
- package/src/js/core/modal.js +49 -36
- package/src/js/core/nav.js +2 -4
- package/src/js/core/navbar.js +113 -85
- package/src/js/core/offcanvas.js +49 -53
- package/src/js/core/overflow-auto.js +13 -17
- package/src/js/core/responsive.js +14 -12
- package/src/js/core/scroll.js +10 -20
- package/src/js/core/scrollspy-nav.js +34 -31
- package/src/js/core/scrollspy.js +37 -54
- package/src/js/core/sticky.js +188 -117
- package/src/js/core/svg.js +68 -83
- package/src/js/core/switcher.js +47 -46
- package/src/js/core/tab.js +7 -10
- package/src/js/core/toggle.js +66 -67
- package/src/js/core/video.js +11 -22
- package/src/js/mixin/animate.js +19 -20
- package/src/js/mixin/class.js +2 -4
- package/src/js/mixin/container.js +7 -11
- package/src/js/mixin/internal/animate-fade.js +73 -30
- package/src/js/mixin/internal/animate-slide.js +58 -41
- package/src/js/mixin/internal/slideshow-animations.js +7 -14
- package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
- package/src/js/mixin/media.js +5 -10
- package/src/js/mixin/modal.js +89 -66
- package/src/js/mixin/parallax.js +154 -121
- package/src/js/mixin/position.js +26 -20
- package/src/js/mixin/slider-autoplay.js +12 -21
- package/src/js/mixin/slider-drag.js +64 -65
- package/src/js/mixin/slider-nav.js +26 -35
- package/src/js/mixin/slider-reactive.js +2 -8
- package/src/js/mixin/slider.js +48 -55
- package/src/js/mixin/slideshow.js +13 -19
- package/src/js/mixin/togglable.js +89 -63
- package/src/js/uikit-core.js +2 -4
- package/src/js/uikit.js +2 -4
- package/src/js/util/ajax.js +20 -39
- package/src/js/util/animation.js +77 -75
- package/src/js/util/attr.js +17 -21
- package/src/js/util/class.js +14 -52
- package/src/js/util/dimensions.js +76 -47
- package/src/js/util/dom.js +39 -81
- package/src/js/util/env.js +7 -12
- package/src/js/util/event.js +60 -59
- package/src/js/util/fastdom.js +3 -8
- package/src/js/util/filter.js +17 -34
- package/src/js/util/index.js +0 -1
- package/src/js/util/lang.js +82 -121
- package/src/js/util/mouse.js +19 -17
- package/src/js/util/options.js +35 -49
- package/src/js/util/player.js +41 -36
- package/src/js/util/position.js +54 -46
- package/src/js/util/selector.js +43 -58
- package/src/js/util/style.js +39 -49
- package/src/js/util/viewport.js +81 -66
- package/src/less/components/base.less +10 -33
- package/src/less/components/flex.less +0 -9
- package/src/less/components/form-range.less +52 -97
- package/src/less/components/form.less +0 -1
- package/src/less/components/leader.less +0 -1
- package/src/less/components/lightbox.less +0 -1
- package/src/less/components/modal.less +3 -7
- package/src/less/components/navbar.less +0 -7
- package/src/less/components/progress.less +14 -36
- package/src/less/components/slider.less +0 -3
- package/src/less/components/slideshow.less +0 -3
- package/src/less/components/text.less +16 -32
- package/src/less/components/utility.less +22 -0
- package/src/scss/components/base.scss +10 -33
- package/src/scss/components/flex.scss +0 -9
- package/src/scss/components/form-range.scss +52 -97
- package/src/scss/components/form.scss +3 -4
- package/src/scss/components/icon.scss +2 -2
- package/src/scss/components/leader.scss +0 -1
- package/src/scss/components/lightbox.scss +0 -1
- package/src/scss/components/modal.scss +3 -7
- package/src/scss/components/navbar.scss +0 -7
- package/src/scss/components/progress.scss +14 -36
- package/src/scss/components/search.scss +1 -1
- package/src/scss/components/slider.scss +0 -3
- package/src/scss/components/slideshow.scss +0 -3
- package/src/scss/components/text.scss +16 -32
- package/src/scss/components/utility.scss +22 -0
- package/src/scss/mixins-theme.scss +1 -1
- package/src/scss/mixins.scss +1 -1
- package/src/scss/variables-theme.scss +9 -9
- package/src/scss/variables.scss +9 -9
- package/tests/align.html +10 -10
- package/tests/animation.html +2 -2
- package/tests/article.html +2 -2
- package/tests/base.html +3 -3
- package/tests/card.html +10 -10
- package/tests/column.html +3 -3
- package/tests/comment.html +9 -9
- package/tests/dotnav.html +3 -3
- package/tests/image.html +296 -64
- package/tests/images/image-type.avif +0 -0
- package/tests/images/image-type.jpeg +0 -0
- package/tests/images/image-type.webp +0 -0
- package/tests/index.html +8 -8
- package/tests/js/index.js +114 -85
- package/tests/lightbox.html +10 -10
- package/tests/marker.html +2 -2
- package/tests/modal.html +8 -9
- package/tests/navbar.html +2 -2
- package/tests/overlay.html +7 -7
- package/tests/parallax.html +14 -5
- package/tests/position.html +12 -12
- package/tests/slidenav.html +12 -12
- package/tests/slider.html +20 -20
- package/tests/sortable.html +1 -1
- package/tests/sticky-parallax.html +85 -97
- package/tests/sticky.html +56 -24
- package/tests/svg.html +6 -6
- package/tests/table.html +11 -11
- package/tests/thumbnav.html +12 -12
- package/tests/transition.html +30 -30
- package/tests/utility.html +33 -33
- package/tests/video.html +1 -1
- package/tests/width.html +1 -1
- package/src/js/mixin/flex-bug.js +0 -56
- package/src/js/util/promise.js +0 -191
- package/tests/images/animated.gif +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! UIkit 3.11.2-dev.
|
|
1
|
+
/*! UIkit 3.11.2-dev.b4d9c97d5 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
|
|
2
2
|
|
|
3
3
|
(function (global, factory) {
|
|
4
4
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
|
|
@@ -7,498 +7,460 @@
|
|
|
7
7
|
})(this, (function (uikitUtil) { 'use strict';
|
|
8
8
|
|
|
9
9
|
var Media = {
|
|
10
|
+
props: {
|
|
11
|
+
media: Boolean },
|
|
10
12
|
|
|
11
|
-
props: {
|
|
12
|
-
media: Boolean
|
|
13
|
-
},
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
14
|
+
data: {
|
|
15
|
+
media: false },
|
|
18
16
|
|
|
19
|
-
computed: {
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
computed: {
|
|
19
|
+
matchMedia() {
|
|
20
|
+
const media = toMedia(this.media);
|
|
21
|
+
return !media || window.matchMedia(media).matches;
|
|
22
|
+
} } };
|
|
25
23
|
|
|
26
|
-
}
|
|
27
24
|
|
|
28
|
-
};
|
|
29
25
|
|
|
30
26
|
function toMedia(value) {
|
|
31
|
-
|
|
32
|
-
if (
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return value;
|
|
38
|
-
}
|
|
27
|
+
if (uikitUtil.isString(value)) {
|
|
28
|
+
if (value[0] === '@') {
|
|
29
|
+
const name = "breakpoint-" + value.substr(1);
|
|
30
|
+
value = uikitUtil.toFloat(uikitUtil.getCssVar(name));
|
|
31
|
+
} else if (isNaN(value)) {
|
|
32
|
+
return value;
|
|
39
33
|
}
|
|
34
|
+
}
|
|
40
35
|
|
|
41
|
-
|
|
36
|
+
return value && !isNaN(value) ? "(min-width: " + value + "px)" : false;
|
|
42
37
|
}
|
|
43
38
|
|
|
44
|
-
uikitUtil.memoize(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
39
|
+
uikitUtil.memoize(async (src) => {
|
|
40
|
+
if (src) {
|
|
41
|
+
if (uikitUtil.startsWith(src, 'data:')) {
|
|
42
|
+
return decodeURIComponent(src.split(',')[1]);
|
|
43
|
+
} else {
|
|
44
|
+
return (await fetch(src)).text();
|
|
45
|
+
}
|
|
46
|
+
} else {
|
|
47
|
+
return Promise.reject();
|
|
48
|
+
}
|
|
49
|
+
});
|
|
54
50
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
function getMaxPathLength(el) {
|
|
52
|
+
return Math.ceil(
|
|
53
|
+
Math.max(
|
|
54
|
+
0,
|
|
55
|
+
...uikitUtil.$$('[stroke]', el).map((stroke) => {
|
|
56
|
+
try {
|
|
57
|
+
return stroke.getTotalLength();
|
|
58
|
+
} catch (e) {
|
|
59
|
+
return 0;
|
|
60
|
+
}
|
|
61
|
+
})));
|
|
59
62
|
|
|
60
|
-
}
|
|
61
|
-
}); }
|
|
62
|
-
);
|
|
63
63
|
|
|
64
|
-
function getMaxPathLength(el) {
|
|
65
|
-
return Math.ceil(Math.max.apply(Math, [ 0 ].concat( uikitUtil.$$('[stroke]', el).map(function (stroke) {
|
|
66
|
-
try {
|
|
67
|
-
return stroke.getTotalLength();
|
|
68
|
-
} catch (e) {
|
|
69
|
-
return 0;
|
|
70
|
-
}
|
|
71
|
-
}) )));
|
|
72
64
|
}
|
|
73
65
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
66
|
+
const props = {
|
|
67
|
+
x: transformFn,
|
|
68
|
+
y: transformFn,
|
|
69
|
+
rotate: transformFn,
|
|
70
|
+
scale: transformFn,
|
|
71
|
+
color: colorFn,
|
|
72
|
+
backgroundColor: colorFn,
|
|
73
|
+
borderColor: colorFn,
|
|
74
|
+
blur: filterFn,
|
|
75
|
+
hue: filterFn,
|
|
76
|
+
fopacity: filterFn,
|
|
77
|
+
grayscale: filterFn,
|
|
78
|
+
invert: filterFn,
|
|
79
|
+
saturate: filterFn,
|
|
80
|
+
sepia: filterFn,
|
|
81
|
+
opacity: cssPropFn,
|
|
82
|
+
stroke: strokeFn,
|
|
83
|
+
bgx: backgroundFn,
|
|
84
|
+
bgy: backgroundFn };
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
const { keys } = Object;
|
|
96
88
|
|
|
97
89
|
var Parallax = {
|
|
90
|
+
mixins: [Media],
|
|
98
91
|
|
|
99
|
-
|
|
92
|
+
props: fillObject(keys(props), 'list'),
|
|
100
93
|
|
|
101
|
-
|
|
94
|
+
data: fillObject(keys(props), undefined),
|
|
102
95
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
var this$1$1 = this;
|
|
109
|
-
|
|
110
|
-
return keys(props).reduce(function (result, prop) {
|
|
111
|
-
if (!uikitUtil.isUndefined(properties[prop])) {
|
|
112
|
-
result[prop] = props[prop].call(this$1$1, prop, $el, properties[prop].slice());
|
|
113
|
-
}
|
|
114
|
-
return result;
|
|
115
|
-
}, {});
|
|
96
|
+
computed: {
|
|
97
|
+
props(properties, $el) {
|
|
98
|
+
return keys(props).reduce((result, prop) => {
|
|
99
|
+
if (!uikitUtil.isUndefined(properties[prop])) {
|
|
100
|
+
result[prop] = props[prop](prop, $el, properties[prop].slice());
|
|
116
101
|
}
|
|
102
|
+
return result;
|
|
103
|
+
}, {});
|
|
104
|
+
} },
|
|
117
105
|
|
|
118
|
-
},
|
|
119
|
-
|
|
120
|
-
methods: {
|
|
121
|
-
|
|
122
|
-
reset: function() {
|
|
123
|
-
var this$1$1 = this;
|
|
124
106
|
|
|
125
|
-
|
|
126
|
-
|
|
107
|
+
events: {
|
|
108
|
+
bgimageload() {
|
|
109
|
+
this.$emit();
|
|
110
|
+
} },
|
|
127
111
|
|
|
128
|
-
getCss: function(percent) {
|
|
129
|
-
var this$1$1 = this;
|
|
130
112
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
}
|
|
113
|
+
methods: {
|
|
114
|
+
reset() {
|
|
115
|
+
uikitUtil.each(this.getCss(0), (_, prop) => uikitUtil.css(this.$el, prop, ''));
|
|
116
|
+
},
|
|
138
117
|
|
|
139
|
-
|
|
118
|
+
getCss(percent) {
|
|
119
|
+
return keys(this.props).reduce(
|
|
120
|
+
(css, prop) => {
|
|
121
|
+
this.props[prop](css, percent);
|
|
122
|
+
return css;
|
|
123
|
+
},
|
|
124
|
+
{ transform: '', filter: '' });
|
|
140
125
|
|
|
141
|
-
|
|
126
|
+
} } };
|
|
142
127
|
|
|
143
|
-
var unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
|
|
144
128
|
|
|
145
|
-
if (prop === 'x' || prop === 'y') {
|
|
146
|
-
prop = "translate" + (uikitUtil.ucfirst(prop));
|
|
147
|
-
}
|
|
148
129
|
|
|
149
|
-
|
|
130
|
+
function transformFn(prop, el, stops) {
|
|
131
|
+
const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
|
|
132
|
+
let transformFn;
|
|
150
133
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
134
|
+
if (prop === 'x' || prop === 'y') {
|
|
135
|
+
prop = "translate" + uikitUtil.ucfirst(prop);
|
|
136
|
+
transformFn = (stop) => uikitUtil.toFloat(uikitUtil.toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
|
|
137
|
+
}
|
|
154
138
|
|
|
155
|
-
|
|
156
|
-
|
|
139
|
+
if (stops.length === 1) {
|
|
140
|
+
stops.unshift(prop === 'scale' ? 1 : 0);
|
|
141
|
+
}
|
|
157
142
|
|
|
158
|
-
|
|
159
|
-
value = uikitUtil.toFloat(value).toFixed(unit === 'px' ? 0 : 6);
|
|
160
|
-
}
|
|
143
|
+
stops = parseStops(stops, transformFn);
|
|
161
144
|
|
|
162
|
-
|
|
163
|
-
|
|
145
|
+
return (css, percent) => {
|
|
146
|
+
css.transform += " " + prop + "(" + getValue(stops, percent) + unit + ")";
|
|
147
|
+
};
|
|
164
148
|
}
|
|
165
149
|
|
|
166
|
-
function colorFn(prop, el,
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
}).join(',');
|
|
184
|
-
css[prop] = "rgba(" + value + ")";
|
|
185
|
-
};
|
|
150
|
+
function colorFn(prop, el, stops) {
|
|
151
|
+
if (stops.length === 1) {
|
|
152
|
+
stops.unshift(getCssValue(el, prop, ''));
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
stops = parseStops(stops, (stop) => parseColor(el, stop));
|
|
156
|
+
|
|
157
|
+
return (css, percent) => {
|
|
158
|
+
const [start, end, p] = getStop(stops, percent);
|
|
159
|
+
const value = start.
|
|
160
|
+
map((value, i) => {
|
|
161
|
+
value += p * (end[i] - value);
|
|
162
|
+
return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
|
|
163
|
+
}).
|
|
164
|
+
join(',');
|
|
165
|
+
css[prop] = "rgba(" + value + ")";
|
|
166
|
+
};
|
|
186
167
|
}
|
|
187
168
|
|
|
188
169
|
function parseColor(el, color) {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
170
|
+
return getCssValue(el, 'color', color).
|
|
171
|
+
split(/[(),]/g).
|
|
172
|
+
slice(1, -1).
|
|
173
|
+
concat(1).
|
|
174
|
+
slice(0, 4).
|
|
175
|
+
map(uikitUtil.toFloat);
|
|
195
176
|
}
|
|
196
177
|
|
|
197
|
-
function filterFn(prop, el,
|
|
178
|
+
function filterFn(prop, el, stops) {
|
|
179
|
+
if (stops.length === 1) {
|
|
180
|
+
stops.unshift(0);
|
|
181
|
+
}
|
|
198
182
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
183
|
+
const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
|
|
184
|
+
prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
|
|
185
|
+
stops = parseStops(stops);
|
|
202
186
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
return function (css, percent) {
|
|
208
|
-
var value = getValue(steps, percent);
|
|
209
|
-
css.filter += " " + prop + "(" + (value + unit) + ")";
|
|
210
|
-
};
|
|
187
|
+
return (css, percent) => {
|
|
188
|
+
const value = getValue(stops, percent);
|
|
189
|
+
css.filter += " " + prop + "(" + (value + unit) + ")";
|
|
190
|
+
};
|
|
211
191
|
}
|
|
212
192
|
|
|
213
|
-
function cssPropFn(prop, el,
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
}
|
|
193
|
+
function cssPropFn(prop, el, stops) {
|
|
194
|
+
if (stops.length === 1) {
|
|
195
|
+
stops.unshift(getCssValue(el, prop, ''));
|
|
196
|
+
}
|
|
218
197
|
|
|
219
|
-
|
|
198
|
+
stops = parseStops(stops);
|
|
220
199
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
200
|
+
return (css, percent) => {
|
|
201
|
+
css[prop] = getValue(stops, percent);
|
|
202
|
+
};
|
|
224
203
|
}
|
|
225
204
|
|
|
226
|
-
function strokeFn(prop, el,
|
|
205
|
+
function strokeFn(prop, el, stops) {
|
|
206
|
+
if (stops.length === 1) {
|
|
207
|
+
stops.unshift(0);
|
|
208
|
+
}
|
|
227
209
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
210
|
+
const unit = getUnit(stops);
|
|
211
|
+
const length = getMaxPathLength(el);
|
|
212
|
+
stops = parseStops(stops.reverse(), (stop) => {
|
|
213
|
+
stop = uikitUtil.toFloat(stop);
|
|
214
|
+
return unit === '%' ? stop * length / 100 : stop;
|
|
215
|
+
});
|
|
231
216
|
|
|
232
|
-
|
|
233
|
-
|
|
217
|
+
if (!stops.some((_ref) => {let [value] = _ref;return value;})) {
|
|
218
|
+
return uikitUtil.noop;
|
|
219
|
+
}
|
|
234
220
|
|
|
235
|
-
|
|
236
|
-
return uikitUtil.noop;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
var length = getMaxPathLength(el);
|
|
240
|
-
uikitUtil.css(el, 'strokeDasharray', length);
|
|
241
|
-
|
|
242
|
-
if (unit === '%') {
|
|
243
|
-
steps = steps.map(function (step) { return step * length / 100; });
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
steps = steps.reverse();
|
|
221
|
+
uikitUtil.css(el, 'strokeDasharray', length);
|
|
247
222
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
223
|
+
return (css, percent) => {
|
|
224
|
+
css.strokeDashoffset = getValue(stops, percent);
|
|
225
|
+
};
|
|
251
226
|
}
|
|
252
227
|
|
|
253
|
-
function backgroundFn(prop, el,
|
|
228
|
+
function backgroundFn(prop, el, stops) {
|
|
229
|
+
if (stops.length === 1) {
|
|
230
|
+
stops.unshift(0);
|
|
231
|
+
}
|
|
254
232
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
prop = prop.substr(-1);
|
|
260
|
-
var attr = prop === 'y' ? 'height' : 'width';
|
|
261
|
-
steps = steps.map(function (step) { return uikitUtil.toPx(step, attr, el); });
|
|
233
|
+
prop = prop.substr(-1);
|
|
234
|
+
const attr = prop === 'y' ? 'height' : 'width';
|
|
235
|
+
stops = parseStops(stops, (stop) => uikitUtil.toPx(stop, attr, el));
|
|
262
236
|
|
|
263
|
-
|
|
264
|
-
var bgPos = uikitUtil.css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
|
|
237
|
+
const bgPos = getCssValue(el, "background-position-" + prop, '');
|
|
265
238
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
239
|
+
return getCssValue(el, 'backgroundSize', '') === 'cover' ?
|
|
240
|
+
backgroundCoverFn(prop, el, stops, bgPos, attr) :
|
|
241
|
+
setBackgroundPosFn(prop, stops, bgPos);
|
|
269
242
|
}
|
|
270
243
|
|
|
271
|
-
function backgroundCoverFn(prop, el,
|
|
272
|
-
|
|
273
|
-
var image = getBackgroundImage.call(this, el);
|
|
244
|
+
function backgroundCoverFn(prop, el, stops, bgPos, attr) {
|
|
245
|
+
const dimImage = getBackgroundImageDimensions(el);
|
|
274
246
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
247
|
+
if (!dimImage.width) {
|
|
248
|
+
return uikitUtil.noop;
|
|
249
|
+
}
|
|
278
250
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
251
|
+
const values = stops.map((_ref2) => {let [value] = _ref2;return value;});
|
|
252
|
+
const min = Math.min(...values);
|
|
253
|
+
const max = Math.max(...values);
|
|
254
|
+
const down = values.indexOf(min) < values.indexOf(max);
|
|
282
255
|
|
|
283
|
-
|
|
284
|
-
|
|
256
|
+
const diff = max - min;
|
|
257
|
+
let pos = (down ? -diff : 0) - (down ? min : max);
|
|
285
258
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
};
|
|
259
|
+
const dimEl = {
|
|
260
|
+
width: el.offsetWidth,
|
|
261
|
+
height: el.offsetHeight };
|
|
290
262
|
|
|
291
|
-
var dimImage = {
|
|
292
|
-
width: image.naturalWidth,
|
|
293
|
-
height: image.naturalHeight
|
|
294
|
-
};
|
|
295
263
|
|
|
296
|
-
|
|
297
|
-
|
|
264
|
+
const baseDim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
265
|
+
const span = baseDim[attr] - dimEl[attr];
|
|
298
266
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
267
|
+
if (span < diff) {
|
|
268
|
+
dimEl[attr] = baseDim[attr] + diff - span;
|
|
269
|
+
} else if (span > diff) {
|
|
270
|
+
const posPercentage = dimEl[attr] / uikitUtil.toPx(bgPos, attr, el, true);
|
|
302
271
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
if (posPercentage) {
|
|
306
|
-
pos -= (span - diff) / posPercentage;
|
|
307
|
-
}
|
|
272
|
+
if (posPercentage) {
|
|
273
|
+
pos -= (span - diff) / posPercentage;
|
|
308
274
|
}
|
|
275
|
+
}
|
|
309
276
|
|
|
310
|
-
|
|
277
|
+
const dim = uikitUtil.Dimensions.cover(dimImage, dimEl);
|
|
311
278
|
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
279
|
+
const fn = setBackgroundPosFn(prop, stops, pos + "px");
|
|
280
|
+
return (css, percent) => {
|
|
281
|
+
fn(css, percent);
|
|
282
|
+
css.backgroundSize = dim.width + "px " + dim.height + "px";
|
|
283
|
+
css.backgroundRepeat = 'no-repeat';
|
|
284
|
+
};
|
|
318
285
|
}
|
|
319
286
|
|
|
320
|
-
function setBackgroundPosFn(prop,
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
287
|
+
function setBackgroundPosFn(prop, stops, pos) {
|
|
288
|
+
return function (css, percent) {
|
|
289
|
+
css["background-position-" + prop] = "calc(" + pos + " + " + getValue(stops, percent) + "px)";
|
|
290
|
+
};
|
|
324
291
|
}
|
|
325
292
|
|
|
326
|
-
|
|
327
|
-
|
|
293
|
+
const dimensions = {};
|
|
294
|
+
function getBackgroundImageDimensions(el) {
|
|
295
|
+
const src = uikitUtil.css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
328
296
|
|
|
329
|
-
|
|
297
|
+
if (dimensions[src]) {
|
|
298
|
+
return dimensions[src];
|
|
299
|
+
}
|
|
330
300
|
|
|
331
|
-
|
|
301
|
+
const image = new Image();
|
|
302
|
+
if (src) {
|
|
303
|
+
image.src = src;
|
|
332
304
|
|
|
333
|
-
if (
|
|
334
|
-
|
|
305
|
+
if (!image.naturalWidth) {
|
|
306
|
+
image.onload = () => {
|
|
307
|
+
dimensions[src] = toDimensions(image);
|
|
308
|
+
uikitUtil.trigger(el, 'bgimageload');
|
|
309
|
+
};
|
|
335
310
|
}
|
|
311
|
+
}
|
|
336
312
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
img.src = src;
|
|
340
|
-
if (!img.naturalWidth) {
|
|
341
|
-
img.onload = function () { return this$1$1.$update(); };
|
|
342
|
-
}
|
|
313
|
+
return dimensions[src] = toDimensions(image);
|
|
314
|
+
}
|
|
343
315
|
|
|
344
|
-
|
|
316
|
+
function toDimensions(image) {
|
|
317
|
+
return {
|
|
318
|
+
width: image.naturalWidth,
|
|
319
|
+
height: image.naturalHeight };
|
|
320
|
+
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
function parseStops(stops, fn) {if (fn === void 0) {fn = uikitUtil.toFloat;}
|
|
324
|
+
const result = [];
|
|
325
|
+
for (const stop of stops) {
|
|
326
|
+
const [value, percent] = uikitUtil.isString(stop) ? stop.trim().split(' ') : [stop];
|
|
327
|
+
result.push([fn(value), percent ? uikitUtil.toFloat(percent) / 100 : null]);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
const { length } = result;
|
|
331
|
+
result[0][1] = 0;
|
|
332
|
+
result[length - 1][1] = 1;
|
|
333
|
+
for (let i = 1; i < length - 1; i++) {
|
|
334
|
+
if (result[i] === null) {
|
|
335
|
+
const nextIndex = uikitUtil.findIndex(result.slice(i + 1), (_ref3) => {let [, percent] = _ref3;return percent !== null;}) + 1;
|
|
336
|
+
const percent = (result[i + nextIndex] - result[i - 1][1]) / (nextIndex + 1);
|
|
337
|
+
for (let j = 0; j < nextIndex; j++) {
|
|
338
|
+
result[i + j][1] = percent * j + 1;
|
|
339
|
+
}
|
|
345
340
|
}
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
return result;
|
|
346
344
|
}
|
|
347
345
|
|
|
348
|
-
function
|
|
349
|
-
|
|
350
|
-
|
|
346
|
+
function getStop(stops, percent) {
|
|
347
|
+
const index = uikitUtil.findIndex(stops.slice(1), (_ref4) => {let [, targetPercent] = _ref4;return percent <= targetPercent;}) + 1;
|
|
348
|
+
return [
|
|
349
|
+
stops[index - 1][0],
|
|
350
|
+
stops[index][0],
|
|
351
|
+
(percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])];
|
|
351
352
|
|
|
352
|
-
return steps
|
|
353
|
-
.slice(index, index + 2)
|
|
354
|
-
.concat(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
355
353
|
}
|
|
356
354
|
|
|
357
|
-
function getValue(
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
var end = ref[1];
|
|
361
|
-
var p = ref[2];
|
|
362
|
-
return uikitUtil.isNumber(start)
|
|
363
|
-
? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
|
|
364
|
-
: +end;
|
|
355
|
+
function getValue(stops, percent) {
|
|
356
|
+
const [start, end, p] = getStop(stops, percent);
|
|
357
|
+
return uikitUtil.isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
|
|
365
358
|
}
|
|
366
359
|
|
|
367
|
-
function getUnit(
|
|
368
|
-
|
|
360
|
+
function getUnit(stops, defaultUnit) {
|
|
361
|
+
return (
|
|
362
|
+
stops.reduce(
|
|
363
|
+
(unit, stop) => unit || uikitUtil.isString(stop) && stop.replace(/[\d-]/g, '').trim(),
|
|
364
|
+
'') ||
|
|
365
|
+
defaultUnit);
|
|
366
|
+
|
|
369
367
|
}
|
|
370
368
|
|
|
371
369
|
function getCssValue(el, prop, value) {
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
370
|
+
const prev = el.style[prop];
|
|
371
|
+
const val = uikitUtil.css(uikitUtil.css(el, prop, value), prop);
|
|
372
|
+
el.style[prop] = prev;
|
|
373
|
+
return val;
|
|
376
374
|
}
|
|
377
375
|
|
|
378
376
|
function fillObject(keys, value) {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
377
|
+
return keys.reduce((data, prop) => {
|
|
378
|
+
data[prop] = value;
|
|
379
|
+
return data;
|
|
380
|
+
}, {});
|
|
383
381
|
}
|
|
384
382
|
|
|
385
383
|
var Component = {
|
|
384
|
+
mixins: [Parallax],
|
|
386
385
|
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
start: String,
|
|
394
|
-
end: String
|
|
395
|
-
},
|
|
396
|
-
|
|
397
|
-
data: {
|
|
398
|
-
target: false,
|
|
399
|
-
viewport: 1,
|
|
400
|
-
easing: 1,
|
|
401
|
-
start: 0,
|
|
402
|
-
end: 0
|
|
403
|
-
},
|
|
404
|
-
|
|
405
|
-
computed: {
|
|
406
|
-
|
|
407
|
-
target: function(ref, $el) {
|
|
408
|
-
var target = ref.target;
|
|
409
|
-
|
|
410
|
-
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
411
|
-
},
|
|
412
|
-
|
|
413
|
-
start: function(ref) {
|
|
414
|
-
var start = ref.start;
|
|
386
|
+
props: {
|
|
387
|
+
target: String,
|
|
388
|
+
viewport: Number, // Deprecated
|
|
389
|
+
easing: Number,
|
|
390
|
+
start: String,
|
|
391
|
+
end: String },
|
|
415
392
|
|
|
416
|
-
return parseCalc(start, this.target);
|
|
417
|
-
},
|
|
418
393
|
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
394
|
+
data: {
|
|
395
|
+
target: false,
|
|
396
|
+
viewport: 1,
|
|
397
|
+
easing: 1,
|
|
398
|
+
start: 0,
|
|
399
|
+
end: 0 },
|
|
422
400
|
|
|
423
|
-
return parseCalc(
|
|
424
|
-
end || (viewport = (1 - viewport) * 100) && (viewport + "vh+" + viewport + "%"),
|
|
425
|
-
this.target
|
|
426
|
-
);
|
|
427
|
-
}
|
|
428
401
|
|
|
402
|
+
computed: {
|
|
403
|
+
target(_ref, $el) {let { target } = _ref;
|
|
404
|
+
return getOffsetElement(target && uikitUtil.query(target, $el) || $el);
|
|
429
405
|
},
|
|
430
406
|
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
var percent = ref.percent;
|
|
435
|
-
|
|
407
|
+
start(_ref2) {let { start } = _ref2;
|
|
408
|
+
return uikitUtil.toPx(start, 'height', this.target, true);
|
|
409
|
+
},
|
|
436
410
|
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
411
|
+
end(_ref3) {let { end, viewport } = _ref3;
|
|
412
|
+
return uikitUtil.toPx(
|
|
413
|
+
end || (viewport = (1 - viewport) * 100) && viewport + "vh+" + viewport + "%",
|
|
414
|
+
'height',
|
|
415
|
+
this.target,
|
|
416
|
+
true);
|
|
440
417
|
|
|
441
|
-
|
|
442
|
-
return;
|
|
443
|
-
}
|
|
418
|
+
} },
|
|
444
419
|
|
|
445
|
-
var prev = percent;
|
|
446
|
-
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
447
420
|
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
421
|
+
update: {
|
|
422
|
+
read(_ref4, types) {let { percent } = _ref4;
|
|
423
|
+
if (!types.has('scroll')) {
|
|
424
|
+
percent = false;
|
|
425
|
+
}
|
|
453
426
|
|
|
454
|
-
|
|
455
|
-
|
|
427
|
+
if (!this.matchMedia) {
|
|
428
|
+
return;
|
|
429
|
+
}
|
|
456
430
|
|
|
431
|
+
const prev = percent;
|
|
432
|
+
percent = ease(uikitUtil.scrolledOver(this.target, this.start, this.end), this.easing);
|
|
457
433
|
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
}
|
|
434
|
+
return {
|
|
435
|
+
percent,
|
|
436
|
+
style: prev === percent ? false : this.getCss(percent) };
|
|
462
437
|
|
|
463
|
-
|
|
438
|
+
},
|
|
464
439
|
|
|
465
|
-
|
|
440
|
+
write(_ref5) {let { style } = _ref5;
|
|
441
|
+
if (!this.matchMedia) {
|
|
442
|
+
this.reset();
|
|
443
|
+
return;
|
|
444
|
+
}
|
|
466
445
|
|
|
467
|
-
|
|
468
|
-
}
|
|
446
|
+
style && uikitUtil.css(this.$el, style);
|
|
447
|
+
},
|
|
469
448
|
|
|
470
|
-
|
|
449
|
+
events: ['scroll', 'resize'] } };
|
|
471
450
|
|
|
472
|
-
var calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
|
|
473
|
-
function parseCalc(calc, el) {
|
|
474
|
-
var match;
|
|
475
|
-
var result = 0;
|
|
476
|
-
calc = calc.toString().replace(/\s/g, '');
|
|
477
|
-
calcRe.lastIndex = 0;
|
|
478
|
-
while ((match = calcRe.exec(calc)) !== null) {
|
|
479
|
-
result += uikitUtil.toPx(match[0], 'height', el, true);
|
|
480
|
-
}
|
|
481
451
|
|
|
482
|
-
return result;
|
|
483
|
-
}
|
|
484
452
|
|
|
485
453
|
function ease(percent, easing) {
|
|
486
|
-
|
|
487
|
-
? Math.pow(percent, easing + 1)
|
|
488
|
-
: 1 - Math.pow(1 - percent, -easing + 1);
|
|
454
|
+
return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
|
|
489
455
|
}
|
|
490
456
|
|
|
491
457
|
// SVG elements do not inherit from HTMLElement
|
|
492
458
|
function getOffsetElement(el) {
|
|
493
|
-
|
|
494
|
-
? 'offsetTop' in el
|
|
495
|
-
? el
|
|
496
|
-
: getOffsetElement(uikitUtil.parent(el))
|
|
497
|
-
: document.documentElement;
|
|
459
|
+
return el ? 'offsetTop' in el ? el : getOffsetElement(uikitUtil.parent(el)) : document.documentElement;
|
|
498
460
|
}
|
|
499
461
|
|
|
500
462
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
501
|
-
|
|
463
|
+
window.UIkit.component('parallax', Component);
|
|
502
464
|
}
|
|
503
465
|
|
|
504
466
|
return Component;
|