uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
3 lines (2 loc) • 5.69 kB
JavaScript
/*! UIkit 3.6.19 | https://www.getuikit.com | (c) 2014 - 2021 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="undefined"!=typeof globalThis?globalThis: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}}};b.memoize(function(r){return new b.Promise(function(e,t){r?b.startsWith(r,"data:")?e(decodeURIComponent(r.split(",")[1])):b.ajax(r).then(function(t){return e(t.response)},function(){return t("SVG not found.")}):t()})});var e=["x","y","bgx","bgy","rotate","scale","color","backgroundColor","borderColor","opacity","blur","hue","grayscale","invert","saturate","sepia","fopacity","stroke"];function f(t,e){var r=t.length-1,i=Math.min(Math.floor(r*e),r-1),i=t.slice(i,i+2);return i.push(1===e?1:e%(1/r)*r),i}t={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(h,g){var m=this;return e.reduce(function(t,e){if(b.isUndefined(h[e]))return t;var r,i,a=e.match(/color/i),n=a||"opacity"===e,s=h[e].slice();n&&b.css(g,e,""),s.length<2&&s.unshift(("scale"===e?1:n?b.css(g,e):0)||0);var o,c,u,l,d,p,n=s.reduce(function(t,e){return b.isString(e)&&e.replace(/-|\d/g,"").trim()||t},"");if(a?(p=g.style.color,s=s.map(function(t){return e=g,t=t,b.css(b.css(e,"color",t),"color").split(/[(),]/g).slice(1,-1).concat(1).slice(0,4).map(b.toFloat);var e}),g.style.color=p):b.startsWith(e,"bg")?(o="bgy"===e?"height":"width",s=s.map(function(t){return b.toPx(t,o,m.$el)}),b.css(g,"background-position-"+e[2],""),i=b.css(g,"backgroundPosition").split(" ")["x"===e[2]?0:1],r=m.covers?(c=Math.min.apply(Math,s),u=Math.max.apply(Math,s),l=s.indexOf(c)<s.indexOf(u),d=u-c,s=s.map(function(t){return t-(l?c:u)}),(l?-d:0)+"px"):i):s=s.map(b.toFloat),"stroke"===e){if(!s.some(function(t){return t}))return t;var f=(p=m.$el,Math.ceil(Math.max.apply(Math,[0].concat(b.$$("[stroke]",p).map(function(t){try{return t.getTotalLength()}catch(t){return 0}})))));b.css(g,"strokeDasharray",f),s=(s="%"===n?s.map(function(t){return t*f/100}):s).reverse(),e="strokeDashoffset"}return t[e]={steps:s,unit:n,pos:r,bgPos:i,diff:d},t},{})},bgProps:function(){var e=this;return["bgx","bgy"].filter(function(t){return t in e.props})},covers:function(t,e){return i=(r=e).style.backgroundSize,e="cover"===b.css(b.css(r,"backgroundSize",""),"backgroundSize"),r.style.backgroundSize=i,e;var r,i}},disconnected:function(){delete this._image},update:{read:function(t){var e,r,o,c,u,l=this;this.matchMedia&&(t.image||!this.covers||!this.bgProps.length||(e=b.css(this.$el,"backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/,"$1"))&&((r=new Image).src=e,(t.image=r).naturalWidth||(r.onload=function(){return l.$update()})),(r=t.image)&&r.naturalWidth&&(o={width:this.$el.offsetWidth,height:this.$el.offsetHeight},c={width:r.naturalWidth,height:r.naturalHeight},u=b.Dimensions.cover(c,o),this.bgProps.forEach(function(t){var e,r=l.props[t],i=r.diff,a=r.bgPos,n=r.steps,r="bgy"===t?"height":"width",s=u[r]-o[r];s<i?o[r]=u[r]+i-s:i<s&&((e=o[r]/b.toPx(a,r,l.$el))&&(l.props[t].steps=n.map(function(t){return t-(s-i)/e}))),u=b.Dimensions.cover(c,o)}),t.dim=u))},write:function(t){t=t.dim;this.matchMedia?t&&b.css(this.$el,{backgroundSize:t.width+"px "+t.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(d){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=f(t,e),t=i[0],e=i[1],i=i[2];return(b.isNumber(t)?t+Math.abs(t-e)*i*(t<e?1:-1):+e).toFixed(r)}(i,d);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=f(i,d),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){t=t.target;return function t(e){return e?"offsetTop"in e?e:t(b.parent(e)):document.body}(t&&b.query(t,e)||e)}},update:{read:function(t,e){var r=t.percent;if(e.has("scroll")||(r=!1),this.matchMedia){var i=r;return t=b.scrolledOver(this.target)/(this.viewport||1),e=this.easing,{percent:r=b.clamp(t*(1-(e-e*t))),style:i!==r&&this.getCss(r)}}},write:function(t){t=t.style;this.matchMedia?t&&b.css(this.$el,t):this.reset()},events:["scroll","resize"]}};return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("parallax",t),t});