mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
465 lines
14 KiB
465 lines
14 KiB
/*! UIkit 3.0.0-rc.17 | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
|
|
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
|
|
typeof define === 'function' && define.amd ? define('uikitparallax', ['uikit-util'], factory) :
|
|
(global.UIkitParallax = factory(global.UIkit.util));
|
|
}(this, (function (uikitUtil) { 'use strict';
|
|
|
|
var Media = {
|
|
|
|
props: {
|
|
media: Boolean
|
|
},
|
|
|
|
data: {
|
|
media: false
|
|
},
|
|
|
|
computed: {
|
|
|
|
matchMedia: function() {
|
|
var media = toMedia(this.media);
|
|
return !media || window.matchMedia(media).matches;
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function toMedia(value) {
|
|
|
|
if (uikitUtil.isString(value)) {
|
|
if (value[0] === '@') {
|
|
var name = "breakpoint-" + (value.substr(1));
|
|
value = uikitUtil.toFloat(uikitUtil.getCssVar(name));
|
|
} else if (isNaN(value)) {
|
|
return value;
|
|
}
|
|
}
|
|
|
|
return value && !isNaN(value) ? ("(min-width: " + value + "px)") : false;
|
|
}
|
|
|
|
var props = ['x', 'y', 'bgx', 'bgy', 'rotate', 'scale', 'color', 'backgroundColor', 'borderColor', 'opacity', 'blur', 'hue', 'grayscale', 'invert', 'saturate', 'sepia', 'fopacity'];
|
|
|
|
var Parallax = {
|
|
|
|
mixins: [Media],
|
|
|
|
props: props.reduce(function (props, prop) {
|
|
props[prop] = 'list';
|
|
return props;
|
|
}, {}),
|
|
|
|
data: props.reduce(function (data, prop) {
|
|
data[prop] = undefined;
|
|
return data;
|
|
}, {}),
|
|
|
|
computed: {
|
|
|
|
props: function(properties, $el) {
|
|
var this$1 = this;
|
|
|
|
|
|
return props.reduce(function (props, prop) {
|
|
|
|
if (uikitUtil.isUndefined(properties[prop])) {
|
|
return props;
|
|
}
|
|
|
|
var isColor = prop.match(/color/i);
|
|
var isCssProp = isColor || prop === 'opacity';
|
|
|
|
var pos, bgPos, diff;
|
|
var steps = properties[prop].slice(0);
|
|
|
|
if (isCssProp) {
|
|
uikitUtil.css($el, prop, '');
|
|
}
|
|
|
|
if (steps.length < 2) {
|
|
steps.unshift((prop === 'scale'
|
|
? 1
|
|
: isCssProp
|
|
? uikitUtil.css($el, prop)
|
|
: 0) || 0);
|
|
}
|
|
|
|
var unit = uikitUtil.includes(steps.join(''), '%') ? '%' : 'px';
|
|
|
|
if (isColor) {
|
|
|
|
var ref = $el.style;
|
|
var color = ref.color;
|
|
steps = steps.map(function (step) { return parseColor($el, step); });
|
|
$el.style.color = color;
|
|
|
|
} else {
|
|
|
|
steps = steps.map(uikitUtil.toFloat);
|
|
|
|
}
|
|
|
|
if (prop.match(/^bg/)) {
|
|
|
|
uikitUtil.css($el, ("background-position-" + (prop[2])), '');
|
|
bgPos = uikitUtil.css($el, 'backgroundPosition').split(' ')[prop[2] === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
|
|
|
|
if (this$1.covers) {
|
|
|
|
var min = Math.min.apply(Math, steps);
|
|
var max = Math.max.apply(Math, steps);
|
|
var down = steps.indexOf(min) < steps.indexOf(max);
|
|
|
|
diff = max - min;
|
|
|
|
steps = steps.map(function (step) { return step - (down ? min : max); });
|
|
pos = (down ? -diff : 0) + "px";
|
|
|
|
} else {
|
|
|
|
pos = bgPos;
|
|
|
|
}
|
|
}
|
|
|
|
props[prop] = {steps: steps, unit: unit, pos: pos, bgPos: bgPos, diff: diff};
|
|
|
|
return props;
|
|
|
|
}, {});
|
|
|
|
},
|
|
|
|
bgProps: function() {
|
|
var this$1 = this;
|
|
|
|
return ['bgx', 'bgy'].filter(function (bg) { return bg in this$1.props; });
|
|
},
|
|
|
|
covers: function(_, $el) {
|
|
return covers($el);
|
|
}
|
|
|
|
},
|
|
|
|
disconnected: function() {
|
|
delete this._image;
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function(data) {
|
|
var this$1 = this;
|
|
|
|
|
|
data.active = this.matchMedia;
|
|
|
|
data.dimEl = {
|
|
width: this.$el.offsetWidth,
|
|
height: this.$el.offsetHeight
|
|
};
|
|
|
|
if ('image' in data || !this.covers || !this.bgProps.length) {
|
|
return;
|
|
}
|
|
|
|
var src = uikitUtil.css(this.$el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
|
|
|
|
if (!src) {
|
|
return;
|
|
}
|
|
|
|
var img = new Image();
|
|
img.src = src;
|
|
data.image = img;
|
|
|
|
if (!img.naturalWidth) {
|
|
img.onload = function () { return this$1.$emit(); };
|
|
}
|
|
},
|
|
|
|
write: function(ref) {
|
|
var this$1 = this;
|
|
var dimEl = ref.dimEl;
|
|
var image = ref.image;
|
|
var active = ref.active;
|
|
|
|
|
|
if (!image || !image.naturalWidth) {
|
|
return;
|
|
}
|
|
|
|
if (!active) {
|
|
uikitUtil.css(this.$el, {backgroundSize: '', backgroundRepeat: ''});
|
|
return;
|
|
}
|
|
|
|
var imageDim = {
|
|
width: image.naturalWidth,
|
|
height: image.naturalHeight
|
|
};
|
|
|
|
var dim = uikitUtil.Dimensions.cover(imageDim, dimEl);
|
|
|
|
this.bgProps.forEach(function (prop) {
|
|
|
|
var ref = this$1.props[prop];
|
|
var diff = ref.diff;
|
|
var bgPos = ref.bgPos;
|
|
var steps = ref.steps;
|
|
var attr = prop === 'bgy' ? 'height' : 'width';
|
|
var span = dim[attr] - dimEl[attr];
|
|
|
|
if (!bgPos.match(/%$|0px/)) {
|
|
return;
|
|
}
|
|
|
|
if (span < diff) {
|
|
dimEl[attr] = dim[attr] + diff - span;
|
|
} else if (span > diff) {
|
|
|
|
var bgPosFloat = parseFloat(bgPos);
|
|
|
|
if (bgPosFloat) {
|
|
this$1.props[prop].steps = steps.map(function (step) { return step - (span - diff) / (100 / bgPosFloat); });
|
|
}
|
|
}
|
|
|
|
dim = uikitUtil.Dimensions.cover(imageDim, dimEl);
|
|
});
|
|
|
|
uikitUtil.css(this.$el, {
|
|
backgroundSize: ((dim.width) + "px " + (dim.height) + "px"),
|
|
backgroundRepeat: 'no-repeat'
|
|
});
|
|
|
|
},
|
|
|
|
events: ['load', 'resize']
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
reset: function() {
|
|
var this$1 = this;
|
|
|
|
uikitUtil.each(this.getCss(0), function (_, prop) { return uikitUtil.css(this$1.$el, prop, ''); });
|
|
},
|
|
|
|
getCss: function(percent) {
|
|
|
|
var ref = this;
|
|
var props = ref.props;
|
|
var translated = false;
|
|
|
|
return Object.keys(props).reduce(function (css, prop) {
|
|
|
|
var ref = props[prop];
|
|
var steps = ref.steps;
|
|
var unit = ref.unit;
|
|
var pos = ref.pos;
|
|
var value = getValue(steps, percent);
|
|
|
|
switch (prop) {
|
|
|
|
// transforms
|
|
case 'x':
|
|
case 'y':
|
|
|
|
if (translated) {
|
|
break;
|
|
}
|
|
|
|
var ref$1 = ['x', 'y'].map(function (dir) { return prop === dir
|
|
? uikitUtil.toFloat(value).toFixed(0) + unit
|
|
: props[dir]
|
|
? getValue(props[dir].steps, percent, 0) + props[dir].unit
|
|
: 0; }
|
|
);
|
|
var x = ref$1[0];
|
|
var y = ref$1[1];
|
|
|
|
translated = css.transform += " translate3d(" + x + ", " + y + ", 0)";
|
|
break;
|
|
case 'rotate':
|
|
css.transform += " rotate(" + value + "deg)";
|
|
break;
|
|
case 'scale':
|
|
css.transform += " scale(" + value + ")";
|
|
break;
|
|
|
|
// bg image
|
|
case 'bgy':
|
|
case 'bgx':
|
|
css[("background-position-" + (prop[2]))] = "calc(" + pos + " + " + (value + unit) + ")";
|
|
break;
|
|
|
|
// color
|
|
case 'color':
|
|
case 'backgroundColor':
|
|
case 'borderColor':
|
|
|
|
var ref$2 = getStep(steps, percent);
|
|
var start = ref$2[0];
|
|
var end = ref$2[1];
|
|
var p = ref$2[2];
|
|
|
|
css[prop] = "rgba(" + (start.map(function (value, i) {
|
|
value = value + p * (end[i] - value);
|
|
return i === 3 ? uikitUtil.toFloat(value) : parseInt(value, 10);
|
|
}).join(',')) + ")";
|
|
break;
|
|
|
|
// CSS Filter
|
|
case 'blur':
|
|
css.filter += " blur(" + value + "px)";
|
|
break;
|
|
case 'hue':
|
|
css.filter += " hue-rotate(" + value + "deg)";
|
|
break;
|
|
case 'fopacity':
|
|
css.filter += " opacity(" + value + "%)";
|
|
break;
|
|
case 'grayscale':
|
|
case 'invert':
|
|
case 'saturate':
|
|
case 'sepia':
|
|
css.filter += " " + prop + "(" + value + "%)";
|
|
break;
|
|
|
|
default:
|
|
css[prop] = value;
|
|
}
|
|
|
|
return css;
|
|
|
|
}, {transform: '', filter: ''});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function parseColor(el, color) {
|
|
return uikitUtil.css(uikitUtil.css(el, 'color', color), 'color').split(/[(),]/g).slice(1, -1).concat(1).slice(0, 4).map(function (n) { return uikitUtil.toFloat(n); });
|
|
}
|
|
|
|
function getStep(steps, percent) {
|
|
var count = steps.length - 1;
|
|
var index = Math.min(Math.floor(count * percent), count - 1);
|
|
var step = steps.slice(index, index + 2);
|
|
|
|
step.push(percent === 1 ? 1 : percent % (1 / count) * count);
|
|
|
|
return step;
|
|
}
|
|
|
|
function getValue(steps, percent, digits) {
|
|
if ( digits === void 0 ) digits = 2;
|
|
|
|
var ref = getStep(steps, percent);
|
|
var start = ref[0];
|
|
var end = ref[1];
|
|
var p = ref[2];
|
|
return (uikitUtil.isNumber(start)
|
|
? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
|
|
: +end
|
|
).toFixed(digits);
|
|
}
|
|
|
|
function covers(el) {
|
|
var ref = el.style;
|
|
var backgroundSize = ref.backgroundSize;
|
|
var covers = uikitUtil.css(uikitUtil.css(el, 'backgroundSize', ''), 'backgroundSize') === 'cover';
|
|
el.style.backgroundSize = backgroundSize;
|
|
return covers;
|
|
}
|
|
|
|
var Component = {
|
|
|
|
mixins: [Parallax],
|
|
|
|
props: {
|
|
target: String,
|
|
viewport: Number,
|
|
easing: Number,
|
|
},
|
|
|
|
data: {
|
|
target: false,
|
|
viewport: 1,
|
|
easing: 1,
|
|
},
|
|
|
|
computed: {
|
|
|
|
target: function(ref, $el) {
|
|
var target = ref.target;
|
|
|
|
return target && uikitUtil.query(target, $el) || $el;
|
|
}
|
|
|
|
},
|
|
|
|
update: {
|
|
|
|
read: function(ref, ref$1) {
|
|
var percent = ref.percent;
|
|
var active = ref.active;
|
|
var type = ref$1.type;
|
|
|
|
|
|
if (type !== 'scroll') {
|
|
percent = false;
|
|
}
|
|
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
var prev = percent;
|
|
percent = ease(uikitUtil.scrolledOver(this.target) / (this.viewport || 1), this.easing);
|
|
|
|
return {
|
|
percent: percent,
|
|
style: prev !== percent ? this.getCss(percent) : false
|
|
};
|
|
},
|
|
|
|
write: function(ref) {
|
|
var style = ref.style;
|
|
var active = ref.active;
|
|
|
|
|
|
if (!active) {
|
|
this.reset();
|
|
return;
|
|
}
|
|
|
|
style && uikitUtil.css(this.$el, style);
|
|
|
|
},
|
|
|
|
events: ['scroll', 'load', 'resize']
|
|
}
|
|
|
|
};
|
|
|
|
function ease(percent, easing) {
|
|
return uikitUtil.clamp(percent * (1 - (easing - easing * percent)));
|
|
}
|
|
|
|
/* global UIkit, 'parallax' */
|
|
|
|
if (typeof window !== 'undefined' && window.UIkit) {
|
|
window.UIkit.component('parallax', Component);
|
|
}
|
|
|
|
return Component;
|
|
|
|
})));
|
|
|