react-parabola/index.js

Parabolic motion of an object

!function(e){function t(t){for(var r,i,u=t[0],c=t[1],l=t[2],f=0,p=[];f<u.length;f++)i=u[f],o[i]&&p.push(o[i][0]),o[i]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(s&&s(t);p.length;)p.shift()();return a.push.apply(a,l||[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],r=!0,u=1;u<n.length;u++){var c=n[u];0!==o[c]&&(r=!1)}r&&(a.splice(t--,1),e=i(i.s=n[0]))}return e}var r={},o={0:0},a=[];function i(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=r,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="";var u=window.webpackJsonp=window.webpackJsonp||[],c=u.push.bind(u);u.push=t,u=u.slice();for(var l=0;l<u.length;l++)t(u[l]);var s=c;a.push([23,1]),n()}({22:function(e,t,n){},23:function(e,t,n){"use strict";n.r(t);var r=n(1),o=n.n(r),a=n(3),i=n.n(a),u=n(0),c=n.n(u);function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function s(e,t){return!t||"object"!==l(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function d(e,t,n){return t&&p(e.prototype,t),n&&p(e,n),e}function y(e,t){return(y=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function b(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var h=function(){return!1},m=function(e){function t(e){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(n=s(this,f(t).call(this,e))).state={translateX:0,translateY:0,scaleX:1,scaleY:1,animationEnd:!1},n.startTime=new Date,n.initParabolas(),n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&y(e,t)}(t,r["Component"]),d(t,null,[{key:"calculate",value:function(e,t){var n=e.x,r=e.y,o=t.x;return{a:(t.y-r)/Math.pow(o-n,2),h:n,k:r}}}]),d(t,[{key:"componentDidMount",value:function(){this.beforeStart(),this.draw()}},{key:"componentWillUnmount",value:function(){this.afterEnd()}},{key:"draw",value:function(){var e=this,t=this.props.delay;setTimeout(function(){e.update(),e.startTime=new Date},t)}},{key:"finish",value:function(){var e=this.props.onEnd;e&&e()}},{key:"beforeStart",value:function(){var e=this.props.onBeforeStart;e&&e()}},{key:"afterEnd",value:function(){var e=this.props.onAfterEnd;e&&e()}},{key:"initParabolas",value:function(){var e=this.props,n=e.rate,r=e.top,o=e.start,a=e.end,i={x:0,y:0},u={x:a.x-o.x,y:a.y-o.y},c={x:n*u.x,y:Math.min(u.y,i.y)-r},l=t.calculate(c,i),s=t.calculate(c,u);return this.parabolas={lParabola:l,rParabola:s},this.parabolas}},{key:"update",value:function(){var e=this.props,t=e.duration,n=e.rate,r=e.start,o=e.end,a=this.state.animationEnd,i=Date.now()-this.startTime;if(i>t){if(a)return this.finish();i=t,a=!0}var u=i/t,c=this.parabolas,l=c.lParabola,s=c.rParabola,f=n>u?l:s,p=f.a,d=f.h,y=f.k,b=u*(o.x-r.x),h=p*Math.pow(b-d,2)+y,m=1-u*(1-(o.width||1)/(r.width||1)),v=1-u*(1-(o.height||1)/(r.height||1));return this.setState({translateX:b,translateY:h,scaleX:m,scaleY:v,animationEnd:a}),requestAnimationFrame(this.update.bind(this)),!1}},{key:"render",value:function(){var e=this.state,t=e.translateX,n=e.translateY,r=e.scaleX,a=e.scaleY,i=this.props,u=i.start,c=i.children;return o.a.createElement("div",{style:{position:"absolute",left:"".concat(u.x,"px"),top:"".concat(u.y,"px"),width:"".concat(u.width,"px"),height:"".concat(u.height,"px"),transform:"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(r,", ").concat(a,")"),transformOrigin:"0 0"}},c)}}]),t}();function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}b(m,"defaultProps",{rate:1,duration:800,top:0,delay:0,children:null,onEnd:h,onBeforeStart:h,onAfterEnd:h}),b(m,"propTypes",{rate:c.a.number,start:c.a.shape({x:c.a.number.isRequired,y:c.a.number.isRequired,width:c.a.number.isRequired,height:c.a.number.isRequired}).isRequired,end:c.a.shape({x:c.a.number.isRequired,y:c.a.number.isRequired,width:c.a.number.isRequired,height:c.a.number.isRequired}).isRequired,duration:c.a.number,top:c.a.number,delay:c.a.number,children:c.a.element,onEnd:c.a.func,onBeforeStart:c.a.func,onAfterEnd:c.a.func});var w=function(){};function g(e){var t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){v(e,t,n[t])})}return e}({},e),n=document.createElement("div");document.body.appendChild(n);var r=t.duration,a=t.rate,u=t.top,c=t.start,l=t.end,s=t.children,f=t.delay,p=t.onAfterEnd,d=void 0===p?w:p,y=t.onBeforeStart,b=void 0===y?w:y;i.a.render(o.a.createElement(m,{duration:r,rate:a,delay:f,top:u,start:c,end:l,onBeforeStart:function(){return b()},onEnd:function(){i.a.unmountComponentAtNode(n)&&n.parentNode&&n.parentNode.removeChild(n)},onAfterEnd:function(){return d()}},s),n)}n(22);function O(e){return(O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function P(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function j(e,t){return!t||"object"!==O(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function S(e){return(S=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function x(e,t){return(x=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var k,_=function(e){function t(e){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(n=j(this,S(t).call(this,e))).state={showPlusOne:!1},n.config={duration:1500,rate:.8,delay:50,top:80,start:null,end:null,children:null},n}var n,a,i;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&x(e,t)}(t,r["Component"]),n=t,(a=[{key:"animate",value:function(e,t){var n=this,r=e.getBoundingClientRect(),a=r.top,i=r.left,u=t.getBoundingClientRect(),c=u.top,l=u.left,s={x:window.scrollX+i+10,y:window.scrollY+a+10,width:30,height:30},f={x:window.scrollX+l+10,y:window.scrollY+c-10,width:15,height:15},p=o.a.createElement("div",{className:"motion-item"},"1s");this.config=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){P(e,t,n[t])})}return e}({},this.config,{start:s,end:f,children:p,onAfterEnd:function(){n.setState({showPlusOne:!0}),setTimeout(function(){n.setState({showPlusOne:!1})},1e3)}}),g(this.config)}},{key:"handleClick",value:function(e){var t=document.getElementById("J-shoppingcart");e&&t&&this.animate(e,t)}},{key:"render",value:function(){var e=this,t=Array(5).fill().map(function(e,t){return t});return o.a.createElement("div",{className:"container"},o.a.createElement("div",{className:"sale-list"},t.map(function(t){return o.a.createElement("div",{key:t,onKeyPress:function(){},role:"button",tabIndex:"0",className:"sale-item",onClick:function(t){return e.handleClick(t.target)}},"1s")})),o.a.createElement("div",{className:"shopping-cart",id:"J-shoppingcart"},o.a.createElement("span",{className:this.state.showPlusOne?"plus-one plus-one_animate":"plus-one",onAnimationStart:function(){return setTimeout(function(){return e.setState({showPlusOne:!1})},500)}},"+1s")))}}])&&E(n.prototype,a),i&&E(n,i),t}(),R=document.createElement("div");R.setAttribute("id","app"),document.body.appendChild(R),k=_,i.a.render(o.a.createElement(k,null),R)}});