updated Uikit v2
This commit is contained in:
@@ -1,15 +1,15 @@
|
||||
/*! UIkit 2.25.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
||||
/*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
||||
(function(addon) {
|
||||
|
||||
var component;
|
||||
|
||||
if (window.UIkit) {
|
||||
component = addon(UIkit);
|
||||
if (window.UIkit2) {
|
||||
component = addon(UIkit2);
|
||||
}
|
||||
|
||||
if (typeof define == "function" && define.amd) {
|
||||
define("uikit-parallax", ["uikit"], function(){
|
||||
return component || addon(UIkit);
|
||||
if (typeof define == 'function' && define.amd) {
|
||||
define('uikit-parallax', ['uikit'], function(){
|
||||
return component || addon(UIkit2);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
for (var t in transforms) {
|
||||
if (el.style[t] !== undefined) {
|
||||
el.style[t] = "translate3d(1px,1px,1px)";
|
||||
el.style[t] = 'translate3d(1px,1px,1px)';
|
||||
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
|
||||
}
|
||||
}
|
||||
@@ -71,8 +71,8 @@
|
||||
})();
|
||||
|
||||
// listen to scroll and resize
|
||||
UI.$doc.on("scrolling.uk.document", checkParallaxes);
|
||||
UI.$win.on("load resize orientationchange", UI.Utils.debounce(function(){
|
||||
UI.$doc.on('scrolling.uk.document', checkParallaxes);
|
||||
UI.$win.on('load resize orientationchange', UI.Utils.debounce(function(){
|
||||
wh = window.innerHeight;
|
||||
checkParallaxes();
|
||||
}, 50));
|
||||
@@ -84,8 +84,8 @@
|
||||
|
||||
var parallax = UI.$(this);
|
||||
|
||||
if (!parallax.data("parallax")) {
|
||||
UI.parallax(parallax, UI.Utils.options(parallax.attr("data-uk-parallax")));
|
||||
if (!parallax.data('parallax')) {
|
||||
UI.parallax(parallax, UI.Utils.options(parallax.attr('data-uk-parallax')));
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -122,7 +122,7 @@
|
||||
dir = (start < end ? 1:-1);
|
||||
}
|
||||
|
||||
this.props[prop] = { 'start': start, 'end': end, 'dir': dir, 'diff': diff };
|
||||
this.props[prop] = { start: start, end: end, dir: dir, diff: diff };
|
||||
|
||||
}.bind(this));
|
||||
|
||||
@@ -186,7 +186,7 @@
|
||||
update: function(percent) {
|
||||
|
||||
var $this = this,
|
||||
css = {'transform':''},
|
||||
css = {transform:'', filter:''},
|
||||
compercent = percent * (1 - (this.velocity - (this.velocity * percent))),
|
||||
opts, val;
|
||||
|
||||
@@ -216,27 +216,27 @@
|
||||
switch(prop) {
|
||||
|
||||
// transforms
|
||||
case "x":
|
||||
case 'x':
|
||||
css.transform += supports3d ? ' translate3d('+val+'px, 0, 0)':' translateX('+val+'px)';
|
||||
break;
|
||||
case "xp":
|
||||
case 'xp':
|
||||
css.transform += supports3d ? ' translate3d('+val+'%, 0, 0)':' translateX('+val+'%)';
|
||||
break;
|
||||
case "y":
|
||||
case 'y':
|
||||
css.transform += supports3d ? ' translate3d(0, '+val+'px, 0)':' translateY('+val+'px)';
|
||||
break;
|
||||
case "yp":
|
||||
case 'yp':
|
||||
css.transform += supports3d ? ' translate3d(0, '+val+'%, 0)':' translateY('+val+'%)';
|
||||
break;
|
||||
case "rotate":
|
||||
case 'rotate':
|
||||
css.transform += ' rotate('+val+'deg)';
|
||||
break;
|
||||
case "scale":
|
||||
case 'scale':
|
||||
css.transform += ' scale('+val+')';
|
||||
break;
|
||||
|
||||
// bg image
|
||||
case "bg":
|
||||
case 'bg':
|
||||
|
||||
// don't move if image height is too small
|
||||
// if ($this.element.data('bgsize') && ($this.element.data('bgsize').h + val - window.innerHeight) < 0) {
|
||||
@@ -245,17 +245,40 @@
|
||||
|
||||
css['background-position'] = '50% '+val+'px';
|
||||
break;
|
||||
case "bgp":
|
||||
case 'bgp':
|
||||
css['background-position'] = '50% '+val+'%';
|
||||
break;
|
||||
|
||||
// color
|
||||
case "color":
|
||||
case "background-color":
|
||||
case "border-color":
|
||||
case 'color':
|
||||
case 'background-color':
|
||||
case 'border-color':
|
||||
css[prop] = calcColor(opts.start, opts.end, compercent);
|
||||
break;
|
||||
|
||||
// CSS Filter
|
||||
case 'blur':
|
||||
css.filter += ' blur('+val+'px)';
|
||||
break;
|
||||
case 'hue':
|
||||
css.filter += ' hue-rotate('+val+'deg)';
|
||||
break;
|
||||
case 'grayscale':
|
||||
css.filter += ' grayscale('+val+'%)';
|
||||
break;
|
||||
case 'invert':
|
||||
css.filter += ' invert('+val+'%)';
|
||||
break;
|
||||
case 'fopacity':
|
||||
css.filter += ' opacity('+val+'%)';
|
||||
break;
|
||||
case 'saturate':
|
||||
css.filter += ' saturate('+val+'%)';
|
||||
break;
|
||||
case 'sepia':
|
||||
css.filter += ' sepia('+val+'%)';
|
||||
break;
|
||||
|
||||
default:
|
||||
css[prop] = val;
|
||||
break;
|
||||
@@ -263,6 +286,10 @@
|
||||
|
||||
}.bind(this));
|
||||
|
||||
if (css.filter) {
|
||||
css['-webkit-filter'] = css.filter;
|
||||
}
|
||||
|
||||
this.element.css(css);
|
||||
|
||||
this._percent = compercent;
|
||||
@@ -292,7 +319,7 @@
|
||||
|
||||
var img = new Image(), url, element, size, check, ratio, width, height;
|
||||
|
||||
element = obj.element.css({'background-size': 'cover', 'background-repeat': 'no-repeat'});
|
||||
element = obj.element.css({backgroundSize: 'cover', backgroundRepeat: 'no-repeat'});
|
||||
url = element.css('background-image').replace(/^url\(/g, '').replace(/\)$/g, '').replace(/("|')/g, '');
|
||||
check = function() {
|
||||
|
||||
@@ -302,7 +329,7 @@
|
||||
w += Math.ceil(extra * ratio);
|
||||
|
||||
if (w-extra < size.w && h < size.h) {
|
||||
return obj.element.css({'background-size': 'auto'});
|
||||
return obj.element.css({backgroundSize: 'auto'});
|
||||
}
|
||||
|
||||
// if element height < parent height (gap underneath)
|
||||
@@ -323,7 +350,7 @@
|
||||
height = Math.ceil(w / ratio);
|
||||
}
|
||||
|
||||
element.css({'background-size': (width+'px '+height+'px')}).data('bgsize', {w:width,h:height});
|
||||
element.css({backgroundSize: (width+'px '+height+'px')}).data('bgsize', {w:width,h:height});
|
||||
};
|
||||
|
||||
img.onerror = function(){
|
||||
@@ -334,7 +361,7 @@
|
||||
size = {w:img.width, h:img.height};
|
||||
ratio = img.width / img.height;
|
||||
|
||||
UI.$win.on("load resize orientationchange", UI.Utils.debounce(function(){
|
||||
UI.$win.on('load resize orientationchange', UI.Utils.debounce(function(){
|
||||
check();
|
||||
}, 50));
|
||||
|
||||
|
||||
Reference in New Issue
Block a user