interpolateCSS.min.js

"use strict";function interpolateCSS(e){function n(){let e=!1;window.requestAnimationFrame(function(){function n(e,n,t){e instanceof NodeList?e.forEach(function(e){t(e,n)}):t(e,n)}function o(e,t,i){n(e.element,e.property,function(n,o){n.style[o]=(e.yValues_calc[t+1]-e.yValues_calc[t])/(e.xBreakpoints[t+1]-e.xBreakpoints[t])*(i-e.xBreakpoints[t])+e.yValues_calc[t]+e.unit}),r=!0}if(e)return;let r;e=!0,i.forEach(function(e){let t,i=null;if(e.hasOwnProperty("xDefinition")){function l(e,n){return e*(n.multiply||n)+(n.add||0)}t=function(e){let n=parseFloat(e);return{value:n,unit:e.substring(n.toString().length)}}(window.getComputedStyle(e.xDefinition.element)[e.xDefinition.property]),e.xBreakpoints?e.yValues_calc=e.yValues.map(function(e){return l(t.value,e)}):e.yValues_calc=l(t.value,e.yValues),e.hasOwnProperty("unit")||(e.unit=t.unit),e.xDefinition.breakPointsFromElement||(i=window.innerWidth)}else e.yValues_calc=e.yValues,t={value:window.innerWidth,unit:"px"};if(i||(i=t.value),e.hasOwnProperty("xBreakpoints")){const l=e.xBreakpoints.length-1;r=!1;for(let n=0;n<l;n++)if(i>=e.xBreakpoints[n]&&i<=e.xBreakpoints[n+1]||e.extrapolateMin&&0==n&&i<e.xBreakpoints[n]){o(e,n,t.value);break}e.extrapolateMax&&i>e.xBreakpoints[l]&&o(e,l-1,i),r||n(e.element,e.property,function(e,n){e.style[n]=""})}else n(e.element,e.property,function(n,t){n.style[t]=e.yValues_calc+e.unit})}),window.dispatchEvent(t),e=!1})}const t=new Event("interpolateCSSDone");let i;0!==e.length&&(window.interpolateCSSListenerSet||(window.addEventListener("resize",n),window.interpolateCSSListenerSet=!0),interpolateCSS.doInterpolations=n,interpolateCSS.refresh=function(){i=e.map(function(e){return{...e}}),i.forEach(function(e,n){function t(e){console.warn("Provided element in object number "+n+" is not valid DOM element, or query does not give all valid elements, interpolation will not work on element! \nElement: "+e)}function i(e){let n;if("string"==typeof e){n=document.querySelectorAll(e),n.forEach(function(e){e instanceof Element||(t(),e=void 0)});const i=n.length;0===i?(t(),n=void 0):1===i&&(n=n[0])}else e&&e instanceof Element?n=e:(t(),n=void 0);return n}e.singleY=!Array.isArray(e.yValues),function(){function n(e){return"number"==typeof e||"object"==typeof e&&e.hasOwnProperty("multiply")}if(e.singleY)return n(e.yValues);{let t=!0;return e.yValues.forEach(function(e){t=t&&n(e)}),t}}()?(e.element=i(e.element),e&&e.xDefinition&&("self"===e.xDefinition.element?e.xDefinition.element=e.element instanceof NodeList?e.element[0]:e.element:e.xDefinition.element=i(e.xDefinition.element)),e.singleY&&e.xBreakpoints&&(e.yValues=e.xBreakpoints.map(function(){return e.yValues}))):console.error("Given yValues is misconfigured; not number nor Array or property multiply does not exists! Stopping.")}),i=i.filter(function(e){return Boolean(e.element)}),n()},interpolateCSS.refresh())}