uikit 3.10.2-dev.c8aa7eda2 → 3.11.1

package/src/js/mixin/parallax.js

@@ -1,333 +1,300 @@
 import Media from '../mixin/media';
 import {getMaxPathLength} from '../core/svg';
-import {css, Dimensions, each, isNumber, isString, isUndefined, startsWith, toFloat, toPx, ucfirst} from 'uikit-util';
+import {css, Dimensions, each, isNumber, isString, isUndefined, noop, startsWith, toFloat, toPx, ucfirst} from 'uikit-util';
+
+const props = {
+    x: transformFn,
+    y: transformFn,
+    rotate: transformFn,
+    scale: transformFn,
+    color: colorFn,
+    backgroundColor: colorFn,
+    borderColor: colorFn,
+    blur: filterFn,
+    hue: filterFn,
+    fopacity: filterFn,
+    grayscale: filterFn,
+    invert: filterFn,
+    saturate: filterFn,
+    sepia: filterFn,
+    opacity: cssPropFn,
+    stroke: strokeFn,
+    bgx: backgroundFn,
+    bgy: backgroundFn
+};
 
-const props = ['x', 'y', 'bgx', 'bgy', 'rotate', 'scale', 'color', 'backgroundColor', 'borderColor', 'opacity', 'blur', 'hue', 'grayscale', 'invert', 'saturate', 'sepia', 'fopacity', 'stroke'];
+const {keys} = Object;
 
 export default {
 
     mixins: [Media],
 
-    props: props.reduce((props, prop) => {
-        props[prop] = 'list';
-        return props;
-    }, {}),
+    props: fillObject(keys(props), 'list'),
 
-    data: props.reduce((data, prop) => {
-        data[prop] = undefined;
-        return data;
-    }, {}),
+    data: fillObject(keys(props), undefined),
 
     computed: {
 
         props(properties, $el) {
-
-            return props.reduce((props, prop) => {
-
-                if (isUndefined(properties[prop])) {
-                    return props;
+            return keys(props).reduce((result, prop) => {
+                if (!isUndefined(properties[prop])) {
+                    result[prop] = props[prop].call(this, prop, $el, properties[prop].slice());
                 }
+                return result;
+            }, {});
+        }
 
-                const isColor = prop.match(/color/i);
-                const isCssProp = isColor || prop === 'opacity';
-
-                let pos, bgPos, diff;
-                let steps = properties[prop].slice();
-
-                if (isCssProp) {
-                    css($el, prop, '');
-                }
-
-                if (steps.length < 2) {
-                    steps.unshift((prop === 'scale'
-                        ? 1
-                        : isCssProp
-                            ? css($el, prop)
-                            : 0) || 0);
-                }
-
-                const unit = getUnit(steps, prop);
-
-                if (isColor) {
-
-                    const {color} = $el.style;
-                    steps = steps.map(step => parseColor($el, step));
-                    $el.style.color = color;
+    },
 
-                } else if (startsWith(prop, 'bg')) {
+    methods: {
 
-                    const attr = prop === 'bgy' ? 'height' : 'width';
-                    steps = steps.map(step => toPx(step, attr, $el));
+        reset() {
+            each(this.getCss(0), (_, prop) => css(this.$el, prop, ''));
+        },
 
-                    css($el, `background-position-${prop[2]}`, '');
-                    bgPos = css($el, 'backgroundPosition').split(' ')[prop[2] === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
+        getCss(percent) {
+            return keys(this.props).reduce((css, prop) => {
+                this.props[prop](css, percent);
+                return css;
+            }, {transform: '', filter: ''});
+        }
 
-                    if (this.covers) {
+    }
 
-                        const min = Math.min(...steps);
-                        const max = Math.max(...steps);
-                        const down = steps.indexOf(min) < steps.indexOf(max);
+};
 
-                        diff = max - min;
+function transformFn(prop, el, steps) {
 
-                        steps = steps.map(step => step - (down ? min : max));
-                        pos = `${down ? -diff : 0}px`;
+    const unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
 
-                    } else {
+    if (prop === 'x' || prop === 'y') {
+        prop = `translate${ucfirst(prop)}`;
+    }
 
-                        pos = bgPos;
+    steps = steps.map(toFloat);
 
-                    }
+    if (steps.length === 1) {
+        steps.unshift(prop === 'scale' ? 1 : 0);
+    }
 
-                } else {
+    return (css, percent) => {
+        let value = getValue(steps, percent);
 
-                    steps = steps.map(toFloat);
+        if (startsWith(prop, 'translate')) {
+            value = toFloat(value).toFixed(unit === 'px' ? 0 : 6);
+        }
 
-                }
+        css.transform += ` ${prop}(${value}${unit})`;
+    };
+}
 
-                if (prop === 'stroke') {
+function colorFn(prop, el, steps) {
 
-                    if (!steps.some(step => step)) {
-                        return props;
-                    }
+    if (steps.length === 1) {
+        steps.unshift(getCssValue(el, prop, ''));
+    }
 
-                    const length = getMaxPathLength($el);
-                    css($el, 'strokeDasharray', length);
+    steps = steps.map(step => parseColor(el, step));
 
-                    if (unit === '%') {
-                        steps = steps.map(step => step * length / 100);
-                    }
+    return (css, percent) => {
 
-                    steps = steps.reverse();
+        const [start, end, p] = getStep(steps, percent);
+        const value = start.map((value, i) => {
+            value += p * (end[i] - value);
+            return i === 3 ? toFloat(value) : parseInt(value, 10);
+        }).join(',');
+        css[prop] = `rgba(${value})`;
+    };
+}
 
-                    prop = 'strokeDashoffset';
-                }
+function parseColor(el, color) {
+    return getCssValue(el, 'color', color)
+        .split(/[(),]/g)
+        .slice(1, -1)
+        .concat(1)
+        .slice(0, 4)
+        .map(toFloat);
+}
 
-                props[prop] = {steps, unit, pos, bgPos, diff};
+function filterFn(prop, el, steps) {
 
-                return props;
+    if (steps.length === 1) {
+        steps.unshift(0);
+    }
 
-            }, {});
+    const unit = getUnit(steps) || {blur: 'px', hue: 'deg'}[prop] || '%';
+    prop = {fopacity: 'opacity', hue: 'hue-rotate'}[prop] || prop;
+    steps = steps.map(toFloat);
 
-        },
+    return (css, percent) => {
+        const value = getValue(steps, percent);
+        css.filter += ` ${prop}(${value + unit})`;
+    };
+}
 
-        bgProps() {
-            return ['bgx', 'bgy'].filter(bg => bg in this.props);
-        },
+function cssPropFn(prop, el, steps) {
 
-        covers(_, $el) {
-            return covers($el);
-        }
+    if (steps.length === 1) {
+        steps.unshift(getCssValue(el, prop, ''));
+    }
 
-    },
+    steps = steps.map(toFloat);
 
-    disconnected() {
-        delete this._image;
-    },
+    return (css, percent) => {
+        css[prop] = getValue(steps, percent);
+    };
+}
 
-    update: {
+function strokeFn(prop, el, steps) {
 
-        read(data) {
+    if (steps.length === 1) {
+        steps.unshift(0);
+    }
 
-            if (!this.matchMedia) {
-                return;
-            }
+    const unit = getUnit(steps);
+    steps = steps.map(toFloat);
 
-            if (!data.image && this.covers && this.bgProps.length) {
-                const src = css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
+    if (!steps.some(step => step)) {
+        return noop;
+    }
 
-                if (src) {
-                    const img = new Image();
-                    img.src = src;
-                    data.image = img;
+    const length = getMaxPathLength(el);
+    css(el, 'strokeDasharray', length);
 
-                    if (!img.naturalWidth) {
-                        img.onload = () => this.$update();
-                    }
-                }
+    if (unit === '%') {
+        steps = steps.map(step => step * length / 100);
+    }
 
-            }
+    steps = steps.reverse();
 
-            const {image} = data;
+    return (css, percent) => {
+        css.strokeDashoffset = getValue(steps, percent);
+    };
+}
 
-            if (!image || !image.naturalWidth) {
-                return;
-            }
+function backgroundFn(prop, el, steps) {
 
-            const dimEl = {
-                width: this.$el.offsetWidth,
-                height: this.$el.offsetHeight
-            };
-            const dimImage = {
-                width: image.naturalWidth,
-                height: image.naturalHeight
-            };
+    if (steps.length === 1) {
+        steps.unshift(0);
+    }
 
-            let dim = Dimensions.cover(dimImage, dimEl);
+    prop = prop.substr(-1);
+    const attr = prop === 'y' ? 'height' : 'width';
+    steps = steps.map(step => toPx(step, attr, el));
 
-            this.bgProps.forEach(prop => {
+    css(el, `background-position-${prop}`, '');
+    const bgPos = css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
 
-                const {diff, bgPos, steps} = this.props[prop];
-                const attr = prop === 'bgy' ? 'height' : 'width';
-                const span = dim[attr] - dimEl[attr];
+    return getCssValue(el, 'backgroundSize', '') === 'cover'
+        ? backgroundCoverFn.call(this, prop, el, steps, bgPos, attr)
+        : setBackgroundPosFn(prop, steps, bgPos);
+}
 
-                if (span < diff) {
-                    dimEl[attr] = dim[attr] + diff - span;
-                } else if (span > diff) {
+function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
-                    const posPercentage = dimEl[attr] / toPx(bgPos, attr, this.$el);
+    const image = getBackgroundImage.call(this, el);
 
-                    if (posPercentage) {
-                        this.props[prop].steps = steps.map(step => step - (span - diff) / posPercentage);
-                    }
-                }
+    if (!image.naturalWidth) {
+        return noop;
+    }
 
-                dim = Dimensions.cover(dimImage, dimEl);
-            });
+    const min = Math.min(...steps);
+    const max = Math.max(...steps);
+    const down = steps.indexOf(min) < steps.indexOf(max);
 
-            data.dim = dim;
-        },
+    const diff = max - min;
+    let pos = (down ? -diff : 0) - (down ? min : max);
 
-        write({dim}) {
+    const dimEl = {
+        width: el.offsetWidth,
+        height: el.offsetHeight
+    };
 
-            if (!this.matchMedia) {
-                css(this.$el, {backgroundSize: '', backgroundRepeat: ''});
-                return;
-            }
+    const dimImage = {
+        width: image.naturalWidth,
+        height: image.naturalHeight
+    };
 
-            dim && css(this.$el, {
-                backgroundSize: `${dim.width}px ${dim.height}px`,
-                backgroundRepeat: 'no-repeat'
-            });
+    const baseDim = Dimensions.cover(dimImage, dimEl);
+    const span = baseDim[attr] - dimEl[attr];
 
-        },
+    if (span < diff) {
+        dimEl[attr] = baseDim[attr] + diff - span;
+    } else if (span > diff) {
 
-        events: ['resize']
+        const posPercentage = dimEl[attr] / toPx(bgPos, attr, el, true);
 
-    },
+        if (posPercentage) {
+            pos -= (span - diff) / posPercentage;
+        }
+    }
 
-    methods: {
+    const dim = Dimensions.cover(dimImage, dimEl);
 
-        reset() {
-            each(this.getCss(0), (_, prop) => css(this.$el, prop, ''));
-        },
+    const fn = setBackgroundPosFn(prop, steps, `${pos}px`);
+    return (css, percent) => {
+        fn(css, percent);
+        css.backgroundSize = `${dim.width}px ${dim.height}px`;
+        css.backgroundRepeat = 'no-repeat';
+    };
+}
 
-        getCss(percent) {
+function setBackgroundPosFn(prop, steps, pos) {
+    return function (css, percent) {
+        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(steps, percent)}px)`;
+    };
+}
 
-            const {props} = this;
-            return Object.keys(props).reduce((css, prop) => {
-
-                let {steps, unit, pos} = props[prop];
-                const value = getValue(steps, percent);
-
-                switch (prop) {
-
-                    // transforms
-                    case 'x':
-                    case 'y': {
-                        unit = unit || 'px';
-                        css.transform += ` translate${ucfirst(prop)}(${
-                            toFloat(value).toFixed(unit === 'px' ? 0 : 2)
-                        }${unit})`;
-                        break;
-                    }
-                    case 'rotate':
-                        unit = unit || 'deg';
-                        css.transform += ` rotate(${value + unit})`;
-                        break;
-                    case 'scale':
-                        css.transform += ` scale(${value})`;
-                        break;
-
-                    // bg image
-                    case 'bgy':
-                    case 'bgx':
-                        css[`background-position-${prop[2]}`] = `calc(${pos} + ${value}px)`;
-                        break;
-
-                    // color
-                    case 'color':
-                    case 'backgroundColor':
-                    case 'borderColor': {
-
-                        const [start, end, p] = getStep(steps, percent);
-
-                        css[prop] = `rgba(${
-                            start.map((value, i) => {
-                                value += p * (end[i] - value);
-                                return i === 3 ? toFloat(value) : parseInt(value, 10);
-                            }).join(',')
-                        })`;
-                        break;
-                    }
-                    // CSS Filter
-                    case 'blur':
-                        unit = unit || 'px';
-                        css.filter += ` blur(${value + unit})`;
-                        break;
-                    case 'hue':
-                        unit = unit || 'deg';
-                        css.filter += ` hue-rotate(${value + unit})`;
-                        break;
-                    case 'fopacity':
-                        unit = unit || '%';
-                        css.filter += ` opacity(${value + unit})`;
-                        break;
-                    case 'grayscale':
-                    case 'invert':
-                    case 'saturate':
-                    case 'sepia':
-                        unit = unit || '%';
-                        css.filter += ` ${prop}(${value + unit})`;
-                        break;
-                    default:
-                        css[prop] = value;
-                }
+function getBackgroundImage(el) {
+    const src = css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
 
-                return css;
+    const data = this._data;
 
-            }, {transform: '', filter: ''});
+    if (data[src]) {
+        return data[src];
+    }
 
+    if (src) {
+        const img = new Image();
+        img.src = src;
+        if (!img.naturalWidth) {
+            img.onload = () => this.$update();
         }
 
+        return data[src] = img;
     }
-
-};
-
-function parseColor(el, color) {
-    return css(css(el, 'color', color), 'color')
-        .split(/[(),]/g)
-        .slice(1, -1)
-        .concat(1)
-        .slice(0, 4)
-        .map(toFloat);
 }
 
 function getStep(steps, percent) {
     const count = steps.length - 1;
     const index = Math.min(Math.floor(count * percent), count - 1);
-    const step = steps.slice(index, index + 2);
-
-    step.push(percent === 1 ? 1 : percent % (1 / count) * count);
 
-    return step;
+    return steps
+        .slice(index, index + 2)
+        .concat(percent === 1 ? 1 : percent % (1 / count) * count);
 }
 
-function getValue(steps, percent, digits = 2) {
+function getValue(steps, percent) {
     const [start, end, p] = getStep(steps, percent);
-    return (isNumber(start)
+    return isNumber(start)
         ? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
-        : +end
-    ).toFixed(digits);
+        : +end;
 }
 
-function getUnit(steps) {
-    return steps.reduce((unit, step) => isString(step) && step.replace(/-|\d/g, '').trim() || unit, '');
+function getUnit(steps, defaultUnit) {
+    return steps.reduce((unit, step) => unit || isString(step) && step.replace(/[\d-]/g, '').trim(), '') || defaultUnit;
 }
 
-function covers(el) {
-    const {backgroundSize} = el.style;
-    const covers = css(css(el, 'backgroundSize', ''), 'backgroundSize') === 'cover';
-    el.style.backgroundSize = backgroundSize;
-    return covers;
+function getCssValue(el, prop, value) {
+    const prev = el.style[prop];
+    const val = css(css(el, prop, value), prop);
+    el.style[prop] = prev;
+    return val;
+}
+
+function fillObject(keys, value) {
+    return keys.reduce((data, prop) => {
+        data[prop] = value;
+        return data;
+    }, {});
 }

package/src/js/util/dimensions.js

@@ -156,7 +156,7 @@ export function flipPosition(pos) {
     return pos;
 }
 
-export function toPx(value, property = 'width', element = window) {
+export function toPx(value, property = 'width', element = window, offsetDim = false) {
     return isNumeric(value)
         ? +value
         : endsWith(value, 'vh')
@@ -164,7 +164,9 @@ export function toPx(value, property = 'width', element = window) {
             : endsWith(value, 'vw')
                 ? percent(width(toWindow(element)), value)
                 : endsWith(value, '%')
-                    ? percent(dimensions(element)[property], value)
+                    ? percent(offsetDim
+                        ? element[`offset${ucfirst(property)}`]
+                        : dimensions(element)[property], value)
                     : toFloat(value);
 }
 

package/src/js/util/viewport.js

@@ -102,7 +102,7 @@ export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
 
 }
 
-export function scrolledOver(element, heightOffset = 0) {
+export function scrolledOver(element, startOffset = 0, endOffset = 0) {
 
     if (!isVisible(element)) {
         return 0;
@@ -110,18 +110,14 @@ export function scrolledOver(element, heightOffset = 0) {
 
     const [scrollElement] = scrollParents(element, /auto|scroll/, true);
     const {scrollHeight, scrollTop} = scrollElement;
-    const clientHeight = getViewportClientHeight(scrollElement);
-    const viewportTop = offsetPosition(element)[0] - scrollTop - offsetPosition(scrollElement)[0];
-    const viewportDist = Math.min(clientHeight, viewportTop + scrollTop);
-
-    const top = viewportTop - viewportDist;
-    const dist = Math.min(
-        element.offsetHeight + heightOffset + viewportDist,
-        scrollHeight - (viewportTop + scrollTop),
-        scrollHeight - clientHeight
-    );
-
-    return clamp(-1 * top / dist);
+    const viewportHeight = getViewportClientHeight(scrollElement);
+    const maxScroll = scrollHeight - viewportHeight;
+    const elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
+
+    const start = Math.max(0, elementOffsetTop - viewportHeight + startOffset);
+    const end = Math.min(maxScroll, elementOffsetTop + element.offsetHeight - endOffset);
+
+    return clamp((scrollTop - start) / (end - start));
 }
 
 export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scrollable = false) {

package/src/less/components/position.less

@@ -219,6 +219,8 @@
 
 .uk-position-z-index { z-index: 1; }
 
+.uk-position-z-index-negative { z-index: -1; }
+
 
 // Hooks
 // ========================================================================

package/src/less/components/sticky.less

@@ -23,6 +23,12 @@
    Component: Sticky
  ========================================================================== */
 
+/*
+ * Create position context so it's t the same like when fixed.
+ */
+
+.uk-sticky { position: relative; }
+
 /*
  * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
  */

package/src/scss/components/position.scss

@@ -219,6 +219,8 @@ $position-large-margin-l:                               50px !default;
 
 .uk-position-z-index { z-index: 1; }
 
+.uk-position-z-index-negative { z-index: -1; }
+
 
 // Hooks
 // ========================================================================

package/src/scss/components/sticky.scss

@@ -23,6 +23,12 @@ $sticky-reverse-animation-duration:              0.2s !default;
    Component: Sticky
  ========================================================================== */
 
+/*
+ * Create position context so it's t the same like when fixed.
+ */
+
+.uk-sticky { position: relative; }
+
 /*
  * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
  */

package/tests/index.html

@@ -598,7 +598,7 @@
                             <li><a href="#" uk-icon="icon: pencil"></a></li>
                             <li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li>
                         </ul>
-        
+
                     </div>
                 </div>
 

package/tests/js/index.js

@@ -63,7 +63,7 @@ on(window, 'load', () => setTimeout(() => fastdom.write(() => {
                 ${Object.keys(styles).map(style => `<option value="${style}">${ucfirst(style)}</option>`).join('')}
             </select>
             <select class="uk-select uk-form-width-small" style="margin: 20px">
-                ${Object.keys(variations).map(name => `<option value="${name}">${variations[name]}</option>`).join('')}        
+                ${Object.keys(variations).map(name => `<option value="${name}">${variations[name]}</option>`).join('')}
             </select>
             <label style="margin: 20px">
                 <input type="checkbox" class="uk-checkbox"/>