uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
3 lines (2 loc) • 5.97 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("uikitslideshow_parallax",["uikit-util"],e):(t=t||self).UIkitSlideshow_parallax=e(t.UIkit.util)}(this,function(v){"use strict";var t={props:{media:Boolean},data:{media:!1},computed:{matchMedia:function(){var t=function(t){if(v.isString(t))if("@"===t[0]){var e="breakpoint-"+t.substr(1);t=v.toFloat(v.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 i=t.length-1,r=Math.min(Math.floor(i*e),i-1),n=t.slice(r,r+2);return n.push(1===e?1:e%(1/i)*i),n}var i={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(m,g){var b=this;return e.reduce(function(t,e){if(v.isUndefined(m[e]))return t;var i,r,n,a=e.match(/color/i),s=a||"opacity"===e,o=m[e].slice(0);s&&v.css(g,e,""),o.length<2&&o.unshift(("scale"===e?1:s?v.css(g,e):0)||0);var c=function(t){return t.reduce(function(t,e){return v.isString(e)&&e.replace(/-|\d/g,"").trim()||t},"")}(o);if(a){var u=g.style.color;o=o.map(function(t){return function(t,e){return v.css(v.css(t,"color",e),"color").split(/[(),]/g).slice(1,-1).concat(1).slice(0,4).map(v.toFloat)}(g,t)}),g.style.color=u}else if(v.startsWith(e,"bg")){var l="bgy"===e?"height":"width";if(o=o.map(function(t){return v.toPx(t,l,b.$el)}),v.css(g,"background-position-"+e[2],""),r=v.css(g,"backgroundPosition").split(" ")["x"===e[2]?0:1],b.covers){var f=Math.min.apply(Math,o),h=Math.max.apply(Math,o),d=o.indexOf(f)<o.indexOf(h);n=h-f,o=o.map(function(t){return t-(d?f:h)}),i=(d?-n:0)+"px"}else i=r}else o=o.map(v.toFloat);if("stroke"===e){if(!o.some(function(t){return t}))return t;var p=function(t){return Math.ceil(Math.max.apply(Math,v.$$("[stroke]",t).map(function(t){return t.getTotalLength&&t.getTotalLength()||0}).concat([0])))}(b.$el);v.css(g,"strokeDasharray",p),"%"===c&&(o=o.map(function(t){return t*p/100})),o=o.reverse(),e="strokeDashoffset"}return t[e]={steps:o,unit:c,pos:i,bgPos:r,diff:n},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,i="cover"===v.css(v.css(t,"backgroundSize",""),"backgroundSize");return t.style.backgroundSize=e,i}(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=v.css(this.$el,"backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/,"$1");if(e){var i=new Image;i.src=e,(t.image=i).naturalWidth||(i.onload=function(){return c.$emit()})}}var r=t.image;if(r&&r.naturalWidth){var u={width:this.$el.offsetWidth,height:this.$el.offsetHeight},l={width:r.naturalWidth,height:r.naturalHeight},f=v.Dimensions.cover(l,u);this.bgProps.forEach(function(t){var e=c.props[t],i=e.diff,r=e.bgPos,n=e.steps,a="bgy"===t?"height":"width",s=f[a]-u[a];if(s<i)u[a]=f[a]+i-s;else if(i<s){var o=u[a]/v.toPx(r,a,c.$el);o&&(c.props[t].steps=n.map(function(t){return t-(s-i)/o}))}f=v.Dimensions.cover(l,u)}),t.dim=f}}},write:function(t){var e=t.dim;t.active?e&&v.css(this.$el,{backgroundSize:e.width+"px "+e.height+"px",backgroundRepeat:"no-repeat"}):v.css(this.$el,{backgroundSize:"",backgroundRepeat:""})},events:["resize"]},methods:{reset:function(){var i=this;v.each(this.getCss(0),function(t,e){return v.css(i.$el,e,"")})},getCss:function(f){var h=this.props;return Object.keys(h).reduce(function(t,e){var i=h[e],r=i.steps,n=i.unit,a=i.pos,s=function(t,e,i){void 0===i&&(i=2);var r=d(t,e),n=r[0],a=r[1],s=r[2];return(v.isNumber(n)?n+Math.abs(n-a)*s*(n<a?1:-1):+a).toFixed(i)}(r,f);switch(e){case"x":case"y":n=n||"px",t.transform+=" translate"+v.ucfirst(e)+"("+v.toFloat(s).toFixed("px"===n?0:2)+n+")";break;case"rotate":n=n||"deg",t.transform+=" rotate("+(s+n)+")";break;case"scale":t.transform+=" scale("+s+")";break;case"bgy":case"bgx":t["background-position-"+e[2]]="calc("+a+" + "+s+"px)";break;case"color":case"backgroundColor":case"borderColor":var o=d(r,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?v.toFloat(t):parseInt(t,10)}).join(",")+")";break;case"blur":n=n||"px",t.filter+=" blur("+(s+n)+")";break;case"hue":n=n||"deg",t.filter+=" hue-rotate("+(s+n)+")";break;case"fopacity":n=n||"%",t.filter+=" opacity("+(s+n)+")";break;case"grayscale":case"invert":case"saturate":case"sepia":n=n||"%",t.filter+=" "+e+"("+(s+n)+")";break;default:t[e]=s}return t},{transform:"",filter:""})}}}],data:{selItem:"!li"},computed:{item:function(t,e){var i=t.selItem;return v.query(i,e)}},events:[{name:"itemshown",self:!0,el:function(){return this.item},handler:function(){v.css(this.$el,this.getCss(.5))}},{name:"itemin itemout",self:!0,el:function(){return this.item},handler:function(t){var e=t.type,i=t.detail,r=i.percent,n=i.duration,a=i.timing,s=i.dir;v.Transition.cancel(this.$el),v.css(this.$el,this.getCss(c(e,s,r))),v.Transition.start(this.$el,this.getCss(o(e)?.5:0<s?1:0),n,a).catch(v.noop)}},{name:"transitioncanceled transitionend",self:!0,el:function(){return this.item},handler:function(){v.Transition.cancel(this.$el)}},{name:"itemtranslatein itemtranslateout",self:!0,el:function(){return this.item},handler:function(t){var e=t.type,i=t.detail,r=i.percent,n=i.dir;v.Transition.cancel(this.$el),v.css(this.$el,this.getCss(c(e,n,r)))}}]};function o(t){return v.endsWith(t,"in")}function c(t,e,i){return i/=2,o(t)?e<0?1-i:i:e<0?i:1-i}return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("slideshowParallax",i),i});