uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
3 lines (2 loc) • 5.57 kB
JavaScript
/*! UIkit 3.2.1 | http://www.getuikit.com | (c) 2014 - 2019 YOOtheme | MIT License */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("uikit-util")):"function"==typeof define&&define.amd?define("uikitparallax",["uikit-util"],e):(t=t||self).UIkitParallax=e(t.UIkit.util)}(this,function(b){"use strict";var t={props:{media:Boolean},data:{media:!1},computed:{matchMedia:function(){var t=function(t){if(b.isString(t))if("@"===t[0]){var e="breakpoint-"+t.substr(1);t=b.toFloat(b.getCssVar(e))}else if(isNaN(t))return t;return!(!t||isNaN(t))&&"(min-width: "+t+"px)"}(this.media);return!t||window.matchMedia(t).matches}}};var e=["x","y","bgx","bgy","rotate","scale","color","backgroundColor","borderColor","opacity","blur","hue","grayscale","invert","saturate","sepia","fopacity","stroke"];function d(t,e){var r=t.length-1,i=Math.min(Math.floor(r*e),r-1),a=t.slice(i,i+2);return a.push(1===e?1:e%(1/r)*r),a}var r={mixins:[{mixins:[t],props:e.reduce(function(t,e){return t[e]="list",t},{}),data:e.reduce(function(t,e){return t[e]=void 0,t},{}),computed:{props:function(g,m){var v=this;return e.reduce(function(t,e){if(b.isUndefined(g[e]))return t;var r,i,a,n=e.match(/color/i),s=n||"opacity"===e,o=g[e].slice(0);s&&b.css(m,e,""),o.length<2&&o.unshift(("scale"===e?1:s?b.css(m,e):0)||0);var c=function(t){return t.reduce(function(t,e){return b.isString(e)&&e.replace(/-|\d/g,"").trim()||t},"")}(o);if(n){var u=m.style.color;o=o.map(function(t){return function(t,e){return b.css(b.css(t,"color",e),"color").split(/[(),]/g).slice(1,-1).concat(1).slice(0,4).map(b.toFloat)}(m,t)}),m.style.color=u}else if(b.startsWith(e,"bg")){var l="bgy"===e?"height":"width";if(o=o.map(function(t){return b.toPx(t,l,v.$el)}),b.css(m,"background-position-"+e[2],""),i=b.css(m,"backgroundPosition").split(" ")["x"===e[2]?0:1],v.covers){var f=Math.min.apply(Math,o),p=Math.max.apply(Math,o),d=o.indexOf(f)<o.indexOf(p);a=p-f,o=o.map(function(t){return t-(d?f:p)}),r=(d?-a:0)+"px"}else r=i}else o=o.map(b.toFloat);if("stroke"===e){if(!o.some(function(t){return t}))return t;var h=function(t){return Math.ceil(Math.max.apply(Math,b.$$("[stroke]",t).map(function(t){return t.getTotalLength&&t.getTotalLength()||0}).concat([0])))}(v.$el);b.css(m,"strokeDasharray",h),"%"===c&&(o=o.map(function(t){return t*h/100})),o=o.reverse(),e="strokeDashoffset"}return t[e]={steps:o,unit:c,pos:r,bgPos:i,diff:a},t},{})},bgProps:function(){var e=this;return["bgx","bgy"].filter(function(t){return t in e.props})},covers:function(t,e){return function(t){var e=t.style.backgroundSize,r="cover"===b.css(b.css(t,"backgroundSize",""),"backgroundSize");return t.style.backgroundSize=e,r}(e)}},disconnected:function(){delete this._image},update:{read:function(t){var c=this;if(t.active=this.matchMedia,t.active){if(!t.image&&this.covers&&this.bgProps.length){var e=b.css(this.$el,"backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/,"$1");if(e){var r=new Image;r.src=e,(t.image=r).naturalWidth||(r.onload=function(){return c.$emit()})}}var i=t.image;if(i&&i.naturalWidth){var u={width:this.$el.offsetWidth,height:this.$el.offsetHeight},l={width:i.naturalWidth,height:i.naturalHeight},f=b.Dimensions.cover(l,u);this.bgProps.forEach(function(t){var e=c.props[t],r=e.diff,i=e.bgPos,a=e.steps,n="bgy"===t?"height":"width",s=f[n]-u[n];if(s<r)u[n]=f[n]+r-s;else if(r<s){var o=u[n]/b.toPx(i,n,c.$el);o&&(c.props[t].steps=a.map(function(t){return t-(s-r)/o}))}f=b.Dimensions.cover(l,u)}),t.dim=f}}},write:function(t){var e=t.dim;t.active?e&&b.css(this.$el,{backgroundSize:e.width+"px "+e.height+"px",backgroundRepeat:"no-repeat"}):b.css(this.$el,{backgroundSize:"",backgroundRepeat:""})},events:["resize"]},methods:{reset:function(){var r=this;b.each(this.getCss(0),function(t,e){return b.css(r.$el,e,"")})},getCss:function(f){var p=this.props;return Object.keys(p).reduce(function(t,e){var r=p[e],i=r.steps,a=r.unit,n=r.pos,s=function(t,e,r){void 0===r&&(r=2);var i=d(t,e),a=i[0],n=i[1],s=i[2];return(b.isNumber(a)?a+Math.abs(a-n)*s*(a<n?1:-1):+n).toFixed(r)}(i,f);switch(e){case"x":case"y":a=a||"px",t.transform+=" translate"+b.ucfirst(e)+"("+b.toFloat(s).toFixed("px"===a?0:2)+a+")";break;case"rotate":a=a||"deg",t.transform+=" rotate("+(s+a)+")";break;case"scale":t.transform+=" scale("+s+")";break;case"bgy":case"bgx":t["background-position-"+e[2]]="calc("+n+" + "+s+"px)";break;case"color":case"backgroundColor":case"borderColor":var o=d(i,f),c=o[0],u=o[1],l=o[2];t[e]="rgba("+c.map(function(t,e){return t+=l*(u[e]-t),3===e?b.toFloat(t):parseInt(t,10)}).join(",")+")";break;case"blur":a=a||"px",t.filter+=" blur("+(s+a)+")";break;case"hue":a=a||"deg",t.filter+=" hue-rotate("+(s+a)+")";break;case"fopacity":a=a||"%",t.filter+=" opacity("+(s+a)+")";break;case"grayscale":case"invert":case"saturate":case"sepia":a=a||"%",t.filter+=" "+e+"("+(s+a)+")";break;default:t[e]=s}return t},{transform:"",filter:""})}}}],props:{target:String,viewport:Number,easing:Number},data:{target:!1,viewport:1,easing:1},computed:{target:function(t,e){var r=t.target;return function t(e){return e?"offsetTop"in e?e:t(e.parentNode):document.body}(r&&b.query(r,e)||e)}},update:{read:function(t,e){var r=t.percent;if("scroll"!==e&&(r=!1),t.active){var i=r;return{percent:r=function(t,e){return b.clamp(t*(1-(e-e*t)))}(b.scrolledOver(this.target)/(this.viewport||1),this.easing),style:i!==r&&this.getCss(r)}}},write:function(t){var e=t.style;t.active?e&&b.css(this.$el,e):this.reset()},events:["scroll","resize"]}};return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("parallax",r),r});